Custom Form Media

We're pretty good at creating and using forms. 0:00 Sometimes, though, 0:02 our forms aren't going to be just the HTML that Django generates for us. 0:03 Or even the HTML we create for ourselves with Djangos help. 0:07 Sometimes we're going to need to bring in some outside libraries, JavaScript and 0:11 CSS, to give our forms and extra bit of oomph and power. 0:14 Forms have a built in way of adding assets to our page. 0:19 So let's go take a look at that and make our answers a little easier to order. 0:22 So I said earlier that I wanted to make it to where I could drag and 0:26 drop these in order to be able to reorder them. 0:29 And so I'm gonna do that. 0:32 So a couple of things that we're gonna use, 0:37 there's this really good tutorial from Nicole Harris. 0:39 And I'll have links to all of these in the teacher's notes about implementing 0:43 Django Formsets and she goes through basically the stuff we've already done. 0:47 But she also uses this jQuery plugin, which we're 0:52 also going to use, that will do dynamic formsets. 0:57 You remember I mentioned before, let's look at this real quick. 1:02 Inspect Element. 1:06 Look at this form. 1:09 Here we go. 1:12 So you see these inputs here that are all hidden. 1:12 That's TOTAL_FORMS, INITIAL_FORMS, MIN_NUM, MAX_NUM. 1:16 So these are the, when we rendered our form. 1:20 [SOUND] Sorry I have to jump around so much here. 1:25 When we rendered this management_form, that's what those fields are. 1:28 And those have to be updated to make Django happy. 1:31 So this little plugin here handles that updating and 1:36 then we're gonna use this sortable library from rubaxa. 1:41 That's just a nice little sortable and 1:47 we're gonna be using this for the sorting, the drag and drop. 1:50 I'll have links to all this in the teacher's notes, and 1:54 these things are already inside of your workspace. 1:58 So we have this jQuery formset one here and then down here we have these others. 2:01 And let's talk about how to use these, because these belong to the courses app. 2:05 And we don't want to have to put all of our media in 2:10 the HTML for our form page. 2:14 I mean, if the form uses the media, 2:19 the media should come with the form is the way I see it. 2:22 So let's go back over here to forms.py, and right now we have these two 2:26 forms for our true false and our multiple choice. 2:31 Let's add. 2:36 Sorry, there we go. 2:41 Let's add a QuestionForm, which is a ModelForm and 2:42 let's set the media on this and then we'll make each of these be a QuestionForm. 2:47 So we set the media by defining not class Meta, but class Media. 2:55 And then CSS is a dictionary, 3:00 because we can have all, screen, print, that kind of stuff. 3:04 And we're gonna say that we want courses/css/order.css. 3:09 And since that's a tuple, we have to put a comma in there. 3:15 And then JavaScript, we don't have any sort of screen all equivalent, 3:18 so these are just listed as elements in a tuple. 3:24 So, we're gonna say, 3:27 courses/js/vendor/jquery.fn.sortable.min- .js. 3:30 It's quite the name, and courses/js/order.js. 3:36 Now these are inside of static courses and then CSS or js. 3:42 But we just start with courses, 3:48 because Django knows how to find static media through its static media finder. 3:50 And then we're gonna come down here and change both of these to be QuestionForm. 3:55 And the main reason for doing that is just so 4:06 that we don't have to repeat ourselves over and over again on this. 4:08 Okay so the forms now have media but we're not displaying the media anywhere. 4:11 So what we need to do is, well, first of all let me show you something. 4:16 In this layout I've added a couple of blocks. 4:21 One of which is block css, which appears here at the end of all the CSS stuff. 4:23 And the other one down here at the bottom is block javascript, 4:28 which appears down at the footer with all the other javascript stuff. 4:31 So that way we can insert some CSS or 4:35 some JavaScript into our HTML without having to do a lot of work. 4:38 So, in QuestionForm let's just do this at the bottom cuz it doesn't matter. 4:45 Blocks can go anywhere. 4:50 Let's make a block css. 4:51 And inside here, we're gonna do form.media. 4:56 And that would print out all the media. 5:01 But we just wanna print out the css part of the media. 5:03 And then end that block. 5:07 And believe it or not, we want to do the same thing for our JavaScript. 5:10 So, block javascript and 5:17 form.media.js. 5:23 And if you were paying attention earlier, 5:31 I talked about this Django dynamic formset. 5:33 Now, that doesn't belong to our form. 5:35 That belongs to our formset. 5:38 And while I'm sure we could probably find a way to specify media on our formset, 5:40 that's a little bit weird and a little bit cumbersome. 5:44 So, wherever we're gonna be using our formset, 5:47 we'll just go ahead and do the work there. 5:51 So we need to load static from static files. 5:54 This is also why I didn't put the formset ones into courses, I put it up here into 6:00 our site wide assets because you might be using it on more than just courses. 6:04 If you find yourself using say the jQuery sortable one on more than just courses, 6:09 you'd want to move it out as well. 6:13 So we're gonna load that and then let's do a script tag, 6:16 src ="{% static 6:19 'js/vendor/jquery.formset.js' 6:24 %}". 6:33 And then we need to specify some script tags period, 6:34 because we need to specify what to do. 6:40 So you remember we called those forms answer-forms and 6:44 we say that that's a formset And 6:48 we want our addText attribute to be be add answer. 6:52 And we want our deleteText attribute to just be the word remove. 6:57 Okay, cool. 7:03 So there's our stuff. 7:04 So let's refresh this and see what we've got. 7:07 Can I drag this? 7:11 I can, cool. 7:12 And if I let go, they should get numbered. 7:14 So if I want Emoji only to appear up there blah blah blah. 7:17 We've got remove, so I can remove these blank ones or 7:20 I can remove an existing one. 7:24 Let's Save and see what happens. 7:26 When we come back, oh, it didn't actually remove it. 7:29 But you can see that we've changed our order, which is great, and 7:33 then if we hit add answer, it gives us another form to fill in. 7:38 So it's really nice being able to do all these bits and pieces. 7:43 So you might have noticed before when I hit remove on ASCII and 7:47 then hit Save, that ASCII is still there, still hanging out. 7:52 So we need to go and change our view, so 7:57 what we're gonna do down here is we're gonna say, we're not gonna go that far. 7:59 We're gonna say for answer in answer_forms.deleted_objects. 8:05 Cuz deleted_objects is a list of objects that have been chosen to be deleted. 8:14 Then we're gonna say answer.delete, so delete that item. 8:18 So we're gonna go ahead and Save. 8:24 And then we're gonna come back over here and we're gonna say remove again. 8:27 And we're gonna hit Save. 8:32 There we go. 8:34 And our question's updated and ASCII has been removed. 8:35 So, awesome. 8:39 That required a few extra steps but none of it was out of our league. 8:40 In fact, I'd say we're more than well enough equipped to handle this and 8:44 just about any other situation a form throws at us. 8:47 We only updated the answer formset on the edit question page, but you should 8:50 probably go back and add similar UI features to other parts of the app too. 8:54 So there you have it, forms in Django are an amazingly versatile tool. 9:00 We can use them for validating data, general purpose HTML forms, and 9:03 to provide a quick and easy way to edit or create model instances. 9:07 Forms are used in lots of internal places in Django too. 9:11 For example Django's admin automatically creates forms for 9:15 you when you register a model with it. 9:17 You use these forms to update and create your model instances as in the past. 9:20 You can even provide you own forms for the admin to use. 9:24 And something we haven't talked about yet, but Django's generic views, 9:29 will also auto-create forms for you to use too. 9:32 You can look forward to a course about those later on. 9:35 Django's forms are a great addition to your Django toolbox. 9:39 And something I'm sure you'll find yourself using in every project. 9:41 Thanks for learning with me and I'll see you next time. 9:45