WEBVTT

1
00:00:01.001 --> 00:00:02.004
- [Instructor] Creating navigation links

2
00:00:02.004 --> 00:00:04.004
and routing patterns.

3
00:00:04.004 --> 00:00:06.000
In this video, we're going to create

4
00:00:06.000 --> 00:00:08.006
a navigation menus for our application.

5
00:00:08.006 --> 00:00:10.009
And we'll do that by using something called

6
00:00:10.009 --> 00:00:13.007
a URL for function to resolve links.

7
00:00:13.007 --> 00:00:16.002
We'll also be exploring the route decorator

8
00:00:16.002 --> 00:00:18.006
to bind a function to one or more

9
00:00:18.006 --> 00:00:20.002
URL patterns on the website.

10
00:00:20.002 --> 00:00:22.004
So for example, the following three patterns

11
00:00:22.004 --> 00:00:24.002
can be linked to a routed to

12
00:00:24.002 --> 00:00:27.001
a single file, single HTML file.

13
00:00:27.001 --> 00:00:30.004
It will also look at a few of the Jinja delimiters,

14
00:00:30.004 --> 00:00:33.004
the statements, expressions and the comments.

15
00:00:33.004 --> 00:00:35.001
And finally, we'll explore some of

16
00:00:35.001 --> 00:00:37.001
the if statements in Jinja as well.

17
00:00:37.001 --> 00:00:39.007
So let's go and do the code and see how these are done.

18
00:00:39.007 --> 00:00:42.005
Now, before we create our navigation menu,

19
00:00:42.005 --> 00:00:44.009
I'm going to go in the load source file

20
00:00:44.009 --> 00:00:47.001
from the folder in the desktop.

21
00:00:47.001 --> 00:00:48.007
Inside these source files here,

22
00:00:48.007 --> 00:00:52.004
I have a folder includes, have a navigation menu here.

23
00:00:52.004 --> 00:00:54.006
And I'm just going to drop this into the application

24
00:00:54.006 --> 00:00:57.003
so let's go back to the Visual Studio code

25
00:00:57.003 --> 00:00:59.005
and open that folder again.

26
00:00:59.005 --> 00:01:04.002
And we want to drag this into the includes folder here.

27
00:01:04.002 --> 00:01:07.004
So, let's drag it into that includes

28
00:01:07.004 --> 00:01:09.004
to be along with the folder.

29
00:01:09.004 --> 00:01:11.009
And these are the navigation links for this application.

30
00:01:11.009 --> 00:01:13.004
We have four links.

31
00:01:13.004 --> 00:01:16.003
Let me fix this just a little bit here.

32
00:01:16.003 --> 00:01:19.002
So, as you can see, it's a little bit,

33
00:01:19.002 --> 00:01:24.005
how to see if I can, I wanted to wrap this but anyway,

34
00:01:24.005 --> 00:01:27.007
these are the links we'll be fixing to a link to the page.

35
00:01:27.007 --> 00:01:32.004
And now, I'm going to go into the index file in here.

36
00:01:32.004 --> 00:01:36.001
And right in line 15 here, I'm going to go

37
00:01:36.001 --> 00:01:38.001
include that in there as well.

38
00:01:38.001 --> 00:01:39.005
Just like I do with the footer.

39
00:01:39.005 --> 00:01:43.004
I use the include function directive to include

40
00:01:43.004 --> 00:01:49.005
a navigation from the includes folder called nav.html.

41
00:01:49.005 --> 00:01:51.004
And then, that should be in there.

42
00:01:51.004 --> 00:01:53.009
And later on, we'll do a different method to show you

43
00:01:53.009 --> 00:01:58.009
a more efficient method other than include directive here.

44
00:01:58.009 --> 00:02:00.006
Okay, that should be included.

45
00:02:00.006 --> 00:02:04.002
If I say this now, and if I go to the browser,

46
00:02:04.002 --> 00:02:06.005
well actually before I do that, I want to run it first.

47
00:02:06.005 --> 00:02:10.007
So press the control back, tick to activate

48
00:02:10.007 --> 00:02:15.009
our environment first and then now, run it.

49
00:02:15.009 --> 00:02:18.009
Okay, I can now go ahead and then go to our browser

50
00:02:18.009 --> 00:02:20.006
and refresh the page.

