1
00:00:05,410 --> 00:00:11,020
Welcome back, everyone, to part two of creating the website and the models that will later on be analyzing

2
00:00:11,020 --> 00:00:12,180
through the admin panel.

3
00:00:13,230 --> 00:00:18,060
So so far, we've completed some very basic views that essentially just report back the rendering of

4
00:00:18,060 --> 00:00:18,770
the HTML.

5
00:00:19,080 --> 00:00:24,000
We completed the basic URL routing, created a general navigation bar and then we have a list of empty

6
00:00:24,000 --> 00:00:25,950
templates list, add and delete.

7
00:00:27,180 --> 00:00:30,210
Now we're going to do is we're going to create a very simple car model.

8
00:00:30,240 --> 00:00:32,820
It's just going to have a brand and a year associated with it.

9
00:00:33,300 --> 00:00:37,530
Then we're going to add some functionality to the views to actually connect to the model using what

10
00:00:37,530 --> 00:00:43,980
we already know about model and objects and being able to request or delete or get a list of them.

11
00:00:44,370 --> 00:00:46,470
And then finally, this is the last part.

12
00:00:46,530 --> 00:00:51,600
And it's also kind of the hardest we need to create HTML forms to send information back to the views.

13
00:00:51,900 --> 00:00:58,290
That way, we can actually add in a new object directly from the HTML as a client user on the browser

14
00:00:58,290 --> 00:00:58,650
side.

15
00:01:00,030 --> 00:01:05,220
A really important note before we continue is the methods shown here are going to be using, quote unquote

16
00:01:05,220 --> 00:01:11,460
raw HTML forms that we learned about in the HTML section to accept user information regarding a model

17
00:01:11,460 --> 00:01:12,150
in the database.

18
00:01:12,510 --> 00:01:14,130
And they're really not ideal.

19
00:01:14,520 --> 00:01:18,390
Later on, we're going to learn about the Django form system, which is much, much better.

20
00:01:19,080 --> 00:01:21,560
So don't worry too much about having to apply.

21
00:01:21,580 --> 00:01:26,610
We're going to show here to your jingo projects later on because in the very next section of the course,

22
00:01:26,610 --> 00:01:31,110
we're going to learn about jingle forms, which makes this entire process of trying to create a forum

23
00:01:31,110 --> 00:01:32,610
to accept information from the user.

24
00:01:32,850 --> 00:01:33,810
Super easy.

25
00:01:34,170 --> 00:01:40,170
However, since we technically don't know about that yet, I'm going to stick to just basic HTML forms.

26
00:01:40,200 --> 00:01:44,790
It's not too bad, but the jingle forms are really much cleaner and much nicer, much better.

27
00:01:45,210 --> 00:01:46,280
OK, let's get started.

28
00:01:46,290 --> 00:01:48,960
I'm going to jump right back in where we left off last time.

29
00:01:49,170 --> 00:01:49,520
All right.

30
00:01:49,530 --> 00:01:51,720
So here we are, back where we left off last time.

31
00:01:51,720 --> 00:01:54,050
We have these views, which are very simple.

32
00:01:54,060 --> 00:01:55,580
They just connect to the HTML.

33
00:01:55,860 --> 00:01:59,400
We will be editing these views and the corresponding HTML.

34
00:01:59,640 --> 00:02:00,900
Later on in this lecture.

35
00:02:01,140 --> 00:02:04,830
But first, let's actually create the model that we're going to be working with.

36
00:02:05,340 --> 00:02:11,160
So we're going to come to models that pie and I'm going to create an instance of the car model.

37
00:02:11,220 --> 00:02:17,370
So I'm going to say class car and let's inherit from models thought model.

38
00:02:17,910 --> 00:02:20,130
This is going to be a very simple model.

39
00:02:20,490 --> 00:02:25,830
Recall that models by default are going to be able to have a primary key associated with them.

40
00:02:26,130 --> 00:02:31,320
That's what we're going to use as our unique identifier, so we won't need to actually add that in ourselves

41
00:02:31,320 --> 00:02:31,920
instead.

42
00:02:32,280 --> 00:02:36,780
We'll let the user define a car by specifying a brand and a year.

43
00:02:37,590 --> 00:02:45,240
So I will say brand is equal to models that and that will be a character field, let's say, with a

44
00:02:45,270 --> 00:02:48,510
max length of 30 characters.

45
00:02:49,970 --> 00:02:54,920
Next is going to be a year attribute that's going to be an integer field.

46
00:02:56,550 --> 00:03:01,740
And lastly, we want to have some sort of string representation of a car that way when we display on

47
00:03:01,740 --> 00:03:02,430
the HTML.

48
00:03:02,670 --> 00:03:03,900
I can actually see something.

49
00:03:04,410 --> 00:03:11,100
So I'll say the f underscore, underscore S.T.A.R. underscore, underscore, underscore, underscore

50
00:03:11,130 --> 00:03:12,900
the RICO percent self.

51
00:03:14,040 --> 00:03:17,610
And then I'm just going to return using f string literal formatting.

52
00:03:18,060 --> 00:03:19,530
Car is.

53
00:03:19,830 --> 00:03:26,130
And let's go ahead and say self-taught brand space self-taught year.

54
00:03:30,760 --> 00:03:31,120
OK.

55
00:03:31,210 --> 00:03:32,380
Save those changes.

56
00:03:32,710 --> 00:03:35,300
So what I have so far is a really simple car class.

57
00:03:35,320 --> 00:03:40,300
It's going to have an index based off a primary key when it's created starting at one and then it's

