1
00:00:05,330 --> 00:00:10,010
Welcome back, everyone, in this lecture, we're going to expand their knowledge of generic class based

2
00:00:10,010 --> 00:00:12,620
views by looking at the form view.

3
00:00:13,070 --> 00:00:14,870
Let's check it out inside the code editor.

4
00:00:15,350 --> 00:00:17,990
All right, so here I am back inside Visual Studio code.

5
00:00:18,350 --> 00:00:23,990
Now we just saw how to use a generic template view to easily connect a template that already exists

6
00:00:24,260 --> 00:00:25,730
to a class based view.

7
00:00:26,370 --> 00:00:32,360
We'll also now discover is that there is a form view that easily allows us to connect a form to a template.

8
00:00:32,840 --> 00:00:36,470
So let's go ahead and import the generic form.

9
00:00:37,980 --> 00:00:38,370
View.

10
00:00:39,390 --> 00:00:45,930
And then what we're going to do is create a new class and in order for this class to actually make sense,

11
00:00:45,930 --> 00:00:47,400
we should create a form.

12
00:00:47,700 --> 00:00:49,740
So eventually we're going to create a contact form.

13
00:00:50,340 --> 00:00:51,990
I'm going to say contact form view.

14
00:00:53,140 --> 00:00:57,640
And then pass it or inherit form view for right now, I'll just say pass, because we will fill this

15
00:00:57,640 --> 00:00:58,150
out later.

16
00:00:58,600 --> 00:01:03,680
So let's create quickly a form that maybe we want the user to fill out for contacting us.

17
00:01:03,700 --> 00:01:05,470
Maybe they leave a name and a message.

18
00:01:06,010 --> 00:01:07,900
So we're going to create a new file.

19
00:01:09,390 --> 00:01:13,740
And let's make it form stop high, and we'll say from.

20
00:01:15,610 --> 00:01:17,650
From jingo import forms.

21
00:01:18,930 --> 00:01:23,400
And we'll create a very simple contact form forms that form.

22
00:01:24,360 --> 00:01:29,580
And remember, this has failed, so we'll have a name field, which is a let's say, character field.

23
00:01:30,570 --> 00:01:36,900
And let's create a message which let's also have it just be a character field, except let's give it

24
00:01:36,900 --> 00:01:41,250
a text area, which it will say which is equal to forms thought.

25
00:01:42,530 --> 00:01:43,250
Text area.

26
00:01:44,710 --> 00:01:46,660
OK, so super simple form.

27
00:01:47,020 --> 00:01:52,450
We've already seen how to connect jangle forms to function based views in the previous section, but

28
00:01:52,450 --> 00:01:55,320
now we're going to see how to do it with a class based view.

29
00:01:55,330 --> 00:01:58,990
And as I mentioned, the generic views actually can take care of this for us.

30
00:01:59,560 --> 00:02:04,600
So we need to do is come back to views so we have views that pay.

31
00:02:05,590 --> 00:02:10,090
And we're now going to need to import that view that or that form that we just created.

32
00:02:10,160 --> 00:02:17,350
So I'll say from classroom that forms import and we have now imported that contact form.

33
00:02:17,980 --> 00:02:20,710
So how does a contact form view work?

34
00:02:20,800 --> 00:02:26,050
Well, we saw that a template view has a single attribute, just essentially connect it to the correct

35
00:02:26,050 --> 00:02:26,500
template.

36
00:02:26,920 --> 00:02:30,970
This one is going to be slightly more complex, although it's still pretty simple.

37
00:02:31,450 --> 00:02:34,720
What you do is you connect it to the form class.

38
00:02:35,380 --> 00:02:40,990
For that, you choose form, underscore class and then connect it to the actual class.

39
00:02:41,020 --> 00:02:43,840
Note that you do not actually create an instance of the form.

40
00:02:44,110 --> 00:02:45,790
You just say, OK, the form class.

41
00:02:45,790 --> 00:02:48,250
This view will be connected to its contact form.

42
00:02:48,850 --> 00:02:52,300
Then you decide on the template name, but this form should show up it.

43
00:02:52,900 --> 00:03:01,000
So here we're going to say is create a new file and let's call this contact for each HTML and inside

44
00:03:01,090 --> 00:03:02,500
contact our each HTML.