51
00:02:20.006 --> 00:02:23.006
And so, you can see that navigation links are here.

52
00:02:23.006 --> 00:02:25.005
They are not functional because I don't have

53
00:02:25.005 --> 00:02:28.001
these templates here, we will create this later eventually.

54
00:02:28.001 --> 00:02:31.001
Okay, so, they are linked to about four others.

55
00:02:31.001 --> 00:02:32.007
This may be changed, I don't like

56
00:02:32.007 --> 00:02:34.008
that source_offerings, and we'll just change

57
00:02:34.008 --> 00:02:36.002
to just courses.

58
00:02:36.002 --> 00:02:38.000
Okay, so let's do` one more thing here.

59
00:02:38.000 --> 00:02:39.008
This template here, let's just say

60
00:02:39.008 --> 00:02:43.001
that assume, that when a user is logged in,

61
00:02:43.001 --> 00:02:46.001
then, we don't want to display this message.

62
00:02:46.001 --> 00:02:47.009
If the producer is logged in,

63
00:02:47.009 --> 00:02:51.004
they will see just this message along with this title here.

64
00:02:51.004 --> 00:02:53.008
If they're not logged in, then they will see

65
00:02:53.008 --> 00:02:57.001
only the message here and not the little one here.

66
00:02:57.001 --> 00:02:59.004
So, let's go into the code and do that.

67
00:02:59.004 --> 00:03:03.001
We can do that way by going into the code here

68
00:03:03.001 --> 00:03:07.003
and the index HTML file, these are the two messages here.

69
00:03:07.003 --> 00:03:09.008
So, we want to show this first message

70
00:03:09.008 --> 00:03:11.000
if the user is logged in.

71
00:03:11.000 --> 00:03:13.000
And we'll use the if statement to do that.

72
00:03:13.000 --> 00:03:15.008
So, the if statement is a call block

73
00:03:15.008 --> 00:03:20.002
inside a pair of operand and the curly brace like that.

74
00:03:20.002 --> 00:03:22.006
As you can see, this is very similar to the footer

75
00:03:22.006 --> 00:03:25.002
and the inclusion in the headers as well.

76
00:03:25.002 --> 00:03:26.007
Navigation.

77
00:03:26.007 --> 00:03:28.006
O I'm going to say if and what would choose

78
00:03:28.006 --> 00:03:31.000
a variable call log in, okay,

79
00:03:31.000 --> 00:03:33.007
we'll if that login is true.

80
00:03:33.007 --> 00:03:36.000
And I will tell you what these logins coming from,

81
00:03:36.000 --> 00:03:38.000
but for now, let's just say if that is true,

82
00:03:38.000 --> 00:03:41.008
then go ahead and show this H3 element, the text here.

83
00:03:41.008 --> 00:03:43.009
Otherwise, else.

84
00:03:43.009 --> 00:03:45.007
If it's not true, if it's false,

85
00:03:45.007 --> 00:03:48.004
then show this second message.

86
00:03:48.004 --> 00:03:49.006
So very simple like that.

87
00:03:49.006 --> 00:03:51.006
Just making a lot of sense, just a regular

88
00:03:51.006 --> 00:03:53.005
if and else block.

89
00:03:53.005 --> 00:03:55.000
Okay, let's save that and let me

90
00:03:55.000 --> 00:03:57.002
just fix some spaces, you can see.

91
00:03:57.002 --> 00:03:58.007
Okay, let's save that.

92
00:03:58.007 --> 00:04:01.001
Now, we need to check this log in.

93
00:04:01.001 --> 00:04:04.000
It's a variable that you pass to the template

94
00:04:04.000 --> 00:04:05.007
from your routing pattern.

95
00:04:05.007 --> 00:04:09.001
So, open the routes.py and right here,

96
00:04:09.001 --> 00:04:12.002
when we render the template, index HTML here.

97
00:04:12.002 --> 00:04:15.005
After that file, we can add more parameters.

98
00:04:15.005 --> 00:04:17.003
You can separate with a comma

99
00:04:17.003 --> 00:04:20.003
and you can pass any props or properties here.

100
00:04:20.003 --> 00:04:23.009
So I'm going to say log in equals true.

101
00:04:23.009 --> 00:04:26.003
And usually, we would check this in the different way