58
00:03:40,300 --> 00:03:44,200
going to have a brand in a year that do need to be defined when we actually create a new instance of

59
00:03:44,200 --> 00:03:44,590
a car.

60
00:03:44,830 --> 00:03:48,310
We don't need to worry about the primary key, as we already know from our discussion of models.

61
00:03:48,520 --> 00:03:50,020
That's automatically created for you.

62
00:03:50,560 --> 00:03:55,660
So let's go ahead and make migrations for models, and then we'll just migrate everything.

63
00:03:56,230 --> 00:03:58,780
So I'm going to say Python.

64
00:04:00,350 --> 00:04:01,430
Manage that pie.

65
00:04:03,020 --> 00:04:04,820
Make migrations.

66
00:04:05,860 --> 00:04:08,170
And then I'm going to do it for the Cars app.

67
00:04:09,410 --> 00:04:10,040
Hit enter.

68
00:04:10,760 --> 00:04:16,250
It should have created a new migration file for you, initialed that you can confirm that by Checking

69
00:04:16,250 --> 00:04:20,579
Under Migrations folder, we have our initial Dot Pi migration notice again.

70
00:04:20,600 --> 00:04:25,640
It has Automatic ID primary key created for us and that it has the brand and the year.

71
00:04:26,420 --> 00:04:29,360
So once that's done, let's actually run the migrations.

72
00:04:29,360 --> 00:04:30,140
So we're going to say.

73
00:04:31,420 --> 00:04:32,050
Python.

74
00:04:33,480 --> 00:04:39,600
Manage that pie, migrate, and when you enter here, you should actually see a bunch of migrations.

75
00:04:39,900 --> 00:04:45,900
You're going to see all the migrations for administration, authentication authorization and then cars

76
00:04:45,900 --> 00:04:47,280
as well as well as sessions.

77
00:04:47,580 --> 00:04:49,260
So you should see a bunch of those there.

78
00:04:49,740 --> 00:04:53,610
As I mentioned before, sometimes you just run, migrate right off the bat, then create your models,

79
00:04:53,610 --> 00:04:55,230
then make migrations, then migrate.

80
00:04:55,410 --> 00:04:58,500
I just did it all in one step there, so it should be see a bunch of migrations.

81
00:04:58,770 --> 00:05:02,970
Just make sure it's confirmed that you were able to apply your initial cars migration.

82
00:05:03,330 --> 00:05:08,120
After you do that, you should also see somewhere around here DB that SQL like three.

83
00:05:08,130 --> 00:05:09,900
That's where we're going to be storing the data.

84
00:05:10,590 --> 00:05:12,880
So we have our models ready to go.

85
00:05:12,930 --> 00:05:19,260
Now it's just a matter of editing the views in order to list all the cars, add new cars and delete

86
00:05:19,260 --> 00:05:19,620
cars.

87
00:05:20,040 --> 00:05:22,470
Let's start off with the simplest one, which should be listing.

88
00:05:23,010 --> 00:05:29,700
So we'll come back to views and then we're going to do is be able to create a request for all the cars,

89
00:05:29,970 --> 00:05:33,870
send it back as a context object to list thought HTML.

90
00:05:34,530 --> 00:05:36,320
So from views that pie.

91
00:05:37,390 --> 00:05:44,500
What I'm going to do here is, say, the following I will say from the import models.

92
00:05:46,050 --> 00:05:54,540
And then I'm going to say the list of all the cars is equal to models, the car, the objects, the

93
00:05:54,540 --> 00:05:54,930
all.

94
00:05:56,100 --> 00:06:00,210
So remember, we actually finished the model's lecture by showing you a little example like this.

95
00:06:00,600 --> 00:06:05,130
Remember all cars that's going to be all the car objects we currently have in our database.

96
00:06:05,730 --> 00:06:08,970
But to send it back to list the HTML, I do need this to be a dictionary.

97
00:06:09,450 --> 00:06:14,660
So I will say that my context dictionary is just going to be a key.

98
00:06:14,670 --> 00:06:18,360
All cars that matches up with all cars, the variable.

99
00:06:19,400 --> 00:06:21,230
And then I send back context.

100
00:06:22,750 --> 00:06:24,040
Equal to context.

101
00:06:25,830 --> 00:06:26,160
OK.

102
00:06:26,790 --> 00:06:29,610
Go ahead and save that change now list.

103
00:06:29,850 --> 00:06:35,520
HTML does need to be updated to actually expect this context and list out all the cars there.

104
00:06:36,060 --> 00:06:37,260
So how do we do that?

105
00:06:37,290 --> 00:06:39,930
We're going to come back to list that HTML.

106
00:06:40,560 --> 00:06:43,200
So let me open that up and explore the Riko list.

107
00:06:43,440 --> 00:06:43,860
HTML.

108
00:06:44,280 --> 00:06:46,440
So far, it just says lists HTML.

109
00:06:46,800 --> 00:06:53,310
Well, we want to do is let's create a div here, and I'm going to give this div a container class because

110
00:06:53,310 --> 00:06:54,870
we remember we are using bootstrap.

111
00:06:55,110 --> 00:06:59,340
I do extend it from basic HTML heading one.

112
00:07:00,380 --> 00:07:03,560
Inside this container just for organization purposes.

113
00:07:04,010 --> 00:07:09,860
And then after that, I'm just going to build out an unordered list, so I'll say unordered list, and

114
00:07:09,860 --> 00:07:15,680
then we use the for loop, really for Django template tag.

115
00:07:15,830 --> 00:07:19,970
We're going to say for car in all cars.

116
00:07:21,630 --> 00:07:24,810
Then we'll create a list item, which itself.

