# Python Django Tutorial: Full-Featured Web App Part 6 - User Registration

## Метаданные

- **Канал:** Corey Schafer
- **YouTube:** https://www.youtube.com/watch?v=q4jPR-M0TAQ
- **Дата:** 31.08.2018
- **Длительность:** 45:55
- **Просмотры:** 659,977
- **Источник:** https://ekstraktznaniy.ru/video/12148

## Описание

In this Python Django Tutorial, we will be learning how to use forms and validate user input by creating a user registration page. We will also learn how to install and use Crispy Form so that our forms match the modern style of our application. Let's get started...

The code for this series can be found at:
https://github.com/CoreyMSchafer/code_snippets/tree/master/Django_Blog


✅ Support My Channel Through Patreon:
https://www.patreon.com/coreyms

✅ Become a Channel Member:
https://www.youtube.com/channel/UCCezIgC97PvUuR4_gbFUs5g/join

✅ One-Time Contribution Through PayPal:
https://goo.gl/649HFY

✅ Cryptocurrency Donations:
Bitcoin Wallet - 3MPH8oY2EAgbLVy7RBMinwcBntggi7qeG3
Ethereum Wallet - 0x151649418616068fB46C3598083817101d3bCD33
Litecoin Wallet - MPvEBY5fxGkmPQgocfJbxP6EmTo5UUXMot

✅ Corey's Public Amazon Wishlist
http://a.co/inIyro1

✅ Equipment I Use and Books I Recommend:
https://www.amazon.com/shop/coreyschafer

▶️ You Can Find Me On:
My Website - http://coreyms.com/
My Se

## Транскрипт

### Introduction []

hey there how's it going everybody in this video we're gonna continue our django series by learning how to use forums and also how to validate user input to create a user registration page so the application that we're creating is going to have the ability for users to create an account login make posts and things like that and the first part of that process is to create the registration page where a user can create an account on the website and then be able to log in and log out now the admin page that we've seen in previous videos might be good enough if you're the only person using your site but if you're making an application that anyone else can sign up to or will be using you know something like a Twitter or YouTube or something like that then you'll have to have another way for people to create an account and log in to your page other than the admin page because none of those sites I just mentioned give you access to their admin sites when you're ready to make an account or write post you know they provide front-end forms for you to do that kind of stuff so that's what we're going to be doing in this video so let's go ahead and get started now the first thing that we should do is to think about how the user logic will relate to our project as a whole so the user account portion of our project is going to have its own forms and templates and routes and things like that and that is logically going to be separate from the blog itself so the best thing to do here would probably be to create a new app inside of our project where all of that is going to be contained in its own section that way we know when we want to update something with our user accounts then we'll know exactly where to look we can just look in a users and a user app so first of all let's go ahead and create a new app and we've already seen how to do this when we created our blog app so in our command line we need to be navigated to our project directory so this is going to be where that manage py file is located and to create our users app we

### Create Users App [1:45]

can simply say whoops let me click on here we can simply say Python manage py start app and now the name of our app and we'll just name this app users and so that will create the app that will handle all of the user logic for us so now if we open our project in an editor then we should be able to see our new users app within our project ok so now

### Add Users App to Project [2:07]

we can see that it did create that new users app so now we have our blog and we have our users apps and then we have our Django project main project folder okay so now we can see that we have that users app and now we want to create a user registration page where users can sign up and create accounts from the front end of our website now first of all remember what I said when we created our blog app when we first create a new app let's go ahead and immediately add it to our installed apps list in our project settings and that will save us a lot of headache and debugging if we forget to do that so I'm going to open up our project settings py file and then I'll scroll down here to our installed apps now we can see that we added the blog dot apps dot blog config now you can probably guess what this will be it'll probably be users dot apps dot users config but just to make sure if you always if you want to check that you can just open up your app so I'll open up the users app here and go to that apps dot py file within there and then that is where your user config class is going to live so this is what we want to add to our installed apps so I'll go back to our installed apps here and remember this is a string so there's going to be users dot apps dot users config and don't forget to put a comma after that because that installed apps is a list ok so now first things first let's start with the view that will handle the logic for this register route so we won't create the URL pattern just

### Create Register View [3:40]

