1
00:00:05,200 --> 00:00:09,970
Welcome back, everyone, to this lecture where we're going to review how to create a website that uses

2
00:00:09,970 --> 00:00:10,570
models.

3
00:00:12,180 --> 00:00:16,470
What we're going to do is we're going to create an online website that sells cars and then later on,

4
00:00:16,740 --> 00:00:20,430
we can use this website to actually test out the admin panel.

5
00:00:20,730 --> 00:00:25,020
But in order to understand the admin panel completely, we do need some sort of website that is using

6
00:00:25,020 --> 00:00:30,720
models to do this or to create a very simple landing page that can report back what cars we have in

7
00:00:30,720 --> 00:00:31,170
stock.

8
00:00:31,320 --> 00:00:37,080
You can think of this as just an HTML list of all the rows in a database connected to a model.

9
00:00:37,560 --> 00:00:41,250
Then we're also going to want a way to add or remove cars from our inventory.

10
00:00:41,670 --> 00:00:46,770
This is essentially going to be two other templates to have a form for adding a new car and the form

11
00:00:46,770 --> 00:00:48,060
for removing a car.

12
00:00:49,340 --> 00:00:53,300
Keep in mind, everything's shown in this lecture should feel like a review of past concepts.

13
00:00:53,480 --> 00:00:56,150
We're not actually going to introduce the administration panel yet.

14
00:00:56,600 --> 00:01:00,530
So technically speaking, we're not going to take too much time to review the details of what we do

15
00:01:00,530 --> 00:01:02,930
here since we've pretty much seen it all before.

16
00:01:04,170 --> 00:01:08,430
Well, we're going to do now is create templates, create views that actually render those templates,

17
00:01:08,760 --> 00:01:14,190
connect with the URLs, create a model for cars and then we'll test some creative functionality as a

18
00:01:14,190 --> 00:01:14,610
quick point.

19
00:01:14,640 --> 00:01:19,290
We're not actually going to worry about updating the cars will simply create, read or delete cars from

20
00:01:19,290 --> 00:01:20,070
our database.

21
00:01:20,460 --> 00:01:21,120
Let's get started.

22
00:01:21,210 --> 00:01:21,480
All right.

23
00:01:21,510 --> 00:01:22,090
Here I am.

24
00:01:22,110 --> 00:01:25,980
I have an empty folder called Django Lectures underneath my desktop.

25
00:01:26,310 --> 00:01:27,660
Let's create a new project.

26
00:01:27,690 --> 00:01:34,740
Remember we say Django Admin Start Project, and for this project, I will go ahead and start it by

27
00:01:34,740 --> 00:01:37,200
just saying my car site.

28
00:01:38,850 --> 00:01:44,220
OK, so I have my car right here, and then I also want to do is create an application within it to

29
00:01:44,220 --> 00:01:44,560
do that.

30
00:01:44,580 --> 00:01:51,270
I'll say Python managed a pie start app and the name of our app is going to be cars.

31
00:01:52,740 --> 00:01:56,580
And looks like we accidentally forgot to CD into my car site.

32
00:01:57,900 --> 00:02:02,460
So I'm going to change directory into my car site, and then I should be able to run that Python managed

33
00:02:02,460 --> 00:02:03,690
up my startup cars.

34
00:02:05,010 --> 00:02:05,760
OK, there we go.

35
00:02:05,790 --> 00:02:06,930
So now I see cars here.

36
00:02:07,320 --> 00:02:10,860
So remember, you need to be inside the same directory as this managed is pipe file.

37
00:02:11,460 --> 00:02:14,040
So I have cars and I have my car site.

38
00:02:14,370 --> 00:02:20,880
The other thing I'm going to do is create a templates folder to hold a basic HTML template file that

39
00:02:20,880 --> 00:02:22,230
I can later inherit from.

40
00:02:22,650 --> 00:02:30,840
So at the same level directory as cars in my car site, I will create a new folder and call it templates,

41
00:02:31,290 --> 00:02:36,000
and we'll create a new file here and I'll call it basic HTML.