117
00:07:26,120 --> 00:07:28,130
Is going to be that car object.

118
00:07:29,750 --> 00:07:32,180
And remember, for every four, we have to end the four.

119
00:07:33,530 --> 00:07:34,760
So I call end for.

120
00:07:37,110 --> 00:07:38,430
And this should actually be one word.

121
00:07:38,940 --> 00:07:39,390
There we go.

122
00:07:40,050 --> 00:07:45,510
So we've actually seen this example before, again, all we're saying is here's this h html create an

123
00:07:45,510 --> 00:07:51,430
unordered list and then create as many list items as necessary for every car in all cars.

124
00:07:51,450 --> 00:07:52,620
What is all cars?

125
00:07:53,040 --> 00:07:55,350
After you save that change, you can come back here and check it out.

126
00:07:55,740 --> 00:08:02,730
All cars is simply the key value pairing here, which is going to be models that car objects to all.

127
00:08:03,270 --> 00:08:04,680
So that's the list view.

128
00:08:05,190 --> 00:08:10,140
Technically speaking, I could just run the website right now, but I wouldn't actually see any results

129
00:08:10,140 --> 00:08:14,520
because we haven't added anything manually into our database.

130
00:08:14,910 --> 00:08:22,200
So let's now move on to a slightly more complex task, which is how do we actually add in a new car

131
00:08:22,500 --> 00:08:24,580
given the HTML?

132
00:08:25,350 --> 00:08:27,390
So this one's slightly more complicated.

133
00:08:27,870 --> 00:08:32,520
This one actually probably makes more sense to now start off from the HTML side of things.

134
00:08:33,030 --> 00:08:36,330
That way, I can set up my form and understand what I'm actually sending back.

135
00:08:36,929 --> 00:08:43,080
So we're going to open up, add HTML and keep in mind, we're later on going to learn how to use jingle

136
00:08:43,080 --> 00:08:44,850
forms to do this and a much cleaner fashion.

137
00:08:45,300 --> 00:08:48,300
But I'm just going to set up a div here again.

138
00:08:48,310 --> 00:08:51,120
Let's have it be class container, so it looks a little nicer.

139
00:08:53,520 --> 00:08:55,890
I'll put an ad HTML inside this container.

140
00:08:58,370 --> 00:09:04,580
And then what we need to do is set up a form, so right below this each one, what I'll do is start

141
00:09:04,580 --> 00:09:05,840
creating a form.

142
00:09:07,010 --> 00:09:13,310
And then this form essentially has a couple of main inputs, we need it to accept a brand except a year

143
00:09:13,310 --> 00:09:14,960
and then have a submit button.

144
00:09:15,560 --> 00:09:19,770
So for that, I am going to say input.

145
00:09:20,150 --> 00:09:21,620
And let's also make a label.

146
00:09:22,490 --> 00:09:30,140
For this input, and in fact, let's put this entire label input grouping inside a div in case you want

147
00:09:30,140 --> 00:09:32,420
to separate out for styling purposes later.

148
00:09:33,080 --> 00:09:35,330
So what I did here?

149
00:09:36,250 --> 00:09:37,660
Is I have now.

150
00:09:38,620 --> 00:09:44,680
A div and inside of that div is a label and put this first one is going to be for brand.

151
00:09:45,130 --> 00:09:46,690
I'm going to copy and paste it again.

152
00:09:47,980 --> 00:09:50,650
And the second one will be for the year of the car.

153
00:09:50,920 --> 00:09:56,290
Remember, this is a form and then the user on the website will be able to add in a new car with a brand

154
00:09:56,440 --> 00:09:57,520
and a year.

155
00:09:57,790 --> 00:10:05,080
So if you want, you can add in another heading to here that says, add a new car, add a new car to

156
00:10:05,080 --> 00:10:05,950
the database.

157
00:10:08,240 --> 00:10:12,890
OK, and then remember, at the very bottom, we should have some sort of submit button salsa input

158
00:10:13,220 --> 00:10:15,170
type of to submit.

159
00:10:17,280 --> 00:10:19,570
And then what we have here is our label.

160
00:10:19,620 --> 00:10:21,600
So let's start off with the brand.

161
00:10:22,020 --> 00:10:26,010
So we're going to say brand of car is the actual text the label shows.

162
00:10:26,430 --> 00:10:32,490
Second, one is going to be here and then I'm going to have both of them be text type.

163
00:10:33,120 --> 00:10:40,060
And we're just going to say this is for I'm going to call this brand and let's give this an I.D..

164
00:10:41,200 --> 00:10:42,290
Equal to brand.

165
00:10:42,310 --> 00:10:44,590
So they're connected as well as the name.

166
00:10:45,560 --> 00:10:47,180
Equal to brands, so they're connected.

167
00:10:47,280 --> 00:10:49,520
Other the same thing here, except it's all going to be here.

168
00:10:50,030 --> 00:10:51,500
So this label is for a year.

169
00:10:52,250 --> 00:10:54,450
We'll give this the ID year, so it's connected.

170
00:10:55,010 --> 00:10:56,750
And let's give it the name year.

171
00:10:57,110 --> 00:11:00,800
Recall, the name is what's actually going to be passed in connected to the value.

172
00:11:01,100 --> 00:11:04,460
The name is essentially the key value pair, and it's the key side.

173
00:11:04,490 --> 00:11:09,830
The value being whatever input the user actually provides for us if you want, you can actually begin

174
00:11:09,830 --> 00:11:14,540
to style this with some class calls with with bootstrap.

175
00:11:14,900 --> 00:11:18,770
Last thing, however, that we do need here is going to be a method call.

