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:21
we're going to have our JavaScript. This is going to be the Bootstrap one as well. And, it says, If you're going to use this go back to this page
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.