45
00:03:02,800 --> 00:03:10,180
What I'm going to do is have a very simple header here that says form the template just so I know what

46
00:03:10,180 --> 00:03:12,220
I'm looking at to contact the HTML.

47
00:03:13,120 --> 00:03:15,070
And then we create a form.

48
00:03:15,880 --> 00:03:20,170
And here will say the method is equal to post.

49
00:03:21,840 --> 00:03:27,840
And then what's going to eventually happen is I can actually pass on a CSR token and a form.

50
00:03:29,050 --> 00:03:30,610
So I can say form.

51
00:03:33,170 --> 00:03:40,940
And let's have this be as paragraph, and then we'll need a submit input, so we'll see input.

52
00:03:41,780 --> 00:03:42,410
Submit.

53
00:03:44,780 --> 00:03:45,110
All right.

54
00:03:45,230 --> 00:03:50,270
And this should look basically the same as we would expect a function based view to look like.

55
00:03:50,600 --> 00:03:54,670
However, we're going to see that it's actually a lot easier to set everything up on the class side

56
00:03:54,690 --> 00:03:55,010
things.

57
00:03:55,430 --> 00:04:00,680
So we're going to say set up this contact each time, I'll know it's already expecting a form to be

58
00:04:00,680 --> 00:04:01,310
passed to it.

59
00:04:01,580 --> 00:04:04,610
So we say, OK, we're going to pass on a form to this.

60
00:04:05,420 --> 00:04:10,820
So we have the form class and I'm going to connect it to the actual HTML file we just created.

61
00:04:11,330 --> 00:04:15,470
So this luckily has the same attribute name as before, which is template name.

62
00:04:15,560 --> 00:04:20,209
Except this time I'm going to say classroom forward slash contact HTML.

63
00:04:20,899 --> 00:04:21,230
OK.

64
00:04:21,800 --> 00:04:28,100
So what this does is it connects the form itself to this form view and the template name, but there's

65
00:04:28,100 --> 00:04:31,170
a couple more things that we need to expand for.

66
00:04:31,190 --> 00:04:38,900
Form views The two main things you need to do is where should we go after the successful form is validated.

67
00:04:39,200 --> 00:04:43,520
So there's something like what should we use or should we go to?

68
00:04:43,550 --> 00:04:48,950
If it was successful, then we also need to do a calculation on what to do with form.

69
00:04:49,820 --> 00:04:53,120
So let's actually take care of the successful URL first.

70
00:04:53,570 --> 00:04:55,670
So again, that's actually also an attribute.

71
00:04:56,000 --> 00:05:03,290
You just say success underscore URL, and you should note that it has to be these attribute names.

72
00:05:03,320 --> 00:05:06,320
These are inherited from the view you're inheriting from.

73
00:05:06,660 --> 00:05:10,580
So form class is the form template name is the template HTML success.

74
00:05:10,580 --> 00:05:13,370
Your URL is the actual URL you want to go to.

75
00:05:13,760 --> 00:05:20,700
Now this would actually depend on the URL that you set up for your maybe success.

76
00:05:20,720 --> 00:05:22,940
And let's have it go to the thank you page.

77
00:05:23,360 --> 00:05:28,070
So for that, that would be if we go back to your URLs, remember that's going to thank you.

78
00:05:28,700 --> 00:05:31,160
So we'll come back to views and we'll say.

79
00:05:32,490 --> 00:05:33,390
Classroom.

80
00:05:33,690 --> 00:05:36,600
Forward slash, thank you.

81
00:05:37,020 --> 00:05:41,430
Note that this is and what's sometimes confusing to users is that this is a URL.

82
00:05:41,820 --> 00:05:46,260
It is not a template that each HTML file.

83
00:05:46,290 --> 00:05:47,040
Notice the difference.

84
00:05:47,040 --> 00:05:47,820
It's success.

85
00:05:48,090 --> 00:05:49,170
You are ill.

86
00:05:49,410 --> 00:05:52,500
So what's the actual URL at the top in your browser you want to go to?

87
00:05:52,830 --> 00:05:55,380
It's not the actual template you want to go to.

88
00:05:55,650 --> 00:06:00,240
Later on, I will show you a way of looking up based off the URL name, but for right now, I just want

