Templates

[MUSIC] 0:00 [SOUND] >> Templates in Django are a lot like 0:03 templates in Flask. 0:06 If you're not familiar with the idea of a templating system, 0:07 it usually involves a few parts. 0:10 Templates are usually HTML that has special tags or commands in it. 0:12 These tags let you print out data, create loops and conditionals, 0:16 and perform other programming constructs. 0:19 Templates are also often inheritable, or extendable. 0:22 So you can write small templates that fit into larger ones to save yourself trouble. 0:25 In Django, templates can be any language that you want. 0:29 HTML, JSON, XML, or something else entirely, they just have to be text. 0:32 We're gonna be creating HTML templates though, 0:37 because we want to give our users pages to look at in their browsers. 0:39 So the first template that I want to make is one for 0:42 the course list view that we just made. 0:45 You remember looking over here in views.py. 0:47 What we have right now is fine, I mean, it lists out the names. 0:51 But, it's not really useful. 0:55 So, let's fix that. 0:57 Now, by default, Django looks for 0:58 a templates directory inside of your app directory. 1:00 And we don't have one so we need to make one. 1:04 So here in courses we're gonna make a new folder, and we're gonna call it templates. 1:07 Now, it also expects inside templates that you'll have a folder or 1:14 directory with the same name as your app. 1:19 So, New Folder, courses. 1:22 So we have courses > templates > courses. 1:27 Now the reason that we do this is so that we have all of 1:31 our app-specific templates inside this namespaced directory, courses. 1:34 And then if we need to let people override them, 1:39 they just make their own template directory named courses. 1:43 Or, if we want to have templates that are for 1:45 multiple sections, we could name them different names, whatever. 1:48 Anyway though, it's a really nicely done namespaced way of handling templates. 1:52 Okay, so now, inside courses > templates > courses, I'm gonna make a new file 1:57 that is named course_list.html, because it's the list of courses. 2:03 Now of course, it doesn't have to have the same name as our view, it just happens to. 2:08 And I kind of like for them to have the same name so 2:13 that I know this template goes to this view. 2:15 And I like my names to be done like this, course_list, 2:18 because I know that it's a list of courses. 2:21 So kind of two ways for me to go, okay, that's what this thing is for. 2:24 Now if we were doing one that was only gonna show a single course, 2:28 then we might call it course_detail. 2:30 Or maybe it was a form for creating new courses, 2:32 maybe it's course_create or course_form, something like that. 2:35 But like this, we know that it's a list of courses. 2:39 Cool. 2:42 Obviously, by default, since we just created a file, our template is blank. 2:43 So let's put in just a little bit so we can see the titles and 2:48 the descriptions of our courses. 2:51 We'll decide here that we're gonna provide a list to our template, and 2:53 that list will have all the courses. 2:57 Django let's us do for loops in our templates, so let's see by doing that. 2:59 So we can do for course in courses, and 3:04 then we have to end our for loop with the endfor tag. 3:08 So now anything that we have in here will get done once for 3:13 every course that's in our courses list. 3:17 Template tags are the things that let us use little bits of Python in 3:21 our templates. 3:24 And they always start and end with a pair of characters, 3:25 which is the curly brace and the percent sign. 3:29 Django's template engine isn't quite as free-form as the Jinja2 template system 3:33 that we've used in the Flask course, but you can still do a lot with it. 3:37 And actually in Django 1.8 it's also possible to use Jinja2 for 3:41 rendering your templates. 3:45 But we're not gonna cover that in this course, 3:46 we're gonna stick with Django's template renderer for this course. 3:48 Okay, so inside this loop we want to print out the title of the course and 3:51 the description of the course. 3:55 We use two curly braces to print out a variable. 3:57 So let's make an h2, and inside of the h2 we'll print course.title, 3:59 and then below that we'll print out course.description. 4:05 Now since the fields belong to the model instance as attributes, 4:09 we access them with the dot, just like we would if we were looking at an object in, 4:13 like our shell. 4:17 And then we have to end our for loop, which we've already done. 4:19 All right, so let's go make our view use our template. 4:20 So this is our template. 4:27 For course in courses, print out the title, print out the description. 4:28 Done, all right, views.py. 4:31 What we're gonna do is we're gonna get rid of most of this work. 4:33 We don't need this output, and we don't need this return. 4:37 So let's get rid of those. 4:40 And we're gonna return a new thing, we're gonna return the render function. 4:42 And look at that, we've already got it imported. 4:46 And so this takes three arguments that we need to give it right now. 4:48 So first of all it takes the request object, 4:53 this thing that comes in right here. 4:55 So it takes that, and then it takes the template to render. 4:58 Now, we're going to say 'courses/course_list.html'. 5:02 And then, optionally, it takes a dictionary. 5:07 We call this dictionary a context dictionary, 5:12 because it's the context with which the template will be rendered. 5:15 And we're going to provide it a key named courses, and 5:20 it's going to be our thing we picked up earlier named courses. 5:23 This right here, it's all of our courses. 5:29 So, we've got all this stuff. 5:31 There are some other arguments that render can take, 5:34 I'll link to more information in the teacher's notes. 5:37 But for here though we're just handling this fairly simple, straightforward use. 5:39 So we need to run our server. 5:45 If your server is already running, you won't have to do that. 5:56 Mine died, so I had to restart it. 5:58 And then if I come back over here and I look at courses, check that out. 6:01 That looks, well, maybe not great, but it looks okay. 6:07 So, this covers, I mean this is creating a template for 6:10 an app, that's fairly straightforward. 6:14 But what if I wanted to have a layout for 6:16 the homepage, the page that we made, let's go look at it here. 6:17 Page that we made over here, this hello_world. 6:23 The one that we get by just going to forward slash. 6:26 What if I want a template for this page? 6:29 Its view doesn't live inside of an app. 6:30 So we can't just add a template's directory to an app and be done with it. 6:33 We could have template for it to our courses app, but that doesn't make a lot 6:36 of sense because that page may not come with our courses app. 6:41 So, how do we handle this? 6:45 Well, what we're gonna do is we're going to add a directory. 6:46 Let's close this stuff up here. 6:49 We're gonna add a directory into our outermost learning site here, and 6:51 we're gonna name this directory templates. 6:55 And we have to go do one more thing. 7:00 So we have to go change our settings. 7:03 So let's go look at our settings. 7:05 Here's our settings, and we're gonna come down here, and we've got templates. 7:08 And then we've got this list here called DIRS. 7:15 So this templates thing here is a list, and each item on the list is a dictionary, 7:18 and each of those dictionaries describes one way of rendering templates. 7:25 So for instance, this one is the BACKEND that renders Django templates, 7:32 this is just the Django templates renderer. 7:35 This is where we had change to like the Jinja2 template renderer. 7:38 And this APP_DIRS directory here is the one that says look for 7:41 templates directories inside of apps. 7:45 That's what lets us do the templates courses thing, so that's pretty cool. 7:47 Options, these are just different things that you can configure per template 7:51 renderer. 7:55 Some of them you don't want to have debugged, maybe you don't want to have 7:56 the request object, maybe you don't want to have messages, whatever. 7:58 What we care about though, is this DIRS list. 8:02 So this DIRS list lets us specify other 8:05 directories that we want included for it to go look for templates in. 8:09 So, this actually works from the root of the site. 8:14 So this is the root of our site. 8:17 So how do we find in here the directory? 8:20 Well, we named the directory templates, so let's just add in the string, templates. 8:22 And I'll put a comma in there because that's a good habit. 8:27 Okay, so now we need to create our template, and our view, 8:30 and change our view. 8:33 So let's make a new file here, and we'll call it, 8:35 say, home.html, since it's the homepage. 8:37 And then, inside here I'm gonna put an h1 and it's just gonna say welcome. 8:42 And I think that's good enough for now. 8:46 So it just says welcome. 8:48 I mean, right now, it says, Hello World, we'll say, welcome. 8:49 So, now let's go back and edit our views. 8:53 So here's our views. 8:56 And what we need to do is we need to change this to shortcuts, and render. 8:58 And then we're going to return render (request, 9:06 and our template is 'home.html'). 9:11 And we don't have to give a directory on this one because it doesn't live inside 9:15 of another directory. 9:18 We could have added say, default or basic or whatever, but 9:19 this one doesn't live inside anything. 9:24 And then we don't have to include the context directory, or 9:27 dictionary because there's no context. 9:30 Okay, so let's refresh this. 9:33 And we get our Welcome, great. 9:36 You might want to change the view name from, hello_world, to, home or home_page. 9:38 Be sure you change the URL too, since it has the view name in it. 9:43 In our next video, 9:46 we'll look at the other important part of a templating system, template inheritance. 9:47