yet so first let's open up our views dot py module within our users app and we can see that this is a fresh views file and now let's create a register view so right here where it says create your views we'll create a register view and that's just a function and remember that this has to use the request so we will pass that in and now we need to create a form that is going to be passed to the template that we will create for this view now if you were to create forms from scratch then it can get pretty complicated pretty fast so you'd have to put in different kinds of validation checks to make sure that the user was inserting information correctly make sure that they're hashed passwords matched you might have to write some regular expressions to make sure that there that they entered a valid email and all kinds of things that can be extremely complicated but luckily this process is so common that we don't have to reinvent the wheel here so Django takes care of a lot of this stuff for us on the backend so this is kind of similar to the database models in the sense that we can create Python classes and these classes generate HTML forms for us and some classes already exist so for example we want a registration form so users can sign up for our site now in this case we can simply use the user creation form that already exists in Django so like I said these forms will be classes that will get converted into HTML so we can create our own forms and we'll do that in just a bit but for now if we want a form to create a new user then Django already provides that kind of form for us we just need to import it so we can import this up here at the top simply by saying from Django dot contrib dot auth dot forms import user creation form and it's easy to mess these up make sure all of this is spelled correctly ok that looks good ok so now let's use this form and our register view now to do that we just need to simply create an instance of the form so I can just say form is equal to user creation form and put the parentheses there to create a new instance and now let's render a template that uses this form now this template doesn't exist yet but we'll create it in just a second so let's go ahead and render this so I'll just say return render and remember the first argument to render is the request object and now our template so we haven't created this template yet but we will in just a second so I will create this in users forge slash register dot HTML and now let's pass in our form as the context to that template so that we can access the form from within the template and remember to do that we can just simply pass in a dictionary and we want to access that from a variable of form and the value that we want that to have is the new instance of our user creation form that we just created there ok so now we just need to the template that uses this form variable that we just passed in so to create this we can create a templates directory within our users app just like we did with our blog app so I'll say new folder and I'll call this templates and then remember within templates it's the Django Convention to now create another subdirectory with the name of the app so this we are in the users app so I'm going to create another new folder and call this users and now within this users subdirectory and templates we can create our template and we want this to be register dot HTML and just like we

### Create Register Template [7:20]