42
00:02:36,510 --> 00:02:38,670
So this is a review of template inheritance.

43
00:02:38,670 --> 00:02:39,840
I'm going to fill this out later.

44
00:02:39,850 --> 00:02:41,370
I won't worry about it for right now.

45
00:02:42,150 --> 00:02:44,850
What I need to do is have three template views.

46
00:02:45,270 --> 00:02:51,030
I personally like to start from the user side of things and then work my way backwards to the models,

47
00:02:51,240 --> 00:02:52,920
especially for explanatory purposes.

48
00:02:53,250 --> 00:02:57,840
Some people, especially when they're just developing solo, like the start from the models and then

49
00:02:57,840 --> 00:03:01,620
push out forwards to the views, URLs and then templates.

50
00:03:02,250 --> 00:03:06,000
And then some people like to kind of mix and match and develop both simultaneously.

51
00:03:06,240 --> 00:03:10,500
There really is no right or wrong way to do this, but for explanatory purposes, I think it's a little

52
00:03:10,500 --> 00:03:14,550
easier for me to start from the template side of things and the user interaction.

53
00:03:14,560 --> 00:03:15,570
So that's where I'm going to start.

54
00:03:16,110 --> 00:03:21,120
Underneath cars, I will create a new folder called templates.

55
00:03:22,650 --> 00:03:26,130
And then underneath that, I'll create another folder called Cars.

56
00:03:26,610 --> 00:03:27,780
Remember, this is the convention.

57
00:03:28,230 --> 00:03:30,250
And let's create three templates.

58
00:03:30,270 --> 00:03:31,760
One, it's going to be list each HTML.

59
00:03:32,100 --> 00:03:34,110
Another is going to be ad html.

60
00:03:34,110 --> 00:03:36,090
And another one will be the HTML.

61
00:03:36,180 --> 00:03:37,350
So we'll say new file.

62
00:03:38,420 --> 00:03:39,530
At each tlmo.

63
00:03:40,940 --> 00:03:44,990
We'll create a new file, delete each HTML.

64
00:03:46,390 --> 00:03:55,960
And we'll create a final file called we want to add a car list to OK, so list, delete and add, and

65
00:03:55,960 --> 00:03:57,550
for right now, we'll just keep those all blank.

66
00:03:57,560 --> 00:03:58,690
I'll fill them out in a second.

67
00:03:58,900 --> 00:04:03,910
Once I filled out the basic HTML, but I also want to make sure that these are being connected through

68
00:04:03,910 --> 00:04:06,100
a view and a URL route.

69
00:04:06,670 --> 00:04:12,400
So to do that will come to views that pi inside of cars, and I'll create three simple views.

70
00:04:12,580 --> 00:04:18,220
One is going to be the list view that is simply, in fact, let's just call it list.

71
00:04:19,149 --> 00:04:26,410
It's going to take in the request, and it's going to return the rendering based off that request.

72
00:04:27,010 --> 00:04:33,670
And it's going to be cars forward slash and then the actual template for listing is called list HTML.

73
00:04:34,240 --> 00:04:34,580
All right.

74
00:04:34,600 --> 00:04:37,810
And we're going to create three more views like that.

75
00:04:38,230 --> 00:04:39,280
We have a list of you.

76
00:04:39,790 --> 00:04:41,470
I'm going to copy and paste this.

77
00:04:43,080 --> 00:04:47,820
And let's make this one now at so we'll change it from list to add.

78
00:04:48,880 --> 00:04:51,640
And we're going to create one more collapse this a little bit here.

79
00:04:53,460 --> 00:04:59,670
One more that instead of listing or or adding it's going to be removing or I think I called the delete,

80
00:04:59,670 --> 00:05:00,900
so let's just call it delete.

81
00:05:01,970 --> 00:05:04,490
And we'll call this deletes h html.

82
00:05:05,060 --> 00:05:05,390
All right.

83
00:05:05,450 --> 00:05:09,290
We will have to fill these out later and actually have some interactivity with a model.

84
00:05:09,590 --> 00:05:12,050
But for right now, there is no models yet to speak of.

