1
00:00:05,540 --> 00:00:10,610
Welcome everyone to this lecture, or we're going to discuss how to connect data based off the models

2
00:00:10,610 --> 00:00:12,290
to templates on the frontend.

3
00:00:13,760 --> 00:00:18,110
Now, I want you to keep in mind, you have a lot of the knowledge and tools needed to make a fully

4
00:00:18,110 --> 00:00:19,040
functioning website.

5
00:00:19,400 --> 00:00:24,830
You already know all the details necessary to connect a user to a backend database and have the user

6
00:00:24,830 --> 00:00:27,920
interact with data things like create, read, update and delete.

7
00:00:28,280 --> 00:00:34,190
It's all a matter of just creating these custom views that use commands from models, not pie.

8
00:00:34,430 --> 00:00:40,130
The ones we just talked about and then actually send that information or retrieve that information from

9
00:00:40,130 --> 00:00:40,670
a template.

10
00:00:40,730 --> 00:00:45,530
You can retrieve it through an HTML form, or you could just send it back using the Django template

11
00:00:45,530 --> 00:00:47,210
language that we've already learned about.

12
00:00:48,680 --> 00:00:52,940
In this lecture, we're going to be exploring how we could report back information from the database

13
00:00:52,940 --> 00:00:54,290
to the user in a template.

14
00:00:54,770 --> 00:00:59,840
However, we really want you to keep in mind that there's still two major ideas we have yet to learn

15
00:00:59,840 --> 00:01:01,580
about in regards to Tango.

16
00:01:02,510 --> 00:01:08,450
And those are two major features we still have to learn are Django Forms, which allows Django to automatically

17
00:01:08,450 --> 00:01:16,280
create forms from Python to template and class based views, which is extremely powerful tool that automatically

18
00:01:16,280 --> 00:01:21,080
generates views like a detailed view or a list view based off a model.

19
00:01:21,110 --> 00:01:26,450
So it's going to just generate a whole lot of work for you simply by using that model class.

20
00:01:26,570 --> 00:01:31,560
So these are extremely powerful tools that are going to save you a ton of development time.

21
00:01:31,580 --> 00:01:32,990
We just need to learn them first.

22
00:01:34,340 --> 00:01:39,830
So these two features are powerful enough that I would suggest you learn them first before jumping straight

23
00:01:39,830 --> 00:01:42,200
into using Django based off what you know so far.

24
00:01:42,530 --> 00:01:48,020
I only warn this because a lot of times students basically see they have everything they need so far,

25
00:01:48,170 --> 00:01:53,030
and they jump straight into making websites using just function based views, which is totally fine.

26
00:01:53,240 --> 00:01:56,330
But there's still a lot more capability that we have yet to learn.

27
00:01:56,600 --> 00:02:01,820
We're really just scratching the surface of what makes Django such a great web framework to work with.

28
00:02:02,090 --> 00:02:07,730
So those features that is Django forms and class based views will drastically reduce her development

29
00:02:07,730 --> 00:02:10,820
time once we learn them in upcoming sections of the course.

30
00:02:11,030 --> 00:02:12,530
So I just want you to keep that in mind.

31
00:02:12,560 --> 00:02:18,080
We still have a lot to learn, which is why we haven't really felt like we've quickly made a kind of

32
00:02:18,080 --> 00:02:19,430
Real-World website yet.

33
00:02:20,320 --> 00:02:20,680
OK.

34
00:02:21,010 --> 00:02:25,660
For right now, though, let's show a simple example of how we would actually connect a template and

35
00:02:25,660 --> 00:02:30,910
that could be used to report back information from a database and head over to the same file we've been

36
00:02:30,910 --> 00:02:31,450
working with.

37
00:02:32,050 --> 00:02:34,350
OK, here I am inside visual studio code.

38
00:02:34,360 --> 00:02:37,960
We've been messing around with the model's top pie file a lot.

39
00:02:38,290 --> 00:02:45,190
But let's go ahead and see if I could take all the patients I have and list them on some sort of URL.