saw in our templates video we're going to want to extend the base template and then a fill in our content block so just to get us started let me go ahead and grab a template that already exists that has some of this information filled in so I'm just gonna use the about template from our blog app so I'm going to copy all of that and paste this into our register template so we can see here that we're extending the blog base HTML template so even within our users app we can reference templates from our blog app which is really nice and now we want to put our form in a div with a class of content section so I'm going to create a new div here and let's give this a class and this is just a custom class that is within our CSS file that we've already added and I'm gonna call this content section and that part's just for styling the important part here is the form so now within this div we're going to create a new form and our form let's give this a method equal to post and if you don't know what that post method means then don't worry about it quite yet we'll talk about that here in just a second but now let's go ahead and continue with our form so within our form we need to add something called a CSRF token now this is a hidden tag and it is something that you need to add here but don't worry too much about what it does it's adding something called a CSRF token or a cross-site request forgery token and this will protect our form against certain attacks so it's just some added security that Django requires so we're gonna need to add this to every form but don't worry too much about the underlying details now if you don't have it then your form won't work so we have to put it in so at the top of our form here inside of our form are going to put a code block there and we'll say CSRF underscore token and once we have that token in place now we can simply access the form variable that we passed in to the context of this template but first I'll put in a fieldset tag which is used to group related elements in a form and I'll also add a legend for our form as well so I will say field set and within fields set I will give this a class equal to form - group this is just a bootstrap class and now I'll give this form a legend and this will just give our form a little bit more detail all right so I'm going to give this some bootstrap classes as well a class of border - bottom and also MB which is margin bottom of 4 so we'll save that and we will give the form a legend of join today okay so with those in place now let's just print out our form so we can simply just access that form variable that we passed into the context just like this and that should print out our entire form so just specifying that form variable will display all of the form labels and fields that we need but we also need a submit button for our form as well and that's not going to be included in the form so we'll add this after the field set and we'll add some styles to this as well just to make it look a little nicer so I will give this put this in a div and this div I will give a class of form - group and within this div let's create a button and this is going to be our submit button so we can just have this button say sign up and now let's also give this button some bootstrap classes as well so it looks a little nicer so I'll give this a bootstrap class of VT n which is button then BTN - outline info and we also have to specify the type of this button so this type of button is a submit button so that's all lowercase there so this is a submit button with sign up text okay and lastly let's add one more thing here so remember that we're creating a register page where new users are going to create accounts now in a lot of websites you'll see where they have a link on the register page that says do you already have an account if then just go sign in instead of creating a new account so let's put something like that here as well so let's put this under our form so underneath our form I'm going to put another div and let's give this some classes as well just to separate this out a little bit I'll give this a class of border - top and then also I'll give it a padding top of three so PT - 3 and now let's just put some small text here at the bottom that says do you already have an account well if so then just go ahead and go sign in so we'll have this be small text and we'll also give this a class equal to text muted which in bootstrap is just some kind of you know dull text that doesn't stand out a lot so the text here will say already have an account question mark and let's actually spread this out on two lines here so we can see everything so after the question mark here then we'll just say already have an account and then put a link to the signup page or to the sign-in page so I'll create an anchor tag here and that anchor tag will just have that go nowhere for now so I'll put that hashtag or pound sign there and I'm also going to give this a class here with a margin left so I'll say ml - 2 which is a margin left with a value of 2 that way it's just split up from this text a little bit so now within this link we'll just have this link say sign in so I think this is a good template for our register page right now we'll add some additional validation feedback to this form later on okay so our register page is almost ready to go we only need to do one more we need to create a URL pattern that uses our register view so that we can navigate to this page in the browser so in our blog app we created our own urls module for the blog and we could do the same thing here but I'm going to hold off on that for now and just import our view directly within our projects URL spy module and create a URL pattern for it there so let me show you what I mean so let's open up our actual projects URLs module and this is the one that has the path to our admin page and the empty path to our blog URLs so like I was saying we could have created a URLs module inside of our users app like we did with our blog and then included it within a pattern here but instead I'm just going to use the view directly by importing it so I'll say from users import views and we'll import that as user underscore views because it's possible to import multiple views so you want to you know change this to whatever app it is with the underscore views there okay so now let's create a URL pattern that uses our register view so underneath admin here I will create another path and the path that we want to use will say if they go to ford slash register then we want to send them to the register view that we just created so that would be user views dot register and let's also give this a name as well so I'll say name is equal to and we'll just set that name equal to register and also at the end here just like with our other URL patterns this is a list so don't forget the comma there it's easy to forget the commas within these lists okay so now let's view our application

### View App in Browser [15:09]

in the browser and make sure that everything that we've done so far is working so let's save all of this and all of this looks to be saved now I'll bring up my terminal and make sure that our development server is running and it's not right now so say python managed up UI run server and run that we didn't get any errors so that's good and now let's pull this up in our browser so we'll go to localhost port 8000 and now let's go to that register route and see if everything works I'll go to forge slash register and run that and we can see that it did work we have a page here with a legend of join today and we have a user registration form here now even with the styles that we added in this isn't very pretty but we'll fix this with better styles in just a minute but for now there's one small change that we can make to make this look slightly better and that is to use a form method call called as underscore P which will render our form and paragraph tags and at least that will split this up into a few more lines than it is now so let's go back to our register template and make that small change so for now notice here how password you know flows onto this next line here and it just doesn't look very good at all so let me go back to our register template which we have open here and where we printed out that form we're gonna use this as p method so i'll say dot as underscore p and that will render our form in paragraph tags so now if we go back and reload this page then now that split up a little bit so now this password is on its own line it still doesn't look great but we'll improve this with better styles in just a second but that's a small improvement okay but we can see that how by using that user creation form it gave us all of this out of the box it has a username a password field and a password confirmation field and it's also printing out all of the validation stuff that the user needs so it is showing us the character limits here it's telling us that the password you know has to contain at least 8 characters can't be commonly used passwords and stuff like that so it's really nice that we get all of that stuff out of the box without even needing to write a form for ourselves now what happens if we fill this out right now so if I fill this out with some info here so I'll try to create a new user called new user set the password to testing 3 2 1 and sign up so when we submit that we can see that it just redirects us back to the current page and wipes out all of the information that we just entered it's not really doing anything with that information right now so if we were to open our admin page right now then we would see that there were no new users that were being created whenever we just submitted that and the reason it's not doing that is because this is performing a post request on our register route with the form information that we submitted but we're not doing anything with that information yet so if we go back to our register view so we'll open this up and close these down and just

