1
00:00:00,210 --> 00:00:01,350
In the previous lessons,

2
00:00:01,380 --> 00:00:06,380
we've seen how we can use the Jinja markup in order to insert bits of Python

3
00:00:06,780 --> 00:00:10,860
code into the HTML template. Now,

4
00:00:10,890 --> 00:00:14,670
in this lesson, I want to demystify some of the other markup

5
00:00:15,030 --> 00:00:19,410
like the {% and some of these keywords.

6
00:00:20,160 --> 00:00:20,520
Now,

7
00:00:20,520 --> 00:00:25,170
what we've been able to do with this markup is to specify single line

8
00:00:25,200 --> 00:00:27,240
expressions in Python.

9
00:00:27,780 --> 00:00:32,430
But what if we wanted to create multiline statements like an if statement or a

10
00:00:32,430 --> 00:00:36,780
for loop? Well, we would have to use some slightly different markup.

11
00:00:37,500 --> 00:00:42,090
I'm going to go ahead and create a new HTML file which I'll call blog.

12
00:00:43,050 --> 00:00:46,440
And this will have the title of blog and in the body

13
00:00:46,470 --> 00:00:51,470
what I want to do is to render all the titles of all the blogs I have. Now in

14
00:00:53,370 --> 00:00:56,040
order to get hold of some data for our blogs,

15
00:00:56,340 --> 00:01:00,750
we're going to use a service called endpoint. And this is a really neat service

16
00:01:00,810 --> 00:01:03,600
which just acts as JSON storage bin.

17
00:01:04,110 --> 00:01:08,400
So basically you can create your own API with your own JSON data

18
00:01:08,820 --> 00:01:11,940
and you don't even have to log in. It's as simple as clicking on,

19
00:01:12,180 --> 00:01:16,980
create JSON bin, and then here you can create some, um, keys,

20
00:01:17,040 --> 00:01:19,980
some values or a list of values.

21
00:01:20,490 --> 00:01:22,170
And once you've done that,

22
00:01:22,200 --> 00:01:25,980
you can go ahead and access this bin at this particular API

23
00:01:26,370 --> 00:01:29,070
and you can see it sends you that JSON back.

24
00:01:29,160 --> 00:01:34,160
So you can update anything in here and you can get that data coming back to you

25
00:01:35,610 --> 00:01:37,140
via this API.

26
00:01:37,950 --> 00:01:42,950
That means that I could create some blog posts where each blog post has an ID,

27
00:01:44,400 --> 00:01:46,500
a title, a subtitle and body.

28
00:01:46,920 --> 00:01:50,100
And I've only got three blog posts in my list.

29
00:01:50,460 --> 00:01:55,460
But you can now use this as if it were an API simply by heading to this address,

30
00:01:56,220 --> 00:01:58,890
which you'll find in the course resources. Now,

31
00:01:58,890 --> 00:02:03,510
what we're going to do is we're going to pull down these blog posts as if it was

32
00:02:03,510 --> 00:02:04,343
an API,

33
00:02:04,590 --> 00:02:08,669
and we're going to try and display all of the titles and all of the subtitles.

34
00:02:09,720 --> 00:02:11,490
Inside our server.py,

35
00:02:11,970 --> 00:02:16,200
if we go ahead and set up a new app.route,

36
00:02:16,590 --> 00:02:20,760
and this route is going to be /blog, then here

37
00:02:20,760 --> 00:02:23,460
we're going to create a blog function

38
00:02:23,850 --> 00:02:27,480
which is going to fetch all the blogs from this URL.

39
00:02:27,960 --> 00:02:30,690
So I'm going to copy the URL of my API

40
00:02:30,750 --> 00:02:33,030
and you can do that in the course resources.

41
00:02:33,450 --> 00:02:37,650
And then we're going to put this as the blog URL.

42
00:02:38,310 --> 00:02:40,050
Now I'm going to use requests.

43
00:02:40,050 --> 00:02:43,440
get to get hold of the data at that URL,

44
00:02:44,430 --> 00:02:48,720
and then I can tap into the data by saying response.json

45
00:02:48,810 --> 00:02:51,750
and this will give me all of the blog posts.

46
00:02:52,020 --> 00:02:54,180
So we'll call that all posts.

47
00:02:55,830 --> 00:03:00,490
And now I'm going to render my blog.html

48
00:03:02,860 --> 00:03:07,860
and I'm going to pass in all the posts under a keyword called posts... like this.

49
00:03:10,900 --> 00:03:13,420
So I've fetched all of those posts,

50
00:03:13,600 --> 00:03:17,500
I've passed it into a variable called all_post,

51
00:03:17,770 --> 00:03:22,570
and I'm sending that value over to the blog.html under the name posts.

52
00:03:22,960 --> 00:03:27,850
So now going to my blog.html, I should be able to catch that post.

53
00:03:28,120 --> 00:03:31,030
And if we were just writing Python straightaway,

54
00:03:31,030 --> 00:03:36,030
then we would be able to say something like for blog posts in posts,

55
00:03:37,090 --> 00:03:42,090
let's go ahead and create an h1 where we have the blog post title,

56
00:03:45,100 --> 00:03:50,100
and let's create a h2 where we have the blog post subtitle.

57
00:03:54,010 --> 00:03:58,780
And it would, in an ideal world, loop through all the posts it received and for

58
00:03:58,780 --> 00:04:00,490
each of the blog posts, render

59
00:04:00,490 --> 00:04:05,410
an h1 for the title and h2 for the subtitle. Now, in fact,

60
00:04:05,440 --> 00:04:08,680
using Jinja, we can pretty much do exactly this,

61
00:04:09,010 --> 00:04:11,950
but we have to alter things a little bit. Firstly,

62
00:04:11,950 --> 00:04:14,110
when we have a multiline statement,

63
00:04:14,170 --> 00:04:19,170
we're going to have to add a curly brace and then a percentage sign for each of

64
00:04:19,720 --> 00:04:22,810
the lines. So not just from the beginning to the end,

65
00:04:23,140 --> 00:04:28,090
but for each of the lines that's Python code that spans multi lines

66
00:04:28,150 --> 00:04:31,390
we have to enclose it inside this kind of markup.

67
00:04:31,600 --> 00:04:36,600
So notice the direction of the curly braces and also notice the presence of the

68
00:04:37,240 --> 00:04:40,180
percentage signs. Now inside the part

69
00:04:40,180 --> 00:04:42,610
where we insert it into HTML elements,

70
00:04:42,700 --> 00:04:47,700
we can do just as we did before, pass through the blog post and render it as a

71
00:04:49,060 --> 00:04:51,400
single line expression like this.

72
00:04:51,910 --> 00:04:54,670
But because we're working inside an HTML file,

73
00:04:54,670 --> 00:04:58,490
we also have to specify when our for loop actually ends.

74
00:04:58,930 --> 00:05:03,930
And that very end is also going to be enclosed inside one of these percentage

75
00:05:04,240 --> 00:05:05,073
curly brace.

76
00:05:05,440 --> 00:05:09,550
And there's a special key word that comes from Jinja 

77
00:05:09,580 --> 00:05:14,580
which is called endfor in order to specify at the end of the for loop.

78
00:05:16,120 --> 00:05:19,630
We'll just have to add it in like this. Now,

79
00:05:19,660 --> 00:05:21,310
if we go ahead and hit save,

80
00:05:21,640 --> 00:05:26,500
and now if we run our code and try to bring up our blog website,

81
00:05:27,070 --> 00:05:31,870
you should see that it's pulled in all of the articles in our fake blog,

82
00:05:32,290 --> 00:05:33,520
the life of cactus,

83
00:05:33,670 --> 00:05:37,810
top 15 things to do when you're bored, and introduction to intermittent fasting.

84
00:05:37,840 --> 00:05:41,740
It's a really random blog that we're starting and it's created an h1 for

85
00:05:41,740 --> 00:05:45,340
each of the titles and h2 for each of the subtitles.

86
00:05:46,000 --> 00:05:51,000
And it's done this without us having to pass out each of the title, subtitles.

87
00:05:51,970 --> 00:05:54,400
We've actually been able to do all of that just with a

88
00:05:54,400 --> 00:05:57,190
for loop inside our template.

89
00:05:57,770 --> 00:06:01,040
Now you can do the same thing using an if statement.

90
00:06:01,580 --> 00:06:03,620
All you have to do is to, again,

91
00:06:03,620 --> 00:06:08,360
enclose every line in the statement with {%,

92
00:06:08,750 --> 00:06:12,500
and then at the very end of your block of code, of your statement,

93
00:06:12,800 --> 00:06:16,040
you have to add the endif keyword as well.

94
00:06:17,240 --> 00:06:22,240
See if you can modify this so that we only print out the title for the blog

95
00:06:23,120 --> 00:06:26,030
post which has an ID of 2.

96
00:06:28,960 --> 00:06:30,070
All right, in this case,

97
00:06:30,490 --> 00:06:33,490
all we have to do is add an if statement down here.

98
00:06:34,180 --> 00:06:39,180
We're going to say if the blog post that we're currently looping on has an ID

99
00:06:41,890 --> 00:06:45,820
that's equal to 2, well, in that case,

100
00:06:45,880 --> 00:06:49,630
we actually want to render the title and subtitle,

101
00:06:50,020 --> 00:06:54,370
but otherwise, we're not going to. All we have to do is add in the markup.

102
00:06:54,640 --> 00:06:56,860
So starting at the first if statement,

103
00:06:56,860 --> 00:07:01,390
we add the {% at the beginning and at the end, and at

104
00:07:01,390 --> 00:07:02,830
the very end of the if statement

105
00:07:02,860 --> 00:07:07,420
we add the {% and that keyword endif

106
00:07:07,660 --> 00:07:10,330
to say that this is the end of the if statement.

107
00:07:10,960 --> 00:07:14,530
So now if we hit save and we go back to our blog,

108
00:07:14,860 --> 00:07:18,340
you can see that it's only going to show the second article,

109
00:07:18,640 --> 00:07:20,230
the one with ID of 2.