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
With routes and views under our belts, it's time to see how Flask handles one of the major requirements for the web, HTML.
Things to Remember
- Use
{{and}}to print items in templates. - Flask looks for templates in a directory named
templatesby default. This directory should be in the same directory as your app script.
Docs
- Flask docs on templates
- Jinja2 - The template engine used by Flask.
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
[SOUND] So far, we've just been sending
back plain text from our views.
0:00
This works fine for really small stuff,
but no one wants to
0:08
write all the HTML required for an entire
view every single time.
0:11
Flask knows this, so
0:15
it gives us a great function called Render
Template that renders templates.
0:16
Let's go check it out.
0:20
So I'm a big fan of doing things the hard
way first.
0:21
It helps you to understand what's going
on, and
0:24
to appreciate the easier way a little bit
more.
0:27
So let's do this the hard way first.
0:31
Let's make our ad view here send back real
HTML.
0:35
So we're gonna have this return statement,
0:40
we're gonna keep the return statement,
sort of.
0:43
But, we're gonna send back a multiline
string with our HTML in it.
0:47
So, we're gonna use triple quotes,
0:54
cuz triple quotes lets us hold on to line
breaks.
0:55
So, what are we gonna return?
1:00
Well, we're gonna return some real HTML.
1:01
So dust off your handwritten HTML and, we
gonna do
1:05
our HTML tag and a head tag, with the
title of adding.
1:12
And, then we're gonna close our head tag.
1:20
And, we're gonna do a body.
1:24
And, we're gonna do an H1.
1:28
And, we'll do that plus that equals that.
1:30
And, we'll close our H1, and we'll close
our body, and we'll close our HTML.
1:33
Right, that's everything.
1:40
Okay.
1:42
So, there's all of our HTML.
1:42
Not much there.
1:45
We could actually leave a, a little bit of
this, but, not much there.
1:46
So, let's see if that works.
1:50
If we refresh.
1:52
Okay, so let's inspect it.
1:55
And see that it is, yep, we do indeed have
HTML.
1:57
There's our title and our H1 everything.
2:02
Well so, that works.
2:04
But that's an awful lot of typing just to
get an H1 and a little bit of text.
2:08
I mean imagine if you had to do this for,
you know, ten, 20, 100 views.
2:14
You would lose your mind very, very
quickly, you, and then,
2:19
then something has to change, right, you
got to move the logo or something.
2:23
Alright, so how do we do templates in
Flask?
2:27
Well, we actually have to add a directory
for all this to work which is,
2:30
is kind of weird.
2:34
So what were gonna do is were gonna go up
here in new folder, and
2:37
we'll make a folder called templates.
2:39
And then inside templates, well, just
first of all,
2:42
templates is a bit of a magical location,
Flask automatically looks for a directory
2:46
named templates, and anything that's in
there in the same directory as your app.
2:52
And ultimately serve that as a template
when you reference it in a view.
2:58
So, let's make a template that'll do what
we just did.
3:02
We'll make a new file and we'll call it
add.html and,
3:06
alright, let's add our stuff to this.
3:12
So, its a doc type of html and
3:14
we have our HTML tag, and we have our head
tag.
3:18
We have our title tag, where we say
adding.
3:23
And then we have body tag, and
3:28
inside the body tag we do an h1.
3:33
And, huh?
3:38
How do I reference the variables?
3:39
Let's see if we can make this be rendered
first, and then we'll,
3:42
we'll figure out the rest of it.
3:47
So we'll just say number one plus number
two equals something, you know,
3:48
let's make this a joke.
3:53
Something ha, ha.
3:55
Alright, so [LAUGH] let's see if we can
get that to actually render.
4:00
So what we have to do, and we can get rid
of all of this for right now.
4:04
What we actually have to do, is we have to
use a new thing that we're going to
4:09
import from Flask, which is called render
template.
4:13
So we're going to import render template
and down here in our view, we're going
4:16
to call return render template, and we
give it the name of the template.
4:23
So in this case it is add.html.
4:28
So save that, come over here, refresh.
4:31
Num1 plus Num2 equals Sum-thing!
4:35
All right, so, I, I want to actually have
the numbers in there though.
4:38
So, how do I do that?
4:43
Well, first of all, let's go, let's go
edit our HTML.
4:45
And what we wanna do is we want to print
variables, and
4:49
so in Flask, Flask uses a template system
called Jinja2.
4:54
And in Jinja2 the way that we print
variables is with double mustaches.
4:58
So we're gonna say num1.
5:03
And then over here, we're gonna say, num2.
5:07
Now you don't have to have spaces.
5:10
You can do it like that if you want.
5:12
I just think the spaces are a little
nicer.
5:14
And then we could,
5:17
we could render a new variable here that
was called, like, total or something.
5:20
But we can actually do some math right in
the template.
5:25
So, let's see if this works.
5:31
I mean, we have those variables in our
view.
5:34
Right?
Let's let's render that.
5:35
Oh, no one's undefined.
5:38
Okay.
So, we have to pass it out.
5:39
We have to give the variable to our view
so that our view can use that variable.
5:41
If that makes sense.
5:50
So what we're actually gonna do is we're
gonna do num1 equals num1 and
5:51
num2 equals num2.
5:55
Okay.
So we give it a name and a value.
5:57
Key value, key value.
6:00
That means we could also have done like,
this is often called context so
6:01
we could have done like context num1,
num1.
6:06
Num2 is Num2.
6:11
And then done.
6:15
Star star context to unpack our context.
6:18
Alright?
6:20
Either one of those would have worked.
6:21
Okay, so let's refresh this, see if this
works.
6:24
It does.
6:27
There's our two and five equals seven.
6:27
Let's do.
6:29
Let's do something more impressive.
6:30
There we go, thats a cooler number.
6:35
But that's what we wanted.
6:38
We wanted this HTML to be rendered this
way.
6:40
Let's go back and do the same thing for
our index view.
6:43
So, the first thing we need to do is,
6:46
inside templates we need to make a new
file, which we'll call index.html.
6:49
I think it makes it easier to just call
them what they are.
6:54
And we got to put in our dock type.
6:57
And our HTML tag.
7:03
And our head tag.
7:05
And our title tag.
7:06
And we were lets, lets say howdy.
7:11
And then we have our body.
7:15
And inside of our body was another H1 and
we'll press in name.
7:17
Okay, so now we need to change our view.
7:23
Do any of you remember how to change our
view?
7:26
Sadly I can't hear you so I'm just going
to go ahead and do it here.
7:30
So what we're gonna do is we're gonna
return render template and
7:34
we're gonna pass in the name.
7:37
And of course you can use single or double
quotes, it doesn't really matter.
7:40
And name equals name.
7:43
Okay, so let's go back over here.
7:45
There's Treehouse.
7:49
That's, you know let's change that, let's
make it match what it was.
7:51
It was hello from and then the name.
7:53
Okay, now we refresh.
8:02
Hello from Treehouse.
8:03
Or we give it a name.
8:04
How about we give it the name Kenneth.
8:05
Hello from Kenneth!
8:09
Alright.
8:11
So, that's a lot easier than rendering or
typing out all of our HTML ourselves,
8:13
nobody wants to have to type HTML over and
over and over again.
8:20
Using templates makes it a lot faster to
build your apps, and a lot easier to
8:24
work with other programmers and designers
that might not know Python.
8:28
In our next video, we'll look at a way to
dry up our templates.
8:31
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