1
00:00:00,000 --> 00:00:03,511
[MUSIC]
2
00:00:03,511 --> 00:00:06,700
[SOUND]
>> Templates in Django are a lot like
3
00:00:06,700 --> 00:00:07,911
templates in Flask.
4
00:00:07,911 --> 00:00:10,329
If you're not familiar with
the idea of a templating system,
5
00:00:10,329 --> 00:00:12,310
it usually involves a few parts.
6
00:00:12,310 --> 00:00:16,300
Templates are usually HTML that has
special tags or commands in it.
7
00:00:16,300 --> 00:00:19,610
These tags let you print out data,
create loops and conditionals,
8
00:00:19,610 --> 00:00:22,360
and perform other programming constructs.
9
00:00:22,360 --> 00:00:25,500
Templates are also often inheritable,
or extendable.
10
00:00:25,500 --> 00:00:28,710
So you can write small templates that fit
into larger ones to save yourself trouble.
11
00:00:29,810 --> 00:00:32,180
In Django, templates can be
any language that you want.
12
00:00:32,180 --> 00:00:37,310
HTML, JSON, XML, or something else
entirely, they just have to be text.
13
00:00:37,310 --> 00:00:39,270
We're gonna be creating
HTML templates though,
14
00:00:39,270 --> 00:00:42,860
because we want to give our users
pages to look at in their browsers.
15
00:00:42,860 --> 00:00:45,330
So the first template that
I want to make is one for
16
00:00:45,330 --> 00:00:47,690
the course list view that we just made.
17
00:00:47,690 --> 00:00:51,301
You remember looking
over here in views.py.
18
00:00:51,301 --> 00:00:55,390
What we have right now is fine,
I mean, it lists out the names.
19
00:00:55,390 --> 00:00:57,180
But, it's not really useful.
20
00:00:57,180 --> 00:00:58,610
So, let's fix that.
21
00:00:58,610 --> 00:01:00,720
Now, by default, Django looks for
22
00:01:00,720 --> 00:01:04,410
a templates directory inside
of your app directory.
23
00:01:04,410 --> 00:01:06,410
And we don't have one so
we need to make one.
24
00:01:07,580 --> 00:01:13,480
So here in courses we're gonna make a new
folder, and we're gonna call it templates.
25
00:01:14,650 --> 00:01:19,880
Now, it also expects inside templates
that you'll have a folder or
26
00:01:19,880 --> 00:01:22,196
directory with the same name as your app.
27
00:01:22,196 --> 00:01:27,620
So, New Folder, courses.
28
00:01:27,620 --> 00:01:31,160
So we have courses > templates > courses.
29
00:01:31,160 --> 00:01:34,380
Now the reason that we do this is so
that we have all of
30
00:01:34,380 --> 00:01:39,830
our app-specific templates inside
this namespaced directory, courses.
31
00:01:39,830 --> 00:01:43,230
And then if we need to
let people override them,
32
00:01:43,230 --> 00:01:45,940
they just make their own
template directory named courses.
33
00:01:45,940 --> 00:01:48,870
Or, if we want to have
templates that are for
34
00:01:48,870 --> 00:01:52,110
multiple sections, we could name
them different names, whatever.
35
00:01:52,110 --> 00:01:57,845
Anyway though, it's a really nicely done
namespaced way of handling templates.
36
00:01:57,845 --> 00:02:03,100
Okay, so now, inside courses > templates
> courses, I'm gonna make a new file
37
00:02:03,100 --> 00:02:08,910
that is named course_list.html,
because it's the list of courses.
38
00:02:08,910 --> 00:02:13,040
Now of course, it doesn't have to have the
same name as our view, it just happens to.
39
00:02:13,040 --> 00:02:15,300
And I kind of like for
them to have the same name so
40
00:02:15,300 --> 00:02:17,380
that I know this template
goes to this view.
41
00:02:18,440 --> 00:02:21,590
And I like my names to be done like this,
course_list,
42
00:02:21,590 --> 00:02:24,030
because I know that
it's a list of courses.
43
00:02:24,030 --> 00:02:28,320
So kind of two ways for me to go,
okay, that's what this thing is for.
44
00:02:28,320 --> 00:02:30,580
Now if we were doing one that was
only gonna show a single course,
45
00:02:30,580 --> 00:02:32,180
then we might call it course_detail.
46
00:02:32,180 --> 00:02:35,520
Or maybe it was a form for
creating new courses,
47
00:02:35,520 --> 00:02:39,230
maybe it's course_create or
course_form, something like that.
48
00:02:39,230 --> 00:02:42,050
But like this,
we know that it's a list of courses.
49
00:02:42,050 --> 00:02:43,350
Cool.
50
00:02:43,350 --> 00:02:48,270
Obviously, by default, since we just
created a file, our template is blank.
51
00:02:48,270 --> 00:02:51,090
So let's put in just a little bit so
we can see the titles and
52
00:02:51,090 --> 00:02:52,490
the descriptions of our courses.
53
00:02:53,510 --> 00:02:57,650
We'll decide here that we're gonna
provide a list to our template, and
54
00:02:57,650 --> 00:02:58,620
that list will have all the courses.
55
00:02:59,720 --> 00:03:03,120
Django let's us do for loops in our
templates, so let's see by doing that.
56
00:03:04,890 --> 00:03:08,980
So we can do for course in courses, and
57
00:03:08,980 --> 00:03:13,130
then we have to end our for
loop with the endfor tag.
58
00:03:13,130 --> 00:03:17,670
So now anything that we have
in here will get done once for
59
00:03:17,670 --> 00:03:21,390
every course that's in our courses list.
60
00:03:21,390 --> 00:03:24,904
Template tags are the things that
let us use little bits of Python in
61
00:03:24,904 --> 00:03:25,794
our templates.
62
00:03:25,794 --> 00:03:29,703
And they always start and
end with a pair of characters,
63
00:03:29,703 --> 00:03:33,800
which is the curly brace and
the percent sign.
64
00:03:33,800 --> 00:03:37,930
Django's template engine isn't quite as
free-form as the Jinja2 template system
65
00:03:37,930 --> 00:03:41,950
that we've used in the Flask course,
but you can still do a lot with it.
66
00:03:41,950 --> 00:03:45,444
And actually in Django 1.8 it's
also possible to use Jinja2 for
67
00:03:45,444 --> 00:03:46,923
rendering your templates.
68
00:03:46,923 --> 00:03:48,703
But we're not gonna cover
that in this course,
69
00:03:48,703 --> 00:03:51,383
we're gonna stick with Django's
template renderer for this course.
70
00:03:51,383 --> 00:03:55,506
Okay, so inside this loop we want to
print out the title of the course and
71
00:03:55,506 --> 00:03:57,570
the description of the course.
72
00:03:57,570 --> 00:03:59,810
We use two curly braces
to print out a variable.
73
00:03:59,810 --> 00:04:05,240
So let's make an h2, and
inside of the h2 we'll print course.title,
74
00:04:05,240 --> 00:04:09,730
and then below that we'll
print out course.description.
75
00:04:09,730 --> 00:04:13,280
Now since the fields belong to
the model instance as attributes,
76
00:04:13,280 --> 00:04:17,830
we access them with the dot, just like we
would if we were looking at an object in,
77
00:04:17,830 --> 00:04:19,020
like our shell.
78
00:04:19,020 --> 00:04:20,910
And then we have to end our for
loop, which we've already done.
79
00:04:20,910 --> 00:04:26,130
All right, so
let's go make our view use our template.
80
00:04:27,500 --> 00:04:28,390
So this is our template.
81
00:04:28,390 --> 00:04:31,350
For course in courses, print out
the title, print out the description.
82
00:04:31,350 --> 00:04:33,828
Done, all right, views.py.
83
00:04:33,828 --> 00:04:37,511
What we're gonna do is we're gonna
get rid of most of this work.
84
00:04:37,511 --> 00:04:40,310
We don't need this output, and
we don't need this return.
85
00:04:40,310 --> 00:04:41,150
So let's get rid of those.
86
00:04:42,410 --> 00:04:46,570
And we're gonna return a new thing,
we're gonna return the render function.
87
00:04:46,570 --> 00:04:48,555
And look at that,
we've already got it imported.
88
00:04:48,555 --> 00:04:53,136
And so this takes three arguments
that we need to give it right now.
89
00:04:53,136 --> 00:04:55,506
So first of all it takes
the request object,
90
00:04:55,506 --> 00:04:57,500
this thing that comes in right here.
91
00:04:58,760 --> 00:05:02,900
So it takes that, and
then it takes the template to render.
92
00:05:02,900 --> 00:05:07,527
Now, we're going to say
'courses/course_list.html'.
93
00:05:07,527 --> 00:05:12,667
And then, optionally,
it takes a dictionary.
94
00:05:12,667 --> 00:05:15,574
We call this dictionary
a context dictionary,
95
00:05:15,574 --> 00:05:20,770
because it's the context with which
the template will be rendered.
96
00:05:20,770 --> 00:05:23,520
And we're going to provide
it a key named courses, and
97
00:05:23,520 --> 00:05:28,320
it's going to be our thing we
picked up earlier named courses.
98
00:05:29,360 --> 00:05:31,860
This right here, it's all of our courses.
99
00:05:31,860 --> 00:05:34,400
So, we've got all this stuff.
100
00:05:34,400 --> 00:05:37,080
There are some other arguments
that render can take,
101
00:05:37,080 --> 00:05:39,760
I'll link to more information
in the teacher's notes.
102
00:05:39,760 --> 00:05:45,240
But for here though we're just handling
this fairly simple, straightforward use.
103
00:05:45,240 --> 00:05:46,499
So we need to run our server.
104
00:05:56,100 --> 00:05:58,400
If your server is already running,
you won't have to do that.
105
00:05:58,400 --> 00:06:01,510
Mine died, so I had to restart it.
106
00:06:01,510 --> 00:06:07,230
And then if I come back over here and
I look at courses, check that out.
107
00:06:07,230 --> 00:06:10,850
That looks, well, maybe not great,
but it looks okay.
108
00:06:10,850 --> 00:06:14,390
So, this covers,
I mean this is creating a template for
109
00:06:14,390 --> 00:06:16,140
an app, that's fairly straightforward.
110
00:06:16,140 --> 00:06:17,890
But what if I wanted to have a layout for
111
00:06:17,890 --> 00:06:21,460
the homepage, the page that we made,
let's go look at it here.
112
00:06:23,260 --> 00:06:26,246
Page that we made over here,
this hello_world.
113
00:06:26,246 --> 00:06:29,126
The one that we get by just
going to forward slash.
114
00:06:29,126 --> 00:06:30,615
What if I want a template for this page?
115
00:06:30,615 --> 00:06:33,370
Its view doesn't live inside of an app.
116
00:06:33,370 --> 00:06:36,584
So we can't just add a template's
directory to an app and be done with it.
117
00:06:36,584 --> 00:06:41,120
We could have template for it to our
courses app, but that doesn't make a lot
118
00:06:41,120 --> 00:06:45,090
of sense because that page may
not come with our courses app.
119
00:06:45,090 --> 00:06:46,720
So, how do we handle this?
120
00:06:46,720 --> 00:06:49,421
Well, what we're gonna do is
we're going to add a directory.
121
00:06:49,421 --> 00:06:51,541
Let's close this stuff up here.
122
00:06:51,541 --> 00:06:55,994
We're gonna add a directory into our
outermost learning site here, and
123
00:06:55,994 --> 00:06:58,842
we're gonna name this directory templates.
124
00:07:00,942 --> 00:07:03,042
And we have to go do one more thing.
125
00:07:03,042 --> 00:07:05,510
So we have to go change our settings.
126
00:07:05,510 --> 00:07:06,878
So let's go look at our settings.
127
00:07:08,998 --> 00:07:15,786
Here's our settings, and we're gonna
come down here, and we've got templates.
128
00:07:15,786 --> 00:07:18,317
And then we've got this
list here called DIRS.
129
00:07:18,317 --> 00:07:25,404
So this templates thing here is a list,
and each item on the list is a dictionary,
130
00:07:25,404 --> 00:07:32,750
and each of those dictionaries describes
one way of rendering templates.
131
00:07:32,750 --> 00:07:35,979
So for instance, this one is the BACKEND
that renders Django templates,
132
00:07:35,979 --> 00:07:38,370
this is just the Django
templates renderer.
133
00:07:38,370 --> 00:07:41,889
This is where we had change to
like the Jinja2 template renderer.
134
00:07:41,889 --> 00:07:45,232
And this APP_DIRS directory here
is the one that says look for
135
00:07:45,232 --> 00:07:47,423
templates directories inside of apps.
136
00:07:47,423 --> 00:07:50,580
That's what lets us do the templates
courses thing, so that's pretty cool.
137
00:07:51,630 --> 00:07:55,558
Options, these are just different things
that you can configure per template
138
00:07:55,558 --> 00:07:56,163
renderer.
139
00:07:56,163 --> 00:07:58,782
Some of them you don't want to have
debugged, maybe you don't want to have
140
00:07:58,782 --> 00:08:02,230
the request object, maybe you don't
want to have messages, whatever.
141
00:08:02,230 --> 00:08:05,980
What we care about though,
is this DIRS list.
142
00:08:05,980 --> 00:08:09,640
So this DIRS list lets us specify other
143
00:08:09,640 --> 00:08:14,690
directories that we want included for
it to go look for templates in.
144
00:08:14,690 --> 00:08:17,990
So, this actually works
from the root of the site.
145
00:08:17,990 --> 00:08:20,030
So this is the root of our site.
146
00:08:20,030 --> 00:08:22,370
So how do we find in here the directory?
147
00:08:22,370 --> 00:08:27,305
Well, we named the directory templates, so
let's just add in the string, templates.
148
00:08:27,305 --> 00:08:30,426
And I'll put a comma in there
because that's a good habit.
149
00:08:30,426 --> 00:08:33,588
Okay, so now we need to create
our template, and our view,
150
00:08:33,588 --> 00:08:35,160
and change our view.
151
00:08:35,160 --> 00:08:37,830
So let's make a new file here,
and we'll call it,
152
00:08:37,830 --> 00:08:40,930
say, home.html, since it's the homepage.
153
00:08:42,560 --> 00:08:46,160
And then, inside here I'm gonna put
an h1 and it's just gonna say welcome.
154
00:08:46,160 --> 00:08:48,590
And I think that's good enough for now.
155
00:08:48,590 --> 00:08:49,380
So it just says welcome.
156
00:08:49,380 --> 00:08:53,460
I mean, right now, it says,
Hello World, we'll say, welcome.
157
00:08:53,460 --> 00:08:56,070
So, now let's go back and edit our views.
158
00:08:56,070 --> 00:08:58,380
So here's our views.
159
00:08:58,380 --> 00:09:06,901
And what we need to do is we need to
change this to shortcuts, and render.
160
00:09:06,901 --> 00:09:11,731
And then we're going to
return render (request,
161
00:09:11,731 --> 00:09:15,562
and our template is 'home.html').
162
00:09:15,562 --> 00:09:18,744
And we don't have to give a directory on
this one because it doesn't live inside
163
00:09:18,744 --> 00:09:19,702
of another directory.
164
00:09:19,702 --> 00:09:24,084
We could have added say,
default or basic or whatever, but
165
00:09:24,084 --> 00:09:27,162
this one doesn't live inside anything.
166
00:09:27,162 --> 00:09:30,278
And then we don't have to include
the context directory, or
167
00:09:30,278 --> 00:09:32,490
dictionary because there's no context.
168
00:09:33,560 --> 00:09:34,790
Okay, so let's refresh this.
169
00:09:36,680 --> 00:09:38,730
And we get our Welcome, great.
170
00:09:38,730 --> 00:09:43,210
You might want to change the view name
from, hello_world, to, home or home_page.
171
00:09:43,210 --> 00:09:46,560
Be sure you change the URL too,
since it has the view name in it.
172
00:09:46,560 --> 00:09:47,270
In our next video,
173
00:09:47,270 --> 00:09:50,780
we'll look at the other important part of
a templating system, template inheritance.