Python for the .NET developer Transcripts
Chapter: Web frameworks
Lecture: Bring in the design
0:00 Time to bring in our web design
0:02 and to add another template and view method
0:04 to get things to look a little bit nicer.
0:06 Now, this is not a web design course
0:08 so I'm just going to grab our CSS, our images
0:11 and this vendor is the snapshot in time
0:15 of a couple of things like Bootstrap.
0:16 I'm going to drop that over into our static
0:19 and just copy and paste
0:21 and it'll do all the right things to put them there, right
0:24 adds them TicketHub and so on.
0:25 And here's our guitars that we saw in the beginning.
0:28 But there's our static stuff.
0:29 And I want to also copy over couple of templates here
0:32 going to recreate the guitar one.
0:34 But let's copy these two.
0:40 Now, notice we have an _layout.
0:43 This might look familiar to you as well
0:45 and then we have the index.
0:46 I saved the one we created under old just so you have it
0:49 but now, we have a new one
0:51 and it really has no dynamic data in it whatsoever.
0:54 It just has some styles, right?
0:56 Like, here's that big, colorful section at the top.
1:00 It's going to have some navigation.
1:02 The navigation comes from over here.
1:04 And the way that you create these outer shell
1:06 and then embedded, little pieces is
1:09 We just have standard HTML.
1:10 This is the wrapper common look and feel.
1:12 Here's our navigation.
1:14 PyCharm thinks things are misspelled
1:16 and, yet, they're not.
1:17 Then you just come down here
1:18 and you say, we're going to have
1:19 a block called main_content.
1:22 So this line right here is going to inject
1:24 whatever is in these other template files into that segment
1:28 assuming that we go up here and we say this template
1:32 this one, this one extends _layout
1:35 and then here's a title section
1:37 and here's the main bits, right?
1:39 So this is how we break this up into a common look and feel
1:43 and then the things that's special per page.
1:45 Let's run this again. Hit that. And look at this.
1:50 Pretty amazing, isn't it? I'll zoom it back a little bit so it fits on this screen.
1:53 But there we have our cool web design for our project.
1:58 We've got our navigation and so on.
1:59 Now, of course, if we click on Guitars
2:01 /guitars doesn't exist. Maybe we misspelled it
2:06 or, more likely, maybe we haven't written it yet.
2:09 Here's how we get this.
2:10 You have to trust me that this is going to be
2:13 a common look and feel around the whole site
2:15 but soon as we add another one, the Guitars one
2:17 we'll see that that is, in fact, true.