176
00:11:19,700 --> 00:11:24,920
So we need to say method is equal to in this case, we're posting information to the database.

177
00:11:25,550 --> 00:11:26,630
So I will say post.

178
00:11:27,080 --> 00:11:30,710
Keep in mind, we'll show you a much better way of doing this entire form later on Django Farms.

179
00:11:31,400 --> 00:11:33,050
But we have a pretty simple form here.

180
00:11:33,140 --> 00:11:37,880
Just takes in a brand a year and then a submit button.

181
00:11:38,390 --> 00:11:43,910
Let's very quickly check to make sure this is looking all right when we actually run our website.

182
00:11:44,450 --> 00:11:48,830
So at the very bottom here, what I'm going to do, scroll down and say Python.

183
00:11:49,880 --> 00:11:52,100
Managed a pie run server.

184
00:11:52,610 --> 00:11:59,060
Keep in mind, I don't actually expect this form to work in any sense, so we're going to say go to

185
00:11:59,060 --> 00:12:04,450
that web page and this is going to be a forward slash cars forward slash ad.

186
00:12:05,030 --> 00:12:08,390
And it should look something like this a little ugly because there's no CSI styling.

187
00:12:08,750 --> 00:12:13,610
But it says at each meal, at a new carts, at the bay debate to the database brand a year and then

188
00:12:13,610 --> 00:12:14,270
hit submit.

189
00:12:14,600 --> 00:12:15,380
Nothing's going to happen.

190
00:12:15,380 --> 00:12:19,600
In fact, we should probably see an error if we try to fill this out with some sort of no submit.

191
00:12:19,610 --> 00:12:22,610
And it says, see, it's RF verification fail.

192
00:12:23,210 --> 00:12:26,270
See SRF or cross site request.

193
00:12:26,270 --> 00:12:33,710
Forgery is actually a mechanism that's implemented for you with jingo in order to make sure that there's

194
00:12:33,740 --> 00:12:37,370
not some sort of hacking attempt being done through this form.

195
00:12:38,000 --> 00:12:43,460
Now we will cover that in a lot more detail later on, but basically the solution here is in the template.

196
00:12:43,790 --> 00:12:50,120
There needs to be this c SRF underscore token template tag, so I'm just going to copy this.

197
00:12:50,540 --> 00:12:53,330
I won't explain what this really does for you right now.

198
00:12:53,630 --> 00:12:56,270
Just have to take my word for it that that tokenism is saying.

199
00:12:56,510 --> 00:12:58,160
And here's the instruction how to do that?

200
00:12:58,280 --> 00:13:03,710
Add in that template tag to the actual form in order to have the post form operate.

201
00:13:04,250 --> 00:13:08,030
So copy that and then inside the form, what are you going to do?

202
00:13:08,390 --> 00:13:12,920
Is simply paste in this jingo tag that's going to let Django know it's OK.

203
00:13:12,920 --> 00:13:13,850
It's not a hacking attempt.

204
00:13:14,060 --> 00:13:16,070
You can go ahead and check their CSR token.

205
00:13:16,340 --> 00:13:17,900
More details on that to come.

206
00:13:17,900 --> 00:13:22,610
When we actually talk about Django forms next, what I want to do is add a little bit of styling, so

207
00:13:22,610 --> 00:13:23,510
this looks OK.

208
00:13:24,260 --> 00:13:26,540
Something I can do is use the form group class.

209
00:13:27,020 --> 00:13:31,520
So inside each of these devs, you can say class is equal to form group.

210
00:13:33,700 --> 00:13:36,080
And that will style it just a little nicer here.

211
00:13:36,850 --> 00:13:42,910
So when you see that change and then come back to the actual page and refresh it, it should look a

212
00:13:42,910 --> 00:13:43,580
little nicer.

213
00:13:43,600 --> 00:13:49,930
Also, what I'm going to add in is another piece of class here, which is called the form control that

214
00:13:49,930 --> 00:13:51,370
goes into the inputs.

215
00:13:51,850 --> 00:13:55,420
So I'm essentially just copying and pasting this from the documentation.

216
00:13:56,320 --> 00:14:00,760
So for the imports, I'm using class form control on the inputs.

217
00:14:01,210 --> 00:14:04,210
And if you want, you can also add a button class here.

218
00:14:04,690 --> 00:14:07,330
So I can say class is equal to, let's say, BTN.

219
00:14:08,600 --> 00:14:11,510
That and let's come back to.

220
00:14:12,510 --> 00:14:16,530
This is going to go back to add a female, and now it looks a lot nicer.

221
00:14:16,750 --> 00:14:18,150
OK, and we see the submit button.

222
00:14:18,180 --> 00:14:19,080
It's actually not colored.

223
00:14:19,350 --> 00:14:21,090
So let's make it BTN Primary.

224
00:14:22,410 --> 00:14:29,250
To say BTN primary, save that change and refresh.

225
00:14:30,120 --> 00:14:30,810
And there you have it.

226
00:14:30,930 --> 00:14:34,080
Ah, submit button as you want, can a little break element first and spacing?

227
00:14:34,380 --> 00:14:35,750
Don't worry too much about styling right now.

228
00:14:35,760 --> 00:14:36,960
It's really not important for us.

229
00:14:37,230 --> 00:14:39,450
OK, so we have an HTML.

230
00:14:39,510 --> 00:14:46,290
This is a form now that can accept a brand and a year, but there is absolutely no connection to anything

231
00:14:46,290 --> 00:14:48,390
to happen on that from the viewpoint of things.

232
00:14:48,990 --> 00:14:51,000
So we're ready to pass that information.