89
00:06:00,240 --> 00:06:04,560
to make it very clear that the success URL is the raw URL you're going to go to.

90
00:06:04,800 --> 00:06:06,570
Not the template you want to connect to.

91
00:06:06,600 --> 00:06:11,080
So notice how I didn't say here, thank you HTML or something like that.

92
00:06:11,100 --> 00:06:13,620
It's just the actual URL at the top.

93
00:06:14,370 --> 00:06:15,400
So we have a form class.

94
00:06:15,720 --> 00:06:16,650
We have our template name.

95
00:06:16,920 --> 00:06:18,160
We know where to go to.

96
00:06:18,180 --> 00:06:19,560
Upon submitting that form.

97
00:06:19,920 --> 00:06:21,630
And now what to do with the form.

98
00:06:21,750 --> 00:06:25,260
And this is actually now a method inside form view.

99
00:06:25,950 --> 00:06:33,660
And that method needs to be called form underscore, valid and it takes itself and it takes in form.

100
00:06:34,950 --> 00:06:37,500
Form being the connection to what we have here.

101
00:06:37,560 --> 00:06:44,850
This form aspe and then this is essentially called when a valid form has been posted.

102
00:06:45,030 --> 00:06:49,170
Essentially, the methods post and what it does, it returns an h to the peer response.

103
00:06:49,680 --> 00:06:53,010
So what we can end up doing here is whatever you want with the clean data.

104
00:06:53,460 --> 00:07:00,150
So if you wanted to, you could do something like form, dot, save and save that to somewhere in your

105
00:07:00,150 --> 00:07:00,720
back end.

106
00:07:01,110 --> 00:07:06,180
What I'm going to do right now is I'm just going to print out form dot clean data.

107
00:07:07,270 --> 00:07:11,860
Just to show you that, OK, if you wanted to, you could kind of do whatever you wanted here and then

108
00:07:11,860 --> 00:07:14,200
what you end up returning is.

109
00:07:15,320 --> 00:07:19,100
A super call, which has to do with class inheritance.

110
00:07:19,460 --> 00:07:27,710
And then you call form, underscore valid and pass in the form, you can think of this last line as

111
00:07:27,710 --> 00:07:36,170
kind of similar to when you had something in your function based view that looks something like this.

112
00:07:36,740 --> 00:07:42,470
So essentially this remember we did this kind of passing the post request to the form and created you

113
00:07:42,470 --> 00:07:43,220
and says the form.

114
00:07:43,520 --> 00:07:48,280
That's essentially what this whole method is doing, but it's just doing it in a very quick line.

115
00:07:48,290 --> 00:07:50,210
It says, OK, the form is valid.

116
00:07:50,450 --> 00:07:51,490
What do you do with it?

117
00:07:51,500 --> 00:07:56,780
And then use this method call inherited from form you to essentially take care of things.

118
00:07:57,080 --> 00:07:59,450
So right now, I'm going to be printing out the form clean data.

119
00:07:59,960 --> 00:08:01,250
Go ahead and save those changes.

120
00:08:01,490 --> 00:08:07,520
We still need to actually connect our contact form view to our URLs, so we'll come back to your URLs

121
00:08:07,520 --> 00:08:08,030
that pie.

122
00:08:08,660 --> 00:08:16,100
And now let's import that contact form view, and then I'll pass it in as a new view here.

123
00:08:16,160 --> 00:08:16,940
So we'll see path.

124
00:08:17,900 --> 00:08:20,300
And this is going to go to contact path.

125
00:08:21,520 --> 00:08:24,340
Comma, it is the contact form view.

126
00:08:24,940 --> 00:08:30,100
We need to remember, say, as view, and then if you want, you can give it a name like contact.

127
00:08:32,370 --> 00:08:35,200
OK, now there has a name I can actually link this on my homepage.

128
00:08:35,580 --> 00:08:38,309
So we'll come back to home page and let's just copy and paste this here.

129
00:08:40,220 --> 00:08:42,470
And instead of classroom thinking it's going to be a classroom.

130
00:08:43,520 --> 00:08:44,150
Contact.

131
00:08:44,510 --> 00:08:46,010
And now this is going to say.

132
00:08:47,260 --> 00:08:49,300
Contact form page link.

133
00:08:50,200 --> 00:08:51,370
Save those changes.

