WEBVTT

0
00:00.450 --> 00:02.070
Now the first thing I want to show you

1
00:02.070 --> 00:05.400
is how to render HTML files.

2
00:05.400 --> 00:07.950
Go ahead and create a new PyCharm project.

3
00:07.950 --> 00:10.500
I've called mine "my-personal-site",

4
00:10.500 --> 00:13.050
but you can call yours anything you like.

5
00:13.050 --> 00:16.830
And, in the project, we're going to create a new file,

6
00:16.830 --> 00:19.470
which is going to be our Python server.

7
00:19.470 --> 00:21.957
So I'll call it "server.py".

8
00:23.040 --> 00:24.870
And then inside our server.py,

9
00:24.870 --> 00:27.060
we're going to go through all the stages

10
00:27.060 --> 00:30.450
of building up a simple Flask server.

11
00:30.450 --> 00:33.000
This might be a good time to revise how to do that.

12
00:33.000 --> 00:35.100
So, go ahead, pause the video

13
00:35.100 --> 00:38.670
and see if you can set up a simple Flask application

14
00:38.670 --> 00:41.823
which just serves up "Hello World" to the homepage.

15
00:44.460 --> 00:46.410
All right, so let's start from the beginning.

16
00:46.410 --> 00:51.216
We'll import the Flask class from the flask application

17
00:51.216 --> 00:52.530
and as usual,

18
00:52.530 --> 00:54.000
I'm going to use my red light bulb

19
00:54.000 --> 00:57.150
to install the Flask package.

20
00:57.150 --> 00:58.290
Now, once I've done that,

21
00:58.290 --> 01:00.540
I'm going to create my Flask application

22
01:00.540 --> 01:03.810
by saying, app = Flask,

23
01:03.810 --> 01:08.730
and then inside the initialization for my Flask application,

24
01:08.730 --> 01:13.356
I'm going to put in the (__name__) of my current directory.

25
01:13.356 --> 01:18.120
Next, we're going to use the route decorator

26
01:18.120 --> 01:20.850
to target the home route.

27
01:20.850 --> 01:23.490
And when the user hits up the home route,

28
01:23.490 --> 01:26.610
we're going to render the home page.

29
01:26.610 --> 01:28.950
So, inside this definition,

30
01:28.950 --> 01:32.700
we're simply just going to return "Hello World".

31
01:32.700 --> 01:36.000
And finally, we're ready to go ahead and check

32
01:36.000 --> 01:40.983
to see if the __name__ is equal to "__main__",

33
01:42.270 --> 01:46.500
then, in that case, we're going to run our app.

34
01:46.500 --> 01:47.333
That's it.

35
01:47.333 --> 01:49.140
That's all there is to it.

36
01:49.140 --> 01:52.320
Let's go ahead and run this application,

37
01:52.320 --> 01:55.140
which is our server.py.

38
01:55.140 --> 01:57.630
And if we head over to this URL,

39
01:57.630 --> 01:58.860
we can see "Hello World"

40
01:58.860 --> 02:01.053
when we go to our homepage.

41
02:02.040 --> 02:04.200
The next step is to figure out

42
02:04.200 --> 02:08.430
how can we render an HTML webpage,

43
02:08.430 --> 02:11.550
which is crafted inside an HTML file,

44
02:11.550 --> 02:14.490
rather than simply just returning strings

45
02:14.490 --> 02:17.790
or small bits of HTML elements?

46
02:17.790 --> 02:19.830
Let's go into our file

47
02:19.830 --> 02:24.150
and go ahead and create a new HTML file.

48
02:24.150 --> 02:26.640
Now, the reason why we're creating it like this

49
02:26.640 --> 02:28.470
is because it's going to add in all

50
02:28.470 --> 02:30.900
of the boilerplate code that is required

51
02:30.900 --> 02:32.910
to an HTML website.

52
02:32.910 --> 02:37.470
So, let's go ahead and call our webpage "index.html".

53
02:37.470 --> 02:39.660
And you can see, as soon as I create it,

54
02:39.660 --> 02:41.070
it's added in the DOCTYPE,

55
02:41.070 --> 02:42.330
it's added in the html,

56
02:42.330 --> 02:43.800
the head, and the body.

57
02:43.800 --> 02:46.170
Now, if this is unfamiliar to you,

58
02:46.170 --> 02:49.560
be sure to check out the lessons where we covered HTML

59
02:49.560 --> 02:51.240
and CSS in detail,

60
02:51.240 --> 02:52.800
but I'm going to assume that all of this

61
02:52.800 --> 02:55.140
is pretty straightforward by now.

62
02:55.140 --> 02:56.940
Now, the first thing we're going to change

63
02:56.940 --> 03:00.210
in our new website is the title.

64
03:00.210 --> 03:03.900
So, I'm going to go ahead and give this a title.

65
03:03.900 --> 03:05.730
You can put anything you want,