85
00:05:12,230 --> 00:05:13,730
So we'll just keep on like this.

86
00:05:14,210 --> 00:05:16,010
Let's connect these to a URL.

87
00:05:16,310 --> 00:05:25,580
So we'll say inside of cars, so cars, new file URLs, dot pi and let's connect that.

88
00:05:25,580 --> 00:05:30,500
So we say from Django that URLs import path.

89
00:05:31,640 --> 00:05:34,600
Later on, I will want to use Django URL names.

90
00:05:34,610 --> 00:05:40,310
So I'm going to say that my app name up here is equal to cars, which matches my folder name.

91
00:05:41,370 --> 00:05:43,440
And then let's create our URL patterns.

92
00:05:44,040 --> 00:05:44,970
Remember, this is a list.

93
00:05:45,480 --> 00:05:47,850
And inside this list, I simply have.

94
00:05:49,010 --> 00:05:53,780
The paths, so this path is going to be a list.

95
00:05:54,530 --> 00:06:03,710
Forward slash and I need to import the views, so we'll say from dot import views, this will then allow

96
00:06:03,710 --> 00:06:07,220
me to do the following views dot list.

97
00:06:07,430 --> 00:06:08,670
So I have my list of you there.

98
00:06:09,140 --> 00:06:10,280
And let's give it a name.

99
00:06:10,760 --> 00:06:12,440
I'm just going to mark the names list.

100
00:06:12,920 --> 00:06:15,170
So hopefully it's pretty obvious what's happening.

101
00:06:15,320 --> 00:06:19,250
I'm just setting up my URL patterns to be the list.

102
00:06:19,340 --> 00:06:26,540
So this is technically then going to be something like domain dot com slash cars slash list, add or

103
00:06:26,540 --> 00:06:26,900
delete.

104
00:06:27,170 --> 00:06:29,390
Those are essentially the only three pages on our website.

105
00:06:29,810 --> 00:06:31,600
So let's do this one more time.

106
00:06:31,610 --> 00:06:33,140
I'm just going to copy and paste this here.

107
00:06:35,250 --> 00:06:36,450
And copy and paste it again.

108
00:06:36,690 --> 00:06:39,270
And let's set it up for the other views, so it's ad.

109
00:06:40,870 --> 00:06:41,350
Add.

110
00:06:42,690 --> 00:06:43,110
At.

111
00:06:44,100 --> 00:06:52,500
And this one's going to be it's actually delete, delete views, delete here and then delete.

112
00:06:52,980 --> 00:06:55,010
OK, so so far, so good.

113
00:06:55,020 --> 00:06:58,530
I have my usual patterns ready to go and I have HTML files.

114
00:06:58,860 --> 00:07:01,620
There's technically empty right now, but I'll fix that in just a second.

115
00:07:02,070 --> 00:07:04,880
The views are simply rendering those HTML files.

116
00:07:04,890 --> 00:07:09,660
What I want to make sure is that my settings and the project level URLs is OK.

117
00:07:10,230 --> 00:07:12,450
So what I'll do is I'm going to come to.

118
00:07:13,880 --> 00:07:22,070
Underneath my car site, my car site, come to the URLs that profile here, and let's set up the path,

119
00:07:22,400 --> 00:07:26,690
remember to include another URL configuration I have to import include.

120
00:07:27,560 --> 00:07:29,540
So I'm going to import include.

121
00:07:30,530 --> 00:07:32,630
And then here I'm going to create a new path.

122
00:07:34,100 --> 00:07:36,740
This path is going to be cars forward slash.

123
00:07:37,220 --> 00:07:39,720
Note here that there's already an advent path for that.

124
00:07:39,740 --> 00:07:41,000
We'll be exploring that later on.

125
00:07:42,350 --> 00:07:47,480
And then what I need to do is include and then as a string, cars thought euros.

126
00:07:49,130 --> 00:07:55,700
OK, then we want to make sure that our application and our templates are all connected inside the project

127
00:07:55,700 --> 00:08:01,910
level settings that pie file, remember for actually registering the application as an installed app.

