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