40
00:02:45,760 --> 00:02:50,470
First thing's first, let's actually connect a URL that lives inside of office.

41
00:02:50,800 --> 00:02:56,080
So inside of office, I'll create a new file called URLs dot pie.

42
00:02:57,080 --> 00:03:03,130
And remember, I have to actually connect this URLs that profile to my site level URL, I'll stop by

43
00:03:03,140 --> 00:03:03,530
file.

44
00:03:03,740 --> 00:03:09,170
So if I come to your stop, I remember this is the project level one has all this information and it's

45
00:03:09,170 --> 00:03:13,040
actually connected with the URL configuration I will have for office.

46
00:03:13,400 --> 00:03:14,300
We already know how to do this.

47
00:03:14,300 --> 00:03:15,350
We've done it a bunch times.

48
00:03:15,350 --> 00:03:17,840
So on, say its path.

49
00:03:18,500 --> 00:03:20,210
And let's make this route.

50
00:03:20,210 --> 00:03:21,200
Say Office.

51
00:03:22,440 --> 00:03:30,270
Forward slash and then what I'm going to say here is I'm going to include and we're going to say office,

52
00:03:30,690 --> 00:03:36,810
you are else, and if I'm going to include office thought URLs I need to import include.

53
00:03:37,620 --> 00:03:39,750
OK, go ahead and save that change.

54
00:03:40,080 --> 00:03:46,740
And now what I need to do is actually set up my URL patterns as well as a template for the actual office

55
00:03:46,740 --> 00:03:46,980
here.

56
00:03:47,340 --> 00:03:57,000
So what I'm going to do is come back to your URLs that pie and then say from Jane, go dot URLs, import

57
00:03:57,000 --> 00:03:57,390
path.

58
00:03:58,300 --> 00:04:00,220
And then we're going to say all patterns.

59
00:04:01,140 --> 00:04:06,050
And we're going to make a list here that's going to be a path.

60
00:04:06,300 --> 00:04:12,090
And if you ever get confused on, well, how do I define this path inside my application?

61
00:04:12,390 --> 00:04:15,960
Remember, the instructions are actually at the project level that if you're using something like a

62
00:04:15,960 --> 00:04:21,029
function based view, you can just say path, the actual URL path and then the view.

63
00:04:21,029 --> 00:04:22,290
And if you want, you can give it a name.

64
00:04:22,800 --> 00:04:23,160
So.

65
00:04:24,030 --> 00:04:28,190
We are going to have this let's just call this essentially blank.

66
00:04:28,310 --> 00:04:33,120
So that way it shows up on where essentially it's going to have something like this our domain.

67
00:04:33,530 --> 00:04:35,150
Dot com forward slash office.

68
00:04:35,570 --> 00:04:38,180
And then this in turn, is going to list all the patients.

69
00:04:39,600 --> 00:04:42,630
So very simple, but hopefully it's kind of get your gears turning.

70
00:04:42,930 --> 00:04:43,710
So how do I do this?

71
00:04:44,070 --> 00:04:47,940
I first have to actually have a used up file, which I do instead of office.

72
00:04:48,120 --> 00:04:52,540
Remember, I have views here, so here I'm going to actually create a simple view.

73
00:04:52,580 --> 00:04:55,350
So we're going to call this view list patients.

74
00:04:56,380 --> 00:04:57,910
And it takes in a request.

75
00:04:59,040 --> 00:05:03,240
And then it's going to return, and I'm going to say return nothing right now, but you'll see later

76
00:05:03,240 --> 00:05:04,500
on we are going to return something.

77
00:05:04,500 --> 00:05:06,270
Obviously we're going to return a rendering.

78
00:05:06,810 --> 00:05:10,520
But we'll come here and say this takes in from views.

79
00:05:11,140 --> 00:05:11,790
So say.

80
00:05:12,750 --> 00:05:14,880
From the import views.