102
00:04:26.003 --> 00:04:28.004
but for now, I'm just going to simulate that,

103
00:04:28.004 --> 00:04:30.004
let's just say the user is logged in.

104
00:04:30.004 --> 00:04:33.004
If that is true, then it should be the one message,

105
00:04:33.004 --> 00:04:35.001
otherwise, show the other message.

106
00:04:35.001 --> 00:04:38.009
Okay, so let's save that and go back to the browser.

107
00:04:38.009 --> 00:04:42.000
So now, if I refresh it, the user is true,

108
00:04:42.000 --> 00:04:44.004
we should not see this line here.

109
00:04:44.004 --> 00:04:45.009
So refresh that.

110
00:04:45.009 --> 00:04:48.001
And I have a message error here.

111
00:04:48.001 --> 00:04:50.000
I forgot to put the andif.

112
00:04:50.000 --> 00:04:52.002
Let's go and fix that first in the code.

113
00:04:52.002 --> 00:04:54.006
Something that you're used to, but you're not so used to.

114
00:04:54.006 --> 00:04:58.000
So andif.

115
00:04:58.000 --> 00:05:00.004
Make sure you have something where it come andif,

116
00:05:00.004 --> 00:05:03.002
and for, and block and so on.

117
00:05:03.002 --> 00:05:05.007
So that again, go back to our browser.

118
00:05:05.007 --> 00:05:07.008
And let's refresh it again.

119
00:05:07.008 --> 00:05:10.003
So, you can see that that message now no longer there.

120
00:05:10.003 --> 00:05:12.006
Refresh it again, okay, it's gone.

121
00:05:12.006 --> 00:05:15.005
If again, if you back to URL here, it's gone.

122
00:05:15.005 --> 00:05:17.006
So now, if I go back to the code

123
00:05:17.006 --> 00:05:23.003
and back to the routing file and change this to false,

124
00:05:23.003 --> 00:05:25.004
so you see that it should come back

125
00:05:25.004 --> 00:05:28.006
and it shows only this smaller text.

126
00:05:28.006 --> 00:05:32.001
Back to the browser, refresh it, then there it is.

127
00:05:32.001 --> 00:05:33.009
That means you are not logged in.

128
00:05:33.009 --> 00:05:36.007
Okay, so that's how the if blocks work.

129
00:05:36.007 --> 00:05:39.006
Now, the next thing is the routing pattern.

130
00:05:39.006 --> 00:05:44.005
Notice that I have the 5000 here with the forward slash.

131
00:05:44.005 --> 00:05:46.004
Okay, it shows that message.

132
00:05:46.004 --> 00:05:48.006
If I go and type in the index,

133
00:05:48.006 --> 00:05:51.008
also shows the document here, no problem.

134
00:05:51.008 --> 00:05:54.002
If I change it to something like home for example,

135
00:05:54.002 --> 00:05:57.000
it fails because the pattern does not match

136
00:05:57.000 --> 00:05:58.006
a certain routing pattern.

137
00:05:58.006 --> 00:06:02.006
So, to do that, let's go back to the code and fix that.

138
00:06:02.006 --> 00:06:05.008
So writing here, notice that I have two patterns here.

139
00:06:05.008 --> 00:06:08.003
These decorators, you can stack this

140
00:06:08.003 --> 00:06:10.002
and top here above this function.

141
00:06:10.002 --> 00:06:12.006
So there must be only one function that needs it,

142
00:06:12.006 --> 00:06:15.004
it can stack as me pattern as one.

143
00:06:15.004 --> 00:06:18.000
I'm stacking one here to say with a forward slash

144
00:06:18.000 --> 00:06:20.003
or with the word index and if you want

145
00:06:20.003 --> 00:06:22.003
to want to have the home, you can copy that

146
00:06:22.003 --> 00:06:23.004
and put it below it.

147
00:06:23.004 --> 00:06:25.006
And also, takes the home as well.

148
00:06:25.006 --> 00:06:28.004
And that should work and all of the combinations

149
00:06:28.004 --> 00:06:30.005
will load these as well.

150
00:06:30.005 --> 00:06:33.004
So, save this for now.

151
00:06:33.004 --> 00:06:35.005
And if you look back at index file,

