1
00:00:00,450 --> 00:00:02,070
Angela Yu: Now the first thing I want to show you

2
00:00:02,070 --> 00:00:05,400
is how to render HTML files.

3
00:00:05,400 --> 00:00:07,950
Go ahead and create a new Python project.

4
00:00:07,950 --> 00:00:10,500
I've called mine "my-personal-site",

5
00:00:10,500 --> 00:00:13,050
but you can call yours anything you like.

6
00:00:13,050 --> 00:00:16,830
And, in the project, we're going to create a new file,

7
00:00:16,830 --> 00:00:19,470
which is going to be our Python server.

8
00:00:19,470 --> 00:00:21,957
So I'll call it "server dot py".

9
00:00:23,040 --> 00:00:24,870
And then inside our server dot py,

10
00:00:24,870 --> 00:00:27,060
we're going to go through all the stages

11
00:00:27,060 --> 00:00:30,450
of building up a simple Flask server.

12
00:00:30,450 --> 00:00:33,000
This might be a good time to revise how to do that.

13
00:00:33,000 --> 00:00:35,100
So, go ahead, pause the video

14
00:00:35,100 --> 00:00:38,670
and see if you can set up a simple Flask application

15
00:00:38,670 --> 00:00:41,823
which just serves up "Hello World" to the homepage.

16
00:00:44,460 --> 00:00:46,410
All right, so let's start from the beginning.

17
00:00:46,410 --> 00:00:51,216
We'll import the Flask class from the Flask application

18
00:00:51,216 --> 00:00:52,530
and as usual,

19
00:00:52,530 --> 00:00:54,000
I'm gonna use my red light bulb

20
00:00:54,000 --> 00:00:57,150
to install the Flask package.

21
00:00:57,150 --> 00:00:58,290
Now, once I've done that,

22
00:00:58,290 --> 00:01:00,540
I'm gonna create my Flask application

23
00:01:00,540 --> 00:01:03,810
by saying "app equals Flask".

24
00:01:03,810 --> 00:01:08,730
And then inside the initialization for my Flask application,

25
00:01:08,730 --> 00:01:13,356
I'm going to put in the name of my current directory.

26
00:01:13,356 --> 00:01:18,120
Next, we're going to use the route decorator

27
00:01:18,120 --> 00:01:20,850
to target the home route.

28
00:01:20,850 --> 00:01:23,490
And when the user hits up the home route,

29
00:01:23,490 --> 00:01:26,610
we're going to render the home page.

30
00:01:26,610 --> 00:01:28,950
So, inside this definition,

31
00:01:28,950 --> 00:01:32,700
we're simply just going to return "Hello World".

32
00:01:32,700 --> 00:01:36,000
And finally, we're ready to go ahead and check

33
00:01:36,000 --> 00:01:40,983
to see if the name is equal to main.

34
00:01:42,270 --> 00:01:46,500
Then, in that case, we're going to run our app.

35
00:01:46,500 --> 00:01:47,333
That's it.

36
00:01:47,333 --> 00:01:49,140
That's all there is to it.

37
00:01:49,140 --> 00:01:52,320
Let's go ahead and run this application,

38
00:01:52,320 --> 00:01:55,140
which is our server dot py.

39
00:01:55,140 --> 00:01:57,630
And if we head over to this URL,

40
00:01:57,630 --> 00:01:58,860
we can see "Hello World"

41
00:01:58,860 --> 00:02:01,053
when we go to our homepage.

42
00:02:02,040 --> 00:02:04,200
The next step is to figure out

43
00:02:04,200 --> 00:02:08,430
how can we render an HTML webpage,

44
00:02:08,430 --> 00:02:11,550
which is crafted inside an HTML file,

45
00:02:11,550 --> 00:02:14,490
rather than simply just returning strings

46
00:02:14,490 --> 00:02:17,790
or small bits of HTML elements?

47
00:02:17,790 --> 00:02:19,830
Let's go into our file

48
00:02:19,830 --> 00:02:24,150
and go ahead and create a new HTML file.

49
00:02:24,150 --> 00:02:26,640
Now, the reason why we're creating it like this

50
00:02:26,640 --> 00:02:28,470
is because it's going to add in all

