Building data-driven web apps with Flask and SQLAlchemy Transcripts
Chapter: Jinja2 templates
Lecture: Adding a simple nav element

Login or purchase this course to watch this video and the rest of the course contents.
0:00 Let's remember what our app looks like.
0:02 Click over here and run it.
0:03 Well, not super interesting.
0:05 It doesn't even have a single hyperlink
0:07 or anything like that.
0:08 So, what we want to do is we want to add a second page
0:12 and use a common layout between these things
0:15 to make it be able to look the same
0:17 across all of our views.
0:19 So, let's real quickly here, come over
0:22 and let's just do an about.
0:25 It'll just say about this thing and so on
0:27 so come down here.
0:30 Just say about here and, obviously
0:33 we're not using any layout yet.
0:34 We're going to get to that in a second.
0:43 Here we go, so, that's not quite enough.
0:46 If he had to show it, we got to go over here
0:49 into this section and add a route.
0:51 So, we'll say /about.
0:53 Now, be careful, we must change that as well
0:56 or we'll get an error. Luckily, it's an error.
0:59 Actually, when we try to run this, you'll see
1:03 there's already a view mapping over
1:04 to something called index
1:06 because in some frameworks, that just silently erases that
1:10 which is even worse.
1:11 So, about, we don't care about this.
1:14 We're just going to render our other template about.
1:21 Now, if we go look at that, that's good.
1:23 If we go to about, looks like that, decent.
1:26 It's completely ugly and has no design yet.
1:29 We're getting there, but it does have at least two pages.
1:34 Let's add just a little bit of navigation here.
1:38 And, in our nav, we're going to go and we'll just have a home.
1:42 And, this can be a hyperlink like that.
1:45 And, we have one for about
1:48 which would be a lowercase about like that.
1:51 And, it's not terrible, honestly.
1:54 We have home, we have about, but, of course
1:55 it's gone over on about. Ah, that's frustrating.
1:59 Let's go ahead and bring in a little bit of design here.
2:03 A little bit, we're not quite there yet.
2:05 But, let's go and put some of our Bootstrap in here.
2:09 So, for the top, we're going to have the Bootstrap stylesheet.
2:14 Maybe I can wrap this a little bit so you can see it.
2:16 The latest Bootstrap, whatever that is.
2:18 And, at the bottom, down here
2:20 we're going to have our JavaScript.
2:22 This is going to be the Bootstrap one as well.
2:27 And, it says, If you're going to use this
2:29 go back to this page
2:30 you also need to use these first.
2:32 Well, let's just hit copy there.
2:35 So, in order for that to work
2:38 we need to make sure we have jQuery
2:40 we have Popper, and we have Bootstrap.
2:43 So, already, that should make
2:44 our index page look a little bit better.
2:46 Let's give it a try.
2:48 Oh, it does look better.
2:49 It looks so much better.
2:51 The padding is a little bit off
2:52 we need to do some CSS stuff, so let's go
2:54 and add a directory here called css.
2:59 And, while we're at it
3:00 let's add a new directory called js
3:02 and a new one called img.
3:06 And then, here, let's add a stylesheet, if I can find it.
3:10 It's called site.
3:12 And, we're just going to do something super simple.
3:14 Let's go over and say that this section here
3:22 that section is going to be a div of main content like so.
3:29 The reason is we want to indent this stuff
3:32 but not our nav and we could also move this style
3:36 finally out of here, now that we're going to have a stylesheet.
3:40 So, I have main content, love the auto-complete.
3:42 Let's say padding is 20px.
3:45 Now, that looks great, except it's not going to work so well
3:48 because it's not included, is it?
3:50 So, let's go over here.
4:02 Okay, now, there we go, there's our padding
4:05 that we were looking for.
4:07 And, we could even set the background color
4:09 of our nav in our CSS file there.
4:13 Say nav, background color is 000
4:20 and let's give it some padding.
4:25 That's maybe a bit much. Let's go with 10.
4:28 Font size can be 20px. How are we looking?
4:33 And, how about color. Let's set that to white.
4:37 Now, that might sound like it's going to work.
4:39 It's not going to work because we actually need
4:41 to do nav a. Color calling white
4:46 'cause this is applying to the hyperlinks.
4:48 There we go and they still kind of do hyperlinky stuff
4:51 but I feel like that's good enough.
4:54 Say margin right is 10px.
4:59 Okay, so not super impressive
5:00 but we have a little bit of design.
5:02 Why did I do this?
5:03 'Cause I want to share this design
5:05 that we've created across the pages.
5:10 So, how do we get it over there?
5:12 Well, we're going to work on that
5:14 by adding a common layout page and then inheriting each
5:18 of our individual pages from that.