### Register View [18:19]

look at our register view here then we can see that any requests that comes into this route we're simply creating a blank form and rendering it out to the template so for those of you who know about HTTP requests there are different types of requests that way you can have the most basic kind are get requests and that's what you send when you just navigate to the page and normally and there are also post requests and when we created our form we said that the method that we wanted to use for that form was post and since we didn't specify where to post that form data it actually just posts it right back to this route so we can put in a conditional and specify that if we get a post request then we can try to validate our form data because that post request is going to contain that data in the message body so we'll put in a conditional to specify that if we get a post request then we'll try to validate that form data and if it's a get request then we'll just simply do what we're doing now by displaying a blank form so let's put a check in place so to do this we can at the top here just say if

### Validation [19:29]

request dot method is double equal to which checks for equality string of uppercase post then we want to let me copy this form creation here then what we want to create a form that has the request dot post data and then we can put in our else so anything that is not a post request we will just create a blank form okay so again at this point if we get a post request then it instantiate a user creation form with that post data but with any other requests it just instantiate SAN empty form and that post data will most likely be the data from our form but really it could be anything so we're going to need to validate it so that we know that we're getting the fields and data that we expect and to do this we can use another conditional within you know after we instantiated with the post data we can say ok well is our form valid so we can say if form dot is underscore valid and as you can tell by the name this will tell us if our form is valid when it is submitted and if that data is valid then let's go ahead and grab the username that was submitted for now so to do this we can simply say username is equal to form dot cleaned underscore data dot get and we want to get that username so the validated form data will be in this form dot cleaned data dictionary and this will have been nicely converted into Python taught types for us from the form so now I'm going to use something called a flash message to show that we've received valid data a flash message is an easy way for us to send one-time alerts to a template that will only just be displayed at once and will disappear on the next request so first we have to import this so at the top here I can say from Django dot country import messages and now we can add a message by specifying what kind of message we'd like to add so there are different types of messages here so just let me type all of these out so there is message dot debug and I will copy this there is also message dot info there is message dot success there's message dot warning and there is message dot error so since we're going to display a message if our form data is valid let's use this message dot success since our data was valid so I'm going to just copy that one and I'll get rid of the other ones here I just wanted to show you the options that we have and within our form is valid conditional I'm gonna say message and this should be message is sorry messages dot success because messages is what we imported messages dot success and the first argument here is the request so we'll pass in that request and now we'll pass in our message so I'm going to use an F string here and F strings are only available in Python 3 6 or above if you're not using then you could use formatted strings so we'll say account created 4 and then we will just pass in that username in the placeholder ok so now that we've got our flashed message now let's redirect the user to a different page because you don't want to fill out a form and then just get redirected back to the same form after you submit it because that would be a little confusing depending on what the form is so instead let's redirect the user back to the home page now to do this we're going to need to import the redirect function and that is in the same shortcuts module as the render function so we can just come up here to the top and after render we can say import redirect as well and now after our added message we can just say that we want to return a redirect spelled that wrong there return a redirect to blog dash home and again we've seen this before but this blog - home is the name that we gave to our URL pattern for the blog home page okay so this should all work except for one thing we haven't added or we haven't updated our template to actually show the flashed messages yet so I'm going to put this within our base template so that any flash messages pop up on any page so let's open that up so our base template is within our blog app so we'll open up our templates then there's a blog subdirectory in there and then we want to look in that base template and again

### Flashing Messages [24:16]

