Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Views that return plain text are fine, but eventually we're going to want some fancy HTML.
App-specific templates are best kept in a structure like app_name/templates/app_name because Django looks in app directories for a directory named templates and makes those templates automatically available.
{{ and }} are used to mark a variable you want printed out.
{% and %} mark template tags, or special bits of Python that Django's template engine knows how to run. Unlike Jinja2 templates, you can't just run arbitrary Python in a template.
render() turns a request object, a template, and an optional context dictionary into a generated string. More about render.
[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
You need to sign up for Treehouse in order to download course files.
Sign up