51
00:02:28,470 --> 00:02:30,900
of the boilerplate code that is required

52
00:02:30,900 --> 00:02:32,910
to an HTML website.

53
00:02:32,910 --> 00:02:37,470
So, let's go ahead and call our webpage "index dot html".

54
00:02:37,470 --> 00:02:39,660
And you can see, as soon as I create it,

55
00:02:39,660 --> 00:02:41,070
it's added in the doc type,

56
00:02:41,070 --> 00:02:42,330
it's added in the HTML,

57
00:02:42,330 --> 00:02:43,800
the head, and the body.

58
00:02:43,800 --> 00:02:46,170
Now, if this is unfamiliar to you,

59
00:02:46,170 --> 00:02:49,560
be sure to check out the lessons where we covered HTML

60
00:02:49,560 --> 00:02:51,240
and CSS in detail,

61
00:02:51,240 --> 00:02:52,800
but I'm gonna assume that all of this

62
00:02:52,800 --> 00:02:55,140
is pretty straightforward by now.

63
00:02:55,140 --> 00:02:56,940
Now, the first thing we're going to change

64
00:02:56,940 --> 00:03:00,210
in our new website is the title.

65
00:03:00,210 --> 00:03:03,900
So, I'm gonna go ahead and give this a title.

66
00:03:03,900 --> 00:03:05,730
You can put anything you want,

67
00:03:05,730 --> 00:03:08,550
but I'm just gonna put my own name here.

68
00:03:08,550 --> 00:03:10,230
Now, inside the body,

69
00:03:10,230 --> 00:03:13,170
I'm going to create a h1

70
00:03:13,170 --> 00:03:15,450
and you can see that the HTML files

71
00:03:15,450 --> 00:03:19,920
on PyCharm has that tag completion that we see here.

72
00:03:19,920 --> 00:03:20,880
In my h1,

73
00:03:20,880 --> 00:03:24,120
I'm just going to write "I'm Angela" (chuckles).

74
00:03:24,120 --> 00:03:25,530
Pretty straightforward.

75
00:03:25,530 --> 00:03:29,160
This is a complete HTML file, now.

76
00:03:29,160 --> 00:03:31,290
Now, if I want to render this

77
00:03:31,290 --> 00:03:33,090
instead of just "Hello World",

78
00:03:33,090 --> 00:03:34,233
how would I do that?

79
00:03:35,070 --> 00:03:36,810
Well, how do we find out?

80
00:03:36,810 --> 00:03:40,590
As always, it's to the documentation.

81
00:03:40,590 --> 00:03:43,110
In the documentation of the Quick Start for Flask,

82
00:03:43,110 --> 00:03:45,582
there's a section on rendering templates

83
00:03:45,582 --> 00:03:50,582
and this allows us to render an HTML file as a template.

84
00:03:51,210 --> 00:03:52,950
There's a couple of requirements though.

85
00:03:52,950 --> 00:03:57,720
The first thing is that remember that Flask is a framework

86
00:03:57,720 --> 00:03:59,130
and not a library,

87
00:03:59,130 --> 00:04:01,500
so it will put certain restrictions

88
00:04:01,500 --> 00:04:05,670
and requirements on your code so that it will actually work.

89
00:04:05,670 --> 00:04:08,160
And in this case, our HTML files,

90
00:04:08,160 --> 00:04:09,930
which is known as our templates,

91
00:04:09,930 --> 00:04:12,960
must be inside a folder called "templates".

92
00:04:12,960 --> 00:04:14,670
That's where Flask is gonna look

93
00:04:14,670 --> 00:04:16,680
for it when we try to render it.

94
00:04:16,680 --> 00:04:18,390
So, let's first do that.

95
00:04:18,390 --> 00:04:21,300
Let's create a new directory,

96
00:04:21,300 --> 00:04:24,630
which we'll call "templates", all lowercase.

97
00:04:24,630 --> 00:04:28,623
And let's move our index dot HTML into that new folder.

98
00:04:29,610 --> 00:04:30,873
So, there it is.

99
00:04:31,710 --> 00:04:33,600
The next thing we have to do is we have