152
00:06:35.005 --> 00:06:37.009
we include a navigation link here.

153
00:06:37.009 --> 00:06:40.003
And then the navigation has these links.

154
00:06:40.003 --> 00:06:43.003
These are just hard-coded in here.

155
00:06:43.003 --> 00:06:46.008
The actual file name itself, this is our static data file.

156
00:06:46.008 --> 00:06:48.005
Now, this may not be efficient.

157
00:06:48.005 --> 00:06:51.008
Especially if you might change these files

158
00:06:51.008 --> 00:06:53.005
or move them around.

159
00:06:53.005 --> 00:06:54.008
If you do that, you have to come back here

160
00:06:54.008 --> 00:06:57.004
and manually change these to fix them.

161
00:06:57.004 --> 00:06:59.002
And it's never efficient.

162
00:06:59.002 --> 00:07:03.003
What we want to do is we want to call this function

163
00:07:03.003 --> 00:07:05.006
index instead of the index or the home

164
00:07:05.006 --> 00:07:07.006
or the template itself.

165
00:07:07.006 --> 00:07:10.000
So, we want to call this index function

166
00:07:10.000 --> 00:07:11.009
because usually, this won't change.

167
00:07:11.009 --> 00:07:14.000
You can change this and this routing patterns,

168
00:07:14.000 --> 00:07:16.009
but this function will always get the correct template.

169
00:07:16.009 --> 00:07:20.005
So, to do that, we will change this to use

170
00:07:20.005 --> 00:07:23.001
the URL for function.

171
00:07:23.001 --> 00:07:28.008
And we can replace that by using this expression

172
00:07:28.008 --> 00:07:34.006
and you can go here and say, URL_for

173
00:07:34.006 --> 00:07:36.006
and put a parenthesis, a functions.

174
00:07:36.006 --> 00:07:39.005
You're going to pass in here the name of the function,

175
00:07:39.005 --> 00:07:40.009
which is the index function.

176
00:07:40.009 --> 00:07:42.006
Okay, now, the index HTML.

177
00:07:42.006 --> 00:07:44.009
If you do this, it's not going to work.

178
00:07:44.009 --> 00:07:46.001
Has to be the function name.

179
00:07:46.001 --> 00:07:49.004
And so the length will go to that page.

180
00:07:49.004 --> 00:07:51.002
Let me do this where we can see that prepare.

181
00:07:51.002 --> 00:07:53.000
And I'll do the same thing here.

182
00:07:53.000 --> 00:07:54.004
Instead of course, offerings,

183
00:07:54.004 --> 00:07:56.002
I'll just call it courses for now.

184
00:07:56.002 --> 00:08:01.000
So, I'm going to go here again, URL for and courses.

185
00:08:01.000 --> 00:08:03.004
I will create that function in a minute.

186
00:08:03.004 --> 00:08:05.001
And then this will be for register.

187
00:08:05.001 --> 00:08:06.007
Let's see.

188
00:08:06.007 --> 00:08:09.009
For and then register.

189
00:08:09.009 --> 00:08:14.001
And then finally, this will be the log in.

190
00:08:14.001 --> 00:08:18.000
So URL for and then login.

191
00:08:18.000 --> 00:08:20.003
And I think that's it so we can save that.

192
00:08:20.003 --> 00:08:22.001
So now, we have to create the functions

193
00:08:22.001 --> 00:08:24.001
for the courses register and login.

194
00:08:24.001 --> 00:08:25.001
We have index already.

195
00:08:25.001 --> 00:08:28.005
So let's save this, go back to the routes py.

196
00:08:28.005 --> 00:08:32.006
And we're just going to copy line six through line eight.

197
00:08:32.006 --> 00:08:36.005
And I will paste it right down here three times

198
00:08:36.005 --> 00:08:40.000
to create those three routes.

199
00:08:40.000 --> 00:08:42.009
This one is going to be the login,

200
00:08:42.009 --> 00:08:47.006
this is the courses, and this is the register.

201
00:08:47.006 --> 00:08:49.006
(mumbles) important.

202
00:08:49.006 --> 00:08:51.006
Then, the function here, it needs to be unique,

203
00:08:51.006 --> 00:08:53.008
so we have to say login function.

204
00:08:53.008 --> 00:08:57.004
And then I want to go to the login HTML,