233
00:14:51,180 --> 00:14:53,220
Now we need to let the view know what to do.

234
00:14:53,610 --> 00:14:55,950
Right now, it's just going to keep rendering at HTML.

235
00:14:56,340 --> 00:15:03,030
So if we try to submit something again here, like, let's say, Toyota and the years 1990 for that

236
00:15:03,030 --> 00:15:06,060
Toyota hit submit, it essentially nothing happens.

237
00:15:06,060 --> 00:15:09,780
It's just going to say, Hey, I had a post request, but I'm not doing anything with it.

238
00:15:10,020 --> 00:15:12,330
So what do we need to do on The View's side of things?

239
00:15:12,780 --> 00:15:15,210
Well, for one, we have to take care of two situations.

240
00:15:16,230 --> 00:15:20,040
The first situation is the user comes to the page and wants to add a car.

241
00:15:20,490 --> 00:15:26,610
The second situation is the users already on the page and then hit submit for their request to post

242
00:15:26,610 --> 00:15:31,950
information, which means under AD actually need an if statement.

243
00:15:32,610 --> 00:15:40,440
I need to say if and then what's going to happen is I can check if there's actually a post request.

244
00:15:40,980 --> 00:15:46,440
So we can say if request that post and then I can do something here just to show you what's actually

245
00:15:46,440 --> 00:15:47,040
happening here.

246
00:15:47,460 --> 00:15:48,990
What I'm going to do is print.

247
00:15:49,680 --> 00:15:51,900
Request the post.

248
00:15:52,500 --> 00:15:55,620
So go ahead and say print requests that post here.

249
00:15:56,490 --> 00:16:01,020
Save that change and then come back to add HTML.

250
00:16:02,090 --> 00:16:06,500
And then you may need to refresh this, a go to list and go to add that's a good way of refreshing it

251
00:16:06,500 --> 00:16:10,640
instead of if sometimes if you click refresh here, it asks you to resubmit the form.

252
00:16:11,210 --> 00:16:12,620
So now I'm going to say Toyota.

253
00:16:14,600 --> 00:16:21,440
Toyota announcing in 1990 hit submit again, nothing really happens here, but now take a look at what's

254
00:16:21,440 --> 00:16:22,330
happening in the terminal.

255
00:16:22,340 --> 00:16:29,570
We actually did print a query dictionary note that it has this middle token where this middleware token,

256
00:16:29,570 --> 00:16:32,630
that's the CSR f, essentially making sure it's a legit entry.

257
00:16:32,930 --> 00:16:35,450
And now we have brand and the year.

258
00:16:35,870 --> 00:16:40,410
This is essentially a dictionary like object that actually grab information from.

259
00:16:40,430 --> 00:16:47,540
So if there is a post request, I can then grab Brand Toyota and Year 1990, which is exactly what we're

260
00:16:47,540 --> 00:16:48,650
going to do here.

261
00:16:49,220 --> 00:16:51,560
So I have an if statement that says if.

262
00:16:52,600 --> 00:16:53,980
Requests that post.

263
00:16:55,190 --> 00:17:00,320
Then my brand is equal to request that post, remember, this is essentially a dictionary.

264
00:17:00,710 --> 00:17:08,089
So I grabbed the brand from that key and then say the year is equal to and then it's going to be requests

265
00:17:08,089 --> 00:17:08,839
that post.

266
00:17:09,859 --> 00:17:10,170
Yea.

267
00:17:10,670 --> 00:17:15,380
Keep in mind, years, technically a string here, so I will cast it to be an integer.

268
00:17:17,390 --> 00:17:17,780
All right.

269
00:17:18,109 --> 00:17:23,839
And then finally, now that I have the brand and I can create a new object by saying models that car

270
00:17:24,589 --> 00:17:30,350
the objects and I can use create, I can also create an instance of a car object and then save it.

271
00:17:30,380 --> 00:17:32,300
But remember, this is how we do it all at once.

272
00:17:32,720 --> 00:17:36,950
So we say brand is equal to brand and we say year is equal to year.

273
00:17:38,210 --> 00:17:42,830
Knowing full well that the ID with the primary key can be automatically created for us, so this is

274
00:17:42,830 --> 00:17:45,140
what happens if there's a request post.

275
00:17:45,320 --> 00:17:50,300
I grabbed the brand, I grabbed the year and then I am going to go ahead and create that object.

276
00:17:50,660 --> 00:17:53,270
Keep in mind, we are assuming a lot here.

277
00:17:53,300 --> 00:17:57,170
We can assume that the year will in fact be able to be converted to an integer.

278
00:17:57,200 --> 00:17:59,990
So we're not going to have a bunch of things like tri statements.

279
00:18:00,350 --> 00:18:04,220
Maybe we'll do a little bit that end the leap, but we're just going to assume that the user smart enough

280
00:18:04,220 --> 00:18:05,270
to put this in correctly.

281
00:18:05,630 --> 00:18:11,810
And then once they've actually created the car, let's go ahead and redirect the user to the list page

282
00:18:12,080 --> 00:18:14,090
and we're going to use a redirect reverse for that.

283
00:18:14,750 --> 00:18:19,730
So I come back up here, I'm going to import render and I'm also going to import redirect.

284
00:18:21,320 --> 00:18:28,580
And then I also need to import reverse, so we're going to say from jingo that Earle's import reverse,

285
00:18:29,120 --> 00:18:35,180
if you're a little fuzzy on redirect and reversed, you may want to review back in the URL routing discussion

286
00:18:35,180 --> 00:18:38,330
when we talked about things like HTP response.