128
00:08:02,240 --> 00:08:08,840
We come to class apps that PI that's already created for you, and you check out that it has a configuration

129
00:08:08,840 --> 00:08:09,680
name already here.

130
00:08:10,070 --> 00:08:13,250
So this is under cars, the apps that cars config.

131
00:08:13,670 --> 00:08:18,980
So I'm going to come to settings that pi and add that in to installed apps.

132
00:08:19,730 --> 00:08:27,140
So a new string here that says cars, the apps dot and then remember, it's underneath apps.

133
00:08:27,140 --> 00:08:28,770
We want cars config.

134
00:08:28,910 --> 00:08:29,990
So that's what I'm adding here.

135
00:08:30,680 --> 00:08:32,390
Cars config.

136
00:08:32,659 --> 00:08:34,100
And then I'm going to add a comma.

137
00:08:34,400 --> 00:08:35,419
Don't forget that comma.

138
00:08:35,450 --> 00:08:36,799
Kind of a tough one to debug.

139
00:08:38,000 --> 00:08:43,640
The other thing is, I want to make sure this templates directory at a project level is already associated

140
00:08:43,640 --> 00:08:44,360
in site settings.

141
00:08:44,360 --> 00:08:49,640
That pie, if you scroll down, remember, we have app directories is true, so we don't need to do

142
00:08:49,640 --> 00:08:52,730
any additional registration for the templates inside our application.

143
00:08:53,000 --> 00:08:57,710
However, I do need to register this as a top level template directory, basically telling Django,

144
00:08:57,920 --> 00:09:00,050
Hey, look in this folder for templates.

145
00:09:00,740 --> 00:09:05,090
Technically, you could use the Base Directory forward slash templates.

146
00:09:05,570 --> 00:09:10,790
I prefer the more old school way which is importing OS and then using OS path join.

147
00:09:11,630 --> 00:09:12,510
Either is OK.

148
00:09:12,530 --> 00:09:15,470
You can build paths like this or build paths using OS.

149
00:09:16,070 --> 00:09:22,250
So I'm going to come down here and just add that path to my directory will say, OS that path join and

150
00:09:22,250 --> 00:09:28,070
I'm going to join my base underscore directory with the templates folder.

151
00:09:28,910 --> 00:09:30,100
Go ahead and save that.

152
00:09:30,110 --> 00:09:35,600
And now Django is going to make sure to look underneath templates in order to have basic HTML.

153
00:09:36,290 --> 00:09:41,450
So the only thing I have left here as far as templates are concerned, is to connect base each HTML

154
00:09:41,960 --> 00:09:43,760
to these other templates.

155
00:09:43,910 --> 00:09:46,670
Inside cars add, delete and list.

156
00:09:47,330 --> 00:09:49,040
So we'll come to base each HTML.

157
00:09:49,160 --> 00:09:56,180
And what I'm going to do in my basic HTML is set up a bootstrap navigation bar.

158
00:09:56,360 --> 00:09:57,920
This is actually pretty simple to do.

159
00:09:58,430 --> 00:10:01,670
First things first, we set up the base dock.

160
00:10:02,060 --> 00:10:04,520
Let me collapse the explorer so we can see this.

161
00:10:04,970 --> 00:10:06,830
I want to add in the links to bootstrap.

162
00:10:06,980 --> 00:10:08,030
That's easy enough to do.

163
00:10:08,030 --> 00:10:10,820
I just come to bootstrap or get bootstrap BCom.

164
00:10:11,910 --> 00:10:13,740
I come over here to just deliver.

165
00:10:13,980 --> 00:10:16,530
Let's copy the CSIS and JavaScript links.

166
00:10:17,010 --> 00:10:19,470
Put them inside the head of the table.

167
00:10:19,950 --> 00:10:21,330
So that's the CSIS link.

168
00:10:21,480 --> 00:10:23,790
And then let's grab the JavaScript link as well.

169
00:10:24,700 --> 00:10:28,180
Although keep in mind, this is technically just the NAF bar that we're using here.

