"Java Data Structures - Retired" was retired on May 31, 2019. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Flask with SQLAlchemy Basics!
You have completed Flask with SQLAlchemy Basics!
Preview
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