66
03:05.730 --> 03:08.550
but I'm just going to put my own name here.

67
03:08.550 --> 03:10.230
Now, inside the body,

68
03:10.230 --> 03:13.170
I'm going to create a h1

69
03:13.170 --> 03:15.450
and you can see that the HTML files

70
03:15.450 --> 03:19.920
on PyCharm has that tag completion that we see here.

71
03:19.920 --> 03:20.880
In my h1,

72
03:20.880 --> 03:24.120
I'm just going to write "I'm Angela" (chuckles).

73
03:24.120 --> 03:25.530
Pretty straightforward.

74
03:25.530 --> 03:29.160
This is a complete HTML file, now.

75
03:29.160 --> 03:31.290
Now, if I want to render this

76
03:31.290 --> 03:33.090
instead of just "Hello World",

77
03:33.090 --> 03:34.233
how would I do that?

78
03:35.070 --> 03:36.810
Well, how do we find out?

79
03:36.810 --> 03:40.590
As always, it's to the documentation.

80
03:40.590 --> 03:43.110
In the documentation of the Quickstart for Flask,

81
03:43.110 --> 03:45.582
there's a section on Rendering Templates

82
03:45.582 --> 03:50.582
and this allows us to render an HTML file as a template.

83
03:51.210 --> 03:52.950
There's a couple of requirements though.

84
03:52.950 --> 03:57.720
The first thing is that remember that Flask is a framework

85
03:57.720 --> 03:59.130
and not a library,

86
03:59.130 --> 04:01.500
so it will put certain restrictions

87
04:01.500 --> 04:05.670
and requirements on your code so that it will actually work.

88
04:05.670 --> 04:08.160
And in this case, our HTML files,

89
04:08.160 --> 04:09.930
which is known as our templates,

90
04:09.930 --> 04:12.960
must be inside a folder called "templates".

91
04:12.960 --> 04:14.670
That's where Flask is going to look

92
04:14.670 --> 04:16.680
for it when we try to render it.

93
04:16.680 --> 04:18.390
So, let's first do that.

94
04:18.390 --> 04:21.300
Let's create a new directory,

95
04:21.300 --> 04:24.630
which we'll call "templates", all lowercase.

96
04:24.630 --> 04:28.623
And let's move our index.html into that new folder.

97
04:29.610 --> 04:30.873
So, there it is.

98
04:31.710 --> 04:33.600
The next thing we have to do is we have

99
04:33.600 --> 04:36.930
to import this method called "render_template"

100
04:36.930 --> 04:38.940
from the Flask module.

101
04:38.940 --> 04:41.250
So, let's go back to our server.py.

102
04:41.250 --> 04:45.330
And in addition to importing the Flask class,

103
04:45.330 --> 04:49.200
let's go ahead and import the render_template method

104
04:49.200 --> 04:50.490
as well.

105
04:50.490 --> 04:52.800
The next thing we have to do is to,

106
04:52.800 --> 04:55.680
instead of returning a string or a string

107
04:55.680 --> 04:57.780
that contains HTML,

108
04:57.780 --> 05:00.757
we have to call this method "render_template"

109
05:00.757 --> 05:04.524
and pass in the file name that we have

110
05:04.524 --> 05:08.924
and then that is going to be rendered into our website.

111
05:08.924 --> 05:10.822
So, let's go ahead and do this.

112
05:10.822 --> 05:12.462
Let's delete that "Hello World"

113
05:12.462 --> 05:15.461
and instead, let's return the output

114
05:15.461 --> 05:17.603
from this render_template method.

115
05:17.603 --> 05:18.436
And inside here,

116
05:18.436 --> 05:21.780
we're going to put the name of our HTML file,

117
05:21.780 --> 05:25.200
which lives inside our templates folder.

118
05:25.200 --> 05:27.720
That's going to be "index.html"

119
05:27.720 --> 05:30.360
because that's what we called it.

120
05:30.360 --> 05:32.820
Now, let's go ahead and run our code.

121
05:32.820 --> 05:36.060
Alternatively, let's switch on the debug mode

122
05:36.060 --> 05:37.680
so that it will refresh

123
05:37.680 --> 05:41.100
and rerun our server every time we make a change.

124
05:41.100 --> 05:45.420
So, let's rerun and now let's go to our website,

125
05:45.420 --> 05:47.490
refresh the main page,

126
05:47.490 --> 05:51.420
and you can see it's now got an h1 in here.

127
05:51.420 --> 05:52.590
And in the head,

128
05:52.590 --> 05:55.200
there is now the title, which is Angela,

129
05:55.200 --> 05:57.273
which is the title of the tab as well.

130
05:58.140 --> 06:01.260
Imagine if you had to type all of this HTML

131
06:01.260 --> 06:04.350
into this return as a string.

132
06:04.350 --> 06:05.760
It's pretty painful.