170
00:10:28,540 --> 00:10:30,400
Not going to really run any JavaScript.

171
00:10:30,850 --> 00:10:36,180
So we have CSS and JavaScript, and then I want to set up my nav bar.

172
00:10:36,190 --> 00:10:43,990
So Nafaa, it's going to go up here and then I'll set up my content blocks down here.

173
00:10:44,500 --> 00:10:46,780
So let's set that up now, the content.

174
00:10:48,310 --> 00:10:52,810
So we'll say Block, and I'm going to call this my content block.

175
00:10:53,870 --> 00:10:55,610
And then let's set up our.

176
00:10:56,600 --> 00:10:57,410
And block.

177
00:10:58,190 --> 00:11:04,250
OK, so we have block content and block and then a nav bar outside of it that I can then actually have

178
00:11:04,250 --> 00:11:07,340
that be extended to the other pages.

179
00:11:07,700 --> 00:11:11,540
So here what we're going to do, then we'll go back to bootstrap.

180
00:11:11,660 --> 00:11:14,960
I'm going to go to docs, then I'm going to go to components.

181
00:11:15,860 --> 00:11:17,930
Scroll down until you see NAV Bar.

182
00:11:18,560 --> 00:11:21,470
And this is the component we're going to be using.

183
00:11:21,930 --> 00:11:24,470
And there's lots of different things you can use here as a base.

184
00:11:24,860 --> 00:11:30,800
Probably the simplest one is if you scroll all the way down to NAV Bar, you could use this item list

185
00:11:30,800 --> 00:11:31,270
method.

186
00:11:31,280 --> 00:11:35,480
But because of the fact that they're also using classes, you technically could use this simpler call.

187
00:11:35,810 --> 00:11:40,880
I won't need this nav bar brand button, and I won't need this disabled or really home button.

188
00:11:40,880 --> 00:11:43,910
Really, all I want is the things that look like features and pricing.

189
00:11:44,330 --> 00:11:46,550
So I will copy this whole thing and then delete what I don't need.

190
00:11:46,910 --> 00:11:47,690
So I'll copy that.

191
00:11:48,530 --> 00:11:54,620
Let's put in the NAF bar outside the block, and then I'm going to delete this disabled link and I'm

192
00:11:54,620 --> 00:11:56,660
going to delete this home.

193
00:11:57,500 --> 00:12:02,780
And I also don't need this nav bar brand link, and instead we'll just have these links.

194
00:12:03,110 --> 00:12:10,460
One is going to be for the list, one is going to be for AD, and then let's copy and paste one more

195
00:12:10,460 --> 00:12:11,180
for delete.

196
00:12:13,000 --> 00:12:17,440
Keep in mind is actually it won't redirect anywhere because I haven't added in the URL names list.

197
00:12:18,040 --> 00:12:25,180
So remember, if we come back to you URLs that pay at the application level, I did give these all a

198
00:12:25,180 --> 00:12:30,440
name, which means I should be able to refer to these using URL names in Django.

199
00:12:31,030 --> 00:12:34,840
And we cover this back when we talked about templates, filters and tags.

200
00:12:35,320 --> 00:12:39,250
We have the app name and then the specific path name.

201
00:12:39,730 --> 00:12:42,040
So we just come back to base each HTML.

202
00:12:42,670 --> 00:12:49,180
Let me collapse explorer and inside of each breath, I use my tags here.

203
00:12:50,180 --> 00:12:55,800
So Curly braces, two percent signs call euro space.

204
00:12:56,480 --> 00:13:04,310
And then quotes here for the name of the app is cars colon and then this is the name of the list was

205
00:13:04,610 --> 00:13:06,410
or excuse me, the name of the view was list.

206
00:13:06,890 --> 00:13:08,750
So now I get to copy and paste this.

207
00:13:09,880 --> 00:13:11,680
For add and delete.

208
00:13:13,680 --> 00:13:17,280
And we'll call this ad and we'll call this the delete.

209
00:13:19,230 --> 00:13:19,560
All right.

210
00:13:20,100 --> 00:13:23,220
Save those changes, your navar should now be ready to go.