81
00:05:15,870 --> 00:05:20,940
And then we'll save use that and then we'll call list patients, and if you want to give this a name.

82
00:05:21,920 --> 00:05:22,820
List patients.

83
00:05:23,000 --> 00:05:23,690
It's kind of up to you.

84
00:05:25,220 --> 00:05:26,390
OK, save that change.

85
00:05:26,510 --> 00:05:27,770
So what do I have so far?

86
00:05:28,160 --> 00:05:35,330
I have my project level URL, so you can kind of say I'm working from the front backwards that is pointing

87
00:05:35,330 --> 00:05:41,630
to four slash office which calls office thought URLs, which in turn says, OK, if you want to see

88
00:05:41,630 --> 00:05:46,070
four slash office, which eventually I hope will show a list of all the patients, then I'm going to

89
00:05:46,070 --> 00:05:46,850
have a path here.

90
00:05:47,150 --> 00:05:51,110
It's going to say you list patients and that name of that URL is less patients.

91
00:05:51,560 --> 00:05:55,310
So what do I then need to do inside of use right now, returning nothing.

92
00:05:55,310 --> 00:05:57,680
But that's probably not what I actually want to return.

93
00:05:58,280 --> 00:06:00,800
Instead, I would like to render.

94
00:06:02,100 --> 00:06:07,380
This remember, it takes in the request and then the template name, as well as the context that you're

95
00:06:07,380 --> 00:06:08,160
passing back.

96
00:06:08,490 --> 00:06:10,020
So how can we actually do this?

97
00:06:11,740 --> 00:06:17,490
Well, the first thing to do is actually grab from models, all those patients, so in order to use

98
00:06:18,160 --> 00:06:22,300
patient here, I need to inside of views say.

99
00:06:24,160 --> 00:06:31,240
From Dot's import models, so this is one way to import it, the other way you could import it is just

100
00:06:31,240 --> 00:06:33,400
say from that model's import patient.

101
00:06:33,430 --> 00:06:34,330
It's kind of up to you.

102
00:06:34,780 --> 00:06:40,480
But now what I can say is all patience is equal to.

103
00:06:41,390 --> 00:06:46,480
Models, dot, patient objects, dot all.

104
00:06:47,360 --> 00:06:51,590
So remember, this is essentially the exact same code that we've been working with, except this time.

105
00:06:51,860 --> 00:06:53,900
I'm just doing it inside of a view.

106
00:06:54,320 --> 00:06:56,540
And again, hopefully this gets the gears turning off.

107
00:06:56,570 --> 00:07:01,910
Everything we just talked about can be done with any function based view, and I can either take in

108
00:07:01,910 --> 00:07:03,590
requests or send them back.

109
00:07:04,010 --> 00:07:06,710
So I'm going to go ahead and then render this.

110
00:07:07,630 --> 00:07:12,430
With the request, I need to decide on the actual template.

111
00:07:12,850 --> 00:07:19,840
So right now, we'll kind of put a placeholder here or say office and then forward slash list each HTML.

112
00:07:20,860 --> 00:07:26,320
And then the other thing is, I need a context to pass it and remember, the context has to be a dictionary.

113
00:07:26,740 --> 00:07:28,120
So let's make this.

114
00:07:29,440 --> 00:07:33,970
And you don't really have to do it this way and so many steps, but I just kind of showing you what's

115
00:07:33,970 --> 00:07:34,450
up here.

116
00:07:34,810 --> 00:07:38,110
So context list is going to be equal to.

117
00:07:38,680 --> 00:07:43,540
And then I'm going to say the string patients.

118
00:07:44,610 --> 00:07:46,140
And they're going to pass back all.

119
00:07:47,360 --> 00:07:47,960
Patients.

120
00:07:48,960 --> 00:07:51,300
OK, so what is actually happening here?

121
00:07:51,510 --> 00:07:58,320
I'm creating a context list, so to speak, that remember in the actual template, I can then refer

122
00:07:58,320 --> 00:08:04,470
to this as patients, and it's going to have this patient's query set for me so that in here I'm going