287
00:18:38,930 --> 00:18:44,210
So go ahead and check out a redirect and reverse in case you're a little fuzzy on that, but it's actually

288
00:18:44,210 --> 00:18:45,020
quite simple to use.

289
00:18:45,320 --> 00:18:52,280
Once we've created that new model car, I'm going to say is return a redirect and then find me a reverse

290
00:18:52,280 --> 00:18:59,390
for the view and the URL name I want to go to is on their cars colon list.

291
00:18:59,780 --> 00:19:01,700
This essentially just says that.

292
00:19:02,690 --> 00:19:06,320
If user submitted new car.

293
00:19:07,700 --> 00:19:12,510
Then go to list HTML now you may be wondering how to actually know its cars.

294
00:19:12,530 --> 00:19:15,670
Colin list, that's actually the find here in URLs.

295
00:19:15,680 --> 00:19:21,950
Top high cars comes from the app named cars and list comes from the name list here.

296
00:19:21,980 --> 00:19:22,820
That's how that works.

297
00:19:23,150 --> 00:19:29,180
This is exactly the same as the URL names we were able to insert in the actual template for the nafaa.

298
00:19:29,220 --> 00:19:31,820
If you've got a basic HTML, that's this right here.

299
00:19:32,000 --> 00:19:38,630
Car's colon list exact same logic on reverse reverse basically just says, Hey, look up the application

300
00:19:38,630 --> 00:19:42,650
called cars and then find me that name for the URL route called list.

301
00:19:43,040 --> 00:19:46,940
Then once you've looked up that HTML, go ahead and redirect them to that template.

302
00:19:47,420 --> 00:19:49,580
So that's if the request is post.

303
00:19:50,000 --> 00:19:54,470
However, if they haven't actually posted anything yet, we still want to render the actual ad html.

304
00:19:54,830 --> 00:19:59,780
So here I say else, make sure it's aligned with that if statement, I say else.

305
00:20:01,110 --> 00:20:04,050
Return cars at each table.

306
00:20:04,690 --> 00:20:06,810
Now go ahead and save that change.

307
00:20:07,620 --> 00:20:09,990
And go ahead and refresh your page.

308
00:20:10,530 --> 00:20:16,110
So best way to refresh this again is come here, go to list list is blank right now, let's try adding

309
00:20:16,110 --> 00:20:16,740
a new car.

310
00:20:17,370 --> 00:20:20,280
So here we'll say Toyota is the brand.

311
00:20:21,880 --> 00:20:24,070
And also the years 1990 I hit submit.

312
00:20:25,030 --> 00:20:29,410
And now it redirects me to list a still car, is Toyota 1990.

313
00:20:29,710 --> 00:20:30,160
Perfect.

314
00:20:30,190 --> 00:20:31,210
Let's try it one more time.

315
00:20:32,170 --> 00:20:34,720
And when I say Brand is going to be Honda.

316
00:20:36,000 --> 00:20:38,910
And let's make this on the year 2000 submit.

317
00:20:39,450 --> 00:20:42,990
And I see cars Toyota 1990 car is Honda 2000.

318
00:20:43,290 --> 00:20:48,630
Remember, each of these has primary keys, primary key of one, primary key of two and so on.

319
00:20:49,260 --> 00:20:55,290
Now I could add another car that is a repeat, so they don't have to be unique.

320
00:20:55,290 --> 00:20:58,770
I can have another Toyota with another 1990 year.

321
00:20:59,100 --> 00:21:00,480
And that's totally OK.

322
00:21:00,630 --> 00:21:02,740
These still are unique cars because of the primary key.

323
00:21:03,540 --> 00:21:09,840
So when I'm thinking of deleting a car through a form, I want to end up deleting based off the primary

324
00:21:09,840 --> 00:21:10,140
key.

325
00:21:10,620 --> 00:21:12,810
So that form is going to be super simple.

326
00:21:12,820 --> 00:21:16,140
It's basically going to ask, Hey, what's the primary key you want to delete?

327
00:21:16,380 --> 00:21:21,540
So we're going to come back to delete the email and then let's fill this one up.

328
00:21:22,380 --> 00:21:24,720
And again, super simple, here I create a div.

329
00:21:25,770 --> 00:21:28,860
This nerve is going to have a container class just to make things look nice.

330
00:21:29,550 --> 00:21:33,840
It's going to still report back that we're on the delete page just for a curly.

331
00:21:35,030 --> 00:21:38,190
And then let's create a form here, action.

332
00:21:38,370 --> 00:21:40,460
We don't actually redirect anything through the form.

333
00:21:41,090 --> 00:21:42,260
We're just doing that through Django.

334
00:21:43,010 --> 00:21:44,180
This again, will be post.

335
00:21:45,500 --> 00:21:48,380
And then add in your token here so you don't get an error.

336
00:21:49,670 --> 00:21:52,310
So we'll say C s r f token.

337
00:21:52,970 --> 00:21:54,650
Remember, this is a tag comes in watching jingo.

338
00:21:55,600 --> 00:21:57,550
And let's create a div here.

339
00:21:58,900 --> 00:22:05,650
And then add in a label and add in input very similar to what we just did, except this time the idea

340
00:22:05,650 --> 00:22:10,370
would be, Hey, I'm looking for the primary key number you want to delete.

341
00:22:11,350 --> 00:22:13,390
So let's Al-Sadd in a heading to.

342
00:22:14,330 --> 00:22:16,940
And to speak to the car.

343
00:22:18,590 --> 00:22:20,360
And heading once, actually, OK.

344
00:22:20,990 --> 00:22:23,480
So I have this label, I just need to fill this out.