100
00:04:33,600 --> 00:04:36,930
to import this method called "render_template"

101
00:04:36,930 --> 00:04:38,940
from the Flask module.

102
00:04:38,940 --> 00:04:41,250
So, let's go back to our server dot py.

103
00:04:41,250 --> 00:04:45,330
And in addition to importing the Flask class,

104
00:04:45,330 --> 00:04:49,200
let's go ahead and import the render template method

105
00:04:49,200 --> 00:04:50,490
as well.

106
00:04:50,490 --> 00:04:52,800
The next thing we have to do is to,

107
00:04:52,800 --> 00:04:55,680
instead of returning a string or a string

108
00:04:55,680 --> 00:04:57,780
that contains HTML,

109
00:04:57,780 --> 00:05:00,757
we have to call this method "render_template"

110
00:05:00,757 --> 00:05:04,524
and pass in the file name that we have

111
00:05:04,524 --> 00:05:08,924
and then that is gonna be rendered into our website.

112
00:05:08,924 --> 00:05:10,822
So, let's go ahead and do this.

113
00:05:10,822 --> 00:05:12,462
Let's delete that "Hello World"

114
00:05:12,462 --> 00:05:15,461
and instead, let's return the output

115
00:05:15,461 --> 00:05:17,603
from this render template method.

116
00:05:17,603 --> 00:05:18,436
And inside here,

117
00:05:18,436 --> 00:05:21,780
we're going to put the name of our HTML file,

118
00:05:21,780 --> 00:05:25,200
which lives inside our templates folder.

119
00:05:25,200 --> 00:05:27,720
That's going to be "index dot html"

120
00:05:27,720 --> 00:05:30,360
because that's what we called it.

121
00:05:30,360 --> 00:05:32,820
Now, let's go ahead and run our code.

122
00:05:32,820 --> 00:05:36,060
Alternatively, let's switch on the debug mode

123
00:05:36,060 --> 00:05:37,680
so that it will refresh

124
00:05:37,680 --> 00:05:41,100
and rerun our server every time we make a change.

125
00:05:41,100 --> 00:05:45,420
So, let's rerun and now let's go to our website,

126
00:05:45,420 --> 00:05:47,490
refresh the main page,

127
00:05:47,490 --> 00:05:51,420
and you can see it's now got an h1 in here.

128
00:05:51,420 --> 00:05:52,590
And in the head,

129
00:05:52,590 --> 00:05:55,200
there is now the title, which is Angela,

130
00:05:55,200 --> 00:05:57,273
which is the title of the tab as well.

131
00:05:58,140 --> 00:06:01,260
Imagine if you had to type all of this HTML

132
00:06:01,260 --> 00:06:04,350
into this return as a string.

133
00:06:04,350 --> 00:06:05,760
It's pretty painful.

134
00:06:05,760 --> 00:06:07,860
It doesn't have any of the assistance

135
00:06:07,860 --> 00:06:09,963
that you get from your editor.

136
00:06:11,070 --> 00:06:13,290
Now, here's a challenge for you.

137
00:06:13,290 --> 00:06:16,530
Back on the days 41 and 42,

138
00:06:16,530 --> 00:06:20,340
we learned about HTML and created some simple websites.

139
00:06:20,340 --> 00:06:21,810
Now, what I want you to do

140
00:06:21,810 --> 00:06:24,780
is either use one of your own HTML websites

141
00:06:24,780 --> 00:06:27,570
or download my very basic CV website

142
00:06:27,570 --> 00:06:29,730
from this lessons resources.

143
00:06:29,730 --> 00:06:33,330
And then go to the link either on your GitHub page

144
00:06:33,330 --> 00:06:36,180
or find the original HTML file

145
00:06:36,180 --> 00:06:39,030
and I want you to go ahead and get hold of it.

146
00:06:39,030 --> 00:06:40,590
So, if it's on GitHub,

147
00:06:40,590 --> 00:06:42,843
then you can go ahead and simply save as

148
00:06:42,843 --> 00:06:46,713
and save this webpage into your downloads.

149
00:06:47,880 --> 00:06:51,660
Now, if it's saved as a HTML file somewhere on your system,