123
00:08:04,470 --> 00:08:08,580
to say the context I'm sending back is equal to context.

124
00:08:09,820 --> 00:08:14,920
List, don't be confused by the fact that in this context, underscore list, that's really a reference

125
00:08:14,920 --> 00:08:19,700
to the all patients that live in there versus the actual context dictionary.

126
00:08:19,720 --> 00:08:23,470
In fact, if you wanted to, you could just call this context.

127
00:08:25,020 --> 00:08:28,740
And send it back, and what's so great spelled context incorrectly there.

128
00:08:30,060 --> 00:08:33,570
So again, all I'm doing is I'm grabbing all those patients.

129
00:08:34,230 --> 00:08:38,070
I set it up in a dictionary that way I can send it back as this context object.

130
00:08:38,460 --> 00:08:41,730
And then in my template, I'll be able to refer to patients here.

131
00:08:42,360 --> 00:08:46,680
So again, we're kind of working backwards from what the user actually it starts off with.

132
00:08:47,070 --> 00:08:52,920
And now we in a sense, go all the way back to the front and make sure that this list that each HTML

133
00:08:52,920 --> 00:08:54,930
is ready to accept this context.

134
00:08:55,440 --> 00:08:58,530
So what do actually put that well inside of office?

135
00:08:58,560 --> 00:09:01,230
I'm going to set up my templates folder, so I'll say office.

136
00:09:02,320 --> 00:09:03,130
New folder.

137
00:09:04,500 --> 00:09:12,630
Templates and then inside of this, I'm going to say templates, can you folder here?

138
00:09:13,840 --> 00:09:14,620
Office.

139
00:09:14,980 --> 00:09:19,210
So remember, there's kind of this weird discrepancy, they have to say office templates, office.

140
00:09:19,450 --> 00:09:23,110
You don't necessarily do that, but it is better to do it that way as we discuss story and templates

141
00:09:23,110 --> 00:09:23,560
lectures.

142
00:09:23,950 --> 00:09:29,740
And then inside of office, I'll create a new file and it's going to be called lists start each HTML.

143
00:09:30,340 --> 00:09:31,820
So lists that each HTML.

144
00:09:31,840 --> 00:09:35,020
That's just this HTML file that this is referencing.

145
00:09:35,410 --> 00:09:43,210
I remember it expects a context that is going to have patients, and we already know I can use Django

146
00:09:43,210 --> 00:09:47,350
templating to actually create this using an HTML list.

147
00:09:47,950 --> 00:09:50,710
So let's come back up here and I'm going to set up my doc.

148
00:09:52,150 --> 00:10:00,520
And so let's say documents here, and then I'm going to set up just a very single or very simple Django

149
00:10:00,520 --> 00:10:00,850
template.

150
00:10:01,450 --> 00:10:06,400
Remember, I could be expanding this I could be using based on HTML, I could be using content blocks

151
00:10:06,400 --> 00:10:07,010
and more.

152
00:10:07,300 --> 00:10:09,250
But we're just doing the very basics.

153
00:10:09,460 --> 00:10:17,500
So I have this list of HTML and it expects a context being passed back from views, which is simply

154
00:10:17,500 --> 00:10:19,060
going to call just patients here.

155
00:10:19,180 --> 00:10:23,650
So to keep it extremely simple before we actually make it a little cleaner.

156
00:10:23,680 --> 00:10:24,640
I'm just going to put in.

157
00:10:25,920 --> 00:10:32,370
Patients here, so I'm able to call patients because that's what it is inside this context.

158
00:10:32,790 --> 00:10:35,940
So I'm going to save that change inside of lists that HTML.

159
00:10:36,920 --> 00:10:37,790
Go ahead and save that.

160
00:10:40,130 --> 00:10:43,580
And now let's go ahead and run the server, I'm going to say Python.

161
00:10:44,640 --> 00:10:48,000
Managed not pie run server enter.