345
00:22:23,750 --> 00:22:25,940
We're going to say it's for pick that label.

346
00:22:26,420 --> 00:22:28,790
And now let's add in the.

347
00:22:29,740 --> 00:22:30,070
I'd.

348
00:22:31,360 --> 00:22:32,050
Is peak.

349
00:22:33,190 --> 00:22:35,560
And let's also add in the name is.

350
00:22:36,700 --> 00:22:37,180
P.K..

351
00:22:38,650 --> 00:22:42,270
And then finally, if you want to make this look a little nicer, you can add some classes here.

352
00:22:42,280 --> 00:22:43,390
I can say this is class.

353
00:22:44,480 --> 00:22:49,790
Form group, and we can say this is class form control.

354
00:22:51,240 --> 00:22:53,070
This is just from get bootstrap dot com.

355
00:22:53,550 --> 00:22:59,220
Finally, we do need to have an input button here, so we're going to say input type is going to be.

356
00:23:00,340 --> 00:23:00,850
Submit.

357
00:23:02,060 --> 00:23:07,040
Save that, if you want, can add in the class, call for the button between B10 primary.

358
00:23:10,040 --> 00:23:10,820
So that change.

359
00:23:11,770 --> 00:23:12,140
All right.

360
00:23:12,160 --> 00:23:17,590
So I got kind of fast for that, but it's just a repeat of what we just did for AD created a form.

361
00:23:18,220 --> 00:23:21,040
Make sure has that CSR token create a div?

362
00:23:21,100 --> 00:23:24,790
This is essentially just accepting a primary key number.

363
00:23:24,850 --> 00:23:28,270
So we do expect this to be just an integer like one, two, three, four, etc..

364
00:23:28,930 --> 00:23:34,780
And the other thing that to do here is I could add in a little warning if there's an issue, but I'm

365
00:23:34,780 --> 00:23:39,910
just going to save it for now and we'll come back to views and fill out the delete.

366
00:23:40,360 --> 00:23:42,870
Let's actually make sure that our form is showing up.

367
00:23:42,880 --> 00:23:46,360
So I'll come back here and instead of list, I will go to delete.

368
00:23:46,600 --> 00:23:47,530
And here it's working.

369
00:23:47,540 --> 00:23:49,150
Enter Piqué to the car.

370
00:23:49,480 --> 00:23:52,750
This is just going to accept the number like one or two, etc..

371
00:23:53,200 --> 00:23:57,920
Now what happens if the enter a number like 100 or 1000 or we don't have a car for that where it's going

372
00:23:57,920 --> 00:24:02,200
to redirect them to go back to the list page and then nothing will actually happen in order to make

373
00:24:02,200 --> 00:24:06,620
sure we don't get a full kind of meltdown about trying to delete something that doesn't exist here.

374
00:24:06,640 --> 00:24:08,380
I will do the following and say if.

375
00:24:09,930 --> 00:24:11,250
Request that post.

376
00:24:12,980 --> 00:24:16,160
Then I'm going to delete the car.

377
00:24:17,030 --> 00:24:21,800
Else, if they're just on that page, I will render cars delete.

378
00:24:21,830 --> 00:24:23,000
So how do we delete a car?

379
00:24:23,390 --> 00:24:26,390
Well, first and you understand what's the primary key of the car wants to delete?

380
00:24:26,420 --> 00:24:30,290
I'll say P.K. as equal to request post.

381
00:24:33,080 --> 00:24:35,510
And then I will try to delete that car.

382
00:24:37,020 --> 00:24:39,210
So let's create a try accept statement here.

383
00:24:40,300 --> 00:24:50,050
If I want to try to delete the car, I simply say models, the car capital car, the objects that get

384
00:24:50,560 --> 00:24:54,850
and here I'll say pick is equal to pick and then I will call.

385
00:24:56,000 --> 00:24:56,510
Delete.

386
00:24:57,740 --> 00:25:00,710
And then I'm going to return a redirect.

387
00:25:01,910 --> 00:25:06,380
Reverse for cars list, just as we did before.

388
00:25:06,920 --> 00:25:11,270
Now let's imagine they pass in one thousand, in which case there is no cars that ID.

389
00:25:11,870 --> 00:25:12,590
What do I do there?

390
00:25:13,070 --> 00:25:17,180
I could just give a little message here in the terminal, it says Prince became not found.

391
00:25:19,020 --> 00:25:20,220
And then do the redirect.

392
00:25:22,370 --> 00:25:25,880
Later on, we'll learn about something called Jingle Messages, which actually lets us inform the user

393
00:25:25,880 --> 00:25:26,690
right then and there.

394
00:25:26,720 --> 00:25:28,070
Hey, I couldn't find the picture.

395
00:25:28,370 --> 00:25:30,590
We don't know about that yet, so we'll just ignore that.

396
00:25:31,070 --> 00:25:32,120
So we'll still return.

397
00:25:33,080 --> 00:25:33,890
To the redirect.

398
00:25:35,670 --> 00:25:36,900
Go ahead and save that change.

399
00:25:37,410 --> 00:25:41,730
So, again, really similar, except now just a form excepting a peak.

400
00:25:42,030 --> 00:25:47,010
It's going to try to delete that and then redirect if it is not able to actually find that pick.

401
00:25:47,250 --> 00:25:51,930
I mean, this tribe locked in at work, it's going to just reverse and go back to the cars list.

402
00:25:52,500 --> 00:25:56,010
If there isn't a request submitted, yeah, then it's going to render the delete form.

403
00:25:57,010 --> 00:25:58,090
So we'll come back here.