the reason that I'm putting the messages here is because this is the template that gets displayed on every page with our navigation bar and things like that so putting the messages here will make sure that any message that we flash will show up on any page so I think a good place for our messages would be to display them right above our content block so I'm gonna scroll down until we see our content block here which we can see is in this div with the column of eight so right above our content block this is where we'll put our messages so to do this we can use a code block here so the curly braces with the two percent signs and let me get rid of that one there and within here we can put a conditional that says if messages and then we need to end that if statement as well so we'll say end if and now within this conditional if Django sees that we have flashed messages that we have sent into our template then now we can loop over those so I will put in another code block here and say for message in messages and again we will end this for loop by saying end for and now within this for loop now we can print out each flashed message so I will put this in a div and I will give this some bootstrap classes blue strap has some nice classes for alerts so I'll say class is equal to alert and we also want to specify what kind of alert this is now bootstrap has a class called alert - success and that is just this kind of nice green alert that they pop up now one nice thing about bootstrap and Django is that the messages are the same as the bootstrap alerts so for example we're using a success message here so if we just use that tag and say you know alert - and then pass in the message tag then it should you know say either success or info or danger or anything like that whatever type of message that is so to grab that message tag we can actually just get that by doing our double curly braces and saying message dot tags so for a success message this will be alert - success for an info message it'll be alert - info and things like that okay so now within our message div here now let's just print out the message so we will just access that with the double curly braces and specify that we want to see the message okay so now that we have that in place that should display our messages properly and now let's make sure that all of this works together and see if our forum validates properly so let's save every all the changes that we made and make sure that our dev server is still running and it is and now let's

### Testing [27:14]

try to reload our page and see if our form submits successfully so I will try to create a new user I'll do a password of testing three to one and signup so now we can see that we get directed back to our home page with a flash message that our account for new user has been created now we didn't actually create an account for that user we'll do that in just a second but now we know that our forms are at least validating correctly and giving us some kind of feedback now these flash messages are nice because like I said they are only one time alert so if I was to reload the homepage here then that alert goes away it was just a one-time thing now that current registration form that we have already does have some built-in validation so if I go back to that register route and if I was to fill this out incorrectly so if I was to you know try to create a user that already exists so we'll use that query MS user and I'll also put in passwords that just don't match so if we click sign up then we got some validation errors now these validation errors might be hard to see with our current styles but we can see right here it says a user with that username already exists and down here it says the two password fields didn't match and we can see that when that form was invalid it still gives us our username that we tried to input so it didn't just create a completely new form from scratch it still has the values that we had inputted there now the reason for that is because of how we set up our views so let's go back to our views and see exactly what this did so I'll go back to our view spy file so now let's walk through this process of an invalid form so when we submitted our form then it's submitted as a post request so it comes into this conditional here and it says was the request a post request and it was so then it comes in here and says okay well I want to create a new form and form that has the data that was within request that post so then it has a new form with our username data and our two password fields and then it says okay is our form valid and that is whenever Django does the backend checks with our user creation form and the user creation form handles all of that for us and it says well no it's not valid because you already have a user name with this user name and also your passwords don't match so it never reaches this conditional here to return that success page instead it falls down to this return statement here and it just says you know render our registered HTML template with our form but remember our form was the one that was instantiated with our request data so it's still going to have those form fields filled in with the value that we had submitted and whenever it's all that our form was not valid it also added some error messages that it would pass along to that template as well so that's why those error messages also showed up okay so there are a few more changes that I'd like to make to our form so first let's set this up so that it's actually saving the user when our form validates and after we get that working then I'd like to add an additional field and have the user enter their email address as well because right now it's just their user name and lastly I would also like to get our form looking a lot nicer and also to display our validation feedback to our end users in a better format so that they know exactly what's wrong so that they can fix it quickly so first let's get this set up so that the user is actually created if the form is valid and this is pretty simple so if we go into our conditional where we check to make sure that the form data was valid then saving the user is just as simple as saying form dot save and that's it that's all we have so it couldn't be any easier than that now that will automatically hash the password to make that secure and everything else that it needs to do in the background so we don't need to do anything other than just run that save method so now with that in place if we go back to our browser and try to create a new user again so again let me make sure that our dev server is still running it is so now if I reload this register page and create a new user and testing three two one and signup then now let's see if that user was actually created so I'm going to go to the admin page and I'm going to log in as my admin user which is core DMS testing three two one login and go to users and if I make this a little larger we can see that we have a new user here so our form was able to actually create that new user from the front end of our website but if we look at the email addresses form here we can see that our other two users have an email address but our new user doesn't now we don't want to have to you know go into the admin panel and add an email address for everybody after they've created an account we'd really just like that to be on our register form so let's add some more fields to our registration form so I'm going to go back to our site here and now let's pull up our register template so within our user templates I'm going to open up register HTML so we can see here in our register template that we're not printing out any of these fields individually all we're doing is printing out this single form and it's printing out all of the form all of the fields forests so in order to add a new field we actually have to add that to the form itself so how do we add a field to our user creation form so to do this we're going to actually need to create a new form that inherits from our user creation form so to do this we need to first create a file where we can put these new forms so I'll create another file in our users application directory and I'll call this forms dot py so within our root directory of our users app I'm going to create a new file and I'm gonna call this forms dot py okay so within this file we're going to