162
00:10:49,710 --> 00:10:51,760
And it looks like I made a small typo.

163
00:10:51,780 --> 00:10:54,990
It should have been your URL patterns, not your URLs patterns.

164
00:10:55,290 --> 00:10:55,720
That's OK.

165
00:10:55,770 --> 00:10:58,110
Come back to your URLs and let's fix that.

166
00:10:58,110 --> 00:10:59,820
That shouldn't have been in there.

167
00:11:00,390 --> 00:11:02,070
OK, go ahead and save that change.

168
00:11:02,210 --> 00:11:03,510
And let's run it again.

169
00:11:03,930 --> 00:11:05,670
Looks like we are now good to go.

170
00:11:06,150 --> 00:11:07,590
So I'm going to copy that.

171
00:11:07,890 --> 00:11:10,230
And let's check out that website.

172
00:11:10,530 --> 00:11:14,940
And remember the view or the URLs happening just on office.

173
00:11:16,550 --> 00:11:22,370
So if you just go to that your office, you should see something kind of ugly, but it is actually reporting

174
00:11:22,370 --> 00:11:23,270
back the query set.

175
00:11:23,720 --> 00:11:28,370
So what I would like to do is actually report this back as a list using jingo template.

176
00:11:28,700 --> 00:11:30,580
So I can do that with a simple form.

177
00:11:30,770 --> 00:11:34,160
I can actually loop through the items in this query.

178
00:11:34,400 --> 00:11:37,070
And this is known as a list view of your model.

179
00:11:37,370 --> 00:11:42,500
Remember that idea that models are going to have really common views, like listing all the entries

180
00:11:42,500 --> 00:11:46,160
in a model table database or filtering and then listing them all?

181
00:11:46,430 --> 00:11:50,090
That's going to be something you can do really easily a class-based views, but right now, let's go

182
00:11:50,090 --> 00:11:51,230
ahead and kind of do it by hand.

183
00:11:52,130 --> 00:11:54,590
So how do I set up the jingle for Loop?

184
00:11:54,590 --> 00:11:57,350
We're going to go back to let's start each HTML.

185
00:11:58,260 --> 00:12:01,500
And then and here, I'm going to delete this.

186
00:12:02,420 --> 00:12:04,940
And I will say for.

187
00:12:05,930 --> 00:12:08,120
Let's say person in.

188
00:12:09,460 --> 00:12:10,180
Patients.

189
00:12:12,430 --> 00:12:16,540
And let's remember that if that's actually what it's called, come back to views, and yes, I'm calling

190
00:12:16,540 --> 00:12:17,140
them patients.

191
00:12:17,650 --> 00:12:22,470
So I'm going to say for person in patients and then here I have to end the four.

192
00:12:22,870 --> 00:12:23,920
So say and for.

193
00:12:25,910 --> 00:12:26,480
There you go.

194
00:12:26,900 --> 00:12:33,510
And then the other thing I need to do is make sure that this is going outside of an ordered list or

195
00:12:33,510 --> 00:12:34,190
it doesn't really matter.

196
00:12:34,760 --> 00:12:37,820
But a create an unordered list here may exit that.

197
00:12:38,330 --> 00:12:43,370
Paste it here, and then I'm going to create a list item for every person there.

198
00:12:43,580 --> 00:12:45,850
And let's see what that looks like just by itself.

199
00:12:45,860 --> 00:12:50,300
If I just say list the persons, so I'm going to say L I.

200
00:12:51,050 --> 00:12:52,010
And then here.

201
00:12:53,360 --> 00:12:54,740
We are going to say.

202
00:12:55,990 --> 00:12:56,440
Person.

203
00:12:57,850 --> 00:13:01,360
So save that change, and now we're going to.

204
00:13:01,930 --> 00:13:05,300
Let me refresh this, I'm going to say Python management server again.

205
00:13:05,830 --> 00:13:12,670
And let me bring back that page once it's refreshed, you should see something that looks like this.