404
00:25:59,150 --> 00:26:02,060
And make sure to kind of refresh this so good a list.

405
00:26:02,450 --> 00:26:04,720
Let's try the leading cars to the 1990.

406
00:26:04,730 --> 00:26:10,220
I know that P.K. is one, so I'll come back to the last person, the number one hit submit.

407
00:26:10,910 --> 00:26:12,110
And there you go, it removed it.

408
00:26:12,530 --> 00:26:13,940
I know cars Honda 20.

409
00:26:14,120 --> 00:26:16,940
That should be equal to two because it's the second entry.

410
00:26:17,240 --> 00:26:18,530
Remember those primary keys?

411
00:26:18,740 --> 00:26:20,790
They don't get suddenly updated that way.

412
00:26:21,110 --> 00:26:22,840
Everything gets re shifted or something.

413
00:26:22,850 --> 00:26:27,310
Everybody keeps that same primary key, unique identifier for essentially the rest of our life in this

414
00:26:27,320 --> 00:26:27,890
database.

415
00:26:28,400 --> 00:26:28,940
So let's try.

416
00:26:28,940 --> 00:26:29,960
The leading car is Honda.

417
00:26:30,090 --> 00:26:30,950
I'll hit the list here.

418
00:26:31,340 --> 00:26:34,700
Pick number is to hit submit, and there it is.

419
00:26:35,120 --> 00:26:36,470
So I have one car left.

420
00:26:36,560 --> 00:26:41,990
Let's hit, delete, and let's try a number that doesn't work like 10000 hit submit and nothing happened.

421
00:26:41,990 --> 00:26:45,290
I went back to list, but it should see now somewhere in this terminal.

422
00:26:45,290 --> 00:26:48,940
If I expand this, it should see somewhere.

423
00:26:48,950 --> 00:26:51,950
If I see the full report, they'll say, Here it is.

424
00:26:51,960 --> 00:26:52,910
Peak not found.

425
00:26:53,570 --> 00:26:53,930
All right.

426
00:26:54,350 --> 00:27:02,480
So now I have the ability to add, delete and list items inside my database, all from the user part

427
00:27:02,480 --> 00:27:02,900
of things.

428
00:27:03,410 --> 00:27:08,780
You should again, keep in mind, Jenga forms is going to make this way cleaner and way nicer, but

429
00:27:08,780 --> 00:27:13,370
we have enough here to work with so that it makes sense and now view the administration panel.

430
00:27:14,280 --> 00:27:17,640
I'm going to do a really quick overview of everything we just did because we did introduce some new

431
00:27:17,640 --> 00:27:18,150
concepts.

432
00:27:18,360 --> 00:27:21,750
But if you want, you should be good to go for the next lecture or begin talking about admin.

433
00:27:21,990 --> 00:27:25,020
But let me give you a quick 60 second overview of everything we just did.

434
00:27:25,650 --> 00:27:30,330
So we essentially set up our models that pay to create a car class.

435
00:27:30,660 --> 00:27:36,000
The car automatically has this primary I.D. column and then it accepts a brand and a year and a string

436
00:27:36,000 --> 00:27:39,960
representation of that car using that string representation of the car.

437
00:27:40,240 --> 00:27:45,720
I'm able to then on list 8's HTML, just say car for car and all cars.

438
00:27:46,380 --> 00:27:53,400
All cars is actually the result of a query on my list of you asking for all the cars inside the car

439
00:27:53,400 --> 00:27:54,240
model database.

440
00:27:54,570 --> 00:27:57,210
And then it sends it back as context list HTML.

441
00:27:57,930 --> 00:28:00,360
Then I wanted to add new cars to the database.

442
00:28:00,780 --> 00:28:02,220
So then I had add html.

443
00:28:02,460 --> 00:28:09,030
I created a form has this security token and then it has a question for the brand and a question for

444
00:28:09,030 --> 00:28:10,860
the year and it submits it back.

445
00:28:11,250 --> 00:28:12,270
How does it submit it back?

446
00:28:12,300 --> 00:28:17,010
Well, it's omits it back, essentially as a query dictionary object, which means I check, Hey, if

447
00:28:17,010 --> 00:28:24,000
there was a post request, then if that request post grabbed the brand, grabbed the year and then create

448
00:28:24,000 --> 00:28:29,460
a new car object with that brand and year and then redirect to the list page so they can see that out

449
00:28:29,460 --> 00:28:32,040
of there if there's not a request post.

450
00:28:32,340 --> 00:28:36,240
It means that users just visiting that page for the first time render at HTML.

451
00:28:36,480 --> 00:28:41,820
Similar idea for delete If there is a request, grab the primary key to delete because this could have

452
00:28:41,820 --> 00:28:46,410
an error if they pass in the wrong primary key, I'm going to try it first and then otherwise I can

453
00:28:46,410 --> 00:28:48,390
accept and still do a redirect.

454
00:28:48,810 --> 00:28:53,640
Keep in mind, we could have done a try except here as well in case they pass the a year that was just

455
00:28:53,640 --> 00:28:55,890
like a string or something and wasn't an integer.

456
00:28:55,950 --> 00:29:00,930
You can always be more and more clever with trying to try and accept things that the user may make a

457
00:29:00,930 --> 00:29:01,470
mistake on.

458
00:29:02,040 --> 00:29:02,400
All right.

459
00:29:02,730 --> 00:29:04,290
That's the very basics of what we just did.

460
00:29:04,650 --> 00:29:06,510
Coming up next, we'll talk about the admin panel.

461
00:29:06,750 --> 00:29:07,320
I'll see you there.