### Creating Forms [33:22]

create our first form that inherits from the user creation form so first we need to do a few imports so we need to import forms from Jango so we'll say from Jango import forms and then on the next line we need to import our user model so I'll say from Jango dot country dot auth dot models import user and lastly we will do an import on that user creation form so that is from Jango country birth dot forms import user creation form and now we'll create a new form that inherits from the user creation form so I'm going to create a new class a new form that inherits from that user creation form and I'm just going to type all this out for now and we'll go over this after I get this typed out so I'm going to call this user register form and then we want to inherit from that user creation form and now we want to add the fields additional fields that we want to this user creation form so I want the email so I'll say email is equal to forms dot email field now that can take an argument that is called required so we can set required equal to false if we don't want them to you know if it's optional for them to provide their email but the default is required is equal to true and I'm just going to leave the default so I'm not going to put anything there so now I'm going to do something here that might look a little strange I want to say class Mehta and within meta we're going to specify the model that we want this form to interact with so the model is going to be user because whenever this form validates it's going to create a new user and now we can say fields is equal to and this these are the fields that are going to be shown on our form so the fields that we want to be shown and end in what order also so we want to display the user name and then we want to them to fill out their email and then they need matching passwords so that field is going to be called a password one and then the password confirmation is going to be password to okay so let me talk a little bit more about this class Mehta here now this class Mehta gives us a nested namespace for configurations and keeps the configurations in one place and within the configuration we're saying that the model that will be affected is the user model so for example when we do a form dot save it's going to save it to this user model and the fields that we have here in this list are the fields that we want in the form and in what order okay so this is now our completed form so now we have a completed form that inherits from the user creation form and adds this email field and now we can just use this form in our view instead of the user creation form and then that should make it good to go so let's go back to our views here and at the top let's inherit the form that we just created so I will say from dot forms import and remember we called that user register form was a user register form or user registration yes user register form and now we can use this user register form with that email field instead of the user creation form and we need to replace this in both locations so we see that we have one instantiation here inside of the post request and we have one instantiation inside the get request so you want to save or you want to replace both of those so I'll creation forms with user register form and now we're not using our user creation form anymore so we can just get rid of that and now I'll save my file so with those changes in place now let's make sure that we don't have any errors in our web server and we don't so now let's reload this in our browser so I'm gonna go to word slash register whoops spelled that wrong ford slash register and we should now see that there is a field for the email here so now if we create another user so now let me create a new user to and I will set their email equal to nu to at company. com and then put in a password of testing three two one and sign up so now let's look at this new user to inside of our admin page so if I navigate to the admin page make this a little larger here and go to users then we can see that now we have a new user - and this new user - has an email address listed so it did work and it did submit that email address with that form and save it to the database okay so now we have a nice working form but one thing is that we really need to overhaul the style on this a bit so if I go to Ford / register we can see that this still isn't looking very good so right now it doesn't have the bootstrap styles that match the rest of our site and also we don't need all of this validation information displayed so large it can be a lot smarter a lot smaller and a lot more muted and also if there are any validation problems when we submit then we can display them in red so that they pop out a little bit so that it's more clear what the user needs to change in order to get the form to validate now in terms of adding classes to our form fields there are ways that we can set classes on our form fields in the form stop pie file that we just created but that's actually not a great place for them because I think that mixes our presentation with our back-end logic and it would be better if we could do all of that styling within our template so instead to do this we're going to use a third-party Django application that makes working with forms a lot easier and this application is called crispy forms and it's a very popular way to do this on Django so crispy forms will

### Using Crispy Forms [39:26]