150
00:06:51,660 --> 00:06:52,803
that's also fine.

151
00:06:53,760 --> 00:06:54,593
But essentially,

152
00:06:54,593 --> 00:06:57,090
what we want to do is we want to take this file,

153
00:06:57,090 --> 00:06:58,833
which is an HTML file,

154
00:07:00,510 --> 00:07:04,080
and we want to move it into our templates.

155
00:07:04,080 --> 00:07:05,850
Now, one of the things that you'll notice

156
00:07:05,850 --> 00:07:08,670
is if you downloaded this file off the internet,

157
00:07:08,670 --> 00:07:11,340
then you might have to rename it.

158
00:07:11,340 --> 00:07:13,410
because firstly, it's really long

159
00:07:13,410 --> 00:07:15,930
and we don't want to have to type that into our code.

160
00:07:15,930 --> 00:07:18,300
So, I'm gonna shorten the name to "Angela".

161
00:07:18,300 --> 00:07:19,350
And then, at the very end,

162
00:07:19,350 --> 00:07:20,910
you can see the file extension,

163
00:07:20,910 --> 00:07:22,650
at least when it comes off GitHub,

164
00:07:22,650 --> 00:07:24,180
is dot htm,

165
00:07:24,180 --> 00:07:26,530
and the reason for this is because some servers

166
00:07:27,386 --> 00:07:29,790
don't accept four-lettered file extensions.

167
00:07:29,790 --> 00:07:33,570
But it's exactly the same as dot html.

168
00:07:33,570 --> 00:07:36,030
So, we're gonna change it to dot HTML

169
00:07:36,030 --> 00:07:38,790
and then we're going to refactor that.

170
00:07:38,790 --> 00:07:41,619
So, now that we've got hold of this HTML page,

171
00:07:41,619 --> 00:07:44,100
we're going to try and render it

172
00:07:44,100 --> 00:07:46,710
instead of the index dot html.

173
00:07:46,710 --> 00:07:49,530
Pause the video and see if you can complete this

174
00:07:49,530 --> 00:07:50,523
as a challenge.

175
00:07:53,070 --> 00:07:55,200
All right, that's pretty simple.

176
00:07:55,200 --> 00:07:59,070
All we have to do is just replace the "index dot html"

177
00:07:59,070 --> 00:08:02,550
to the new file, which is "Angela dot html".

178
00:08:02,550 --> 00:08:05,850
And if that file happened to be inside a folder,

179
00:08:05,850 --> 00:08:06,780
for example,

180
00:08:06,780 --> 00:08:09,460
if we had a sub folder inside templates,

181
00:08:09,460 --> 00:08:11,850
which we called, I dunno, "cv",

182
00:08:11,850 --> 00:08:13,837
and we had this inside here,

183
00:08:13,837 --> 00:08:17,670
then we would have to specify that in the file path.

184
00:08:17,670 --> 00:08:22,050
If we just have it in the top level of our templates folder,

185
00:08:22,050 --> 00:08:24,450
then it's as simple as what we did

186
00:08:24,450 --> 00:08:26,520
with the "index dot html".

187
00:08:26,520 --> 00:08:30,150
So, now, while our server is running in debug mode,

188
00:08:30,150 --> 00:08:33,179
we can go ahead and hit "save" on this website

189
00:08:33,179 --> 00:08:36,390
and it should restart it, our server.

190
00:08:36,390 --> 00:08:40,299
And now, if we go back to our main homepage

191
00:08:41,594 --> 00:08:42,427
and reload the website,

192
00:08:42,427 --> 00:08:47,280
you can see it's now rendering our personal CV site.

193
00:08:47,280 --> 00:08:49,560
With only one exception.

194
00:08:49,560 --> 00:08:52,470
What has happened to this profile picture?

195
00:08:52,470 --> 00:08:54,780
It looks pretty broken.

196
00:08:54,780 --> 00:08:57,960
Now, in order to be able to render static images,

197
00:08:57,960 --> 00:09:01,080
we're going to have to learn how to render static files,

198
00:09:01,080 --> 00:09:03,420
such as images like this.

199
00:09:03,420 --> 00:09:05,720
That's what we're gonna do in the next lesson.