206
00:13:13,270 --> 00:13:17,370
It is essentially showing you the string representation of those objects.

207
00:13:17,380 --> 00:13:19,000
Smith Susan is 40 years old.

208
00:13:19,510 --> 00:13:22,240
Bullis, Mamie Smith, Adam Marx, Carl, cetera.

209
00:13:22,540 --> 00:13:24,910
Let's imagine you only wanted one attribute here.

210
00:13:25,390 --> 00:13:26,080
What can you do?

211
00:13:26,140 --> 00:13:33,280
Well, remember these are just objects, so I can say person and I can say last name because these are

212
00:13:33,280 --> 00:13:34,420
the attributes of the model.

213
00:13:35,230 --> 00:13:39,100
And then when I refresh that, if I come back here now, I only see the last name.

214
00:13:39,580 --> 00:13:44,320
So hopefully it starts getting again, the gears turning and you realize, OK, I have a lot of flexibility

215
00:13:44,530 --> 00:13:46,480
with the model objects that I sent back.

216
00:13:47,050 --> 00:13:47,420
OK.

217
00:13:47,890 --> 00:13:54,400
So that is pretty much as far as sending information from the database to the actual template views.

218
00:13:54,730 --> 00:13:59,590
I want to stress here that there are much better ways of doing this once we understand Django forms

219
00:13:59,770 --> 00:14:06,160
and class based views, which is why I want to show you Django forms first before we kind of try to

220
00:14:06,160 --> 00:14:10,390
messily hard code some Tema forms to send data the other way around.

221
00:14:10,420 --> 00:14:15,940
It definitely is possible, but it's just much easier, much cleaner, much better with Django forms

222
00:14:15,940 --> 00:14:18,130
instead of the raw HTML forms.

223
00:14:18,520 --> 00:14:20,110
So keep this kind of in the back of your head.

224
00:14:20,110 --> 00:14:24,940
You still have a ton of capabilities right now, but your life is going to be a lot easier once you

225
00:14:24,940 --> 00:14:29,320
learn about Django forms and class based views instead of these kind of function based views, even

226
00:14:29,320 --> 00:14:32,710
though they can't handle the job and from time to time, you will need to use them.

227
00:14:32,980 --> 00:14:34,900
But there is a lot more to come.

228
00:14:35,290 --> 00:14:41,300
Let me quickly describe everything we just did here, and let's again start kind of backwards.

229
00:14:41,320 --> 00:14:45,530
So what did we do on the project based Earl's file?

230
00:14:45,550 --> 00:14:49,150
I said, OK, connect this to my office URLs.

231
00:14:49,300 --> 00:14:50,040
No problem.

232
00:14:50,050 --> 00:14:51,610
Then what do I do in the office URLs?

233
00:14:51,610 --> 00:14:56,350
File came back here and I said, connect this to views list patients.

234
00:14:56,830 --> 00:15:01,120
Then I said, OK, well, now I have to create a view called list patients come back to views.

235
00:15:01,570 --> 00:15:02,890
And this view is very simple.

236
00:15:02,890 --> 00:15:10,630
It just says, OK, import the patient model, and then I can use all that stuff we discussed about

237
00:15:10,630 --> 00:15:13,420
creating, reading, updating the leading, etc..

238
00:15:13,870 --> 00:15:15,460
So then I grab all patients.

239
00:15:15,460 --> 00:15:20,920
I send it back as a context dictionary, and then I render that inside of list of each HTML.

240
00:15:21,280 --> 00:15:26,200
And then after I set up the directories for lists that each HTML, I can use the Django template language

241
00:15:26,200 --> 00:15:29,470
that we've already learned about to display this however I want.

242
00:15:29,800 --> 00:15:30,160
OK.

243
00:15:30,490 --> 00:15:34,840
So I know we learned a lot, but hopefully you get to see how everything's starting to connect.

244
00:15:35,530 --> 00:15:36,040
Thanks.

245
00:15:36,070 --> 00:15:37,360
And I'll see you at the next lecture.