134
00:08:51,610 --> 00:08:54,460
And now let's make sure this is all working.

135
00:08:54,820 --> 00:08:57,160
So you may need to because we're adding forms and stuff.

136
00:08:57,400 --> 00:09:01,960
Rerun your server here, and let's make sure we don't make any errors or issues.

137
00:09:02,290 --> 00:09:03,850
So I come to home HTML.

138
00:09:04,450 --> 00:09:06,310
I click on Contact Form Page Link.

139
00:09:06,670 --> 00:09:09,970
I now have this form view template on contact each HTML.

140
00:09:10,330 --> 00:09:17,050
Notice how the forms are being passed back here, so I can say something like a message is school is

141
00:09:17,050 --> 00:09:21,640
cool and then I can hit submit and it takes me straight to the thank you page.

142
00:09:22,000 --> 00:09:26,020
And let's make sure that our data was actually printed out and it's right here.

143
00:09:26,410 --> 00:09:31,780
Jose Message School is cool, and obviously if you wanted to, you could do whatever you want inside

144
00:09:31,780 --> 00:09:32,110
of you.

145
00:09:32,140 --> 00:09:33,630
So this is just where your logic would go.

146
00:09:33,660 --> 00:09:38,320
We'll go inside this method call, but that's how a form view works.

147
00:09:38,680 --> 00:09:44,170
It's typically a lot simpler than the more complex, function based view for a form.

148
00:09:44,290 --> 00:09:50,980
So I want to quickly go over the main steps of what we had to do to use a form view for the generic

149
00:09:50,980 --> 00:09:51,550
form view.

150
00:09:51,910 --> 00:09:54,190
OK, step number one is you need a form.

151
00:09:54,490 --> 00:09:57,340
So you create whatever form you want here forms that form.

152
00:09:57,910 --> 00:10:02,080
If you want, this could be a model form, but I would say hold on that later because coming up next,

153
00:10:02,080 --> 00:10:05,530
we're going to have template views that directly connect the model, essentially saving you the step

154
00:10:05,530 --> 00:10:06,520
of even making a form.

155
00:10:07,000 --> 00:10:09,130
And then once you have your form ready to go.

156
00:10:10,170 --> 00:10:15,510
You come back the views, you make sure you import that form and then you also make sure you import

157
00:10:15,510 --> 00:10:21,000
formed you as a generic view and then the key attributes in your remember are OK, what's the form class

158
00:10:21,000 --> 00:10:21,750
or connecting to?

159
00:10:22,200 --> 00:10:24,450
What's the template name you want to send that form to?

160
00:10:24,510 --> 00:10:26,000
Our case it was contact table.

161
00:10:26,340 --> 00:10:30,100
And then what is the success URL that you're going to send them to?

162
00:10:30,120 --> 00:10:33,000
And remember, it's a URL, not a template.

163
00:10:33,010 --> 00:10:36,990
It's the actual URL path that's going to appear at the top of their browser.

164
00:10:37,170 --> 00:10:42,660
That's why I had a say classroom for thank you, because that's what if we come back to your URLs?

165
00:10:42,660 --> 00:10:43,340
That's what this is.

166
00:10:43,350 --> 00:10:45,270
It's classroom for us.

167
00:10:45,900 --> 00:10:46,440
Thank you.

168
00:10:46,740 --> 00:10:49,320
So you're essentially connecting them to that particular pathway.

169
00:10:49,920 --> 00:10:50,250
OK.

170
00:10:50,520 --> 00:10:55,500
And then once you've done that, you can use this form valid method that pretty much the top and the

171
00:10:55,500 --> 00:10:59,490
return statements are always going to look the same, but it's up to you, whatever you want to do inside

172
00:10:59,500 --> 00:11:00,450
form clean data.

173
00:11:00,750 --> 00:11:05,670
So remember, this is a dictionary, so you could always do something like, OK, call the name that

174
00:11:05,670 --> 00:11:10,320
was passed in on that and then maybe save it somewhere or send an email or do some sort of action there.

175
00:11:11,010 --> 00:11:11,340
All right.

176
00:11:11,670 --> 00:11:16,950
Now I did mention there's some logic or functionality you can use to not need to remember this entire

177
00:11:16,950 --> 00:11:18,030
success URL.