205
00:08:57.004 --> 00:08:59.005
we'll get that in there later.

206
00:08:59.005 --> 00:09:02.003
And we can leave that as is or move that,

207
00:09:02.003 --> 00:09:03.005
it doesn't matter for now.

208
00:09:03.005 --> 00:09:09.006
This will be the courses function and a courses HTML.

209
00:09:09.006 --> 00:09:12.000
And then here will be the register.

210
00:09:12.000 --> 00:09:15.006
And then the register HTML.

211
00:09:15.006 --> 00:09:20.006
Okay, so, if I say this and go back to the browser

212
00:09:20.006 --> 00:09:23.008
and refresh this, it has some error here,

213
00:09:23.008 --> 00:09:26.007
probably has a typo.

214
00:09:26.007 --> 00:09:28.005
And let's go back to the code.

215
00:09:28.005 --> 00:09:29.007
I expect it.

216
00:09:29.007 --> 00:09:31.007
All right, probably back in the navigation,

217
00:09:31.007 --> 00:09:33.004
I'm sure I have error somewhere here.

218
00:09:33.004 --> 00:09:38.002
URL for login, register, that looks fine to me.

219
00:09:38.002 --> 00:09:40.003
Okay, nothing there.

220
00:09:40.003 --> 00:09:42.006
Let's check the index.

221
00:09:42.006 --> 00:09:44.002
That was fine.

222
00:09:44.002 --> 00:09:45.003
Maybe it's here again.

223
00:09:45.003 --> 00:09:49.002
Okay, so let's see here.

224
00:09:49.002 --> 00:09:51.009
Login courses, courses, render template courses,

225
00:09:51.009 --> 00:09:56.000
can't be here, it's got to be the navigation.

226
00:09:56.000 --> 00:09:56.008
Oh right here.

227
00:09:56.008 --> 00:09:58.005
On the register, I did not close that.

228
00:09:58.005 --> 00:10:01.005
So, they're hard to see especially all these

229
00:10:01.005 --> 00:10:02.007
many code in braces.

230
00:10:02.007 --> 00:10:06.003
So let's save that, back to the browser, refresh it.

231
00:10:06.003 --> 00:10:07.007
Okay, so here we go.

232
00:10:07.007 --> 00:10:10.008
So now, they are working as expect.

233
00:10:10.008 --> 00:10:12.001
Again, we don't have the templates yet.

234
00:10:12.001 --> 00:10:14.009
But, now the links have been changed,

235
00:10:14.009 --> 00:10:16.005
didn't change but we change the code.

236
00:10:16.005 --> 00:10:18.009
It will just work just like before.

237
00:10:18.009 --> 00:10:20.009
So this one also needs to be fixed as well.

238
00:10:20.009 --> 00:10:23.007
Let's do that and we're done with this video.

239
00:10:23.007 --> 00:10:26.000
So back in the index page, right down here.

240
00:10:26.000 --> 00:10:30.009
Again, we want to get used to URL for.

241
00:10:30.009 --> 00:10:35.009
And for the long, the function.

242
00:10:35.009 --> 00:10:39.001
And that should do ti.

243
00:10:39.001 --> 00:10:41.001
I'm using a single quote, so I want to be sure

244
00:10:41.001 --> 00:10:43.003
I use it double quote here and double quote here,

245
00:10:43.003 --> 00:10:45.006
otherwise, you have a problem.

246
00:10:45.006 --> 00:10:49.000
All right, and that is it for this part.

247
00:10:49.000 --> 00:10:51.004
And so we learned about if statements here.

248
00:10:51.004 --> 00:10:53.006
Later on, we'll learn the different way

249
00:10:53.006 --> 00:10:55.005
to inherit templates as well.

250
00:10:55.005 --> 00:10:57.009
And we move this, include here to make it more efficient

251
00:10:57.009 --> 00:11:01.009
by using the inheritance pattern in Jinja template.

252
00:11:01.009 --> 00:11:03.005
This is the end of this section.

253
00:11:03.005 --> 00:11:06.001
In the next section, we'll take a deeper dive

254
00:11:06.001 --> 00:11:07.007
into the template system a

255
00:11:07.007 --> 00:11:11.001
and set up our application to work with a template system.