133
06:05.760 --> 06:07.860
It doesn't have any of the assistance

134
06:07.860 --> 06:09.963
that you get from your editor.

135
06:11.070 --> 06:13.290
Now, here's a challenge for you.

136
06:13.290 --> 06:16.530
Back on the days 41 and 42,

137
06:16.530 --> 06:20.340
we learned about HTML and created some simple websites.

138
06:20.340 --> 06:21.810
Now, what I want you to do

139
06:21.810 --> 06:24.780
is either use one of your own HTML websites

140
06:24.780 --> 06:27.570
or download my very basic CV website

141
06:27.570 --> 06:29.730
from this lessons resources.

142
06:29.730 --> 06:33.330
And then go to the link either on your GitHub page

143
06:33.330 --> 06:36.180
or find the original HTML file

144
06:36.180 --> 06:39.030
and I want you to go ahead and get hold of it.

145
06:39.030 --> 06:40.590
So, if it's on GitHub,

146
06:40.590 --> 06:42.843
then you can go ahead and simply save as

147
06:42.843 --> 06:46.713
and save this webpage into your downloads.

148
06:47.880 --> 06:51.660
Now, if it's saved as an HTML file somewhere on your system,

149
06:51.660 --> 06:52.803
that's also fine.

150
06:53.760 --> 06:54.593
But essentially,

151
06:54.593 --> 06:57.090
what we want to do is we want to take this file,

152
06:57.090 --> 06:58.833
which is an HTML file,

153
07:00.510 --> 07:04.080
and we want to move it into our templates.

154
07:04.080 --> 07:05.850
Now, one of the things that you'll notice

155
07:05.850 --> 07:08.670
is if you downloaded this file off the internet,

156
07:08.670 --> 07:11.340
then you might have to rename it,

157
07:11.340 --> 07:13.410
because firstly, it's really long

158
07:13.410 --> 07:15.930
and we don't want to have to type that into our code.

159
07:15.930 --> 07:18.300
So, I'm going to shorten the name to "Angela".

160
07:18.300 --> 07:19.350
And then, at the very end,

161
07:19.350 --> 07:20.910
you can see the file extension,

162
07:20.910 --> 07:22.650
at least when it comes off GitHub,

163
07:22.650 --> 07:24.180
is dot htm,

164
07:24.180 --> 07:26.530
and the reason for this is because some servers

165
07:27.386 --> 07:29.790
don't accept four-lettered file extensions.

166
07:29.790 --> 07:33.570
But it's exactly the same as .html.

167
07:33.570 --> 07:36.030
So, we're going to change it to .html

168
07:36.030 --> 07:38.790
and then we're going to refactor that.

169
07:38.790 --> 07:41.619
So, now that we've got hold of this HTML page,

170
07:41.619 --> 07:44.100
we're going to try and render it

171
07:44.100 --> 07:46.710
instead of the index.html.

172
07:46.710 --> 07:49.530
Pause the video and see if you can complete this

173
07:49.530 --> 07:50.523
as a challenge.

174
07:53.070 --> 07:55.200
All right, that's pretty simple.

175
07:55.200 --> 07:59.070
All we have to do is just replace the "index.html"

176
07:59.070 --> 08:02.550
to the new file, which is "angela.html",

177
08:02.550 --> 08:05.850
and if that file happened to be inside a folder,

178
08:05.850 --> 08:06.780
for example,

179
08:06.780 --> 08:09.460
if we had a sub folder inside templates,

180
08:09.460 --> 08:11.850
which we called, I don't know, "cv",

181
08:11.850 --> 08:13.837
and we had this inside here,

182
08:13.837 --> 08:17.670
then we would have to specify that in the file path.

183
08:17.670 --> 08:22.050
If we just have it in the top level of our templates folder,

184
08:22.050 --> 08:24.450
then it's as simple as what we did

185
08:24.450 --> 08:26.520
with the "index.html".

186
08:26.520 --> 08:30.150
So now, while our server is running in debug mode,

187
08:30.150 --> 08:33.180
we can go ahead and hit "Save" on this website

188
08:33.180 --> 08:36.390
and it should restart it, our server.

189
08:36.390 --> 08:40.300
And now, if we go back to our main homepage

190
08:41.594 --> 08:42.427
and reload the website,

191
08:42.427 --> 08:47.280
you can see it's now rendering our personal CV site.

192
08:47.280 --> 08:49.560
With only one exception,

193
08:49.560 --> 08:52.470
what has happened to this profile picture?

194
08:52.470 --> 08:54.780
It looks pretty broken.

195
08:54.780 --> 08:57.960
Now, in order to be able to render static images,

196
08:57.960 --> 09:01.080
we're going to have to learn how to render static files,

197
09:01.080 --> 09:03.420
such as images like this.

198
09:03.420 --> 09:05.720
That's what we're going do in the next lesson.