Return to Video

08-23 Template Inheritance

  • 0:00 - 0:02
    So, one last thing I would like to teach you today
  • 0:02 - 0:05
    is called template inheritance. Now, we can make this quite complex,
  • 0:05 - 0:08
    but for our purposes we're just going to do this simple thing
  • 0:08 - 0:11
    that'll make our templates much easier to use. If you notice on
  • 0:11 - 0:14
    a web page, let's draw one, most web pages have, you
  • 0:14 - 0:17
    know, a title and a footer. And then they have some
  • 0:17 - 0:21
    content in the middle. Now this might be the page slash.
  • 0:21 - 0:25
    And then you might have another page that looks identical. You know,
  • 0:25 - 0:28
    maybe this is the slash like about page. It also has a
  • 0:28 - 0:32
    title. It also has a footer. The same title and the same
  • 0:32 - 0:36
    footer. And it has some different content. When you're generating HTML, you
  • 0:36 - 0:39
    don't want to have to generate the, you know, write the same title
  • 0:39 - 0:42
    and the same footer over and over again. Just like in your
  • 0:42 - 0:45
    code when you use functions and classes to better organize your code,
  • 0:45 - 0:47
    so you don't have to write the same piece of code over
  • 0:47 - 0:50
    and over again. You can organize your templates in the same way,
  • 0:50 - 0:52
    and that's what I want to talk about right now.
  • 0:52 - 0:54
    You can use template inheritance. So you can have
  • 0:54 - 1:01
    one template that includes the header, and the footer.
  • 1:01 - 1:03
    And then you can have a bunch of sub-templates that
  • 1:03 - 1:07
    use, that just that redefine the content in the
  • 1:07 - 1:10
    middle. So here's how we're going to organize our code now.
  • 1:10 - 1:11
    So here's what we have right now in our
  • 1:11 - 1:16
    code. We have shopping list ,html and we have fizzbuzz.html.
  • 1:16 - 1:18
    And these files don't have anything in common and we want to
  • 1:18 - 1:21
    give, we want to add a little title to this page. We're going to
  • 1:21 - 1:26
    make each of these inherit from base html. And we're going to make
  • 1:26 - 1:29
    each of these inherit from base html and base html is going to have
  • 1:29 - 1:34
    some common html that these two templates will share. to make them
  • 1:34 - 1:36
    match a little better. And I'll just go ahead and show you an
  • 1:36 - 1:39
    example of how to do this. So, the first thing I'm going
  • 1:39 - 1:41
    to do is, I'm going to make a new file called base html.
  • 1:41 - 1:42
    I'm going to go ahead and put in it things I want
  • 1:42 - 1:45
    these files to have in common and I'm also going to do
  • 1:45 - 1:48
    a proper html document this time. I saved it as base
  • 1:48 - 1:51
    html. Now, remember, html documents start with a doc type and
  • 1:54 - 1:56
    then we have the html tag and then we have the head.
  • 1:56 - 1:59
    And within the head we can have the title. And so both our
  • 1:59 - 2:04
    pages will share this title. Within html we have body. Now, I'm going
  • 2:04 - 2:06
    to add a new syntax here. Okay, so then we have our, we
  • 2:06 - 2:09
    have our body, open and close, and then we close our html.
  • 2:09 - 2:13
    This is the basic structure of an html document. And it's what goes
  • 2:13 - 2:17
    inside body that makes the page unique. Now we can change our title
  • 2:17 - 2:20
    too, while we're at it. But let's just worry about the body. In
  • 2:20 - 2:23
    Jinga, the syntax that we can use will look something
  • 2:23 - 2:26
    like this. The syntax for creating a block, and a
  • 2:26 - 2:29
    block is something that'll be shared amongst templates. You just
  • 2:29 - 2:33
    say squiggle percent block and then you give the block a
  • 2:33 - 2:35
    name and in this case we are going to call it
  • 2:35 - 2:38
    content. And then you can say end block and we can
  • 2:38 - 2:41
    make each of our templates use this block of content.
  • 2:41 - 2:45
    So let's show how we would use this base html in
  • 2:45 - 2:49
    shopping list. At the top of shopping list, I'm going to say.
  • 2:49 - 2:52
    Let's add some code to our body that all of our templates
  • 2:52 - 2:55
    are going to have in common. I'm going to add a little, a header
  • 2:55 - 2:57
    across the top. Okay, so I just added a little title that we're
  • 2:57 - 3:00
    going to put across the top of our page. It's just an H1
  • 3:00 - 3:02
    and I give it a little bit of extra styling. This is
  • 3:02 - 3:06
    CSS. We gave it a background color of ddd and a foreground
  • 3:06 - 3:10
    color of 888. This is just kind of. Gray with slightly darker gray
  • 3:10 - 3:12
    on top of it. I got rid of it's margin and
  • 3:12 - 3:14
    I gave it a, a height of 50 pixels. Also, I am
  • 3:14 - 3:17
    also going to add a little style to the body. This will make
  • 3:17 - 3:20
    a layout, a little bit nicer, margin 0. Okay. So lets go
  • 3:20 - 3:23
    ahead and use this template in our shopping list. The syntax
  • 3:23 - 3:25
    for this is quite simple. All we do is at the top
  • 3:25 - 3:31
    of our file we say extends dot HTML. This this tells this
  • 3:31 - 3:35
    template that we're going to be a part of base dot HTML.
  • 3:35 - 3:37
    Now, let's see what this does in practice. Let's make
  • 3:37 - 3:41
    sure everything's saved. Nothing here is changed and our main handler
  • 3:41 - 3:44
    were still rendering shopping with html. Let's go to our front
  • 3:44 - 3:47
    page. Okay, it's still quite a mess here, let's reload this.
  • 3:47 - 3:51
    Once I reload we can see that the header that I
  • 3:51 - 3:54
    wrote is here. The kind of gray on gray background, but
  • 3:54 - 3:56
    none of our content is here. Let's look at the source
  • 3:56 - 4:00
    for this. Okay, we basically see, this is our base.html file.
  • 4:00 - 4:02
    But we're not seeing any of that content. Because that
  • 4:02 - 4:05
    was in that block content, and we didn't overwrite that. So
  • 4:05 - 4:07
    let's go ahead and take a look at our templates again.
  • 4:07 - 4:09
    This is our base html. This is basically what we were
  • 4:09 - 4:13
    seeing as the source in our browser. But our shopping_list.html hasn't
  • 4:13 - 4:16
    actually filled in this content yet. And let's see how we
  • 4:16 - 4:22
    do that. All you do is here you say block content.
  • 4:22 - 4:25
    And this, this line here, block and then the name content,
  • 4:25 - 4:29
    matches this line here in base.html. And let me
  • 4:29 - 4:33
    put a closing one at the bottom, endblock, and we
  • 4:33 - 4:35
    save this file. And we go back to our
  • 4:35 - 4:39
    browser. And when I reload this page, we see all
  • 4:39 - 4:41
    of our stuff down here now. Within our base
  • 4:41 - 4:44
    html template. And when we view the source, we can
  • 4:44 - 4:47
    see we have the base html header. Then we can
  • 4:47 - 4:50
    see we have our form content here in the middle,
  • 4:50 - 4:53
    and then we can have down here there's, it's hard
  • 4:53 - 4:55
    to see because of the scrolling, but the end of
  • 4:55 - 4:58
    the base html template. So that's pretty handy. Right, this
  • 4:58 - 5:01
    allows us to separate the content of our pages and
  • 5:01 - 5:05
    the templates for that content from the surrounding content that
  • 5:05 - 5:06
    all of our other pages might have in common. And
  • 5:06 - 5:09
    I use this a lot in this in this course.
  • 5:09 - 5:11
    Especially during the blog and some of the other things.
Title:
08-23 Template Inheritance
Description:

08-23 Template Inheritance

more » « less
Video Language:
English
Team:
Udacity
Project:
CS253 - Web Development
Duration:
05:14

English subtitles

Revisions Compare revisions