Hello and welcome to another walk through for Django for everybody. In this walk through, we're going to play with the crispy forms. Crispy forms are a good example of how Django just has something and you plug it in and things just get better and it doesn't take much work on your part. So the simple thing is, is let's take a look at a boring form. This is the form we've been doing in our crud, and I'm using a form to do it. All I have to say is let's just make that a crispy form. Now things are pretty. They got all these colors, they got the highlight, there's a bunch of CSS. The markup of forms is actually surprisingly complex. If we take a look at the markup in this crispy form, it's got some CSS in there and it's just, there's a lot to it. So if we look, we've got all this classes and fancy stuff and so crispy takes care of that for us, and the key, I'll show you in a second, the key difference is just not that big of a deal. So let me walk through the code. So here is my crispy URLs. So what we're going to do is use the same view and just switch between two templates. One called boring and one called awesome. Crispy is urban dictionary for awesome or cool or whatever. I'm not sure how cool of a word cool it is, but it doesn't matter. This is a riff on some of the forms code. This is a real basic form. I don't have any models in this one, and so I'm just using forms and putting them on the screen, and so I just got a simple form with the string, mileage and purchase date and validators so I can make some mistake. This is just a view just similar to other things we've done in forms. I'm making a class that extends view, and I've got to set this template named none, because really what I want to do is I want to pick the template name, here in urls.py. Something about how DJango works, you've got to put this in so that then you can override it here. I like putting templates in here and success URLs in here when I possibly can, it just seems like the routing is going on here in urls.py and so I like doing that. So you'll note there's only one view, but we're doing two things, and that's because we're just taking self template name and doing the exact same thing. So the boring form, it basically is loading some old data, making a form, pulling in the initial data for that, and then passing it into the template and then rendering the template. At the post, if I submit the post, this would be saving the data, You'd read the post-data, check to see if the form is valid, if it's not, send an error message, and then if we'll see a flash message, I'll show you that in a bit, and then we just redirect to a reverse. So if for example, what happens if we violate a rule, we get this, please enter two or more characters. That's something we've been doing before, and that's just get post of an edit form. So let's take a look at the template that creates this. We're going to do base bootstrap. Put a title in, override a welcome. So if you take a look at base bootstrap, I should add a link here to show you base bootstrap, cd.. vi home templates, base bootstrap. So base bootstrap has a number of different blocks that we can override. The title block, the headblock, which is some material to put before the slash head on navigation bar if we wanted a welcome message, and then we'll talk about these little flash messages in a second, like alert messages and then the content and then some footer maybe we want to put some JavaScript in at the bottom of a page. So we've got these hotspots in bootstrap, base bootstrap HTML. So we're going to extend it. We're going to set the title, I'm going to put an h1, which is like a welcome. It's the beginning of the body, and then there's going to be some messages that come in here in a second. Then here's our normal block. So we got a form, we have to put the CSRF token in that just puts out that input hidden tag, so that we avoid Cross-Site Request Forgery, CSRF. We're going to use form as table, form is the context variable as table basically renders it as a series of table rows and then slash table. So if we do an inspect element here, let's do just Google page source because my screen is too small so that you can see it on a sweet little mobile. So it's got the table, and then [inaudible] using trs and ths and slash ths and just putting it out. Not a lot of CSS, it's using the table so that these things can be lined up. That's what it tried to do, it has some aesthetic and away it goes. So the form as table, like if you make a mistake, this ends up, you page source, close that one. You see that this is just another somewhere here. Where's the error message? Yeah, it's just another table row and it uses the table, and the table helps it do all this alignment, but it's not very pretty. So then we have the table, we have our Submit buttons and our Cancel buttons, and we end our form. So we've been doing this now for a while, just making boring forms. So if I go to awesome, so I got to cancel here and I go to the awesome form, then I am going to render crispy/awesome.html instead. So let's go there. So it looks almost the same. So here is boring, even here is awesome. So most of it is identical, it's extending base bootstrap, it's setting up a title, it's putting up a welcome chunk. But then we have this. When you're using a curly brace percent load crispy form tags, that's like running code basically like the URL, that's a curly brace URL crispy main.py. That's running code. It's like the reverse. It's calling reverse to compute a URL given a string as a parameter. So this is like making sure crispy is loaded for this page. If you do not do that, then this curly brace form vertical bar crispy, will not work. Then the rest of this form is identical, except we just don't tell the form to render itself as a table. We use vertical bar crispy here, form vertical bar crispy and this is called a filter. We'll see another filter in an upcoming video where we'll make actually one of these filters our self. So we're taking the form object and piping it through a bit of code from the crispy library. So it's not in the table, that renders all of the HTML, per title, purchase date, and all that stuff. It has all the CSS, it makes it all gorgeous. So that's what it does. So form crispy does all that and that's the main difference. So then loading crispy form tags, that's the key thing. Everything else is the same. We had a table form as table and slash table. Then we load crispy form tags and then we just pipe form, vertical bar crispy, and everything else is the same. Then we get this beautiful crispy form and it makes things consistent. So you just use crispy forms. I'm not saying you can't build your own form system, but for me as a software developer, I like starting out with something that looks half pretty, and then away it goes. So that's crispy forms. That's how you use crispy forms. But let me show you a little bit more about how that works. Let me close a couple of my windows. So one of the things that happens is you've got to load in your settings.py you've got to add crispy forms to your installed apps. So if you do like python3 manage.py check, you've been doing this a lot. It loads up all these things. So it's checking and loading and loading and it's reading through the settings.py, it's loading all of these things. This humanizes a thing that we'll talk about that later. Django extensions, we'll talk about that later. All these things we'll talk about later, but crispy forms is a bit a code library that you're at that point pulling in. So if you don't put that in, then crispy forms is going to blow up. It's going to blow up right here because it can't load the crispy form tags. So that's the first thing. But then you have to install this and you probably don't recall. In the very beginning, I had you checkout. Let me go to that DJ, I got it right here. dj4e.com, "Lessons", installing Django on PythonAnywhere. So if I look at the assignment specification you did a very long time ago, you make a virtual environment, you go into your virtual environment and then I told you to go grab DJ free samples. This is in the very beginning of the class and I told you to pip install minus r requirements.txt. Requirements.txt is a file that looks like this. What it does is pip. Pip reads this file and downloads a bunch of extensions. Django crispy forms, Django filter, Django rest framework. So literally now for weeks you've had these all, it's installing it into your virtual environment. That's why sometimes if you run Python check and you're not in your virtual environment, it'll blow up. But then I say, well, go into your virtual environment and it starts working. I need to run server because I'm running this locally. So because you installed these things into, you install the requirements into your Django3 virtual environment. So that's why when it reads the settings.py and sees crispy forms in the installed apps, then it's like crap, I don't have it, but that's because you're running the loading of this file not in your virtual environment that has all that stuff installed. If you're doing this outside the class, you will want to make a virtual environment and then do the pip install for requirements.txt. So that's two prerequisites at edit settings.py. Make sure you have crispy forms in your requirements and then pip install from the requirements. Then it's pretty simple. You just load the crispy form tags and then pipe the form object in a template through the crispy filter, and then you will get gorgeous forms without hardly even trying and you just keep using it. So that's our summary of crispy forms. I hope you find it useful, we'll pretty much use crispy forms from this point forward in the course. Cheers.
