Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Flask Basics

Well done!

You have completed Flask Basics!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

Flat HTML

8:34 with Kenneth Love

With 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