Django To Do List App With User Registration & Login

hey what's going on everyone so in this video we are going to be building a to-do list application using django so this is going to be built from the ground up it's not meant to be a full overview of django here it's a simple project based tutorial but i will try to start from the very beginning and try to make this as beginner friendly as possible so before we get started let's go ahead and just demo the application so what we have here is a pretty simple to-do list application that handles basic crowd functionality so create read update and delete and we can also view items so let's go ahead and try to update an item so we'll go to edit video let's just say we wanted to update that so we'll just do updated we modified it if we want to change the status we can mark that as complete and we can also delete items and add new items so this is also going to have search functionality so if we want to search something we can go ahead and just type in e x here and now we get only every item with the characters of ex for the description and so on so we can we can fully search it we can log out and we can also register user accounts and log in as users so only a user that is logged in can see their own information if we don't have an account we can't log in so if i try to go to that home page to see a list we can't see anything but once we do log in we're not going to be able to see other users information so i really want to add in login and authentication show you how to set permissions and restrict users from maybe accessing a certain item so that's the application and we are going to be using class-based views so what i'm trying to do in this video is also extend my last video where i talked about what class-based views are and if we should use them i did a full video on that where i did a breakdown so if you don't know what class based views are you can still follow along because i'm just going to be implementing this but i would recommend checking that video out along with the related articles so that's all going to be linked up in the video description it'll give you a nice overview and then my plan is to make this video a part two of that but you can technically start wherever you want so let's go ahead and close that out actually i want to open up that article because we will reference it so that's on my website dennis ivey.com let's open that article up right here and we'll just keep that handy so i'm going to turn off my server and we want to basically just close out this application so we have nothing on and let's start from the ground up so we are using django so you are going to need to be familiar with python you need to have that installed and if you don't have django installed well you can just run a simple pip install for django so i'll open up my command prompt and let's go ahead and just open this up here we can just do pip install django i already have it so it might just update the version for me but looks like everything is up to date so i'll just cd into my desktop this is where i want to store my project here and to start my project to get my boilerplate files i'll just do django dash admin start project and then i need to give my project a name so this is just going to be to do list okay so i have my project and that's all set up so i'll actually close this up because i will be using vs code as my text editor you can use whatever you want so i'll just open that up so if you're using a different text editor that doesn't have the terminal you can just go ahead and continue using the command prompt so i'm going to find my project get all my boilerplate files here so to-do list right here and this is everything that django gives us so that command gives us all of our boilerplate files with some code we have our settings.py file our base urls file and so on so the first thing we want to do here is create an app so apps are basically small components of a website this basically just lets us break our application up into multiple parts so we're just going to create our application and that's where the core logic to any project should be so the project is like the the structure of it the basic settings and then the actual app is where we add logic so to open up our terminal we could just do terminal and new terminal i use the shortcut shortcut of control shift tilde and that should open that up so we're in our terminal if you want to set up your virtual environment you could do that we only need django there's not many third-party packages we need so i'm just going to use this right here and i'm not going to set up that virtual environment but i'll leave that up to you so to create our app here i'm just going to run python manage dot py start app so it's like our start project command except for this gives us our boilerplate files to our app so we need to name our app so in this case i'm just going to call it base because we are going to have one base app for our entire project we're not going to create different sections of it so once i run that we have our project files and our app so our app gives us our views file models admin and so on so this is just a quick refresher of our setup here so inside of our application the first thing we want to do is run our server make sure everything is running so just do python manage py run server and i just want to make sure everything is set up here so let's go to our server on port 8000 i just have that saved automatically so as a quick trick right here you could just go to this right here and bookmark that so i have a bookmarked that's how i can open it up so fast so this is my application so far there's nothing here our boilerplate jingle files just build this for us so what i want to do is first connect my views and urls files so we can have some url routing so we'll go into our project here and we need to create some urls inside of our app and then connect it to this base urls.py file so the urls inside of our application can handle all of the routing so before we do that we need to first connect our project to our application because the two don't know about each other so i need to connect settings.ui and i need to connect that to base so that's my app name to that folder dot apps so if i go into base we see apps and i want to point it to its config setting right here so we're just going to point to base.apps.config so this just lets django know about my app now the two are connected and they know about each other so now i want to connect my urls here so we'll go into base and we need to create a urls.py file so we'll just do urls.py let's go ahead and create a few imports here so we need to import from django dot urls and we want to import the path function so import path so that's how we create our url patterns here so i want to go ahead and import all of my views i don't have any yet but i just want to do a mass import so whenever we do have them they'll be added here so let's just do from dot import views so they're in the same file structure so that's why we can do that and then we want to create a urls patterns and then that's going to be a list i think that's url patterns so not urls so right now we don't have any url patterns so let's go ahead and create those so we'll go into our views and the first thing i want to do is render out a simple view just to make sure these are connected so i'm going to create a function based view because we are going to use class based views later but i want to make a quick one so we'll just do let's just call this task list so that's going to be the name of our first view we're passing request and i want to return back a simple http response so we'll just do from django.http import http response okay so now with our function we can just do return http response and this will be to do list okay so we have a review now we can take this view we'll add it to our url pattern so we'll just set the path here let's add in a comma after the function and we want that to be our base url so we'll set that to an empty string and then we can do views because we imported our views right here and then dot and then the view name so the view name is task list we want to give our url pattern a name here also so this is going to be tasks like that we can save that and this still doesn't complete it so the last step here is to go to our project urls.py file so we have one in our project and one inside of our app so we need to let our project know about our app's urls so for this we need the include function and we'll go in here create a path here we'll set that to an empty string we'll use include and in a string we're going to use or we're going to point to base.urls so the include method just basically says we are going to include a different urls.py file so whenever a user pulls up whatever route this is in this case it's an empty string so take all of these routes and then send this routing to this urls.py file so let that file handle it so i'll save my views and urls and let's go ahead and take a look here so i'll refresh that and there we go so we have our simple http response so now that that's set up here what i want to do is set up my models.py so for those of you that aren't familiar with models that's just how we build out database tables in django and they're simply classes that represent a table so basically the class is the table and then all the attributes are the model uh not columns or yeah the model columns so we'll go into models and this is how we create our database structure so once we create it we'll have to migrate our database and i'll show you what that means so we're going to have one class here and this is going to be called task so this is a database table and to make this a model we just need to inherit from models dot model and we'll create some attributes so we'll create some attributes so i'll just make them and then we'll actually set the values so we first need a user and then we need a title for a task then we want a description and then after our description we want to set the value of complete so is the item complete or is the task complete and then we want to set the created time and date so our user by default we want a task to be owned by a specific user so what i'm going to do is import the built-in django user model so django already has a few tables built out for us one of those is gonna be for our users so we're gonna do from django dot contrib and then we'll just do dot auth models okay so we have that and then we want to import the user model and that's going to be with the capital u so the user model takes care of our user information like username email password and this is how django by default handles authentication so we're going to run that against the user model so to set the value we need to create a mini to one relationship this means that or a one-to-many relationship we can have one user and that user can have many items so this is that midi to one relationship and that can be set with foreign key values so we'll do models.foreign key we need to set that relationship to a model in this case the model name is the user and the first value i want to set is on delete so on delete just means what do we do with a task if the user gets deleted so let's say we have a user in the database for some reason the admin deletes them or the user deletes their account what happens to the task well in this case i want the task just to stay there and just let the user value or actually no i want to delete the task so if a user gets deleted all the child tasks get deleted so to do this that's going to be models.cascade now if we wanted that value just to be set to null we could do dot set underscore null this means that if a user gets deleted the items remain so i want to delete them so we'll just do cascade and then i want to set the value of null to true this means that in the database this in theory could be an empty field and then whenever we submit a form we also want to allow that value to be blank right there so we want to set that to true and i usually set this to true when i'm starting my applications and when i'm testing them because i don't want to have to run into these issues when i'm adding and deleting items in production because i just want to get things done quickly without having to do it right necessarily so that's why i set it to null by default so we have our title now the title is going to be just a string so we just want to set the character field and in this case with that char field we want to set the max length so how long can this value be so we want to set that to 200 characters and i'm just going to paste in null and blank so i'll just leave that there you might want to not allow that item to be true or blank but i'll leave it just like that so actually for this in this case a title should be there so there shouldn't be any reason why we shouldn't have that name so for the description this needs to be also a string but i also want to make it a text field so we have more options so in this case uh character field is u is usually meant for like a headline a name simple values but a text field gives us like a if this were a form it would give us a box to write in like a message or something so in this case i want to set null and blank to true and that's going to give us a text field so when i save it it auto formats that and that's just vs code so if that if you see that skip right there that's what's happening that's just a plugin i use and you can look that up so for complete let's just do models and then we'll do a boolean field so this is just going to be a true a true or false value so complete by default when we create an item i want the default value to be false so when an item is first created it's probably not going to be complete so we just want to set that and then created we want to make that created not create so for this i want to set this to a daytime field so models dot date time field so not date field but date time field so we want to get the date and the time it was created now whenever a model is created we want to auto populate this information we don't want to have to actually add it so there's an attribute here that's called auto now add and we'll set that to true so that means automatically just take a snapshot if i create this item on let's say 3 11 so march 11th at 8 50 pm go ahead and just set that to be the timestamp and the date so to turn or to close this out let's go ahead and set the string value we'll just do underscore underscore string we'll pass itself here this is the string representation of the model and the official name of it and what i want to do is return self dot and then we'll just do title so we want to set the default value to title and i also want to set the default ordering so i'll just set some metadata here so i'll just do class meta and in this case i'll set ordering and we want to order the model by the complete status so any complete items should be sent to the bottom of the list because they're done we don't need to focus on those anymore so this is how we can order a query set so this means that whenever we're returning multiple items order it by this value here okay so we save that and if you're new to django we have to do something called a migration so there's two things we need to do to migrate our database so by default django has an sqlite database so we don't have to set that up it's already made for us and to actually make these migrations occur so to actually create this table in the database we have to prep our migrations so i'm going to run a command called python manage dot py make migrations so what this is gonna do if we go to our application here so into our app base looks like we have no files inside of migration so if i make this migration it's going to create a file for us so now we see zero zero zero one underscore initial dot py so what's happening here is it created this file for us and it's letting us know that when we run our official migration run these sql commands and create the table for or in our database so now when i run a command called python manage dot py migrate so i'm not going to run it just yet give me a second what it's going to do is it's going to take all these migrations and it's going to create them in the database but django also has other database tables prepped for us so we have that user model that we're about to use we have sessions and a few other tables that django will create by default for us so because this is the first migration we're gonna see multiple migrations occur so we see applying all these migrations auth admin content types and so on and here we see base.001 underscore initial so we just applied all of these migrations along with the default ones so now we just prepped our database and all of those are set and anytime we make a change to our models file so if we want to add a new model add in maybe some or maybe update a model here we have to rerun those migrations so those changes are applied in the database let's go ahead and turn on our server i'm gonna go ahead and run server and i wanna show you something here so we wanna go into the admin panel and before we actually start working with this and rendering templates and data i want to show you the default django admin panel so if we go to forward slash admin so if you don't know how to get here and how that's set up go to your base urls file inside of your project not the app if we go to admin that's django configuring it for us so we have this admin panel and it's basically an interface for us to start working with our database without actually having to build in the functionality so we can view items modify data and so on so to actually log into the admin panel we need to create a user so let's go into our terminal here we'll turn it off we'll just do control c to do that and i'm just going to do python manage dot p y create super user and this is going to give me a prompt right away so this is giving me my computer name we can modify the username to whatever we want i'll just leave that blank or i guess i'll just type in user or the username i want so i'll i'll set that to dennis ivy and then we'll just set the username to dennis ivey at email.com so that's a fake email and then we'll be prompted to create our password so when i'm typing you're not going to see anything but by default it's actually typing for us where as we're typing it's it's actually happening we just don't see it it's for security purposes so go ahead and confirm it once everything's done we should see this message that our user was created so i'm going to turn on the server and we'll just go ahead and open up our admin panel again and we want to log in as this user so my data was already populated i'll go ahead and log in maybe i have a different password for that user oh my username was dennis ivy okay so we see our admin panel here so in here we can see groups right here we can see our users which is dennis we can add in a new user so let's just add in some information let's see if it lets me create that short of a password it doesn't but you get the point we can add information and if we want to update a user we can modify this user's information so one thing that we're not seeing here is our task model and that's because once we create it in the database we also need to register it with our django admin panel so we'll close out that urls file we'll go into our application base we'll go into admin and in here we want to register that so we'll just do from.models so we're going into our models.py file let's go ahead and import task so that's the model we want to import then i just want to register it so we imported it now we can do admin dot site dot register and we'll just set that to task so we just registered our model with our admin panel so now if i go into my admin panel if i refresh that now we can see it so the reason why i wanted to do this was one if you don't know the admin panel you can see what's going on here and two i want to create some tasks here so let's just do uh get milk we'll just create some items here let's set that to complete then we'll just do wash car and i want to set these to the users so we have to manually set this and then let's just do clean house okay so we have one complete item and two incomplete items so we have our items and we want to start rendering these out so i added those to the database so let's go ahead and actually create our first class based view and list these out so we'll go back into our views.py file and we need to change this up so because we're using a class based view we can actually get rid of this http response and i want to modify this view but we first need to make an import so the first view is from django dot views dot generic dot list and then we want to import the list view so i talked about this in my last video and it's also in this article which is linked up so check out that video check out this article if you want to familiar familiarize yourself with it this is supposed to be more of an implementation video so we won't go into too much detail so we import the list view and let's just go ahead and modify this view so i'm going to change this from a function and this is going to be a class now so by default the name can still stay like that but because it's a class i like to capitalize the first letter here and camel case that not camel case it but capitalize every word in or every letter every first letter in that word i guess and let's go ahead and change request here for list view so now we're inheriting from list view which means that we have all the functionality list view has and this view right here is supposed to return back a template with a query set of data so we can take this out and add a minimum list view just requires a model or it requires a query set which i'll show you in a second so the model is task here so to utilize this view we're actually done with it so i'll talk about the magic under the hood in a second here but we can actually take this view and because it's a class i like to use them differently inside of my views.py file so in this case i'm going to do from dot views import and then we'll import task list so this view that we just created that inherits from list view so i'll save that and let's go into our url so now i want to get rid of views here and i want to throw in task list so our url resolver can't use a class inside of it so what we need to do is use a method that this view has right here and we want to trigger the as view method and that's going to trigger a function inside of that view depending on the method type so if it's a post or get request now it knows what to do so we need to add that because it's a class and we can leave everything as is now if i save this we're technically done with our view and url but we're going to get one issue and that is because we have not configured our template yet so if i refresh this now we're going to see an error so give this a second did i not have my server on task is not defined so i forgot to import that so from dot models import task let's save that and let's take a look okay so we get this error so by default list view already knows what template it wants so i talked about this in the article and i'll pull up that section here and that is inside of list view so by default this view looks for a template name with the prefix of task so whatever your model name is if your model was called product then it would look for product and then the suffix of underscore list.html so right now we don't have that so django is looking for inside of our application it's looking for task underscore list.html and we have not made it and we can actually change this template name later which we'll talk about so let's go ahead and configure that so if you're new to django and you don't know how to create templates or where to store them there's different ways of doing it but the method i'm going to use is by storing them inside of our app so in our app here i'm going to create a folder this needs to be called templates and inside of templates it seems kind of weird i know but we have to create another folder with the name of our app and our app is called base so whatever you call your app make a template or folder called template and then inside of that folder another folder with the app name so inside of templates inside of base i'm going to create a file and this is going to be called task underscore list dot html okay so we created that we won't worry about setting up our boilerplate jango files we'll style this video in the second part here so we'll first create our functionality it's not gonna look good but we're not gonna focus on styling till later in the video so let's just create a title here and then we'll just say my two to list so we have our list right here and that's gonna be it for now so we didn't have to connect this to our view our view already looks for that so that's something that django class based views do for us they simplify things like that so now if i refresh it now we have our template and it just kind of happens so it just found it so the next thing is we want to render out some data in our template well how do we get that query set in the template how does django pass it in so by default django calls that query set object list so i referenced that in the article if we look here by default with the query set django is going to look for objects list and i want to customize this name too so we'll go in here let's go into our template and i want to just render out all my to-do list items inside of a table so let's just create a table and we'll just create a row here so we'll create a table row for our header row and we'll create the table headers so let's just say item and then that's going to be it for now so we want to loop through all the items so in this case we'll just do four tasks in and then we have to do object underscore list and then let's close that out so we want to end that for loop we'll just do end four and i want to render out another row and we'll change that to a td like that because it's not the header so in this case let's go ahead and just render out the item so we'll just do item or task dot title here okay and then i also want to make sure that if this list is empty we want to do empty or an empty condition and this is just django's templating syntax so if you're not familiar with that this is how we can write python-like logic and then these double curly braces is how we can throw in variables into our templates so we just want to set an empty here and then we'll just say if the list is empty just say no items in list so that's just a conditional so let's go back here let's go ahead and refresh that and here we go we have all of our items those are listed out and if we didn't have any we will see that message so right now we look for the objects list so that's the query set name so if i want to customize that if we go back to the article all we have to do is we can set the context object name so we can change this to anything we want we can change this to pickles for all i care it doesn't really matter so what i'm going to do is go to the views we'll just say context object name and i want to call this tasks so whatever you want to call it go ahead and change it to that and now in our template we can refer to that as tasks and that's a little bit more readable uh it's a little bit more readable and better than just object list so now if i refresh that everything should work so we're going to do a lot more with this but what i want to do is now focus on the detail view so the detail view is simply a view that returns back information about a simple item so when we click on a task we want to get more information about this item so let's say we go to forward slash task and then the id like we did in our demo we want to pull back the item information about that specific task so just like django class-based views do with the list view there's also another view and that's going to be called a detail view so it's detailed information about an item so this is going to be from django.views.generic.detail and we'll just do detail view okay so for this we're going to create another class so we'll create the class this is going to be called task detail or whatever you want to call it and we are simply going to inherit from detail view so just do detail view and in this case just like the list view we're going to pass in the model name and the model name is task so now this view looks for a template with the prefix of the model name so task and then underscore detail html so this one right here for if you look for underscore list this one looks for underscore detail so let's add that template and we'll just do new file and we'll just do task.html or task underscore detail okay so task detail.html so let's just add in an h1 tag and we'll just say task will not pass in any information just yet so we have the view we want to import the view into our urls here let's create a new path here and in this case the view by default looks for a primary key so a pk value so in this case we'll set that as an integer and we'll just set that to pk so make sure you name it this if we want to customize it there's a name there's a way to override that but by default the view is going to look for that and we want to set this to task detail so task detail as view set the method the name is going to be task so now we have the url so the task name or just task the id we have the view which returns back task detail template so let's go ahead and just test this out so we'll go back in here and we're running these by an id so just an integer value so the first view should be with the id of one and now that works so let's pass in the data so for our query set in the template it looked for an object list so in this case in the detail view it looks for object so all we have to do is just say object here and i don't like this name but i'll show it to you and then we'll customize this so now we see or we should see information about an object so one is get milk two is wash car three is clean house and then four while we don't have that so to customize this name to make it anything we want we can go back into our views and let's set the context object name so it also has the same attribute except for this time it's not object list it's object we want to change that to just task so if i go into my detail now that's task here and that should still work so i want to override the template right now so let's modify that before we go to the next view so what i want to do really quick is go to the template and let's say i just want to call that task so i don't want task detail i want it to just be task so in this case if i refresh it that's going to give us an error because we don't have that or it's looking for task detail and all i have to do is go into settings or my views and i just need to set the template name and i can do this for list view and all the other views so the template name is going to be i believe i have to point to my app name first so i have to go to base and then we'll just say task.html so i'm just telling it don't look into base or don't look for task underscore detail look for task so i set the template name and that should fix this issue okay so there we go and that's how we're able to customize that so that's the detail view we're just returning information about a specific item so let's actually go into my task list right here let's add in another table and let's just say view here so let's create a link here we'll just do view and we'll just use the django url tag here so we'll just do href and that's going to be with the curly braces the percent signs will say url and then in single quotes we'll say task and then outside of the single quotes i'll just pass in the task dot id okay so what did i do here that looks a little bit weird okay so that should set it and i just want to create an empty header just so my table looks correct let's go ahead and try this again so let's go to my list right here if i go to view get milk house car or wash car and that looks good so far so we're not going to use the detail view much because when i click on an item i want to edit it not just view it but that gives you basically the summary of the detail view so let's go ahead and go to the create view so we want to know how to create an item and this is where a little bit more complex logic comes in at least for the view itself so we don't really have to do too much because class-based views take care of that for us but let's go ahead and start that so we'll go ahead and close out our models for now our admin py file we don't need settings for now so for the create view we need to import from django dot views and then we'll go into dot generic dot edit and i want to import the create view and there's a few views we're going to import from our from our edit views so we're going to also import update and delete later but that's going to be it for now so for our create view give me a second here let's go ahead and start creating that view now so we'll create the class and we're going to call this task create so this is going to inherit from the create view now the create view has more complex logic because we are actually sending a post request and we have to create an item so there's a few things that go into this so by default it's going to look for a template with the prefix of tasks so the model name and then form.html so we'll just create that and let's just say h3 and then task form so we just want to get that out of the way now for the view itself it also requires a model so there there's a lot of a repeating or we're repeating a lot of logic here so we'll just set the model name and the next thing we want to do here so by default the task view or the create view uses model forms so i talked about this let's pull this up here so we'll go to the create view there's a lot of links here that are helpful if we go into the source code so we'll go into the create view let's see where is that so this is the actual view that we're using so this is the code so we see the template suffix name this inherits from base create view so we want to go to this we see our get and post request let's go to process form view and let's see i'm not seeing the model form so we'll just go ahead and just start adding that in and i'll just talk about it instead so by default the create view already gives us a model form to work with so if you're not familiar with model forms it's basically a class representation of a form based on a model so it's going to take this model and it's going to create all the fields by default for us so you probably should be familiar with model forms if not you'll see in a second so it already creates it for us so what we need to do is specify the fields that we want so we could list out each field individually like title so what fields do we want to show in our form so title and then we can do description and so on so what i want to do is i want to list out all of the fields so we'll just do underscore underscore all and just like that okay so we want to list out all of the items in the field now after that i also want to make sure that whenever this form is submitted we can redirect our user successfully to a different page so we also need to add this to our create view so i'm going to create an import here and this is going to be an import called reverse lazy which just redirects our user to a certain part of our page or our application so from django.url we just want to import let's just do reverse lazy so there's also the reverse method i won't talk about the differences there i just want to get to using that so in this case let's go ahead and go into our task view so give me one second i need to pull up the demo that i'm working with and in here we need to set the attribute of success urls so remember from our article if you don't want to read that we'll go into this right here so this is a link that i'm providing with it this is where i'm referencing and where i can find all the attributes so we can see fields form class which we'll get to in a second context object name and so on so this is all these are all the the attributes and methods that the view has so let's go back in here and the success url is gonna be set to reverse lazy so that was one of those attributes so if everything goes correctly go ahead and redirect the user to tasks so i'm just passing in the url name which is task so that means when we create an item just send the user back to the list so we have our form so let's go ahead and or we have our template so we'll update that in a second so let's go back to our urls we want to import task create let's go ahead and just copy this one right here paste that below and we'll just say create create task let's just do that and then end that with a forward slash so we'll change this to task create now we want to trigger that view and then we'll just do actually let's call it task create just to keep naming consistency with our actual view so task dash create okay so we have our url pattern so what i'm gonna do here is first manually go to that url and then we'll add in a link so we'll go here let's just do task dash create and let's see using model form mix in base class test create without fields is prohibited i thought i said that so let's see what's going on here we have fields okay so that needs to be with an s so we either need the fields attribute or if we create our own model form just like i show in the article here we can create our own form and just set the form class and then whatever our model form is so we won't do that but we also can use that as an option instead of setting fields so let's go back here fields that's set now we fixed that error let's go back in here okay so there we go so we just want to link to it and then we'll create the form in a second where we will render that form so we'll go to our task list and at the top of this list let's just say add item or something so we'll just create a link here and we'll say add item or add task we'll create that url so href let's go ahead and set that url and then we'll just say task dash create so that's what i call the the url name here so we'll go in here and we'll worry about url routing later like going back and forth and so on so for now let's just add a task and we don't have a form yet so this is what a model form is so let's go to this form page and let's first create an html form so we'll just start the form the form itself we'll set the method that's going to be a post request and the action well we're not going to set anything because we're just going to send it to the same url so we could manually write that in but i'm just going to leave that blank so in this form i want to go ahead and set an input value this is going to be the type of submit so it's going to be a submit button and then the actual value let's just say submit okay so we have our form but we don't have our fields yet and django already created the model form and it passes it in and by default the form name is already form so it's just called form so let's just do a double curly brace and we'll just say form if i save that then we're going to see it like that so there we go so if i want to format that we can go ahead and just do dot asp and make that a little bit better so we're not going to style it right now we're just going to go ahead and create that so now it just goes like this and we can create an item so at this point we have to manually set the username so for now we'll do that and then later on it'll be automatically set to the default user and then there's no need to see that value so let's just say form created this set some description submit it and it looks like we forgot to pass in a csrf token so let's go ahead and add that this is going to protect us from cross site forgery request here so let's just do csrf underscore token not request but attacks so we just need to add that token it protects us and let's try that one more time what happened here so i think that was supposed to be not as a variable but we need to add in the percent sign okay so i think it's supposed to be like that okay so we set our user model form created this and submit it so there we go so it created it for us it's right here we can view it and it redirected us back to the list because of this attribute so it goes ahead and it sends that back in here so what's happening is with all those mixins if we look into this article and this is where i highly recommend you read that because you'll understand what's going on here if you follow the article and then actually go into the links that i recommend here because we have that view and then we have all of these mixins and with the combination of these mixins what happens is we send post requests and this form that's already added almost magically it's just kind of there gets submitted it processes that information and it takes care of all of that for us so in theory all we do is create the view set the model set the fields set the redirect value and just like magic there we go if we were using function based views we would have to do every single part of that and take care of all the details so we really save a lot of time just by doing that so that's the create view and what i want to do is actually create the update view now so the update view let's actually create a back button in our form so it's going to use the same form so let's go ahead and just create a backlink first and we'll just say go back so we'll go here let's create the link itself let's see so we'll add that in set the url and then we just want to go back to tasks so when we're editing if we for some reason don't want to modify a form or create an item we can go to add task and then go back here okay so let's go to the update view so the update view like i said it's pretty similar to create view that's going to be imported from generic.edit so we can just do update view and this view is supposed to take in an item it's supposed to pre-fill a form and then once we submit it just like the create view creates an item the update view is supposed to modify the data so let's create that view here we'll just do class task update and we'll just do update view so we need to set the model model is going to be task like we've done before for the fields it's also using a model form so we can actually take both of these values and we want to redirect back to the task list so by default in the documentation it tells us that this view also looks for a template with the model name and then the prefix of underscore form so if i go to my task list what i want to do here is i want to add in an edit link so we'll just go ahead and copy and paste this we'll say edit and then this is going to be task we haven't set the url yet so let's copy that view right there we want to import that and let's just go ahead and take this one right here and we just want to do task dash edit or let's just do update just to keep that convention yeah i call it update and then we'll just do task update okay so we have the view we want to do task dash update and we have the name so we want to take this name right here we'll go to task list and we'll change that to task update and we also have to pass in the id so whatever task we're trying to update so let's save all of this we'll save our form and if i go back to our list right here let's go to model view created this let's see what's happening here so if i go to add item we see a form if i go to edit for some reason it's not pre-filling that did i not specify the fields oh i was clicking on the view button and not the edit button so i just had to refresh the page so if i refresh that now we can go to edit and there we go so that's pre-populated we're going to the edit link so if we go here we can see our form is filled out we can say get milk updated and just like magic it's all updated so now we have our list item or list view detail view create view update view and the last view that i'm going to show you is going to be the delete view so the delete view if i were to summarize this and explain what it is so we'll go down here down to delete view so the delete view is supposed to be like a confirmation page so it does two things it renders out a page that says are you sure or in theory it renders a confirmation page what we add to it is up to us but we're going to say are you sure you want to delete this item and then when we send a post request it's going to delete that item so it also works like magic underneath the hood so let's go in here and that's going to be from our generic edit view so what i'm going to do is actually go to the list first we'll go in here and we just want to say delete here and for now we're just going to set that to an empty value right there so let's go back to our list so now we have view edit and delete and let's create that view so in our view we first need to import that so delete view let's go back in here or underneath our update view we'll just do class delete view that's going to import or inherit from the delete view and we need to set the model name so what model do we want to delete this is going to be task and by default the context object name is going to be object 2 so we just want to set that to task so we've used this before in the template we just want to set that and render it out by task and not just by object so we have that and we also need to add in the success url because once we delete an item we need to be able to redirect a user so we just want to take care of all of that so let's go ahead and start building out our template so by default the view here looks for a template with the prefix of the model name and then the suffix of let's see what was that that's going to be the suffix of underscore confirm underscore delete.html so that's what the view is looking for by default so let's create that so we'll just do task underscore confirm so confirm underscore delete dot html okay so we have the template and what i want to do in this template is i'm just going to create a form because we do need to send a post request now if we were using javascript we wouldn't need to necessarily create a form we could just have a button that sends that post request but in this case we're gonna have to use the form here so i'm gonna set the csrf underscore token and then the method type is gonna be the post and i'm not gonna set the action because that by default is going to this page so or this same url so we'll just set that method and let's just write in a question here so let's just say are you sure you want to delete this task so are you sure you want to delete this task and then let's just output the task inside of a quote here and this is what i meant by the context object name so we can pass that in like that then we also want a confirmation button so we'll just do input that's going to be a submit button and then the value is going to be submit and then the or the value is going to be delete and then the type is going to be submit so we're just submitting a form so let's just do submit for the type and then let's just do go back here so we'll just add in a go back link so let's just add in href and that's going to point to our list so we'll just do url and then we'll just do tasks okay so we have our confirmation page now that should link up to that so let's see we have our view our delete view let's save that we want to import that into our urls here so we just want to add in our delete view let's copy and paste this right here let's paste in delete view right there task and we'll change that to task delete and that's also going to be delete right here delete view we pass in the id and everything checks out we have our confirmation page which we'll save and then in our list let's go ahead and pass in the url here so for the url we'll just do url and then task dash delete and then we'll just throw in the id so task dot id okay so let's see what we have here so far so if i refresh this click on delete so wash are you sure you want to delete it where is my back button so confirm delete let's add and go back it looks like i just had no text there okay so we can go back we don't want to delete that but now we want to confirm it and there we go so now that's deleted and we have one item which is get milk we can update that and there we go so now we have full create read update and delete functionality and we are ready to start customizing a few things so what i want to do is create our login functionality so we'll create our login and log out functionality our registration functionality and then we'll add in a little bit more and then we'll start styling things so let's go ahead and start working on that so let's go back to our page here and what i want to do here is actually add in a condition here so we can check if a user is authenticated if they are not we want to provide a link for them to log in which eventually they'll just be redirected to that link or to that login page and then if they are registered we want to display the username with a log out button so let's start by going to our template here so this uh let's see we'll go into our list right here so at this point this has nothing to do with class based views this is just checking if our user is logged in and at the top here let's see we have my to-do list let's create like a representation of a header bar so we'll just create a line here with an hr tag and we want to create a condition so we can actually re we can actually access the logged in user with the request object here so we can actually just do request.object so we'll create the curly braces request the object or sorry not request object but request.user so we can actually see the logged in user just like that so if i go in here we should be logged in so we can see that the user is dennis ivey now if i go ahead and go to the admin panel so by default django is using sessions to register my user so if we actually go in here and go to inspect if we go to memory application cookies here we should see a session id so if i delete this that should log us out so that's how django handles users it uses session authentication in the beginning and later on we can customize this if we want so right now it just logs me out so if i log in now we're logged in if i go to the admin panel log out now the user is logged out so we're an anonymous user so what i want to do here is i want to write some logic around this and then write in our own functionality so we're not having to log in from the admin panel so let's just do this let's bring this down and we'll just write a condition so we'll say if request dot user dot is underscore authenticated so if the user is authenticated authenticated then let's go ahead and just output the user name and let's output a link to the logout button so we'll just do a link here we'll actually add in the official link later but for now we'll just do log out and we'll set the href and that's going to be just an empty string so let's end this statement right here so we'll just do end if and then if a user is authenticated or if they're not authenticated we want to go ahead and provide a login link excuse me so we just want to go ahead and say else then let's go ahead and provide a link to the login page so it looks like i missed that tag right there and then this is gonna say login so we're not gonna handle this functionality too much right now this is supposed to just show an example so let's just go ahead and check this out so we see login we're authenticated we'll go here we'll go through the admin panel let's log out so now we can log in and then if we log out here so we see our username logout now we're prompted to log in so i just wanted to write those conditions and test that out here so now let's actually start making a login page so when we click on this we want to be redirected to a form and we want to log in so django actually has this also built in for us so this is actually pretty easy to do with django so let's zoom in a little bit so we'll go back here and we'll go into our views so go into our views and the first thing we want to do is actually import from our authentication views so if we go to my article here we'll go into this link right here and let's go all the way back to the source of it this is a great reference for all of our views we can see all our authentication views so we have a login view log out view and then password reset view so this is already built in for us so let's start with the login view so we want to go ahead and grab this so we'll just take that right there let's paste that into our views.py file so that's going to go just underneath our reverse lazy so i want to keep this separate so we want to paste that in and then we want to start using that view so from django.auth import our login views or our login view and i want to add that above all of our views here so because it's like the first view it's kind of like the gatekeeper here it makes sense to put it at the top here so typically you might put this into a different app so right now we have our base app but maybe you might want to create an app for users but we'll just keep it in here and i'm going to call this custom login view so custom login view because the view is already called login view so i don't want to override that so i just want to inherit from it and we could use it directly actually but i want to actually customize a few things here so let's go ahead and create the view and the first thing i need to do here so we're not using a model so we're just so used to using that at this point i almost wrote model we need a template here so we're going to go into base and i'm going to create a template called login.html so we'll create that template and by default the login view already provides us with a form so just like our model form where in our update and create view all we have to do is specify the fields in this case we're just going to specify fields all and that's it so what i also want to do is redirect an authenticated user so if a user is authenticated they shouldn't be allowed on this page so that's just another attribute of this view so if we go in here let's see redirect authenticated user there we go so by default that's set to false so let's go ahead and go back in here we set that and that's going to prevent a user from being on this page so it's just going to redirect them we'll set that to true and then what i also want to do is override my success url here so once we log in let's just write that as a method so earlier on or early on we set that as as a success url in this case we'll just set the function so we'll just do get underscore success url we'll pass in self so remember we have methods and attributes that we can work with and then we'll just return and then this is going to be reverse lazy and when a user logs in we want to send them to the tasks page so we just want to send them to that first page and see all of the to do items the list items so we have our view let's go into urls here let's import that and i actually want to set that path just above this so we'll create the path here add in the comma at the end and this is going to be login with the forward slash and then we'll just do custom login view and then the name is going to be login so we still we still don't have that template yet so we have the url we have the view for now and let's go in here and create the template called login.html so create that template login.html so we have the template and let's just create a tag here that says login and we want to create a form here so create the form and let's see so for our login page we want to send this as a post request so we just want to set the method this is going to be post and then we also want to send a csrf token so csrf underscore token and if you're confused with some of this logic especially the login and registration logic i'm actually going to recreate the same application uh with using function based views and in this case as nice as these views are it's kind of nice to see what's actually happening and all the functions that are being called so if you want to watch that one and understand in more detail of what's going on i'll put that one out uh not too long after this so let's see i don't want to put a class on here so we just added in the token we pass in the form we do as p for styling here the type is gonna be a submit and the value itself is just gonna say login okay so this is going to create a form for us the view already did this for us so right now if i go to that page let's go to login so this is going to be forward slash login let's see and then it takes two positional arguments and one but only one was given what did i do here so it looks like that might be in the urls here custom login view oh dot as underscore view so that needs to be set that's the error that we'll get and let's go back here okay so we have our login form and it created it for us so if i hit login now we're logged in logged in as dennis ivey and then i still need to log out so if i refresh this now we're logged into the admin panel and i just realized because we're at that login view it automatically logged us out so if i go to login i actually need to set that link so give me a second we'll create the log out functionality too so we'll go into task list we'll connect our user so we want to set that in double quotes for now because the inner quotes are going to be single quotes so we'll do url and then log in okay so we're here we go to log in we log in now we're officially logged in and we have that logout link so if i go to the admin panel i'll log out and now i go to that page here so that's the login functionality we still haven't re we still haven't restricted a user so in theory a user can still go to this page so we'll add in the restrictions so they can't view that page and we also want to add in the logout link so let's go ahead and configure that also so we want to import the log out view so we'll create that and that's going to be done directly inside of our inside of our urls.py so we'll go in here so we'll go in urls we won't create the custom view so here we created the custom login view but as i said earlier we can actually use the views directly so if i go to this link right here let's go to log out view all we have to do is send a post request here and it's going to log out our user or i don't even think it needs a i don't even think it needs to be a post request so let's go in here we'll paste that in so from django.contrib.views log out view let's paste this in right here and i think it's a simple get request so we'll just do log out and let's see what do we need to do with the logout view so i need to throw that in right here and then this is going to be log out and all i need to do is set the value of next page so if we look at the attribute here we have next page here and that's just going to change where the user goes so once we log out where do we send the user so we'll go in here next page and that's going to be set to the login page so once we log out a user we want to send the user to the login page and looks like i'm missing a t there so that's all we need to do to log out a user so we use that built-in view let me restart my server looks like i have an issue there now that checks out so all i have to do is take this link inside of my list view right here or a list template and for log out we're going to set that in double quotes and then we'll set that url path and we'll set url log out okay so that should be it to log out our user so let's see what we have here so we'll go into my page here so we log out now we're redirected we log in there we go we can log in and log out so if i go back here now we're not logged in so now we want to restrict a user so if we go here we're not logged in when a user goes here we want to redirect the user uh back to that login page we don't want them accessing this now with function based views this can be done with simple decorators we can also write middleware for this but what i want to do is use a mix-in right here and we just want to add that into every single view that should be that should be restricted here so what i'll do is underneath my login view we'll just make an import here so we'll just do from django dot views or dot contrib so from django.contrib dot auth so we're going into the auth dot mixins so the authentication mixins and we're just going to import login required so later on you can do like different roles that are required so a user must be an admin and so on but we're not going to focus on that here so we just have this mix in and this is where mix-ins are really powerful so all i have to do is take this mix-in and i actually have to add it before the view itself so we're before the built-in view so we want to restrict our task list so we'll just add that in here as a in and now this view is going to be restricted so if our user is not locked in so we'll go here it just redirects us automatically so we want to change that route so it restricted us but this is how django already builds it in it goes into accounts log in and then goes into next so to actually set this value myself here what i need to do because of that mixing that i added i want to override that setting right there so we're going to go into settings.py i'll just add that in the bottom here just above my static settings right here and we'll just do login so login underscore url i believe and we just want to let the application know where do we redirect a user if they're not authenticated so in this case i just want to send them to the login page so let's go back here we'll go try that again so now when i click on that homepage it redirects me to the login page so that's because we added in that mixin and then we set that login url so in theory a user can still go to a single task so let's just do task and then let's see do we have two what task do we have let's go into let's see so we'll go into my tasks here get milk that has the id of one i thought i already tried that so let's see let's go back here so now i'm logged in because i logged into the admin panel but now we can go into task pass in the id of one and there we go so we can see it even though we're not logged in if we go to this page we're redirected if we go here we can see it so to restrict the user from going to this page all i have to do is take that login required mixin and we just need to add that anywhere we need it so let's go to task detail we'll add that before and remember it does matter how we add that add it before that view so we'll go to task create we also don't want somebody creating a task if they're not logged in we also want to make sure they can't update or delete so now all the pages are restricted so if i go to get milk now there we go i'm redirected and that's it so that's how we can restrict a user so what i want to do now is make sure that a user only gets their data so let's say that i go ahead and create an account as a different user so we'll go in here and actually we can do this so we'll go into the admin panel and we'll create a new user so i'll create the registration in a second but what i want to do here is log in go to users and let me zoom out because that's a little bit too zoomed in and we'll just say this user is going to be john so we'll say john we'll create a password here and then we'll just finish up that password confirm it okay so i'm going to log out right now and now i'm going to log in as john so let's see we'll just do john again okay so john is logged in but john can see dennis's item so we can see we're logged in as john the owner to get milk though is dennis so we created that under a different user so what i want to do is go ahead and restrict a user so i'm gonna have to customize my list view right here and make sure that only dennis can see dennis's items and john can only see his own items so there's a method called get context data and let me pull up the official documentation here so if we go here let's go into our views let's see actually we'll close this out we'll go to the top here because i want to explain what git context data is so in our typical views we pass in context we usually create just like a dictionary and we throw in we throw in data just like that by passing it into the dictionary and setting a key value pair so if we go in here let's go into let's just do detail view we see this method get context data so we want to override this and this is basically this returns back all of the data that we're passing in and we just want to modify that data so right now we are returning a list of items and that's because our model here if we go into list view we're just getting all the tasks in the database it doesn't matter who the user is we're getting all the tasks and we are returning them so we want to modify that context data by using this method here so i just want to pull that up get context data so returns context data for displaying an object or in our case objects because we have the list view so we just want to override this method here so let's go ahead and start customizing that and if you're completely new to this this might get a little bit overwhelming so just pay attention to how i'm writing it so in here we'll just do we'll create a function here this is going to be inside of our task list and we are trying to ensure that a user can only get their own data so we'll just do a function and then we'll do get context data we want to override this so we'll just set self and then we'll just do the keyword argument so we'll just do quarks here so we're just we're just passing in the initial values and then we want to set the context value here so context and this is just going to be set to the original value so we'll just do super these are all methods for this view so look those up and then we'll just do dot get context data so we're just making sure that we're inheriting from the original item we'll just set the keyword arguments so that's going to be star star quarks and now we can start setting up the values here so by default we just return some context data so i'll just show you what this means so we'll just do context and then if we wanted to add an item let's just say let's see let's just say trying to think of a name here color and then we want to set the value of red so this is how we pass in more data than just our query set so if i go to the template now inside of our task list i can just say color here and we're passing in context data so let's go in here okay so there we go now we see red so i'm just showing you what the the method actually does so if we go into our view this is what we want to override so we have our tasks so i can actually go to context and then tasks so we already have that we set it right here context object name we just want to modify this value so what i'm going to do is i'll get the original value so i'll get the original context data here so we'll go to tasks and then we'll just do dot filter and there's different ways of doing this so we'll do dot filter and then i just want to make sure that we are only getting items that have the user value set to self dot request dot user so remember we did a request.user in the template well we can access that same value right here so we have request.user so all we're doing is making sure that the tasks are only the users tasks and then we're outputting that data so in this case let's say i also want to output the count here so we'll just do count so we'll pass in more context data and for this we'll just do dot filter so task.filter will set complete so complete is going to be this is going to be set to false basically any item that is not complete we want to know what's the count of incomplete items and the reason why we don't have to send in the user here is because now we're filtering this set of data down here so we're filtering a filtered query set already so we're getting that query set and we'll just do count okay so we're just passing in that data so if i go here now if i refresh this john should not see let's see cannot resolve keyword complex must have misspelled something so we have context oh this is supposed to be complete okay so let me try that again okay so now john has no items remember we set that empty value now if i log in as dennis let's see dennis ivy there we go we see get milk we can add an item actually we'll take care of that in a second but if i go ahead and log out log back in as john there we go now we only see john's items which is none so we just ensure that a user can only get their own data now i also want to make sure that whenever a user creates some data they're only creating uh they're only creating an item set to them so right now if i create some items here so if i go if i'm logged in as john and if i go to add tasks i can set that value here and i don't want to do this i want it to be set by default to john and then when i added information when john submits this john should see his own data so let's just create another task here let's just say eat sandwich and it didn't add it to john so i didn't set that value but now we're adding that item so let's go ahead and override that so in this case what i need to do is override a method called form valid so this is already built in so if we go to create there's a method called form valid in this in this class base view so we'll just override that so we'll just create that function and we'll do form underscore valid that's already there we take in self and the form and what we're going to do is as this method is being triggered because it's getting triggered by default on that post request we're just going to go ahead and do form dot instance so do form dot instance dot user and in this case we're just going to make sure that the user is self dot request dot user so we want to make sure it's the logged in user self.request.user and then we just want to continue on with whatever else the function does so we'll just do return and we'll do super and then we can just add in task create so that's the view that we're working with so we'll just set task create and we'll pass in self and then we'll just do dot form underscore not invalid but form.valid okay so it looks like i spelt invalid right here so there we go we pass in the original form and that's all we have to do so let's take a look at what happens here so if i go in here and what i want to do is actually take out a certain attribute so we no longer want that user so if we go in here if i go to add a task let's see what's going on here okay so form oh i did from so form and let's save it okay so let's take a look at this so if i go to task create we see that user value right there so i don't want to show it i want to show the title description and complete so now we can get rid of those so we'll just do a list right here in this case we'll just do title description and then we'll just do complete okay so i also want to do that for updates so let's just do update here save that and that needs to be complete and complete okay so now if i go ahead and add an item so i'm logged in as john let's just say by house let's save that now we see that here let's say rake leaves i don't know where i get this stuff from so we see that added to john's items here so we see buy house rake leaves log in as dennis now if i add this to dennis let's say finish video okay so that's added to dennis and all of those values are completely separate so we only see john's and dennis's query sets those are completely separate when we create the items those are also taken care of so let's go ahead and create our register page so when our user is when the user doesn't have an account so the first time they come here we want to register at this point we have to use the terminal or use the django admin panel and we want to be able to just create that from here so the first thing i want to do is add a link to the register page so we'll go in here we'll go to login and if a user doesn't have an account let's just ask a question so we'll just say don't have an account and we'll just add that as a question and then we want to create a link which for now won't point anywhere we'll just say href and that's going to be an empty string and we'll just say register so we'll create that we'll have to create the register page here in a second so we're just going to point the user there let's go ahead and check that out so we want to be able to click that and then once we create the register page we also want to say already have an account and let the user just log in so let's go to our templates let's create a register html so in this case we're actually going to customize this functionality because there is at this point no built-in view at least that i can see that actually handles this for us so we're just going to take this template and we're just going to say register inside of the register.html page so we'll create that and then all the logic is gonna have to be basically custom made here so we'll just do register and then we'll say login for this and we'll say already have an account and then we'll ask the same question okay so already have an account and we just want the user to log in i don't know why i keep spelling registered that way okay so we have a register page and we need to create the view and the url for this so let's go ahead and start building that out so we'll go into our views and let me close out settings.py close out task list login and we'll leave register open here so like i said there's no built-in view for this but there is a view called form view so we'll go in here let's go into let's see not the source code with the descriptions here so if we go in here there's a view called form view which i want to take a look at really quick so we'll go to edit views form view and this view just basically allows us to generate a form we are going to use a built-in method from django there's a register method but we also but we do need to just use this form so this is our example of customizing a view so let's go ahead and just start doing this let's go in here so let's see what's the first thing we need to do we need to create the page and we also need to import our form view so that's gonna be from django.views.generic.edit we'll just do form view and there's also a method that we want to import so we just want to import a method called user create so let's just do from django.contrib dot auth dot forms so we're going to create an authentication form so that form view that we're creating we're actually going to set a specific form that we want to use so this is a built-in form it's called a user creation form in this form once it's submitted just creates a user for us so it's kind of self-explanatory and then we also want to import a method called from django.contrib and this is going to be auth and then we just want to import the login method so what we're going to do here is once we create a user we want to log that user in directly so we don't want to force them to log in they should already be logged in and redirected so we imported user creation form login and form view so now we want to actually create the register page so let's go down here underneath our login view let's go ahead and create our class here we'll just call this register page and what i'm going to do here is import from or in here from form view so from form view i want to set the template name and the template name is going to be base forward slash register and the form itself we're going to set the form class we want to use the built-in django user creation form so we can customize this form you'll see what it looks like if we want to modify it later we can do that so we have that user creation form and i also want to make sure unauthenticated users or users that are authenticated authenticated are just redirected so we want to redirect authenticated users and i also want to set the success url so once this is submitted we'll take in success url we'll throw that in right here and that's it for the base functionality and what i want to do now is go ahead and render this form so let's see i want to see if this can actually be used right away so we'll go into our urls we'll import this so we'll throw that in after our custom login view we'll throw in register right here so we'll just set the path here and that's going to be register for the route forward slash and then we want to set that view so the view is going to be register page dot as underscore view and let's see so we want to set the name here that's going to be register and that should render it so let's give this a test right now so if we go in here and you notice that in our register page we're rendering out that form this is that authentication form right here so the user or not the authentication form but the user create form that django has for us so if i go to register and that is not linked up so we also need to link that up so we'll go into login let's just point the user now so we have that url let's go ahead and just say url and then register save that refresh it and we'll go to that page so template does not exist register did i not add register.html let's see yeah i forgot to add that so let's throw that in right there let's refresh that and there we go so we have our template there's really no functionality to this just yet if we submit this it's not going to do anything but all this information comes from that built-in user creation form so we took that form and we passed it in we threw that in as the form class so now what i want to do is actually redirect the user once that form is submitted so let's go ahead and add in this function so we have a form valid function which we've already used so we have that form valid function so in here let's see we'll pass in self we'll pass in the form and for the return value we'll just throw this in first we'll just throw in super and i want to throw in register page so the class name or the view name we'll throw in self and after that we can just do dot form valid and then we pass in the form so what i want to do here is once this form is submitted once it's valid i just want to make sure the user is logged in so i'm going to set the value of user this is going to be form dot save so once the form is saved the return value is going to be the user because we are working with the user create form and we'll just say if user is none or is not none so we'll just do is not none so that means that if the user was successfully created go ahead and use the login function so this login function we're just going to go ahead and authenticate this user so we'll pass in the request so self.request here and then we want to pass in the user that we want to authenticate so now this user should be logged in created logged in and redirected so let's try this let's give this a test here so let's see looks like my server wasn't on so let's turn actually no something looks wrong here so syntax is invalid i keep doing from so form so we'll save that let's try that one more time okay so it looks like i just had to restart that really quick so my server is running and now that should give me the register page so let's just use my wife's name so we'll just do sulaimita and i'll create a password here confirm that password and then let's just hit register so if i register now so amita has been created she's in the database so if i go to my admin panel which she can't log into because she's not created as a super user but she is now officially here she can log out and then log back in sula mita and then there we go add a task let's just say task number one so task one and there we go so now we can log it register user and log in so what's happening here is once that post request is sent the form valid method is triggered we submit this form right here the user creation form we get the user and we log the user in directly and just redirect the user back to that list view now if we want to view that success page or that register page if i go to if i try to go to register i should be blocked from seeing this interesting let's see redirect authenticated user an authenticated user should be blocked from this page okay so what i'm going to do is actually just override that method it looks like this attribute is either not a real attribute or for some reason it's not working so what i'll do is i'll just create a function and again this is the beauty of knowing how class-based views work so we can just write our own function we'll pass in self we'll throw in args and quarks so the arguments and keyword arguments so star star quarks and i'm just going to manually override this and i'm going to say [Music] dot or ifself.user.org dot request dot user dot is underscore authenticated and that's just a method here so we'll throw that in like that and then or it's a property then we'll just do return redirect so it looks like i need to import the redirect method so give me a second here so that's going to be imported from here so redirect after render so django.shortcuts and let's continue here so we want to redirect that user where did that view go so we want to redirect the user and we're just going to send the user to the tasks list so we're just going to manually set that if a user is authenticated redirect them and any other situation just go ahead and continue on with what you were supposed to do here so we'll just we'll just throw in register page we'll pass in self and then in this case we'll just do dot get and we'll pass in arguments and keyword arguments okay so now if i save that that should take care of this for us so now we're logged in if i go here we're redirected if i try to go to login it just redirects us and it restricts us so now what i want to do is actually build in some search functionality here so let's log back in as dennis here and let's add in a few more tasks so let's just say uh pay bills um maybe i want to get some flowers so get flowers here and there we go so we have some items and i want to search these items so what i'm going to do here is first i want to create a form here and then we want to handle that functionality in the back end so we'll go in here and we'll go into our template so we can close out the login and register page we'll get to styling in a minute here so pretty much right after this we'll start styling everything so we'll go in here in our list page task list just above our table let's go ahead and create a search form so create a form the method for this is going to be get so we want to send a get request so we're not sending any post data so we'll set that we don't need a csrf token and what i'm going to do is create two inputs so the first one is going to be sub it is going to be the submit button so the type this is going to be set to submit and then the value itself is going to be set to search so that's going to capital s and let's close that up right there so we also want another input and this input is going to be for our actual search area so what i'm going to do is go ahead and set the type and this is going to be text so we want to search some text here and i want to set the value here or the name and this is going to be search area search dash area so we're going to have the search area and the value itself here is not going to be set by default just yet so if i go to my page we should be able to see that search form if i submit it we see that get data gets passed in but nothing really happens just yet so what i need to do is i need to go into the back end here and i need to add in the logic for that so we'll go into views and let's take care of this so i'm going to go to my task list we see that we've already modified some data here so i just want to keep adding to this and i'm going to set a value and this is going to be called search underscore input so that's going to be the search that was sent and this is going to be set to self dot request dot get so we're getting the get method and out of that get method we want to get the search dash area so whatever the form name was we want to take this value the name of the form we want to get that value and i'm going to say search input is either going to be that request or it's going to be an empty string so we can just do that because if we don't search anything it's going to be blank so we just want to set that default value now all i'm going to do is change how we filter this data right here so we'll just create a condition and i'll just say if search input so if we actually have some data here let's go ahead and modify our search field here or our query set so we'll just do context we'll throw in tasks here so we'll pass that in and that's going to be set to tasks dot filter so we'll throw that in right here and then we'll do dot filter because we are just filtering the query set and we can just throw in the title so we can search it by the title or any other value so we'll just do title underscore underscore dot i contains and we'll throw in the search value so search input so if i set this now all i'm going to do is throw in the search the search input itself so we'll actually take care of that in a second so let's try this so if i go here if i refresh this again let's take this out and there we go so let's say get so throw that in and now we see that data was filtered but at this point we are refreshing that form so i have to manually go ahead and clear that out so what i'm going to do is pass in the search input so whatever we add in i also want to throw that into the template so let's just do context here and we'll just pass that in as search input underscore input and we'll throw this in so we'll just throw in whatever the value was so once we have that now we have search input available in our template so i'll just set the default value to whatever we use last because it is refreshing the page and in this case we're just going to do search input so let's try that again let's try this let's just do get or ge and there we go and the value stays so we can just remove that and there we go so let's try the value of f here so f i okay so what's happening here is let's say i want to search it by the start of a word so we see flowers right here and that works out if we want to search it this way but let's say we want to start typing out a word and the filtration or the filtration begins at the start so i can actually change this value we'll go into views and we'll do title instead of i contains we'll just do starts with i believe it's like that let's just see what that is let me refresh that so there we go so now if i type in f here now even though another word contains it we only get it because it's the beginning of the word so there we go we have the filter method added in and now let's go ahead and start styling our form so we want to style our edit field our view field delete methods and so on and make this look all good here so let's log in and the first thing for our styling is i want to get rid of this view page because it doesn't really do anything i just want to be able to view a page by going to edit here clicking on that and then i just want to delete it if i need to so we'll go into our list in task list i'm not going to delete the urls or anything like that i'll leave those but let's go ahead and just take out the view method and that's going to be it for now so we just want to clear that so let's go ahead and make a template that all the other pages inherit from because if we start styling each page we're gonna have to add in a style link we're gonna have to start modifying all of these and perform styling one by one so we wanna perform or use template inheritance here so what we'll do is create a new template and this is going to be main.html and this is the template that all other templates will inherit from so let's go ahead and create our default html here so let's see i don't know why that's not auto filling here so there we go i got my boilerplate code here in most text editors if you just start writing out html it'll auto complete it for you if not just go ahead and manually add that so let's go ahead and add in to do list here so that's gonna be the title uh type this out like i said if it doesn't autocomplete but here we go i can remove the javascript and this is the main template for our page so what i wanna do here is first i wanna set my block tags so i'm going to create a div here and this is going to be the wrapper to the main page so i'm going to give this a class of container we'll set that class and then i want to go ahead and create my blog content so this is how we can work with template inheritance so let's just say block and then we'll say content and all the child elements in all the other pages will go in here so we'll just do end block content okay so we have our parent template and just to give you an example let's go ahead and add in some styling directly here let's just do style and we'll just set the body color and this is going to be gray so background color that's going to be gray if i can get that or let's just do aqua for now we'll make this look a lot better but i want to show you how this works so if i go to my task list so right now we're not inheriting from any template if i refresh this we just still see the same page so if i go in here we'll go into my main.html or not my main.html but my task list and i'm going to go at the top here and i need to extend that main template so we'll just do extends and then this is going to be base forward slash main dot html and then what i'm going to do is wrap all of my elements inside of the block tags so we'll just do block content and then we need to end block content so we'll just do end lock content okay so if you look at this this actually looks exactly like this right here so that's what was that's what's going on here so we have the block tags and i'm just going to take all of this and we're just going to throw this into the block tags so now this page is going to take in all the parent elements of main.html and throw those in here so if i refresh that now the page is blue it looks really bad right now but it's inheriting from it so let's go ahead and just finish this up we'll create some space here and i just want to do this for all of my templates so we'll go to actually we won't worry about tasks because we're no longer working with that let's go to my login page we'll start by wrapping that so we'll just extend it and then we'll end the tag make sure all the parent elements have it and block content let's go to log out and then log in so login now has it if we log in the page for our list has it we'll go to edit it doesn't have it yet so we'll continue here so we're just going to repeat this a few times so we'll go to register so at this point i'll start going fast because we finished up all the logic and we're just styling it so we'll just do end block that's for a register page save that close it close out login task let's make sure to save it i guess so now we want to go to confirm delete this page also needs the styling and we'll just do end block and then let's go to task form so for our form and i think that's going to be it so this is going to be end block down here so we're just wrapping everything okay so all the necessary pages should have the styling so we go to edit if we go to create log out register let's go back log in delete okay so we have the styling so let's actually start styling the page and making it look nice so the first thing is i want to start with this container actually no we want the fonts first so let's go to google fonts here so go google fonts and i want to get a font here and that's going to be nuno i believe what did i call that nunito i don't know how to pronounce that so we're just going to take this right here and we can take the styling so what i'm going to do is go to 200 extra light or not italic so we'll go to extra light right here select the styling and we're just going to take this link so this is a free font that we can use we'll just take this link right here we'll throw that into my main.html and that is now going to give styling to the rest of the page once we set it so we just paste in that google font and now to actually set that font we can start using it so let's go down here let's take out that ugly background and let's actually set the background with a different hex so in this case i just want to set the hex to like a eggshell white so we'll do hashtag or pound f a f a f a so that's going to give it a light gray then for the font family so font dash family this is going to be set to nuno right here or new nitto so let's see it actually shows us how to use this so let's just take that right there and we'll paste this in here okay so that's going to set the font and we also want to set some padding at the top so let's just do padding top 50 pixels and we also wrapped everything inside of a container so let's go ahead and set some styling to that so we can center that and see how that works so let's go to our container container here this is gonna be a width or a max width of 550 pixels so that's going to make it responsive so 550 px right there we want to center that so that's going to be margin and let's see we want to do margin auto that should center it for us and i want to set the background color to white background color that's going to be let's just do fff that's going to be a pure white with the pound symbol and after the background color we want to add in a shadow which i'm just going to paste it so i do have some styling already pre-built i want to do less copy than pasting but might end up just trying to speed this up and getting it done that way so here we go we added in that container we can see that it's centered if we make this responsive or if we start shrinking this because it's a max width by default it's going to start shrinking so let me try to grab this i don't know why i can't get it so there we go and our list is fitted to this so if we log out go to register page all of that is wrapped in this so we'll go to the login page huh it looks like that login link didn't work so let's go to register and i never set that so let's add that we'll just do url and that's going to be set to login okay so if i refresh that there we go our login page delete and edit okay so i'm gonna start moving a little bit faster here let's go ahead and start copying and pasting a few things in here so we'll go into main and i'm not gonna set up my static files i'm gonna leave it all in here because there's not that much to do here so what i want to do is first set our styling for all of our header tags so i'm going to paste this in here and i have auto formatting on so that's how that jumps there and i'm going to set all the title tags so h1 add a comma h1 through h6 actually let's just do h6 here we want to set the font to railway right here so we'll set that and that should update that so we set all the fonts here and i also want to set the color to my paragraph tag and all of my links so we'll go ahead and paste this in right here so we'll throw this in underneath that'll set all the colors here so for my links and so on that changes that color and that looks a little bit better so let's go into my list page here so for every page i want to keep a certain format here so i just want to start styling these so we'll go into we'll close out register and confirm delete form let's go into my list page and start styling this so the first thing is i want to modify all of this right here and i want to put this into like a header bar and i'll just show you what that looks like so let's create a div outside of that and in this case we're going to give this a class of header bar we'll style that in a second so header dash bar and inside of our header bar i'm just going to create a div here and we're going to use css flexbox here so that's just a way if you don't know what that is that's just a way of creating our layouts here makes things a little bit easier so inside of our div we're going to go ahead and create a intro here we'll say h1 and let's just say hello and then whatever our username so we'll do hello and then we'll pass in request.user so let's just throw in that value right there so in this case we're going to throw in the user and i also want to make sure request.user.username so let's just do that user name actually we can leave it this way so i want to make sure that the first name or the first letter is capitalized so we'll just do a pipe there and we can just do dot title so that's gonna make sure that whatever your name is the first letter is capitalized now underneath that you want to create an h3 tag and in here i'm gonna set some styling with margin we'll set that to zero so do margin and then zero and in this case i just wanna pass in a sentence here so we'll just say you have and then in italics i wanna say the list of or the number of items that or the number of tasks that are incomplete so remember we have this value count and it looks for all the items with the complete status of false and it gives us a number for that so we'll go into task list and we'll just say you have and then count and then after the italics here we'll just say incomplete items incomplete items here okay so we're setting the number of incomplete items or incomplete tasks and in this case i'm going to say task because we want to make this plural so if i just do tasks like this let's go ahead and see what this looks like so if i go back here if i just try to use this right now so it says hello dennis ivy you see that we capitalized that even though our name is lowercase and we have three incomplete tasks well what if we log in as sulaimita so sula mita like that okay so we have one incomplete task so we don't want that and in this case we want to pluralize it so let's go ahead and after s right there let's just do double curly braces and we're just going to say count so we want to pluralize pluralize it by count then we'll add in a pipe here and we'll just say pluralize okay so pluralize and we want to pluralize it and we want to say if there's more than one add an s to that so we see tasks like that what happened here is misspelled pluralize so let me just copy and paste a value here actually and i think that needs to be in quotes so we'll just do pluralize just like that okay so now we see you have one incomplete task or task if i log out log in as dennis now it says tasks so just a little styling there we just want to make sure that that is correct now we want to style our condition here so let's see this is going to be inside of our header bar but outside of this div right here so we just want to write this condition we'll throw that into our header bar outside of this div we'll save that and let's see so what i want to do is i want to check the condition so if the user is authenticated we can take out request.user because we're already setting the username and we just have the logout message and the login message so let's see what that looks like there we go looks a little bit cleaner and let's style the header bar so for this i'm just going to copy and paste some css so we gave it the class of header bar right here so let's go to main.html because we are going to reuse this in multiple areas we'll just paste this underneath our container so we display it as flex that in lines all of our items which we're about to see we set that to justify content set all the values and the colors inside of that for the text to white set some padding some border radius and then a background color and that's going to be an orange color like we saw in the demo so if i refresh this there we go so that inlined it and it made it look a little bit better so what i want to do is actually make sure that this link is white here and i don't want that underline underneath it so we'll go back in here underneath our header bar we'll just go into header bar and we'll style all the links here if i refresh that there we go that looks a little bit better so let's go into my actual task now so we'll style that search bar in a second but i want to style all the items so we'll go back in here and i don't want to have a table here so we'll go into task list i want to style these completely on their own so we'll take out this table we'll actually we'll leave it here but we'll just customize all the logic underneath it so let's see we have our header bar and what i want to do is actually just comment out our search bar and take out this right here so our back link or add link i'm just going to comment that out so let's see what we have here okay so we don't have that now we have our table items so let's see we have our table here and what i'm going to do is create a div here so we're going to create a wrapper for that and this wrapper is going to have the class of task dash items dash wrapper and that needs to be a dash not a dot so it looks like i forgot about that okay so we have our wrapper for all of our tasks and i'm just going to create my condition so we're going to take these values we'll paste that in here we'll set mt and n4 so in here is where we want to create a div for each task item so we'll just do div here and inside of this div i want to call this or give it a class of task wrapper and inside of this div let's go ahead and first check if our item is actually complete so in our task we'll create a condition and we'll just say if the task is complete style it one way if it's not style it another way so we'll just do if task dot complete so basically if this is true that means the task is complete go ahead and cross it out so let's create the end if here so end if we want to close that out and let's see so in here we want to create a wrapper around this and we'll just call this class of task dash title and let's see we have our div here so this is for the actual item itself inside of that wrapper and what i want to do here is we'll just do div create another div and i want to create a complete icon so we'll just do class and this is going to be task dash complete dash icon so we're just going to manually create this with some css i thought about using font awesome links but then we would have to import those so i just want to stay away from that so inside of task title we have the icon and then let's go ahead and actually create the task itself so we're just going to use uh the italics here with an i tag and then we also want to make sure that these are striked out so we'll throw in the strike tag so that s right there and now we want to throw in a link so it's a little bit nested but in here let's throw in the actual task okay so we have the task we want to link to the edit page so we'll take in this right here task update we'll throw that in right here and there we go so let's see what we have so far it's not going to be styled but now we have a crosstal item so we also want to create an else statement and then we'll modify this so we have if so if the task is complete and we just want to create that else statement so we'll just do else here and i just want to take all of this paste that down here and let's see so we have task incomplete item so that's give me another id right there we still want to link to the same thing but in this case if the task is not complete we can take out the italics and the strike and we can just throw that in like that so we just want it to look normal okay so there we go there's our complete items and our incomplete items so let's go ahead and continue this let's open up the text editor one more time or another time so we have our item here and what i want to do is throw in a delete icon so outside of this condition so we have if else end if let's throw in a link here so what i'm going to do is take in this delete link we'll take in the opening and closing a tag and that's going to be after our if else statement and in here i want to give this a class so we also want to style this so this is going to be called delete dash link okay so we have our delete link and that just points to that delete confirm page and instead of actually saying delete what i'm going to do is just throw in a hex value here so that's just going to be this symbol right here which you'll see in a second so let's actually go and look that up so html x icon or let's just do back arrow because that's usually how i search it that's why i found this website so topol.com we can basically add in these values right here just by using this so i just took in this html code right here or did i do the hex code no i took in the html code so we're just throwing that in right here and that's what we have here so that is actually inside of my if else statement so we want to throw that in like that and then throw that in right here okay so now let's take a look now we have our x icon and it's time to actually style this so what i'm going to do is get rid of these ones right here i want to get rid of that table i don't like tables because they're a little bit opinionated and they force you to work with their styling so i'd rather just use css flexbox here to style this so let's go back into my main.html and we want to start styling this so we have our header bar for our task wrapper we'll paste in some css here we display it as flex we align the items and that just means that they're gonna be aligned vertically we set some padding some background color and a border so if i go back to my list here that should be inlined now if i save that so task wrapper and in here we have task wrapper make sure that's saved let's go back and i don't know why that didn't refresh okay so there we go we inlined it and let's continue on with the styling so i also want to style the task title and the task link along with the complete and incomplete icons so we'll go ahead and go back here we'll paste these in so we have a task title which we added that css right here we have the title task incomplete and complete icon so we style the links too and this is how we style the icons we just create a circle so we create a div with a height and a width set the border radius one color is going to be gray right here for incomplete and then green is going to be or complete is going to be green so if i refresh that there we go that looks a little bit better and i don't know why that styling is still there so task title let's see why that's the case so we shouldn't have oh the delete link so we added in a delete link so we have that class so let's add that in after incomplete let's refresh that there we go so we just made that red so if you look at that css we set text decoration to none set the font size color and or the font weight size and then line height and that's pretty much it so now we want to style our search form so our search form which i just commented out let's see let's take a look at it so we're going into tasklist.html let's go ahead and uncomment this so let me look at my source code and see how i styled this so what i'm going to do here is i'm actually i'm actually going to create a div around my form this div is going to have the class of search dash add wrapper so it's a wrapper for my search form and my add button so in here i'm just going to take in my form we'll paste that in like that that means i can remove it from this and we still have the method and i'm actually going to add in some inline styling so for our style i'll just paste this in so let me just throw that in right here so we have style margin top 20 pixels display it we display it as flex and we also just have our original form so we don't do anything specific there now for the add button let's go ahead and take this right here and we'll delete it from here we just want to add in the id of add link so we'll just do add dash link and instead of add link here what i want to do is just add in a plus icon so i have some hex code for that or some html code for that and let's take a look at that so it's not going to be styled yet we have our search form so i'm going to go in and get some css here so these are set with ids i believe so we have my search form search add wrapper that should be an id instead of a class i believe so let's set that and let's go to main.html and set that so paste that in right there we have a search wrapper we display it as flex justify content align items padding and then we set some color for the add link and so on so go ahead and just copy this code if you need type that out i also will have the source code provided so now if we refresh that there we go we have our add button our form is styled right here or it's inline but it's not fully styled so to actually style that form i'm just going to style all the form values for the entire page here so what i'm going to do here is i'm going to go into my list my list page we'll go into task list and i want to add in a class to this button here so for this input button i just want to give it a class of button and we're going to have the same buttons throughout the entire page so let's see we have our button there we can go back in here and we'll go into i'm going to grab some css here and we'll just paste this in so now we're going to paste in our input values so we're just styling any input field with the value or the type of text password text area we're just adding a border to that setting some styling adding some margin to any labels that we have and we added some css to any item with the class of button so we added in our button right here so we gave it the css so let's save that make sure you add in this css from here to here okay so let's save that and see what it looks like now there we go now we have our input field so we can search here let's just do finish fi there we go so that's our home page so now we're just going to continue this or we're going to continue with this header bar and a lot of this same functionality in all the other pages so if we go to our ad page let's style this so we styled all of our search forms so that's why we're already getting this we still have that container so there's not that much we need to modify so that's all styled because that's inheriting from this so we'll go into our forum page so task form and i'll pull up the demo here and let's see so in our form page pull this up here so i'm going to wrap everything inside of a div and we're just going to create a header bar here again so i'm actually going to create the div give it the class and this is going to be header bar header dash bar and inside of our header bar let's go ahead and add in a condition here to send the user back or let's actually just add in a link here so we'll just do a link and this is going to send the user back so we'll just do html value so that's going to be a back arrow so just write that in right there ampersand pound symbol 8592 and then the semi colon right there and then we just want to set the value back to the list so we'll just do the url and then that's going back to tasks so that's inside of our header bar so if i go ahead and take out the go back button i guess i could have just copied that take out task form let's see what we have so far okay so we have our header that goes back if we go to edit add we have that back button so now let's style the actual form here so in the form all i really need to do is add in some styling to that button remember we already have a styling for a button if we give it a class of button like this so we already have that in our css if we add that that's going to be taken care of we also want some padding right here so let's just do this let's wrap all of these elements inside of a div and inside of this div we're going to give it the class of card body so we'll just do class card dash body and i just want to take this form and we're going to pass that in right here so paste it in it's still not going to do anything yet what i'm going to do is go back to main.html and we're going to add in some css here so let's take in some css we'll paste that in down here and let's take a look at our form okay so that looks a little bit better we can modify things so if we go to finish video let's go ahead and cross that off everything looks good and this page is complete so let's see what else we need to do here so i also want to modify we have our form modified and i want to modify our delete page so delete page or confirmation let's go to confirm delete right here so let's go back into our code close out task form and i believe that's all the css we're adding so i'll just leave this page open just in case we'll close out our urls and let's go to task confirm delete so in here i just want to create our header bar so we'll just create that again we've done this a few times whoops create the div class header dashbar and in our header bar i just want to send a link or add in a link to go back so we'll paste that in right here we're sending the user back to the task page and i'm actually gonna go ahead and add in that html value right there for that back arrow and let's see for the link itself i want to make sure that this link is white so let's see what i need to do here so if i refresh that okay that actually already looks taken care of so i don't need to do that so we'll take out this one right here and i just want to wrap this form inside of a div with the clasp or with the id of card body to add some padding so we'll just do card dash body so we can take that form paste it in right here add in the class of button here to style that let's save it and see what we have okay so that looks good let's see i want to remove get milk there we go that looks good so far and now i think i just need to style the login and register page so let's just go ahead and log out and let's modify this page so we'll go to the login page let's go into login we'll take out confirm delete here in our login page we're going to do a lot of the same stuff here we'll create the header bar so let's go ahead and just paste in some code so around our login tag but i'd create an opening and closing tag we have our header bar let's refresh that that looks better and around our form we just want to create our div the class of card dash body and let's see we didn't close this div so let's just wrap it like this oh it looks like it did close it's right here so let's take this form copy that paste it in right there and our form just needs a class of button to style the button itself and actually need to add in that value so we added in the button and we also want to add in that question inside of our card body so let's save that let's see what that looks like okay so there we go now for our register page all the form fields are already styled we'll go to register and let's do the same here so go to register.html let's take in this div right here paste that above register pass in that closing div pass in card body throw that around our form so just wrap this take that closing div paste it right here add in the class of button so at this point we're just rinsing repeating and let's pass this in right here okay so let's go ahead and refresh that and there we go so i also could modify some of these form fields so i actually want to customize this because i don't like what this looks like it's kind of ugly right here we can customize these fields pretty much any way we want so what i'm going to do here is i can actually access each form field individually so instead of just rendering all these out what i'm going to do is i'm just going to add in a label tag and we can actually do this right here so we'll go into label and we want to go into our form from our form we want to go into the username value so we'll just do form.user name.label and then underneath this we can just do form dot user name so let's take a look at this and it's gonna make it look a lot better so now we have our username and we can just keep modifying these values so let's copy and paste this so let's see we can do form dot password one so that's the first password so password one dot label and then this is gonna be form dot password one and then the next one is gonna be form dot password two so that's the confirm password we'll just do password two form.password2 okay so there we go and that looks a little bit better so i wanna remove that margin right there so let's just add in some margin top to the bottom we'll just do that in line because it's a quick thing so style margin and we'll just do dash top and we'll just add in 10 pixels right there okay so that completes our application we can log in we can register each user can only see their information let's log in as sulaimita now log in as a new user we see one task we'll update that task to complete if we want to add in a description we can see that information and we can search our tasks any way we want so that's it for this video uh thanks for watching i hope this was helpful i try to create a to-do app and at the same time show you how to use class-based views so make sure you're watching both videos if you have a hard time understanding it and be sure to reference the source code

Channel: Dennis Ivy

Views: 80,144

Keywords: Programming, Software Developer, Dennis Ivy, Dennis Ivanov

Id: llbtoQTt4qw

Length: 132min 3sec (7923 seconds)

Published: Fri Mar 12 2021