178
00:11:18,880 --> 00:11:23,340
Remember, previously we imported a function called reverse.

179
00:11:23,730 --> 00:11:28,140
So we were able to do something like this from Django that URLs.

180
00:11:29,490 --> 00:11:39,870
Import reverse now reverse is going to just give you back the actual name for the URL you're looking

181
00:11:39,870 --> 00:11:40,230
for.

182
00:11:40,290 --> 00:11:44,620
So for example, I could say I want to figure out what's the view associated classroom.

183
00:11:45,030 --> 00:11:46,050
Thank you, for example.

184
00:11:46,470 --> 00:11:48,870
So remember, this would actually give you back the view.

185
00:11:49,140 --> 00:11:51,720
But in this case, we actually need the URL for that.

186
00:11:52,140 --> 00:11:54,270
So luckily for us, there's.

187
00:11:55,330 --> 00:12:03,580
Reverse lazy, and I do have a link for you, insider notes on what the differences between reverse

188
00:12:03,580 --> 00:12:06,730
and reverse lazy and Django, often that's a point of confusion of students.

189
00:12:07,030 --> 00:12:11,980
So you can check out this StackOverflow posts on explaining the difference between a reverse and reverse

190
00:12:11,980 --> 00:12:12,370
lazy.

191
00:12:12,730 --> 00:12:15,160
They do have kind of some code here to explain.

192
00:12:15,430 --> 00:12:21,460
I think the best explanation really is that honestly, if you're just being simple here, reverse is

193
00:12:21,460 --> 00:12:25,060
going to return a string and then reverse lazy returns and object.

194
00:12:25,240 --> 00:12:30,910
But really, what you should be thinking of here is if you're using success URL, you use reverse lazy.

195
00:12:31,180 --> 00:12:33,640
If you're reversing inside a function, you can use reverse.

196
00:12:34,300 --> 00:12:36,820
These are probably just the easiest number one and number two here.

197
00:12:37,120 --> 00:12:39,490
So just keep in mind you're using class based views.

198
00:12:39,610 --> 00:12:40,880
You're using a success URL.

199
00:12:40,900 --> 00:12:41,980
Just use reverse lazy.

200
00:12:42,100 --> 00:12:44,980
You're using functions you want to reverse inside a function.

201
00:12:45,010 --> 00:12:47,860
Use a redirect reverse combo, as we've seen before.

202
00:12:48,370 --> 00:12:48,650
OK.

203
00:12:48,670 --> 00:12:50,320
Netlink for you is a notes.

204
00:12:50,320 --> 00:12:54,040
Or you can just Google search difference between reverse and reverse lazy and Django.

205
00:12:54,490 --> 00:12:58,210
But put simply, it's essentially just that you're using class space views just from rotis, reverse

206
00:12:58,210 --> 00:13:02,020
lazy and then you come back down here instead of having to remember classroom forward slash.

207
00:13:02,020 --> 00:13:02,440
Thank you.

208
00:13:02,800 --> 00:13:08,290
You say reverse lazy and then pass in classroom and then thank you like that.

209
00:13:08,620 --> 00:13:09,550
And that should still work.

210
00:13:09,580 --> 00:13:11,330
So let's confirm that it still works.

211
00:13:11,330 --> 00:13:12,850
I'm going to go back to the home page.

212
00:13:13,660 --> 00:13:14,900
So here I am at the home page.

213
00:13:14,920 --> 00:13:17,080
Let me refresh this contact form page.

214
00:13:17,530 --> 00:13:22,270
Let's say the name is jam and the jam jam message.

215
00:13:23,220 --> 00:13:24,270
And then thank you.

216
00:13:24,570 --> 00:13:25,470
And it's still working.

217
00:13:25,530 --> 00:13:27,300
And then I printed out that first name, Jim.

218
00:13:27,900 --> 00:13:28,320
There it is.

219
00:13:28,830 --> 00:13:29,100
OK.

220
00:13:29,400 --> 00:13:35,730
That's it for the form of you so often form views, you use them a lot with models, but there's actually

221
00:13:35,880 --> 00:13:39,180
generic template views that already automatically connect to models for us.

222
00:13:39,330 --> 00:13:41,850
So it's going to get even simpler than doing something like this.

223
00:13:42,300 --> 00:13:43,830
I'll discuss that in the next lecture.