allow us to put some simple tags in our template that will style our forms in a bootstrap fashion and there are other CSS frameworks that you can use with crispy forms as well so first we need to install crispy forms so to do this I'm going to bring up our terminal here where our dev server is running and I'm going to stop that for now and clear the screen and now we want to install crispy forms so to do this we can say pip install and this is Django - crispy - forms so let's install that and that installed successfully so once that is installed we need to tell Jango that this is an installed app and if we remember we can do this within our projects settings module so let's open up our project settings module so within Django project open up settings let's go down to installed apps and right underneath our users config I'm gonna add in that crispy forms so I'll say crispy underscore forms and then don't forget the comma since this is a list and while we're here in our settings let's also tell crispy forms which CSS framework we want to use so it defaults to bootstrap too but bootstrap 2 is pretty old and outdated at this point so instead let's use bootstrap 4 so let's go to the very bottom of our settings file and add that here so the setting that we need to change is something called crispy underscore template underscore PAC so crispy template pack and we will set that equal to bootstrap for now if you want to change this to anything else then you can go to the Krispy documentation online and it shows you how to change these settings to anything that you want but I think bootstrap 4 is our best bet ok so once we have said that we want to use bootstrap 4 for our CSS template then we can simply load this into our template and use it so I'm going to open up our register dot HTML template where our form lives and at the top right under where we extend our base template let's load in these crispy form tags so we can do this simply by creating a code block here and then say load and we want to load Krispy underscore forms underscore tags so let's save that and that will actually allow us to use the krispies filter on any of our forms so if we go down here to our form now we no longer need this as P method on the form since krispies forms will take care of all of that formatting for us so I'm just going to remove that where we only have our form and now we can use the vertical bar character just safai that we want to use a filter so we saw this in an earlier video when we use the date filter to format our post dates so after the vertical bar we can simply say that we want to use the crispy filter so we can just say crispy and save that and that's really all it takes that will do all of the styling for us now there are ways that we can customize this styling further but I think that krispies does a good job out of the box of styling our forms and also give us giving us some good validation feedback so now let's run our web server and see how this looks compared to what it did so I'm going to run our dev server by saying Python manage py run server no errors so that's good now let's open our page back up and now this is what our register page looks like now so now let's rerun this and see how it looks so when we reload that we can see that these forms look a lot better and if we look at the source code here so I'll go to view source and make this a little larger and then scroll down here to our fields then you can see that we got a lot of added styles and everything in here for free and you don't have to be familiar with bootstrap to use this but if you are then you can see that we have some bootstrap classes in here so we have these form groups we have an asterisks for the required fields so that's nice this is a column form labeled here so all kinds of different things that we just get out of the box with that default krispy tag so that's really nice so now let me close down of the out of the view source here and go back to our field and resize that back to the normal size now not only does our form look better but the errors will also look much better and give us some better feedback so let's fill out our form with some errors and see what this looks like so I'm going to fill in a user name that already exists us all Duke or EMS I'll do just fill in a password of khorium Schafer at gmail. com for the password I'll put in passwords that do not match so just some gibberish there sign up okay so we can see that added classes to our form fields so that it highlights the fields with problems in red and then puts the air attack underneath in red so that we know exactly what's wrong and that's a lot better than the feedback that we had before where it was really hard to even see what was going on so we can see here that it obviously says a user with that username already exists and we can definitely tell the error here is the two password fields didn't match okay so now we have a nicely styled functional form here that can actually create users on the front end and also gives us a nice validation feedback on the front end as well okay so I think that is going to do it for this video I hope that you've got a pretty good idea for how you can create a user registration page for our django application and in the next video we'll be learning how to expand on this and create a user authentication system so that users can log in and log out through the front-end of the website as well and we'll also learn how to create pages that can only be accessed by users who are logged into the website but if anyone has any questions about what we covered in this video then feel free to ask in the comment section below and I'll do my best to answer those and if you enjoyed these tutorials and would like to support them then there are several ways you can do that the easiest ways is simply like the video and give it a thumbs up and also to huge help to share these videos with anyone who you think would find them useful and if you have the means you can contribute through patreon and there's a link to that page in a description section below be sure to subscribe for future videos and thank you all for watching
