Flat HTML8: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
You need to sign up for Treehouse in order to download course files.Sign up