Preview
Video Player
00:00
00:00
Flat HTML
8:34With routes and views under our belts, it's time to see how Flask handles one of the major requirements for the web, HTML.
[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