211
00:13:23,610 --> 00:13:27,030
Now we just need to add it and extend it into the other HTML files.

212
00:13:27,540 --> 00:13:28,710
So we'll come back to explore.

213
00:13:29,160 --> 00:13:33,210
And let's quickly open up the ad delete and list.

214
00:13:33,660 --> 00:13:35,550
And all these will say the following.

215
00:13:36,450 --> 00:13:42,930
Curly braces percent science extends and then we'll say it extends basic HTML.

216
00:13:42,940 --> 00:13:46,320
Don't forget the quotes there, and then we'll set up our block.

217
00:13:47,070 --> 00:13:51,300
So again, percent science there say block.

218
00:13:52,390 --> 00:13:55,780
Content and then don't forget to end the block.

219
00:13:56,860 --> 00:13:59,580
So then we'll say end the block coming.

220
00:13:59,620 --> 00:14:02,380
Copy and paste this into the other ones real quick.

221
00:14:02,980 --> 00:14:05,290
So they're all going to be extending basic HTML.

222
00:14:06,900 --> 00:14:08,190
Let's go and paste that in as well.

223
00:14:09,510 --> 00:14:12,330
And then the question is, what do we actually want in here?

224
00:14:12,690 --> 00:14:16,860
Well, later on, we will be adding in more code, but for right now, just make sure everything is

225
00:14:16,860 --> 00:14:18,240
working on a set list.

226
00:14:19,750 --> 00:14:20,350
HTML.

227
00:14:21,440 --> 00:14:30,980
On the list, page will say hitting one delete each HTML on the delete page and then here on air.

228
00:14:31,340 --> 00:14:34,670
Have heading one that says AD.

229
00:14:35,840 --> 00:14:37,220
Each time on this page.

230
00:14:37,610 --> 00:14:37,970
OK.

231
00:14:38,540 --> 00:14:42,470
So make sure you save all those changes, don't forget to save them across different files.

232
00:14:42,860 --> 00:14:43,890
And let's run this.

233
00:14:43,910 --> 00:14:45,100
Make sure everything's working.

234
00:14:45,170 --> 00:14:49,680
Say Python managed not pie run server and turn.

235
00:14:49,730 --> 00:14:51,020
Make sure we don't make any typos.

236
00:14:51,170 --> 00:14:52,220
Looks like that's working.

237
00:14:52,550 --> 00:14:55,340
Let me go to my browser and go to that link.

238
00:14:55,680 --> 00:15:01,160
Remember, it's one two seven zero zero one, and then the default port was 8000.

239
00:15:01,550 --> 00:15:04,220
However, if you just go to that in your browser.

240
00:15:04,370 --> 00:15:09,530
So remember, if you just go to that in your browser, you should get a 404 because everything is defined

241
00:15:09,530 --> 00:15:13,670
later on and cars forward slash list add and delete.

242
00:15:14,150 --> 00:15:16,640
So I'm super zoomed in here, but we do see list each HTML.

243
00:15:17,090 --> 00:15:18,950
And then let's make sure enough Bar is working.

244
00:15:19,070 --> 00:15:23,090
I should be able to now click, add and get taken to the add html perfect.

245
00:15:23,690 --> 00:15:26,930
Expand this go to delete and I'm on delete HTML.

246
00:15:27,500 --> 00:15:32,450
Now we have some nice functionality with our nav bar and it looks good because of bootstrap.

247
00:15:32,780 --> 00:15:35,060
I am super zoomed in here and not using any container.

248
00:15:35,060 --> 00:15:40,070
So clearly this isn't the best looking site, but it definitely doesn't look too bad given the fact

249
00:15:40,070 --> 00:15:41,650
that this is just almost raw.

250
00:15:41,660 --> 00:15:42,260
It's HTML.

251
00:15:42,830 --> 00:15:48,380
And now let's connect to the models and set up these forms lectures running a little long.

252
00:15:48,380 --> 00:15:50,390
So we'll do that in Part two in the next lecture.

253
00:15:50,660 --> 00:15:51,170
I'll see you there.