WEBVTT

0
00:00.210 --> 00:01.350
In the previous lessons,

1
00:01.380 --> 00:06.380
we've seen how we can use the Jinja markup in order to insert bits of Python

2
00:06.780 --> 00:10.860
code into the HTML template. Now,

3
00:10.890 --> 00:14.670
in this lesson, I want to demystify some of the other markup

4
00:15.030 --> 00:19.410
like the {% and some of these keywords.

5
00:20.160 --> 00:20.520
Now,

6
00:20.520 --> 00:25.170
what we've been able to do with this markup is to specify single line

7
00:25.200 --> 00:27.240
expressions in Python.

8
00:27.780 --> 00:32.430
But what if we wanted to create multiline statements like an if statement or a

9
00:32.430 --> 00:36.780
for loop? Well, we would have to use some slightly different markup.

10
00:37.500 --> 00:42.090
I'm going to go ahead and create a new HTML file which I'll call blog.

11
00:43.050 --> 00:46.440
And this will have the title of blog and in the body

12
00:46.470 --> 00:51.470
what I want to do is to render all the titles of all the blogs I have. Now in

13
00:53.370 --> 00:56.040
order to get hold of some data for our blogs,

14
00:56.340 --> 01:00.750
we're going to use a service called endpoint. And this is a really neat service

15
01:00.810 --> 01:03.600
which just acts as JSON storage bin.

16
01:04.110 --> 01:08.400
So basically you can create your own API with your own JSON data

17
01:08.820 --> 01:11.940
and you don't even have to log in. It's as simple as clicking on,

18
01:12.180 --> 01:16.980
create JSON bin, and then here you can create some, um, keys,

19
01:17.040 --> 01:19.980
some values or a list of values.

20
01:20.490 --> 01:22.170
And once you've done that,

21
01:22.200 --> 01:25.980
you can go ahead and access this bin at this particular API

22
01:26.370 --> 01:29.070
and you can see it sends you that JSON back.

23
01:29.160 --> 01:34.160
So you can update anything in here and you can get that data coming back to you

24
01:35.610 --> 01:37.140
via this API.

25
01:37.950 --> 01:42.950
That means that I could create some blog posts where each blog post has an ID,

26
01:44.400 --> 01:46.500
a title, a subtitle and body.

27
01:46.920 --> 01:50.100
And I've only got three blog posts in my list.

28
01:50.460 --> 01:55.460
But you can now use this as if it were an API simply by heading to this address,

29
01:56.220 --> 01:58.890
which you'll find in the course resources. Now,

30
01:58.890 --> 02:03.510
what we're going to do is we're going to pull down these blog posts as if it was

31
02:03.510 --> 02:04.343
an API,

32
02:04.590 --> 02:08.670
and we're going to try and display all of the titles and all of the subtitles.

33
02:09.720 --> 02:11.490
Inside our server.py,

34
02:11.970 --> 02:16.200
if we go ahead and set up a new app.route,

35
02:16.590 --> 02:20.760
and this route is going to be /blog, then here

36
02:20.760 --> 02:23.460
we're going to create a blog function

37
02:23.850 --> 02:27.480
which is going to fetch all the blogs from this URL.

38
02:27.960 --> 02:30.690
So I'm going to copy the URL of my API

39
02:30.750 --> 02:33.030
and you can do that in the course resources.

40
02:33.450 --> 02:37.650
And then we're going to put this as the blog URL.

41
02:38.310 --> 02:40.050
Now I'm going to use requests.

42
02:40.050 --> 02:43.440
get to get hold of the data at that URL,

43
02:44.430 --> 02:48.720
and then I can tap into the data by saying response.json

44
02:48.810 --> 02:51.750
and this will give me all of the blog posts.

45
02:52.020 --> 02:54.180
So we'll call that all posts.

46
02:55.830 --> 03:00.490
And now I'm going to render my blog.html

47
03:02.860 --> 03:07.860
and I'm going to pass in all the posts under a keyword called posts... like this.

48
03:10.900 --> 03:13.420
So I've fetched all of those posts,

49
03:13.600 --> 03:17.500
I've passed it into a variable called all_post,

50
03:17.770 --> 03:22.570
and I'm sending that value over to the blog.html under the name posts.

51
03:22.960 --> 03:27.850
So now going to my blog.html, I should be able to catch that post.

52
03:28.120 --> 03:31.030
And if we were just writing Python straightaway,

53
03:31.030 --> 03:36.030
then we would be able to say something like for blog posts in posts,

54
03:37.090 --> 03:42.090
let's go ahead and create an h1 where we have the blog post title,

55
03:45.100 --> 03:50.100
and let's create a h2 where we have the blog post subtitle.

56
03:54.010 --> 03:58.780
And it would, in an ideal world, loop through all the posts it received and for

57
03:58.780 --> 04:00.490
each of the blog posts, render

58
04:00.490 --> 04:05.410
an h1 for the title and h2 for the subtitle. Now, in fact,

59
04:05.440 --> 04:08.680
using Jinja, we can pretty much do exactly this,

60
04:09.010 --> 04:11.950
but we have to alter things a little bit. Firstly,

61
04:11.950 --> 04:14.110
when we have a multiline statement,

62
04:14.170 --> 04:19.170
we're going to have to add a curly brace and then a percentage sign for each of

63
04:19.720 --> 04:22.810
the lines. So not just from the beginning to the end,

64
04:23.140 --> 04:28.090
but for each of the lines that's Python code that spans multi lines

65
04:28.150 --> 04:31.390
we have to enclose it inside this kind of markup.

66
04:31.600 --> 04:36.600
So notice the direction of the curly braces and also notice the presence of the

67
04:37.240 --> 04:40.180
percentage signs. Now inside the part

68
04:40.180 --> 04:42.610
where we insert it into HTML elements,

69
04:42.700 --> 04:47.700
we can do just as we did before, pass through the blog post and render it as a

70
04:49.060 --> 04:51.400
single line expression like this.

71
04:51.910 --> 04:54.670
But because we're working inside an HTML file,

72
04:54.670 --> 04:58.490
we also have to specify when our for loop actually ends.

73
04:58.930 --> 05:03.930
And that very end is also going to be enclosed inside one of these percentage

74
05:04.240 --> 05:05.073
curly brace.

75
05:05.440 --> 05:09.550
And there's a special key word that comes from Jinja 

76
05:09.580 --> 05:14.580
which is called endfor in order to specify at the end of the for loop.

77
05:16.120 --> 05:19.630
We'll just have to add it in like this. Now,

78
05:19.660 --> 05:21.310
if we go ahead and hit save,

79
05:21.640 --> 05:26.500
and now if we run our code and try to bring up our blog website,

80
05:27.070 --> 05:31.870
you should see that it's pulled in all of the articles in our fake blog,

81
05:32.290 --> 05:33.520
the life of cactus,

82
05:33.670 --> 05:37.810
top 15 things to do when you're bored, and introduction to intermittent fasting.

83
05:37.840 --> 05:41.740
It's a really random blog that we're starting and it's created an h1 for

84
05:41.740 --> 05:45.340
each of the titles and h2 for each of the subtitles.

85
05:46.000 --> 05:51.000
And it's done this without us having to pass out each of the title, subtitles.

86
05:51.970 --> 05:54.400
We've actually been able to do all of that just with a

87
05:54.400 --> 05:57.190
for loop inside our template.

88
05:57.770 --> 06:01.040
Now you can do the same thing using an if statement.

89
06:01.580 --> 06:03.620
All you have to do is to, again,

90
06:03.620 --> 06:08.360
enclose every line in the statement with {%,

91
06:08.750 --> 06:12.500
and then at the very end of your block of code, of your statement,

92
06:12.800 --> 06:16.040
you have to add the endif keyword as well.

93
06:17.240 --> 06:22.240
See if you can modify this so that we only print out the title for the blog

94
06:23.120 --> 06:26.030
post which has an ID of 2.

95
06:28.960 --> 06:30.070
<v 1>All right, in this case,</v>

96
06:30.490 --> 06:33.490
<v 0>all we have to do is add an if statement down here.</v>

97
06:34.180 --> 06:39.180
We're going to say if the blog post that we're currently looping on has an ID

98
06:41.890 --> 06:45.820
that's equal to 2, well, in that case,

99
06:45.880 --> 06:49.630
we actually want to render the title and subtitle,

100
06:50.020 --> 06:54.370
but otherwise, we're not going to. All we have to do is add in the markup.

101
06:54.640 --> 06:56.860
So starting at the first if statement,

102
06:56.860 --> 07:01.390
we add the {% at the beginning and at the end, and at

103
07:01.390 --> 07:02.830
the very end of the if statement

104
07:02.860 --> 07:07.420
we add the {% and that keyword endif

105
07:07.660 --> 07:10.330
to say that this is the end of the if statement.

106
07:10.960 --> 07:14.530
So now if we hit save and we go back to our blog,

107
07:14.860 --> 07:18.340
you can see that it's only going to show the second article,

108
07:18.640 --> 07:20.230
the one with ID of 2.