Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Create a layout.html file to help DRY up your HTML code.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
We already know how to
create a route to a page.
0:00
So let's go ahead and
tackle adding the last two pages now.
0:03
I'm going to use the name of the file
as the route and functions name.
0:07
If you gonna challenge yourself by
creating the route on your own,
0:12
then go ahead and
pause me and give it a go.
0:17
Otherwise, let's work
through this together.
0:21
Let's start with add pet.
0:25
We'll need a route Slash add-pet.
0:29
Our function will be called add_pet.
0:36
And then we'll need to return
render template addpet.html.
0:41
Save, and
let's check this out in the browser.
0:50
At the top here we can now navigate
to that page with /add-pet.
0:55
Hit enter, and there's our add pet page.
1:00
We've got one more to go.
1:08
@app.route/ and
1:13
this one we will just call pet.
1:17
And def pet, return render
1:22
template, pet.html.
1:29
Save and once again,
let's navigate to that new page.
1:36
Slash pet.
1:43
And there we go.
1:46
Now we can navigate to our pages, but
we also need to navigate between them.
1:50
For instance, when I'm on the homepage,
1:56
I should be able to click this add pet
button and go to our add pet page.
2:00
I should be able to also navigate
back to our home page by pushing
2:06
the back button on our add pet page.
2:11
Let's add those connections next.
2:15
At the top of our file,
let's add a url_for.
2:21
This will connect our
html links to the routes
2:26
we have made here in our add.pet file.
2:31
Inside of index.html,
Let's find our add pet button.
2:36
Inside the href we'll use
double curly brackets.
2:49
This is how Flask knows to do its magic.
2:54
Inside of the brackets, we need to
specify what we want Flask to do.
2:57
Here we'll call url_for.
3:02
And we need to pass in the name of
the function that we created for
3:06
the route not the name
of the route itself.
3:11
So for add pet the name of
the function is add_pet.
3:14
Remember the name of the route was
add-pet, but we want the function.
3:19
Let's save.
3:26
And let me navigate back to our homepage.
3:35
Do a hard refresh just in case.
3:40
And when I click add pet, I go to add pet.
3:42
Now that it's all written,
let's walk through that one more time.
3:48
The curly brackets lets Flask know
that we want Flask to do something.
3:52
Inside of the curly brackets,
3:57
we're asking Flask to grab the url
that goes with this function.
4:00
So now these two pages are linked.
4:06
Let's finish connecting
the pages in a few more areas.
4:11
Right above this, we have our header.
4:16
So if we click on pet adoption,
it should take us to the homepage.
4:19
This is a typical pattern.
4:24
Double curlies, url_for,
4:26
and let's do index.
4:31
And to save some time,
I'm actually gonna copy this.
4:38
So you don't have to type this
all out every single time.
4:41
Let's scroll down a bit and
you can see this
4:44
anchor tag has an href
as all anchor tags do.
4:48
We just switch this to pet so
that when we click on an individual pet,
4:53
it will go to a page about that pet.
4:58
Can repeat this.
5:00
Since we're gonna repeat it,
I'm actually gonna recopy this,
5:06
I'm gonna save as I go just in case.
5:10
There's that one, there's that one,
and this one.
5:14
Sweet.
That's all the ones here on index.
5:21
Now let's go over to addpet.html.
5:23
We need to scroll all the way to the top.
5:26
And up here in our header,
5:30
we'll need to have this send
us back to the homepage.
5:33
And this back button will actually
also send us back to the homepage so
5:39
they have two options to choose from.
5:42
Awesome, and then our pet page.
5:48
Same thing for our header here.
5:54
And our add pet button
should take us to add pet.
5:57
Add_pet.
6:01
Save, and let's refresh our browser and
test out our connections.
6:05
If I click on pet adoption,
I should go home.
6:11
Awesome.
If I click on a card, I should go to pet.
6:14
If I click on our add pet button, I should
go to add pet, back should take me back.
6:17
Add pet should go to add pet.
6:23
And you can continue clicking around and
6:25
making sure all your
connections are working.
6:27
Nice work.
6:31
Now one thing we can do to make our
templates even better is to make them dry.
6:32
The head section in our HTML
files is repeated in every file.
6:36
Flask give us the ability to place these
repeated items into their own file and
6:43
then use them whenever we need to.
6:48
This is called template inheritance.
6:51
Let's create a new HTML file, And
6:54
call it layout.html.
6:59
Now let's copy everything
7:07
from the doc type to the opening
7:12
body tag, copy and paste.
7:18
And then we need to grab at the bottom,
7:26
scroll all the way to the bottom,
our closing body tag and
7:30
closing html tag and
that will actually be on that line.
7:34
Perfect, and save.
7:45
Inside of the body tag we also have,
may be use a different page so
7:49
I don't have to scroll so much.
7:53
We also have this header that is
almost exactly the same on every page.
7:55
So let's copy that over too.
8:00
And we will put that inside our body here,
and save.
8:07
The only difference between
the pages is this button,
8:16
sometimes it's add-pet-btn and
on add pet it's actually a back-btn.
8:19
Let's delete out our button here.
8:25
So delete this whole a tag section,
delete.
8:28
Make sure you do that in
your layout.html file.
8:33
And we're gonna replace it with this,
curly brackets,
8:36
percent symbols, and
just to make it look nice some spaces.
8:41
Then we're gonna add a block button.
8:47
And then right below same formatting
with our curly brackets and
8:51
percent symbols, and then we
are gonna do endblock, all one word.
8:57
This will allow us to pass in
the correct button for each page.
9:03
Cool.
9:11
Now we have the repeated HTML
in this file, our layout.html.
9:12
But we need to tell Flask where to add
in the unique HTML that each page has.
9:18
We know our unique HTML is
inside of the body tag.
9:24
So here in our layout file,
9:30
we need to declare that this is
where all of our content will go.
9:32
This is done using curly brackets like
we did before or percent symbols.
9:37
And then inside we're going
to put block content.
9:44
And then we're gonna
close it with endblock.
9:50
Now inside of index.html, we can delete
everything that we placed in layout.
9:58
So we don't need these tags because
we now have them in layout.
10:06
I'm gonna scroll all the way to the top.
10:12
We don't need from here up, that's gone.
10:15
And we don't need This either.
10:21
Or that part of the section,
we only need to keep our add pet button.
10:27
And it's also now kind
of indented awkwardly.
10:32
So I'm gonna highlight
everything with a Ctrl A.
10:36
And now I'm gonna do command
left bracket once and
10:40
that will shift everything over
one tab to the left one time.
10:44
And save.
10:49
Now let's scroll up to the top.
10:51
And we know that this section we can
actually tab this section specifically in
10:53
one more time.
10:58
And save, is our block button.
11:00
So we'll need to let Flask know
that we're connecting this to our
11:02
layout.html files so that we can
use all of our repeated styles.
11:07
And so we'll need to do our format here,
11:13
and then extends and we'll need some
11:18
quotation marks, layout.html.
11:23
And this is telling Flask that
we're extending the HTML that we
11:28
have currently in this file and
adding on with what is in this file.
11:33
Might add a space and
then we need to tell it this is our
11:42
Block button, and
below I need to tell it this is
11:49
where our block button ends, endblock.
11:53
And then I'm gonna give it a space.
12:00
This is where our Block content goes and
then you
12:02
can probably guess at the very end of
the file if I scroll all the way down.
12:08
This is where I want to
say that we have ended
12:16
our block content, endblock and save.
12:21
Now when we refresh in the browser,
we should see no differences.
12:26
Perfect.
12:33
That means we have correctly connected
our layout.html with our index.html.
12:35
And we can tell this because layout.html
contains all of our styles like
12:43
our colors and everything.
12:48
So if we hadn't connected them correctly,
when we looked in the browser,
12:50
we wouldn't have any of our colors or
formatting that we had previously.
12:54
Now we can repeat this with our pet and
add pet files.
13:00
So pet, we can I'm actually gonna
grab from right before our button.
13:04
I'm just gonna go all
the way up to the top.
13:11
We don't need this section here,
our a can come over twice and
13:15
then we need to scroll to the very bottom.
13:21
And remove these two.
13:25
And then I'm gonna highlight.
13:28
The rest of our code and pet and
do command with our left bracket or
13:31
opening bracket to move it over once.
13:39
Now we can do {% extends 'layout.html' %}.
13:44
And our {% block button %}.
13:58
And {% endblock %}, all one word.
14:07
And we can do our block content,
14:12
{% block content %} and
then all the way at the bottom.
14:15
{% endblock %}, save, and we can check this
out in the console to make sure.
14:26
Click on a pet, and
this page still looks the same.
14:35
Perfect, one more.
14:38
Add pet.
14:43
This is our buttons, we know we
can grab from here all the way up.
14:45
Goodbye.
14:49
Goodbye to this section and we need
to scroll all the way to the bottom.
14:51
And remove these last two tags.
14:58
Perfect.
15:01
Then just to format it nicely,
15:03
I'm gonna select this big section here,
get all the way back up.
15:05
Here we go.
15:10
Move that over.
15:12
Move our button over twice and save.
15:15
Now we can do extends.
15:19
Layout.html.
15:26
Block button, endblock,
15:35
there we go.
15:47
Block content.
15:49
And then I'm gonna do command down arrow
to jump me all the way to the bottom.
15:51
And, endblock.
15:58
Save and let's check this
last page out in the console.
16:02
Click on pet and
it also looks nicely formatted.
16:07
Let's chat about what's
happening right now.
16:12
When a user requests our homepage,
16:15
it sends a request for this function.
16:19
Which then calls our index.html file,
which when we get there,
16:25
Tells us we need to first
look at our layout.html file.
16:33
It starts building out the structure for
the page until it gets to these blocks.
16:41
And then it checks index.html for
what should go inside of those blocks.
16:46
This creates the structure of our
page while also keeping our HTML dry.
16:55
Cool, right?
17:01
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up