1 00:00:05,170 --> 00:00:10,360 Welcome back, everyone, to this lecture or begin understanding had actually code out a single form, 2 00:00:10,780 --> 00:00:12,970 starting with the basics of the form class. 3 00:00:14,060 --> 00:00:18,740 So we're going to create a new Jingle project and Django app and then use Django forms instead of manually 4 00:00:18,740 --> 00:00:20,510 creating an HTML form. 5 00:00:21,170 --> 00:00:24,300 So what we're going to do is quickly cover the steps that we're going to perform this lecture. 6 00:00:24,320 --> 00:00:28,190 The main idea being we want to create a car rental review feedback form. 7 00:00:29,590 --> 00:00:34,390 So let's imagine we decided to start a car rental company, and we need a website to create feedback 8 00:00:34,570 --> 00:00:35,770 on the experience. 9 00:00:35,800 --> 00:00:39,820 Maybe things like first name, last name and email and then some sort of text feedback. 10 00:00:40,120 --> 00:00:44,680 We're going to do in this lecture is create a new project, an app and then create the connection for 11 00:00:44,680 --> 00:00:46,210 the templates, views and URLs. 12 00:00:46,510 --> 00:00:50,200 Those first two steps, we're going to go through them pretty quickly because we've done a bunch of 13 00:00:50,200 --> 00:00:50,830 times already. 14 00:00:51,160 --> 00:00:54,340 Then we start onto the new stuff, which is creating a form stop profile. 15 00:00:54,640 --> 00:00:57,640 Then we create a general form class and site forms that pie. 16 00:00:57,910 --> 00:01:03,490 And then finally, we connect the jingle form to the view for context insertion inside the template. 17 00:01:03,850 --> 00:01:06,760 OK, let's get started and head over to the text editor. 18 00:01:07,570 --> 00:01:09,400 OK, so let's get started here. 19 00:01:09,820 --> 00:01:14,680 I'm going to use Django Admin to create a new project, so I'll say Start Project. 20 00:01:15,880 --> 00:01:20,710 I will call this my site and then I will seed or change directory into my site. 21 00:01:20,920 --> 00:01:22,750 And then let's start a new application. 22 00:01:23,260 --> 00:01:24,430 We do this with Python. 23 00:01:25,010 --> 00:01:29,710 Manage that Pi Start app and I'll simply call my application cars. 24 00:01:31,290 --> 00:01:31,600 All right. 25 00:01:31,650 --> 00:01:36,330 So I have my site and then I have cars and my site. 26 00:01:36,660 --> 00:01:44,190 So inside of cars, what I'm going to do is set up my template folders, so I'll say templates and then 27 00:01:44,190 --> 00:01:46,260 inside of templates create a new folder. 28 00:01:46,680 --> 00:01:51,660 Shares the same name as the app cars, where essentially it's going to have two pages, a review form 29 00:01:51,660 --> 00:01:52,890 page and I thank you page. 30 00:01:53,340 --> 00:01:54,780 So I'll create two new files. 31 00:01:55,200 --> 00:01:56,840 One will just be the thank you page. 32 00:01:56,850 --> 00:02:02,490 So thank you to each HTML and the other one's going to be in you. 33 00:02:02,490 --> 00:02:03,270 File here. 34 00:02:03,300 --> 00:02:07,740 Let's just call it maybe rental review each HTML. 35 00:02:08,610 --> 00:02:10,110 So two HTML files. 36 00:02:10,350 --> 00:02:12,240 Let's now connect those two views. 37 00:02:12,630 --> 00:02:14,190 So kind of working your way backwards here. 38 00:02:14,610 --> 00:02:15,810 So now I have views. 39 00:02:15,810 --> 00:02:24,270 Here, I'll create two simple views a rental review view takes in a request and it simply renders back. 40 00:02:24,690 --> 00:02:26,850 So return the render of. 41 00:02:27,300 --> 00:02:36,030 And this is going to be the request along with cars, forward slash and then rental review the HTML. 42 00:02:36,300 --> 00:02:39,780 Obviously, later on, we're going to actually edit this quite a bit to accept the form. 43 00:02:39,780 --> 00:02:41,250 So we'll just leave it like that for now. 44 00:02:41,940 --> 00:02:44,130 And then let's create the thank you view. 45 00:02:44,310 --> 00:02:46,440 So thank you request. 46 00:02:46,890 --> 00:02:51,270 And this is just going to return the render for the request. 47 00:02:51,450 --> 00:02:53,510 And this is cars forward slash. 48 00:02:53,520 --> 00:02:54,100 Thank you. 49 00:02:55,020 --> 00:02:55,440 HTML. 50 00:02:56,160 --> 00:02:56,460 OK. 51 00:02:56,730 --> 00:02:58,470 Two very simple views here. 52 00:02:58,740 --> 00:03:00,330 Now, let's connect them to a URL. 53 00:03:00,540 --> 00:03:11,220 So we'll go back under cars new file URLs that pay and then we'll say from Django Dot URLs import path. 54 00:03:11,640 --> 00:03:13,940 And I'm actually going to give this an app name. 55 00:03:13,950 --> 00:03:16,300 That way, I can use URL name tags later on. 56 00:03:16,920 --> 00:03:18,960 And this app name is going to match up cars. 57 00:03:19,590 --> 00:03:21,870 We create our URL patterns list. 58 00:03:22,800 --> 00:03:24,480 Hopefully, it's all feels like review. 59 00:03:25,260 --> 00:03:27,120 And then here we just add in the paths. 60 00:03:27,690 --> 00:03:32,820 So the first path will just be rental review forward slash. 61 00:03:33,540 --> 00:03:36,630 And this gets connected to the rental review view. 62 00:03:36,720 --> 00:03:38,070 So that means I need to say from. 63 00:03:39,290 --> 00:03:46,170 Dot import views, so I can actually call those view functions, so then we say views dot. 64 00:03:46,640 --> 00:03:48,020 And then I have rental review. 65 00:03:48,500 --> 00:03:56,360 Let's give it the name rental review and then comma add in a new path here, and this one will just 66 00:03:56,360 --> 00:03:57,360 be the thank you path. 67 00:03:57,380 --> 00:03:58,340 So thank you. 68 00:03:59,140 --> 00:03:59,530 Oops. 69 00:03:59,540 --> 00:04:00,560 Thank you. 70 00:04:00,800 --> 00:04:01,580 Forward slash. 71 00:04:02,120 --> 00:04:03,940 And then this one's going to be vieuxtemps. 72 00:04:03,950 --> 00:04:04,490 Thank you. 73 00:04:04,800 --> 00:04:06,500 And just using Tab to autocomplete here. 74 00:04:06,830 --> 00:04:07,910 Name will just be. 75 00:04:08,920 --> 00:04:09,400 Thank you. 76 00:04:10,540 --> 00:04:10,840 All right. 77 00:04:11,380 --> 00:04:14,780 So I connected those views to some URLs through patterns. 78 00:04:14,800 --> 00:04:18,010 I need to connect all these URLs to my project level URLs. 79 00:04:18,430 --> 00:04:24,340 So we come to URLs that pie at a project level and then I need to remember to import include. 80 00:04:25,180 --> 00:04:27,160 And then I can say the following I can say Path. 81 00:04:28,090 --> 00:04:28,660 Let's go. 82 00:04:28,930 --> 00:04:30,970 Cars as the domain name extension. 83 00:04:31,720 --> 00:04:33,880 And then what we're going to say here is include. 84 00:04:35,150 --> 00:04:38,000 Cars dot your URLs. 85 00:04:38,690 --> 00:04:38,990 All right. 86 00:04:39,500 --> 00:04:45,620 So now this should be connected in a way that I can go to my domain dot com forward slash cars, forward 87 00:04:45,620 --> 00:04:46,090 slash. 88 00:04:46,100 --> 00:04:48,530 And then I have essentially only two pages that exist. 89 00:04:48,950 --> 00:04:50,930 One is four slash rental review. 90 00:04:51,440 --> 00:04:54,010 The other one will be forward slash. 91 00:04:54,020 --> 00:04:54,570 Thank you. 92 00:04:54,590 --> 00:04:56,870 And I expect somebody to fill out the form. 93 00:04:57,110 --> 00:04:59,150 Hit submit and then go to the thank you page. 94 00:04:59,600 --> 00:05:03,860 And then the last thing I want to do is to make sure my applications are actually connected at the project 95 00:05:03,860 --> 00:05:04,220 level. 96 00:05:04,460 --> 00:05:09,650 Remember, we have our apps that PI file created for us with the car's config. 97 00:05:09,860 --> 00:05:12,770 I need to add that to my actual settings that pi file. 98 00:05:13,310 --> 00:05:16,580 So also remember to save all the changes we've been doing. 99 00:05:16,940 --> 00:05:19,430 So if you ever see a little dot here, make sure to save. 100 00:05:20,300 --> 00:05:26,570 So we have our cars config, which means I can go to settings about PI and just come here and pass in 101 00:05:26,570 --> 00:05:27,200 cars. 102 00:05:28,130 --> 00:05:31,370 The apps, the car's config. 103 00:05:32,410 --> 00:05:37,510 And don't forget that on let me double check that it's cars, plural here under apps and yes, it is 104 00:05:37,510 --> 00:05:41,350 cars config settings like pie cars, the App Store config. 105 00:05:41,950 --> 00:05:42,250 OK? 106 00:05:42,640 --> 00:05:46,000 Save that change and just to make sure everything is working. 107 00:05:46,360 --> 00:05:49,330 I want to make sure that I can add a little bit of HTML here. 108 00:05:49,690 --> 00:05:56,800 So we'll say Doc to autocomplete that or create heading one that just says rental review form page. 109 00:05:56,980 --> 00:05:58,390 Later on, we will add a form here. 110 00:05:59,350 --> 00:06:05,170 And then under thank you, I'll do the same thing, Doc, and we'll just say heading one. 111 00:06:05,980 --> 00:06:06,400 Thank you. 112 00:06:06,430 --> 00:06:07,950 And in fact, that's all I'm ever going to say here. 113 00:06:07,960 --> 00:06:09,400 So this is pretty much done. 114 00:06:09,400 --> 00:06:10,510 I just want this to say thank you. 115 00:06:10,930 --> 00:06:13,210 Let's run our website and make sure it's all working. 116 00:06:13,870 --> 00:06:17,560 So Python managed not pie run server. 117 00:06:19,640 --> 00:06:23,810 OK, looks like we don't have any typos yet, and let's check this out. 118 00:06:24,560 --> 00:06:24,890 All right. 119 00:06:24,890 --> 00:06:28,400 So it looks like rental review form is working. 120 00:06:28,910 --> 00:06:31,670 And now let's go to forward slash. 121 00:06:32,820 --> 00:06:33,480 Thank you. 122 00:06:34,290 --> 00:06:35,760 And it looks like thank you is working. 123 00:06:35,910 --> 00:06:37,890 OK, so our templates are set up. 124 00:06:38,010 --> 00:06:40,260 Now it's time to switch gears to forms. 125 00:06:40,770 --> 00:06:42,600 So let's go ahead and do that. 126 00:06:43,050 --> 00:06:47,130 Now, typically what I would have to do is come to rental review that each HTML. 127 00:06:47,550 --> 00:06:54,840 And then go through the kind of tedious process of setting up an HTML form and then say, OK, I want 128 00:06:54,840 --> 00:06:56,730 to be able to post information here. 129 00:06:57,120 --> 00:07:03,960 And then after that, I'd have to make a series of labels as well as a let me just and do that, as 130 00:07:03,960 --> 00:07:05,730 well as a series of inputs. 131 00:07:05,730 --> 00:07:09,720 And I would need to do that for every single field I was interested in and collecting. 132 00:07:10,260 --> 00:07:12,780 Now, with jingle forms, it's actually a lot easier. 133 00:07:12,990 --> 00:07:17,910 So the first step is to still actually put in an HTML form. 134 00:07:18,360 --> 00:07:21,570 So there's two things that Django technically doesn't take care of for you. 135 00:07:21,960 --> 00:07:29,640 It doesn't take care of the actual form, each HTML tag, and it will also require you to pass in the 136 00:07:29,640 --> 00:07:31,140 actual submit button. 137 00:07:32,220 --> 00:07:36,510 So these are the only two things you need to worry about providing as far as each HTML is concerned. 138 00:07:36,540 --> 00:07:40,290 It's the form tag and then the input to say submit. 139 00:07:41,070 --> 00:07:47,580 And as a quick note, I should mention that Django documentation on forms in particular is absolutely 140 00:07:47,580 --> 00:07:48,270 fantastic. 141 00:07:48,630 --> 00:07:53,280 So I would highly recommend you take a little bit of time just to go through the Working With Forms 142 00:07:53,280 --> 00:07:55,350 page in the documentation. 143 00:07:55,380 --> 00:07:56,850 It's absolutely wonderful. 144 00:07:57,030 --> 00:08:00,930 The whole Django documentation is already really good, but this one really just takes the cake on how 145 00:08:00,930 --> 00:08:01,710 well it's explained. 146 00:08:01,920 --> 00:08:06,390 They talk about HTML forms and general get and post as HTP methods. 147 00:08:06,660 --> 00:08:11,100 And then they talk about how Django Forms comes into play as far as how it works for rendering. 148 00:08:11,370 --> 00:08:16,890 And essentially, what happens behind the scenes is Django is going to try its best to automatically 149 00:08:16,890 --> 00:08:21,420 generate these label and input pairs for you based off fields. 150 00:08:21,780 --> 00:08:27,780 And there's essentially a class called a form class, where each attribute is then a field which generates 151 00:08:27,780 --> 00:08:31,650 what they like to call an HTML widget, which is kind of a label input pair. 152 00:08:32,039 --> 00:08:34,679 So eventually, all you end up doing is after you create your form. 153 00:08:34,679 --> 00:08:41,460 Class is your code ends up a lot cleaner on the HTML side of things because you just pass in this little 154 00:08:41,460 --> 00:08:45,900 form along with a CSR token, which is also automatically created for you. 155 00:08:46,170 --> 00:08:51,390 So essentially, your team cleaned up a lot and all your forms just end up looking something like this. 156 00:08:51,660 --> 00:08:53,880 Of course, there is going to be more to it than that. 157 00:08:54,090 --> 00:08:58,080 And later on, we'll learn more about this and how we can actually loop through the fields of the forms. 158 00:08:58,380 --> 00:09:00,750 But for right now, we're just going to do something simple like this. 159 00:09:01,080 --> 00:09:01,380 OK. 160 00:09:01,740 --> 00:09:02,670 So how do we do that? 161 00:09:02,880 --> 00:09:08,400 Well, we started to come back to our application and create a new file, and this file is going to 162 00:09:08,400 --> 00:09:10,620 be called Forms Dot Pi. 163 00:09:11,760 --> 00:09:18,080 And this essentially follows really similar patterns to models that Pi remember and models that PI. 164 00:09:18,090 --> 00:09:22,950 You had this models and then you said models that model and you created your own model class. 165 00:09:23,460 --> 00:09:26,640 It's almost the same for forms that PI as well. 166 00:09:26,850 --> 00:09:33,300 Except this time we should be thinking about creating this in terms of forms with fields and label inputs. 167 00:09:33,690 --> 00:09:35,500 So let's go ahead and show you how it's done. 168 00:09:35,520 --> 00:09:42,840 We're going to say from Django import forms kind of in the same way we said from Django import models. 169 00:09:43,620 --> 00:09:47,330 And then after that, we're going to do is create our first form class. 170 00:09:47,340 --> 00:09:48,210 We say class. 171 00:09:49,050 --> 00:09:54,860 And then you typically by convention, say your own custom name, followed by form. 172 00:09:54,870 --> 00:10:01,590 So this is our review form and then you inherit forms that form really similar to how you inherit models 173 00:10:01,590 --> 00:10:02,160 that model. 174 00:10:03,150 --> 00:10:07,080 And you can tell there's a lot of connections here between models and forms. 175 00:10:07,080 --> 00:10:07,770 And later on, we'll see. 176 00:10:07,770 --> 00:10:12,150 There's actually a special model form that even more closely connects the two. 177 00:10:13,050 --> 00:10:20,160 So then after this, for every HTML label input pairing you want, you create an attribute inside this 178 00:10:20,370 --> 00:10:20,880 class. 179 00:10:21,150 --> 00:10:25,770 So for example, let's imagine I want to collect the first name of whoever is leaving a review. 180 00:10:26,280 --> 00:10:28,050 So I create an attribute. 181 00:10:28,080 --> 00:10:35,430 I call it first name and then I say Forms Dot and then the specific field that I want to have related 182 00:10:35,520 --> 00:10:36,660 to the HTML. 183 00:10:37,080 --> 00:10:39,270 Now, for example, I can see there's character field. 184 00:10:39,600 --> 00:10:42,210 And if you're wondering, how would I know which field to use? 185 00:10:42,540 --> 00:10:47,190 That is something you typically end up having to look up in the documentation. 186 00:10:47,310 --> 00:10:53,040 So what you do is after a while, once you feel more comfortable with figure out how forms work in general, 187 00:10:53,340 --> 00:10:56,670 you come to the documentation under form fields. 188 00:10:57,000 --> 00:11:01,000 And if you scroll down here, you're going to see a list of all the built in field classes. 189 00:11:01,020 --> 00:11:06,790 There's an email field, a float field, image fields, Boolean fields, time fields. 190 00:11:06,870 --> 00:11:09,120 There's even things like calendar widgets, et cetera. 191 00:11:09,480 --> 00:11:16,920 A lot of these just are essentially mappings from models to fields to the HTML label input pairings. 192 00:11:17,220 --> 00:11:21,630 So just keep that in mind as you get more familiar HTML forms and the label input pair types. 193 00:11:21,870 --> 00:11:24,630 You'll see that, OK, there's a bunch of classes that are related to that. 194 00:11:25,020 --> 00:11:29,250 And essentially, each of these fields, for example, character field, we're going to discover later 195 00:11:29,250 --> 00:11:32,160 on that it's actually connected to what Jingle calls. 196 00:11:32,320 --> 00:11:36,580 A widget so I can see here that I have this character field. 197 00:11:36,910 --> 00:11:42,640 And later on, I'll see that it actually generates a text input each HTML widget, which essentially 198 00:11:42,640 --> 00:11:46,300 saying, OK, the input type is going to be a text input type. 199 00:11:46,540 --> 00:11:48,010 So that's what that's trying to say. 200 00:11:48,160 --> 00:11:53,050 You can click on text input for more information and how it actually works, but it essentially says, 201 00:11:53,320 --> 00:11:57,520 OK, you create a character field attribute, which is what I just did here. 202 00:11:57,820 --> 00:12:00,280 First name is equal to forms, not character field. 203 00:12:00,640 --> 00:12:05,080 And then you end up doing, is you kind of close this off and you can actually provide a label for this? 204 00:12:05,140 --> 00:12:06,910 So the label could be something like first name. 205 00:12:07,390 --> 00:12:12,100 And as you may kind of guess here, that's actually going to be an HTML label type generator for you. 206 00:12:12,490 --> 00:12:17,920 And you can also generate things like validations like I want the maxlength to only be 100 characters 207 00:12:17,920 --> 00:12:18,700 or something like that. 208 00:12:19,360 --> 00:12:26,950 So once you create this actual character field, what happens is that ends up being connected to a widget, 209 00:12:27,160 --> 00:12:28,990 and that widget is called text input. 210 00:12:29,530 --> 00:12:34,150 The widget itself is going to be the thing that actually renders the HTML. 211 00:12:34,480 --> 00:12:36,980 You can see here this is now text input class. 212 00:12:37,360 --> 00:12:41,110 And this generates automatically input type is equal to text. 213 00:12:41,500 --> 00:12:45,160 Later on, we're going to discuss widgets and a lot more detail to give you a lot of customization. 214 00:12:45,190 --> 00:12:51,550 For example, I can say, OK, this particular widget let it have a red border, for example, but that 215 00:12:51,550 --> 00:12:53,440 just gives you the idea of how this is actually working. 216 00:12:53,800 --> 00:12:59,980 You start off with the fields that connects to a widget, which later renders the actual HTML. 217 00:13:00,100 --> 00:13:01,870 So it's a couple of steps of a process. 218 00:13:02,200 --> 00:13:06,250 For example, you have this email input widget, which is going to be the thing that generates input 219 00:13:06,250 --> 00:13:07,330 with type email. 220 00:13:08,280 --> 00:13:13,800 OK, so just give you an idea of what's possible here, let's create a couple more, let's say attributes 221 00:13:13,800 --> 00:13:15,780 which eventually are field label pairs here. 222 00:13:16,260 --> 00:13:22,050 So I'll say it last name is equal to forms, so make it also a character field or say label labels equal 223 00:13:22,050 --> 00:13:23,520 to last name. 224 00:13:24,810 --> 00:13:28,530 And let's also give this a maxlength, let's say, 100 characters. 225 00:13:29,250 --> 00:13:35,130 And let's also carry an email field, so we'll say emails equal to forms dot and this time I'll say 226 00:13:35,130 --> 00:13:35,910 email field. 227 00:13:36,330 --> 00:13:37,950 And let's give this the label of. 228 00:13:39,070 --> 00:13:39,520 Email. 229 00:13:40,610 --> 00:13:45,500 OK, so I have a very simple review form have their first name, last name, email, I should probably 230 00:13:45,500 --> 00:13:46,940 also accept their actual feedback. 231 00:13:47,630 --> 00:13:52,220 So let's create one last field called review, which is their actual text review. 232 00:13:52,670 --> 00:13:54,410 And we'll have this be a character field. 233 00:13:54,980 --> 00:14:00,980 And then we'll say label is equal to something like, please write your review here. 234 00:14:02,900 --> 00:14:03,190 OK. 235 00:14:03,230 --> 00:14:04,640 So please write your review here. 236 00:14:04,910 --> 00:14:09,500 I'm actually going to see that there's several limitations if I just use the default widgets, so we'll 237 00:14:09,500 --> 00:14:13,520 see that later on, that is actually going to be a really ugly looking field or form. 238 00:14:13,700 --> 00:14:15,980 But for right now, we don't need to really worry about that. 239 00:14:16,370 --> 00:14:18,550 OK, so major step done. 240 00:14:18,560 --> 00:14:22,970 I have my review form, but the question is how do we actually take this form? 241 00:14:23,540 --> 00:14:28,280 Pass it into my view so that it shows up here inside the HTML? 242 00:14:28,340 --> 00:14:29,300 How does that actually work? 243 00:14:29,810 --> 00:14:37,280 Well, what we need to do is come back to views that pie and be able to import the form I just created 244 00:14:37,280 --> 00:14:37,610 there. 245 00:14:38,800 --> 00:14:42,040 So at the very top of this, what I'll say is. 246 00:14:43,420 --> 00:14:50,110 From the forms import and then you can begin to import the forms you created, such as a review form, 247 00:14:50,950 --> 00:14:56,020 and then what I'm going to do is set up a situation here where I have to check whether or not they're 248 00:14:56,020 --> 00:15:02,920 submitting the form so they could be passing in a post request, in which case I need to check the form 249 00:15:02,920 --> 00:15:03,520 contents. 250 00:15:04,770 --> 00:15:08,400 And if they're all valid and OK, then I take them to the Thank You page. 251 00:15:09,810 --> 00:15:12,060 Else then, I just need to really render the form. 252 00:15:12,900 --> 00:15:15,720 So let's start with the easier one, which is elsewhere into the form. 253 00:15:16,080 --> 00:15:18,000 So to do this, I'll set up my if statement. 254 00:15:18,450 --> 00:15:27,450 So I'll say if I request that method is equal to post or equality, then I'm going to do something. 255 00:15:28,260 --> 00:15:31,500 And then here else, I'm just going to create the form. 256 00:15:32,010 --> 00:15:36,990 So I'll say else form is equal to an instance of review form. 257 00:15:37,920 --> 00:15:43,140 And then I need a pass in that actual form to show up inside rental review that each HTML. 258 00:15:43,620 --> 00:15:48,120 So to do that, I can simply say context is equal to and then pass in the dictionary here. 259 00:15:48,120 --> 00:15:50,700 Form colon form. 260 00:15:51,910 --> 00:15:55,210 So all this is saying is, hey, I'm passing in some context. 261 00:15:55,390 --> 00:15:57,010 Go ahead and pass in the form. 262 00:15:57,310 --> 00:16:02,710 So I'm actually passing in this special form object, which is created from this class, which we already 263 00:16:02,710 --> 00:16:05,560 know renders widgets, which renders actual HTML. 264 00:16:06,100 --> 00:16:14,530 Then what I need to do is inside the HTML file that accepts this form is just follow the instructions 265 00:16:14,530 --> 00:16:19,810 on the documentation, which is essentially just with two sets of tag layers pass in the form. 266 00:16:20,050 --> 00:16:23,050 And this essentially generates a bunch of labels and inputs pairs for you. 267 00:16:23,560 --> 00:16:28,300 Now remember, there is a security aspect where we don't want anybody to just kind of copy and paste 268 00:16:28,300 --> 00:16:30,430 this form and maliciously send it out. 269 00:16:30,760 --> 00:16:36,460 So for that, I can automatically create a SRF token, which is a special token only for that particular 270 00:16:36,460 --> 00:16:36,910 session. 271 00:16:37,120 --> 00:16:41,920 Essentially, that instance where the user is viewing that page to do that automatically through Django 272 00:16:42,430 --> 00:16:45,520 is just a tag where you say, See us f. 273 00:16:46,780 --> 00:16:52,570 Token, and if you forget this, Django is essentially going to warn you saying Caesar are, you know, 274 00:16:52,750 --> 00:16:57,610 invalid or not passed, etc. So it may actually even say, hey, remember to put in the token or something 275 00:16:57,610 --> 00:16:58,000 like that? 276 00:16:58,330 --> 00:16:58,600 All right. 277 00:16:58,870 --> 00:17:03,370 So now all your forms are going to look something similar to this where you have the token and then 278 00:17:03,370 --> 00:17:08,260 you just pass in the form and all the heavy lifting of this line 12 is done for you within Django. 279 00:17:08,950 --> 00:17:11,800 Save the changes and come back to views to finish this off. 280 00:17:12,670 --> 00:17:14,839 So the second one or a second step already done? 281 00:17:14,859 --> 00:17:18,910 If they're just visiting the page for the first time, go ahead and create the form and then pass it 282 00:17:18,910 --> 00:17:19,660 in as context. 283 00:17:20,140 --> 00:17:21,730 Now what if they actually hit submit on that? 284 00:17:22,119 --> 00:17:27,700 So if they actually hit submit, that means they're saying, OK, post method initiated, then in that 285 00:17:27,700 --> 00:17:33,490 case, I can actually create a, for instance, and automatically populated with the data from the specific 286 00:17:33,490 --> 00:17:34,030 request. 287 00:17:34,750 --> 00:17:42,580 This is done by saying form is equal to review form and then you pass in the actual request, which 288 00:17:42,580 --> 00:17:47,290 you know, is essentially going to match exactly the labels and inputs because it's the same form that 289 00:17:47,290 --> 00:17:48,580 was originally rendered there. 290 00:17:49,030 --> 00:17:53,650 This is probably kind of one of the confusing syntax codes, but you can think of this as just hey there 291 00:17:53,650 --> 00:17:57,700 to fill out the form now actually pass it in to Django to check if it's valid. 292 00:17:58,120 --> 00:18:01,510 Speaking of which, the next step should actually be checking if the form is valid. 293 00:18:01,510 --> 00:18:09,070 So say if form underscore is, or excuse me, if form dot is underscore valid. 294 00:18:11,350 --> 00:18:14,140 So it looks something like this, you have this little extra check. 295 00:18:14,500 --> 00:18:19,060 And this is essentially Jango checking automatically things like, OK, did they actually pass? 296 00:18:19,060 --> 00:18:24,280 An email to the email field was the first name short enough was less than hundred characters, et cetera. 297 00:18:24,880 --> 00:18:26,560 So you check if the form is valid. 298 00:18:27,250 --> 00:18:32,450 In that case, you can actually later on do things like save the form to a model if it's a model for 299 00:18:32,860 --> 00:18:33,670 before right now. 300 00:18:33,940 --> 00:18:38,860 Well, we're going to do is just print out at the command line, the actual form data, which is form 301 00:18:38,860 --> 00:18:40,990 dot cleaned data. 302 00:18:41,410 --> 00:18:43,750 This actually ends up being a dictionary you can play around with. 303 00:18:44,020 --> 00:18:45,900 You'll see later on, but it looks something like this. 304 00:18:45,910 --> 00:18:49,900 It's essentially saying something like first name colon. 305 00:18:49,900 --> 00:18:52,990 And then what was passed then by the user could be something like, you know, Jose. 306 00:18:53,230 --> 00:18:55,870 And it does that for last name, email review, et cetera. 307 00:18:56,320 --> 00:19:00,430 And then after that, so they just submitted the form we get to do whatever we want with the form, 308 00:19:00,880 --> 00:19:03,880 and then it's up to us to redirect them to another page. 309 00:19:04,150 --> 00:19:10,720 To do that, I'm going to redirect them to the thank you page, which means I need an import redirect 310 00:19:10,720 --> 00:19:11,350 as a shortcut. 311 00:19:11,950 --> 00:19:14,770 And then I'm also going to say from Django that URLs. 312 00:19:16,550 --> 00:19:17,720 Import reverse. 313 00:19:18,350 --> 00:19:23,240 So remember, inside my URLs that file I have thank you as a name here. 314 00:19:23,630 --> 00:19:26,240 So I'm just going to say, look up the cars. 315 00:19:26,390 --> 00:19:27,110 Thank you. 316 00:19:27,710 --> 00:19:30,020 Your URL pattern and then go to that view. 317 00:19:30,170 --> 00:19:32,300 That's a reverse lookup, as we discussed earlier. 318 00:19:32,900 --> 00:19:33,670 So how do I do that? 319 00:19:33,680 --> 00:19:44,500 I simply say the following I say, OK, return a redirect to a reverse lookup of the URL cars underscore. 320 00:19:44,510 --> 00:19:44,930 Thank you. 321 00:19:46,460 --> 00:19:47,570 And then save that change. 322 00:19:48,350 --> 00:19:48,620 OK. 323 00:19:49,070 --> 00:19:50,280 So kind of a lot here. 324 00:19:50,300 --> 00:19:53,030 Let me zoom out so you can see everything at once. 325 00:19:53,510 --> 00:20:00,930 But what we've done here is after we create this form class, we go ahead and import it into our view. 326 00:20:00,950 --> 00:20:03,590 Notice again, I'm importing that actual form. 327 00:20:04,130 --> 00:20:06,710 Then you check, Hey, are they actually posting something? 328 00:20:07,040 --> 00:20:09,650 If so, pass that information into the review form. 329 00:20:09,980 --> 00:20:14,690 And if it's valid, then I can do whatever I want for the information by accessing it through what's 330 00:20:14,690 --> 00:20:15,980 essentially a Python dictionary. 331 00:20:16,220 --> 00:20:17,960 And then here I'm going to redirect them. 332 00:20:18,350 --> 00:20:22,040 So will we actually see the information here inside our terminal? 333 00:20:22,610 --> 00:20:26,570 Otherwise, it's the first time visited page to have a hit, submit the go ahead and just create the 334 00:20:26,570 --> 00:20:28,910 form and then pass it in here as context of the page. 335 00:20:29,120 --> 00:20:34,040 Which then means if you come back here to run to review that HTML, that's being passed in here into 336 00:20:34,040 --> 00:20:37,190 the form and looks like we have a small typo here. 337 00:20:38,030 --> 00:20:39,770 This is just the autocomplete that messed me up. 338 00:20:40,100 --> 00:20:41,750 So we have form action is equal to post. 339 00:20:41,750 --> 00:20:44,510 This really should be method is equal to post. 340 00:20:44,690 --> 00:20:45,100 There we go. 341 00:20:45,110 --> 00:20:49,340 We actually don't worry about action that's taken care of us through the rerouting in Django. 342 00:20:49,340 --> 00:20:53,540 But again, this should really be method as equal to post as essentially stated here. 343 00:20:53,540 --> 00:20:55,160 Hey, request, that method is equal to post. 344 00:20:55,580 --> 00:20:55,880 All right. 345 00:20:56,300 --> 00:20:59,690 So let's go ahead and check this all out that it's working. 346 00:21:00,020 --> 00:21:07,120 What we're going to do is just go to our rental review page and you should see a H. 347 00:21:07,190 --> 00:21:08,410 HTML form there now. 348 00:21:08,420 --> 00:21:15,020 So if you come to rental review, you're going to see a pretty ugly but workable H html form. 349 00:21:15,320 --> 00:21:16,940 So let's actually pass on some information. 350 00:21:16,940 --> 00:21:19,760 So we'll say first name, last name, email. 351 00:21:19,760 --> 00:21:24,020 This does have to be something that looks like an email, so we'll say gmail.com and then we'll write 352 00:21:24,020 --> 00:21:28,910 a review to the car was great hit submit query and it took us to the Thank You page. 353 00:21:29,390 --> 00:21:31,310 So did this actually work? 354 00:21:31,460 --> 00:21:37,340 Well, remember, we're not actually doing anything with that information, except inside of View's 355 00:21:37,340 --> 00:21:37,820 remember. 356 00:21:38,030 --> 00:21:39,650 I said, OK, the form is valid. 357 00:21:39,920 --> 00:21:44,030 Go ahead and print form that clean data, and I can see it was printed out here. 358 00:21:44,540 --> 00:21:46,480 So what is form that clean data? 359 00:21:46,490 --> 00:21:51,580 It is a Python dictionary that gives you a lot of power over the sort of things you can do. 360 00:21:51,590 --> 00:21:56,270 If that information, if you really want it to, you could then just import this or inject it straight 361 00:21:56,270 --> 00:21:57,320 into a model. 362 00:21:57,620 --> 00:22:01,460 Later on, we'll see that there's actually a much better way of doing that using a model form class. 363 00:22:01,790 --> 00:22:08,140 But that is the kind of very basic elements of an HTML form being generated by Django. 364 00:22:08,660 --> 00:22:08,970 OK. 365 00:22:08,990 --> 00:22:14,060 Coming up next, we're going to do a lot more discussion of certain details, especially considering 366 00:22:14,060 --> 00:22:18,680 widgets and how to make that forms look better in general or better in general. 367 00:22:19,010 --> 00:22:20,840 OK, I'll see you at the next lecture.