Adding User Login & Registration with Django

hey what's going on everybody so welcome to my first codelawn live stream so what i'm going to be doing here is building out some user authentication and registration into an existing django application so i am putting together a new course and i wanted to make sure that this is done live so i can practice on it i'm trying to go more for that classroom-like environment so what i'm going to be doing is cloning a repo and then going through that so i'm going to try to give a little bit of instruction before we get started but what i'm going to do is just go ahead and start coding and we'll see how the stream goes i'm not sure if i'll keep it up after but it should be some good practice here so thank you everybody who's here for joining i appreciate that first time i'm streaming at this hour so what i'm going to do here is go ahead and get started by actually cloning the repo it's in the video description and this is to a photo sharing application let me actually pull up that image here actually might have it on my desktop so give me one second so go into the video description if you want to check it out but this is going to be a photo sharing application and i just realized the image is in the the repo so i'm gonna share my screen right now okay let me add that to the stream okay so we are on the github repo or in github i guess and we have this photo album right here so this application basically allows us to upload photos and search them that's basically all it does the whole point of this application itself was just to show you how to basically upload images into s3 buckets and what i want to do here is add in a feature so users have to log in before they can see them so i'm not sure how far i'll get into this but we'll add in basically login and then permissions so a user won't be able to access certain pages until they're logged in and then we'll add in registration logout functionality and then i'm also going to add it to where a user can only view their own photos so at first you'll be able to just log in and view all the photos here and then eventually you can only see your own so i'm going to try keeping my screen like this i just want to have my face in it i know stream yards is a little bit limited if the pictures or if the video gets a little bit small let me know and i'll just go full screen and take my face out of here so the first thing i'm going to do is actually go ahead and clone this repo and we're just going to get things started i'm going to create a user and we'll just go from there so let me whoops accidentally open opened up obs here okay so let's open up our command prompt and i'm just gonna go ahead and clone this so we'll just cd into my desktop that's where i'll keep it and then we'll just go with git clone so i copied that url we'll go ahead and clone it there that'll take a second and i'm going to open this up in vs code here taking a little bit longer than i expected okay so there we go we have the application cloned i'm gonna close out my terminal so i'm gonna use vs code for this so i'm gonna go ahead and open that up okay so we have vs code open let's go ahead and open that project up that should be on my desktop now and that's going to be photo sharing app here so i'm going to run this and then we'll just do a quick run through of the application itself so open up the terminal there we'll just let's just do python manage.py run server [Music] okay let's go ahead and get that open now okay so here's the application there's no authentication here yet uh you can't you can just log in or anybody can open up the application and search they can filter through by categories and anybody at this point anybody at this point can add an image i just spit on my mic here so let's go ahead and try that let's just do testing for the description let's select the category we'll just say travel let's pick an image off my desktop and i probably should have actually prepped some but let's just go ahead and take this uh picture of myself here well actually i'll just do an old thumbnail okay so that image is now in here okay so let's go ahead and start adding registration so what i want to do is actually create a super user i don't remember what the original user's password is i guess i can test it so let's go to the admin panel and usually i'm used to working on both screen so this is going to be a challenge here so let's open this up we'll go to port 8000 and i guess i use the same exact information here so for the same credentials so authorization verse authentication let's talk about how django does this so authorization and authentication for those of you that don't know know what that is uh authorization is where one second here let's see authentication you i have to look through some notes here this is so weird during a live stream okay so authorization is where we authorize a user and i'm probably going to completely butcher this but basically one is for where we can decide what a user we we identify a user and another one is when we decide what a user could do so authentication versus authorization yeah so that's basically the summary of that let me try to find the actual description before i just butcher this so authentication is where we determine who a user is in their credentials such as a username and password so when a user types their information in let's just try this so when i'm logging in this is to the default django admin panel when i hit login this is authentication we authenticate the user based off of my information if this user exists in the database if the password's correct then that user is authenticated and then authorization is determining what a user can do on the website so checking your permissions and so on so how django does this actually is django uses sessions so right now we're using session based authentication because that's what django does by default so if you go to inspect element here and let's go ahead and go into application and i believe that was in session storage or cookies let's see okay so if you look at this let's go ahead and log this user out so when we click log out what actually happens is this session gets deleted so i'll delete everything from here and let's take a look at what happens again when we log in so when i click login right now we're just using the default django admin panel we can see a session get generated so now when we when we open up the website later the user the computer will remember who the user is based on the session stored in the cookies so we use this session to check the user every time so this way every time you turn off the website or close it out from the browser and get back on you don't have to keep re-authenticating yourself this session is stored and that's what django's doing so this is what we're going to build in right now we're just going to build that in in a custom way but the django admin panel does it the same exact way that we do this so let's go ahead and close this out we'll close out the admin panel and let's get started with the application so i'm going to open up vs code and let's go ahead and start by building out our first our first page here so right now if we go into let me turn off my phone here so let's go into photos so this is the app right here i'm gonna go into my first or into templates here and right now if we look into the views file we have a gallery which is that home page that we saw then we have a view photo section or a view photo view and then an ad photo view so three pages that's all we have right now so add photo that's one template this is the gallery template and then the view photo so let's start by adding in a page and this page is going to be the same for registration and logging in so let's just do login underscore register a login register html and what i'm going to do is just create some boilerplate files um i realize in the original tutorial i didn't i didn't create a main template that we're inheriting from so we're just going to have to do it this way and this is what happens when you live code and mess up like that so i'm just going to go ahead and take this out and we'll just do log in and register that's going to be the title here and let's just say login page so let's just use an h1 tag and we'll say log in okay so we have our template and let's go into our views now so we'll go into the view and we're going to create our first login view here so i'm going to call this login page and the reason for this is because i don't want it to conflict with an existing function that we're going to use here so we'll just do login page and that's going to be a simple function based view pass in request here return and let's get our page so let's render that out and we need to pass in request here and then we'll just do let's see what i call the app so the app is called photos so that's in photos and then that's login underscore register register.html okay so we have our view and we have our template right now we just have some text there so let's go ahead and go into the urls here and what i'm going to do is just keep it all in the same app so we'll create our new path here and let's see we're going to call this login and then the view that's going to be views dot login page so i'm going to paste that in and then we'll pass in the name and we'll just name this login and if you have questions i go ahead and ask i don't know how i can how much i'll be able to get to during a coding stream here so we'll see but let's go ahead and ask away and i'll try to get to whatever i can along with keeping the stream active okay so if i go to forward slash login now there we go we have our first template so what i'm going to do is actually take the login form from bootstrap so let's go to bootstrap and i don't want to build this out and style it during the stream so we'll do some custom styling but for now we'll just take what we what bootstrap gives us and then let's just do form and we're going to take a login form so we'll just take this and we'll have to modify this a little bit so here's the code we'll copy all of that copy to clipboard and let's go to our login register template so i'll paste that in right here and i also need to add bootstrap into my code here so let's just go to bootstrap i need to add in the cdn link so we can actually get the styling so let's just take the css and i won't even bother with the javascript i don't think we need that the form does not require that and we'll just save that so let's see what we have here okay so if i refresh that there we go we have a pretty ugly form i want to go ahead and style this a little bit so let's go ahead and let's see we'll go into the template and i'm going to add in my styling directly inside here so i'm not going to add an instru add in an external link so that's out of the scope of this tutorial so let's just go ahead and add some styling here and let's see what can we do here so let me minimize this actually okay so i don't want to add in this message right here we will never share your email to anyone i want to leave that out i'll leave the four i can leave that right there but i'm going to change this to username so django by default is going to be using the username we'll change it to that and then i also need to give it a name so i noticed that bootstrap by default doesn't give us a name for that form so this needs to be username because that's how we're going to get it in the back end and let's go into the password and we'll just set the name and this is going to be password okay let's see so we have our form still we took that out i'll take out check me out i don't need that in there so let's see i can completely take this check out all right and let's go ahead and add a wrapper around this entire body here so we'll just go ahead and create a div and we'll just create a container here so i want to center this give that the clasp so we have bootstrap so i can just add in a container that should center it let's just try to move this in a little bit try to move that to the right okay so that added some padding there the form looks a little bit better and i'll just do a little bit more styling here so let's see i can add in a wrapper around it so just do another div here and we'll just call this login wrapper or something like that so it's just going to be for the page so i'll just do that with a class let's just do login dash dash wrapper okay so let's see we'll just we'll just take login wrapper here and what i'm going to do is first display as flex and i'm going to set i'm gonna try i'm gonna try to center it here so we'll just do a line items we'll do center and i also need to make this or give it a viewport height so let's let's just do 80 um oh we'll do height and then 80v per height 80 vh go ahead and see what that looks like go full screen okay so that's a little bit more standard i also want it centered right here so let's try that let's give our form a class actually and i want to give the form a width and i also want to center that so we'll just do justify content center okay we'll just add in some styling for our form and we'll just do a width of 600 won't make it responsive i might add that towards the end of the stream but we'll just set that to 600 pixels so let's see what we have okay so we have our login form doesn't look great but it's there let's just say let's just add in some heading here log in and then we'll just say some kind of like sub headline or something so let's just do h4 and then we'll just say log in to view photos share with your friends okay oh what happened there i just realized i probably put that outside of the form so that needs to go in the form because we're displaying that as flex all right so not much django stuff here just yet but here we go there's our login form and that looks decent with a little bit of bootstrap styling so now we want to make this functional so what i want to do is go ahead and make sure that when a user fills out this form they can actually log in so let's see i did write a little bit of notes down here before this stream here so yeah we want to start logging in so what i want to do actually is go to the home page and let's see if a user is logged in what happened here oh i'm just really zoomed in that's kind of the issue here so let me zoom out a little bit there we go that looks better so if a user is logged in we want to see a custom message so let's go back into our gallery and i'm going to put this just above this column right here so i'm going to put it right here so let's go back here that's going to be in categories we have a card and let's just put that above the card in the column and we'll just uh write a condition so if the user is authenticated then we'll show it so we'll just say if request dot user dot is underscore authenticated then let's go ahead and say hello and then the username select it put an end if there okay and then let's just add that in text here so we want to make that small we'll just say hello and then we can just take the user we can just do request dot users so request user so we only want to show it if a user is logged in so let's go ahead and refresh that we don't see it oh we do see it right now so if i go into the admin panel and log out as this user so if we log out now that message shouldn't be there okay so it's gone all right so let's go back into our view now and i just realized that we need to first send some post data so let's just do this we need to add in a csrf token let's just do csrf underscore token so that needs to be sent with every form and we want to send this as a post method so just do method is equal to host okay so when we send this data let's go ahead and send it to the backend so let me refresh the page itself i guess we're gonna have to go to that page anyway so i'm gonna close out that we'll close out the github repo and let's go into the view so in this view what do we wanna do here at this point we're just rendering our template we don't need to use a model form that is one option django does give us a login form i believe it was called authentication form i don't remember the actual name of that but it does give that to us we just made that manually because it's just two form fields so let's go ahead and start writing this out so we'll just check for the post method so we'll just say if request dot method is equal to post then let's go ahead and start taking our username and our password so we'll just do username that's gonna be equal to request dot post so request.post like that and then we'll just take the username so remember we named this field in the form username so that's how we call that and then we also want our password so let's just go ahead and get the password and that's going to request our password and that's pretty much it so we get that data now we do need to make some imports and i see some comments let's see i don't see any some are in a different language okay so i'll get i thought they were about the project so let's just focus on that for now that i might go into a few later so okay so the first thing we want to do is we want to authenticate a user so we want to know that this user is in the database we want to check that first so we want to take this username and password so for this what we're going to do is we're going to import a function and this is going to be called authenticate so we're just gonna do from uh django dot contrib uh auth and this is gonna be django.contrib let's import uh authenticate okay so this function is gonna be the first thing that we're gonna run when we send this data we're first gonna check the user so why does this have underlines django.contrib dot auth that looks correct so let's just go with it so we're gonna set the user and we're going to use this authenticate function so what we need to do in here is we need to pass in the request so the original request and we need to pass in the username so username that's going to be equal to the username that we just got right here and we need to pass in the password okay so we have the password now and this user is first validated so if the user is authenticated this is going to return a user object if we have one if not then it's just going to stop and we can write in our errors later but we're going to start by creating another condition and we're going to say if user is not none so if there is a user we authenticated this user the username and password worked then let's go ahead and log this user in and there's another function that comes from this import and that's going to be login so from django.contrib.off there is our login function and this is why we didn't name the login view just login because it'll conflict there so we called it login page so i guess i could have called that login user but let's just go with it so let's just do login now so we found the user and we need to pass in the request again and we'll just throw in the user that we got this means the user is now logged in so this is going to create that session it's going to put that into our cookies the user is now officially logged in we want to do a little bit more than that we want to redirect our user so if the user is logged in let's go ahead and take this redirect function so that was already imported from before let's just go ahead and redirect this user so just to redirect and that url let's go ahead and check that that url was called gallery so we'll use the dynamic url name in here and we'll just redirect the user to gallery okay so let's go ahead and test that so we check if it's a post method we get the information from the form we get the user object we check if that username and password was correct and if there is that user then we check if we got that user we log that user in and then redirect him into the gallery so let's go ahead and try that okay so right now i'm just going to go into the login page manually i don't have a link there let's try this and i just realized i left that as an email field in the template so the type is going to be text we have our post request everything i think looks good i guess we'll find out the issues as we go so we have our user we have our password that already autofills and that didn't work let's see what happened so let's just open up the terminal let's give ourselves some space here okay so what's going on here we are sending the request to login and that is not working so let's try to debug this live so request.method that's post we get the username password let's just try printing out this user object so let's just do print let's see if we get the user okay let's try that let's send that request we get the user so the user is where we got the user uh looks like the login is not working or oh we have to return redirect let's see yeah i see that in the comments section thank you so this is what i was hoping for this is really fun actually so return redirect that should work now okay let's try that boom we are logged in so let's go to inspect here and let's go into our cookies application cookies there we go we have our session that's the cookie value right there and if i try to log out actually let's write that in right now let's just go ahead and delete the session let's go back into our login page if we go ahead and hit log in there we go when that login function runs so this is what's actually causing it it's a login function this function right here is what creates that and the user is logged in so before we get that or get to that let's actually see so we have our welcome message so there we go that looks good too all right so we have the welcome message let's go ahead and add in a login required decorator so we want to restrict users that are not logged in so let's say this application is now available only to users that are logged in so before we add in that login functionality let's go ahead and add this decorator okay so that is going to be imported from here and let's see that's going to be from django everyone can see the screen all right here seems like it's good no complaints yet so from uh django dot let's see and i do have this a note so i don't remember everything perfectly so from django contrib auth decorator so from django.contrib uh auth.decorators okay so we're using function based view so we're just going to add in decorators we could use class based views in this case you would add in mix-ins or you could write your own middleware for this there's different ways of doing this but we are just going to restrict a user using the decorators so the login required decorator this is a python concept so you should be familiar with decorators if not look them up they're basically a way of wrapping a function which in this case it's a view and it adds in extra requirements or extra functionality to a function so what we'll do is we'll actually go ahead and go into every single view that we want to restrict so we don't want a user going into the gallery page so let's just do login required and we want to first require this view require a user to be logged in and if they are not we want to add in a login url so this means where are they going to be redirected to if they're not locked in so we want to send them to the login page so they start logging in so we'll add that to the view photo view and then the add photo view so we obviously don't want users adding photos if they are not logged in so let's go ahead and try this out user is in here let's go ahead and inspect element we'll delete that session let's delete it and let's try this okay there we go we're redirected and we're back in the login page if i try to go to that gallery it just redirects us once we log in now we're logged in and we're good okay so let's add the log out view so the log out view this is going to be very simple we're going to go into our views we'll close out the urls here close out the gallery we want to add this in from django contrib and auth right here so this is where we're importing it from so they're all from the same area we're going to add in the log out function and we'll add that underneath the login page this is actually going to bother me so let's just change this to login user and i need to change the url here so i keep some consistency so user just like that okay so create the function just underneath here login user and we can't or log out user that's in request here and we'll we'll return we're just going to redirect the user so return like that and then we'll just do redirect when a user is logged out we want to log them out into back to the login page so we want them sent back you could have some kind of confirmation page that says you're logged out but we're just going to send them back to the login page and prompt them to log back in now for this it's this is very easy we're just going to use a logout function and all we do is pass in the request so this is going to go ahead and delete that session and we're done so let's go into our urls here let's copy this this will be that log out user view here and we'll just set that to log out change the name here all right so log in and log out users so all we're going to do here is we'll go into the template let's go into gallery and we can only log out i'll set it to where we can only log out from this page so i'll just add this underneath that add photo button so just copy that entire button and we'll just do log out here and then this will send us to the log out page okay so let's go ahead and try that refresh it log out we're redirected login we are back in so there we go we have login and log out functionality uh pretty simple there's different ways of doing this but that's what the functionality does for us at this point okay so next what i wanted to do is create that registration so the registration i'm actually going to use a built-in form here and then we are going to customize that form so i will spend a little bit of time styling that form i didn't really want to go into detail on that but i will style it just because i want to make sure it looks somewhat good so let's go back into our views and we'll close out the url here and let's create the log in view so i'll add that just underneath log out so let's just go ahead and write this from scratch we'll just do log in or register user i'm okay stats so capital u someone says will there be a vaude i'm not sure what that means let's clarify that okay so return render and what we're going to do is we will actually render the same page we're just going to write a condition here so there's different ways of doing this if we use javascript that would even be easier or it would be better because all we have to do is toggle that just toggle the form and then that changes what form gets output but for now we're going to hack this a little bit so we'll just do login underscore register html and we want to pass in the context dictionary so we don't have one just yet i'll create that okay so we have an empty context dictionary and i'm going to go into the urls here let's go ahead and add that underneath here we'll just do register then this is going to be register user so the view we just created and give me some feedback if you guys think this stream is is decent obviously i know i'm doing this for the first time so i'm probably not doing too well but if this is actually useful to you if you're actually picking anything up i know that live streams can be a little bit different and then as far as actually learning because you're not really coding along but yeah give me feedback there so what i'm going to do here so this is that hack of telling us which form to actually render so first let's throw in the form and what we're going to do is throw in the user creation form and then we'll add in that hack so for this we're just going to do from bingo this is going to be from contrib.auth.form so from django.contrib off forms and we're just going to import user creation form so there's different ways i'm doing this i personally like the manual way of doing this because i feel like i have more control over what happens but it does very well where it does the job and it makes things simple so for beginners i probably just teach them to use this thanks for the feedback i appreciate that actually i see the comments here okay so let's go ahead and render that form see we'll go into our register view and we'll just do form and we're just going to use a user creation form we'll pass this in throw that into the context dictionary and now what i'm going to do is go back into the template and let's go ahead and actually adjust this here so the first thing i want to do is ask if a user needs an account so let's just add in some text here and we'll just say don't have an account okay so if they don't have an account we'll just add in a link right here and we will prompt them to register so just to register and the link here is going to go into the register page so the url here so let's go ahead and take a look at what we have here so if i refresh that don't have an account register login register doesn't exist let's see what did i do here photosloginregister.html something's not working right here oh photos okay so that's not photo okay so if we go to register you notice that the page changes or the the link right here the url changes but the actual form doesn't so register okay so this is what we're going to fix up right now so first of all i want to add in some spacing that looks pretty ugly there so let's give ourselves some space fix that and that looks a little bit better so here is going to be the little hack that we add here or the workaround i'm just going to create a variable called page and we're just going to say register and we will take this variable right here pass that into the context dictionary and i guess i don't need to add it to the login page but we might as well and this will just be login so we will throw that in here we won't create a full context dictionary we'll just throw this in right here okay okay so now when we go into the page or now when we go to each view we have a variable called page and it's going to be either login or register so now if we go in here what i'm going to do is write a condition and we're just going to put this above the form and we're just going to say if page is equal to login then we'll render this form and if it's not we will render an entirely different form so just do end if here and we'll write our condition so else is going to be the register page so if it's not the login page that means we are on the registration page so let's go ahead and actually build out a new form let's do form okay give me one second so we have a form we'll set the method method is going to be post we'll add in a csrf token csrf underscore token and i'll go into q a towards the end so if you have questions about what's going on here i'll hold off for a little bit so let's pass in the form remember we went in our views and we have this user creation form so that's going to give us a bunch of fields there and i am going to take this final submit button and we'll just throw that right here okay so instead of don't have an account we'll just say have an account with a question mark or wouldn't say already so already have an account already have an account then if they do we'll redirect them to the login page okay so let's go ahead and test this all right so we have our form let's go ahead and add in some text at the top here so let's take this h1 tag add that to this formula we'll just say register okay so the form is ugly we're going to style this but because we are going to be using a django model form technically that custom creation form is like a built-in model form it looks pretty ugly right now and we can't style it like we normally would by just adding some classes in the html so we actually have to customize the model form itself so now we have our register form and what i want to do here is first make sure it works once we can get you know what actually let's style this first because i want to show you that so the default user creation form i'm not a big fan of what comes out right here i don't like all the fields and i can't customize it unless i override it so what i'm going to do actually is go into into my app and i'm going to go into my app so that's called photos and i'm going to create a new forms.py file and this is going to be where i store some model forms so for those of you that don't know what model forms are they're a way of creating a form a form based around a model so it's going to take any object you have and then just going to create fields based on what the model says so let's just see or let's just start with it so we'll just do from django dot forms let's import model form we'll start there and we also need to import the user so we'll just do from django dot contrib auth and then we'll just import actually it's going to be auth.models just import user creation form so we're going to start where we're going to import the user okay so i'm going to copy this right here so from django.contrib.forms or auth forms like that we will pass in this user creation form that we imported here so we don't need this in our views anymore and if i save that that's probably going to break something for now but we don't need to worry about that so we're going to import the user creation form now what i want to do is override that form so we're going to create a class here this is going to be custom user creation form so i just pasted that in and i'm going to inherit from because this is a class we can inherit from that object so we're going to inherit from user creation form and then we're going to customize all of our fields so i still need to specify the meta here so we'll just do class meta and then that's going to be set to the model of the user and then the fields i want to limit this so let's just do fields in the field here i just want the username when they register i don't only care for getting their name right now and we just want the passwords so we want password the password one that's what the form calls it and we also want that confirmed password and that's just gonna be simply password too okay so we have our form and at this point it's not gonna be anything special i think it's going to look actually exactly the same user creation form is not defined okay so i didn't realize it didn't import that so now that we have our custom user creation form i'm going to go ahead and go into my views and we're just going to do from forms import and we're going to import that new custom user creation form so i'm going to go into register and we're just going to take that new form and paste that in so now we're working with an entirely new form it looks exactly the same because we just inherited from the original form so there's nothing new here and i'm going to show you why i did why i did what i did because in that user creation form you just kind of get the default fields but what if i wanted to add in an email field by default the user creation form doesn't output that for you so this is why we inherit it and we just extend it but why i really wanted to do this is for styling so if you notice in here if we go into the template the default or the bootstrap forms let's say we were working with some kind of library or we were working with bootstrap in order to style the form fields like the register page so if we go to login or like the login page we have to add in certain classes here and ids in this case we just have to add the class form label so i want to add that but there's no way of just adding that because we're throwing in the form like that so we need to add it to the class so let's go ahead and customize this so what i'm going to do is first override the init function so init here underscore underscore and then we just need to take in self then star args and quarks so args so arguments and keyword arguments okay so we're going to go ahead and overwrite that and then we need to add in super [Music] and we are going to go ahead and start with the user creation form and here we need to pass in self again and then we're just going to do underscore init underscore and we're going to copy and paste this again so i'm not writing this out it's a little bit difficult while streaming okay so we add in that super function and everything looks correct let's see yeah i just want to make sure that's right so underneath super so we're overriding that init method we're just going to go into self dot fields and then we're just going to go ahead and start with the username so username and what we're going to do is we're just going to go ahead and add in some widgets here or customize the widgets and there's a few ways of doing this uh but in here in this case i'm just going to do it with that init method so we're just going to go ahead and go to widget dot attribute so att rs dot update and let's select the attribute that we want to update so in this case this is going to be a dictionary and we're just going to say we want to update the class and i want to give this class i give this a class a form dash control sorry about that so control okay so the username field will now have this class which means that it can be styled so if everything went correctly that should style this form so i'm gonna go to register let's see looks like there's an error let's go ahead and check this out debug it live okay so the init method oh i forgot to add in something here so let's see inside of init i forgot to add a comma okay so that should do it now one more time all right what's going on here so we have the init method self args quark super self.fields let's see if anyone in the comments section okay tuple and dictionary something's not working here so it's inside the update function in the update function no it's not the update function here let me try something real quick let me just try to override that init method or the super method it wasn't a spacing issue i don't think okay so there we go all right so you notice how this field right here is styled password is not and password confirmation is not so what we did here is we went into that form we found a field here and we just updated an attribute and gave it the class of uh give it the class of form control which in bootstrap styles that so all i have to do here just go ahead and repeat this again there's different different ways of doing this but i just need to go into password one and password two and they're all gonna get that same class right there so if i refresh this there we go that form looks a lot better now i don't care for this i personally like to write this myself so in the future i would just customize this but i really don't like what's going on here so there's a different way of rendering out forms not everyone knows about this i've noticed anytime i show it people are kind of surprised that you can do this but what you could do is you can actually loop through your form so we can do four field in forms and i'm gonna write the n4 here so what we can do here is i'm going to go ahead and go into one of these fields into the bootstrap field because i want all the styling there let's just grab this one right here we'll paste that in so as we're looping over those form fields we have the label here and i'll just leave this right here that's not a big deal i'm just going to do form or field so as the field as we're iterating through the fields we can take that field and then just add in that label so we added that label here then for the input i'm just going to completely remove this because we already have that class we added that the form control class inside of that class from forms.py and we'll just do field here so just to reiterate that we're just going into the form we're going into fields so for field in the form let's go ahead and iterate through that let's output the field and let's output the field label so if i save this let's see what did i do wrong here so for field in forms or form okay there's not multiple forms right there we go so let's say i want to add in some placeholder stuff here into into the form so what i could do is just go ahead and go in here say placeholder run area okay so right here the placeholder and this is going to be let's just say enter username we'll just do dot dot let's go ahead and see what that looks like boom we have some placeholder text and in here let's just go ahead and do let's copy this placeholder and we'll add that to these other two so i'm so zoomed in that it's kind of hard for me to see the screen let me try to minimize that okay so we'll add that right here and then we'll just do enter password then paste that in right here i know we're going a little bit longer on the styling but we'll just do confirm password i really wanted to go into this part so confirm right so there we go we have our two passwords all the placeholder text and voila there we go okay so let's go ahead and uh let's go ahead and actually um make this work so nothing at this point is happening so we want to go into that register function and we want to make something happen so we're sending post data we have a csrf token let's go ahead and go into this page so csrf token is there it's a post method so now we need to go back into the register user view so right now we're just outputting the form and we're passing in the value of the page so let's go ahead and take that post method so we'll just if request a method this is equal to post let's go ahead and first get our form take this form right here the user the custom user creation form and we just want to pass in that post data so this is pretty standard this is working with django model forms uh this is what you do anytime you're working with crud here so we have the form we'll just say if form dot is valid so we want to check that everything was clean everything's good let's go ahead and create that user so before we create that user because i want to log this user in right away i need to actually get that user object so i could just say form dot save like this then i'm done but i want to log this user in right away some websites would have you go to the login page i figured if they registered they know their information they're validated so we should be good there so let's just do this let's just do user and then we'll just do form dot save and we can not forms i've done that twice already so we can just do form.save and then we'll just do commit and that's gonna be equal to false so basically it's not gonna complete the process here so now we have the user object if you check this out this is a user just like querying the user from a database so we have the user we will save the user so we'll go ahead and confirm that but we're not redirecting or doing anything yet we have the user object so we just submitted the form we pass in the form data we are storing that user we save the user so the user at this point is created now here we're just going to go ahead and use that same authenticate function that we used in login in fact let me just take this right here so this is that authenticate function for those of you that are late here we imported this this just authenticates a user so we'll go ahead and do that and i just realized i don't think i need to do this right now i can i'll probably test it after towards the end of the stream but let's see yeah because i have the user i'm not sure if we need that it's kind of interesting learn something new just for now so let's see now we're going to check if this user actually exists so if user is not none that's funny i realize this might be repetitive but we'll fix it later so we'll just do if the user is not none let's go ahead and redirect or log in the user so passing request just like we did earlier so let's go into this login section we're going into login we're taking that login function also imported right here and we are logging that user in so that's going to create a session so we create the user then we log the user in so let's see the theme there's no theme we're just using bootstrap yeah i see someone saying just use login i think we're that's probably what i'm going to try here so once they're good let's just do return and we'll just do redirect and we're going to redirect the user into the gallery page okay so eric i'm going to use your name because you commented recently i'm going to create an account for you so we create the user and we log that user in so let's go ahead and see if everything is working let's go ahead and refresh that let's just use eric here enter a password we'll just say welcome one or i don't know why i'm telling you the password but let's see something simple that's probably not a safe enough password so let's just go ahead and do something else okay username is not defined let's see what's going on here username is not defined oh i guess i didn't pull out the user from okay so what i can do here that's right so user.username that should do it okay so i was taking a user do i have password the password uh what i'm gonna have to do is go into request uh post and we're gonna have to pull out that password so we'll just do password and then we'll take password one because that's what that form does for us remember there's password one and password two which means password two is a confirmation okay uh password is not hashed it doesn't need to be hash because the form the user creation form is taking care of it for us so if we were gonna if we were gonna manually create the user yes we need to hash the password but user creation form already does that for us so eric let's try this one more time and it might have created a user for us already so let's just do eric one let me confirm this i think i may have actually okay let's try that one more time all right there we go hello eric one we won't save the information now eric is logged in so what we just did is we registered eric and we logged him in everything looks like it's good someone i keep saying something about a loop what we're doing is we're looping through the form field so we could just output the form but because i wanted to customize uh the form fields and do something else with them i didn't want just all of that form data i just looped through the fields that's what we did there i'm assuming that's what you're asking about okay so we'll log out let's go ahead and log in as eric won and there we go eric is logged in we'll log out now we'll log in as dennis so there's a few things that i'm still going to do here so now we're logged in as dennis all right we're good the page is restricted uh everything is being taken care of but at this point all we have is an application that anybody the password will be stored really let's see let's check that i didn't know that let me log in uh as a super admin okay what i'm gonna do is move this off the screen just because even though it's a dummy password i don't want anybody seen passwords that i test with no so the password is not raw it's it was hashed so the user creation form takes care of that for us so no it doesn't do that yeah that's kind of what i figured okay so all we have all we have is an application that users can add information to but what if we wanted to change this to where this is an application that users can store their own photos in something that maybe they can share with other people so what we're going to do is start rendering out our own pictures so right now this is the public data anybody can add a photo so let's go ahead and change this so what we're going to need to do here is we'll go into our create view first actually let's go into the the gallery view okay so gallery what we have here let's actually pull up the models all we have is a category and a photo model so we have two models and basically it's a parent child the relationship between a category and a photo which thinking about it right now is probably not the best way to to actually structure this so what we'll need to do is first create a many to one relationship with a category to a user so let's just go ahead and do this we'll just do user and i'm just going to copy and paste the import from forums.py so we have a user we'll go into the model and let's just do models dot foreign key that's going to be connected to that user object and usually i would connect this to like a profile object i tend to want to extend that and create a one-to-one relationship between a profile and a user but we'll just uh use that user for now because that's how the application was set up so we'll just do on delete it's going to be models dot let's just do set null so if a user is deleted i don't want to delete the category and let's just set null to true because right now we already have categories and that wouldn't let us migrate without having to add a default and we'll also set blank to true okay so we just added a user to a category now i know that could go to photo but because i did things this way it's going to be to category so let's go ahead and run that migration there's a terminal so python manage py make migration uh i don't like using widget tweaks personally um because i don't typically use the form as the way i just did i tend to uh i tend to want to use something like react or anything any kind of front-end framework on the front end so i don't care for widget tweaks but if that works for you do it there's also crispy forms i see uh joe coding phases in the chat here joe i'm doing my first codeland so i think it's doing decent i kind of started off rough but yeah so python managed that py so we made the apply the migrations and now we actually want to run them so migration or migrate let me off joe okay so now we have it added the photos are officially the category officially has a parent child relationship to a user so now that we have that let's go into this category into this gallery view here so what i'm going to do here we do have some search functionality here so i have to adjust a few things the first thing is i'm going to go in here so if we don't have a filter applied let's just change this so we don't want to get everything i still want to apply a filter let's just do filter and then we'll set the user value because we just created that in a category so let's see we added that not to the photo but to the category so that's the photo object so we'll just do category underscore under store so we'll just query upwards and let us do category user and we'll set that to user now we need to get that user so what we're going to do is get that logged in user so we'll just do request our user is going to be set to the request dot user so this will get us the current user that has a session in the cookies so we're taking that user and we're filtering the photo so now only logged in user can see their own photos so now we have no photos because this user hasn't created any photos now if i do filter i can still see photos why is that in this case i have it to where we have a filter being run right here and we also just need to add this uh user filter to that and then our categories let's just see so for the categories i'm just going to apply user and that's going to be the user so this is going to be the categories that get output on this right side here so these ones okay so users are not defined what did i do here let's misspell that users okay there we go okay we have that needs to be filter someone's saying don't delete the video yeah i might leave it up we'll see if it's i'll try to rewatch that intro it feels horrible if anything what i'll do is i will put it to private or just unlist it and then go ahead and put that up on my website or something okay so right now we don't see any photos we don't see categories because this user doesn't have any photos or categories so if i go into the admin panel let's just manually apply one right here so we'll go into categories and let's just say meet the dennis so i'll go ahead and apply it to the user that's logged in and i'm logged in as dennis right now we should see oh i have a filter on so we'll just do all and there we go so i can see these right here but i can't see food and travel because those aren't connected to a specific user so right now on ad when we add a photo we want to be able to add a photo with this user in mind when the user is locked in so i'm just going to go into and i know this is a little bit out of scope of the video because the video was meant to teach registration and authentication we already did that but we're just applying this information to this user so we're just trying to extend it a little bit and i probably will upload the github source code too for this or i'll just make another repo for it okay so now in the add photo function so we query our categories and in this case we're querying all the categories i only want to get the categories applied to a user i either want to get my own categories or i want to be able to create my own category so i either want to get my categories or create a new one so let's just apply a filter here so in this case instead of querying it this way let's just do this let's see user the user is going to be taken from the request objects request dot user and then we can just do user dot category underscore set dot all so we're just getting all the users categories it's just a different way to do this and that's going to be categories like that okay so now if i go ahead and check this out so i see i see travel food soul meat and dennis and nature so if i refresh this i should only see one category that is under slamitha dennis why is that that's because in categories we only have this one applied these other categories aren't by this user in this case dennis so we just updated the categories now when a user submits a category what i need to do is i guess when a user creates a category because we have an option not to select one but we can create one i want to make sure that this category is applied to this user so we have category.objects.get or create let's just go ahead and do user and that's going to be equal to user adding a comma this user is taken from this right here and let's see category what else what else am i doing here so i also want to query the user here yeah so i think i want to add the user to this section i don't know actually let's try this okay we're logged in as dennis let's say i want to create a new category let's just uh what's a category that we can use um let's just say coding so coding that's going to be a new category we're gonna choose an image and i don't really have any selected let's just do this picture right here from a stream that i did earlier okay actually since uh joe i think he's still in the audience i have an old thumbnail from mine and joe's stream we'll submit that for the description we'll just say dennis and joe okay we submit that now we have solameth and dennis and we have coding so that's a new category we just created if i go to all there we go so what if i log out and log in as eric so let's do eric and i believe we did eric one for his username so eric won password has already auto filled eric has no categories he has no photos uploaded we'll add in a photo let's just do dot for the description we will create a new category let's just say personal and we will upload a picture let's just uh grab this picture right here so i like my desktop we'll use that my desktop screen saver so there we go we have an application that only users can or that only logged in users can use and only logged in users can view their own photos so i'm going to log out log back in as dennis there we have it so we handled login we had a login functionality registration and logout functionality so that's it for the video i'm going to go ahead and go into the chat and we'll just spend some time here this was my first live stream codelawn tutorial so that was kind of fun it got a little bit more comfortable towards the end let me just move this around a little bit change my screen size actually let's see okay so did you guys enjoy the codelawn i see a bunch of comments i'm gonna try to go through these uh i i'm not sure if you actually pick up on anything or if you're just watching me code uh if i post it after i know that it might be a longer tutorial i'll probably will add in another tutorial like that on a different application probably and i do have one already like that in my django crm course but the original tutorial for that video is linked up the github repo if you wanted to follow along and do exactly what i did clone it add these features let's see how long have you been coding for this is year number three i think i started at the end of 2017 yeah so it's like three and a half years can django be used to develop tears i'm not sure what end tiers are uh remember me login i'm not gonna do that live i'll try to figure out how to add that i might have to look into that thank you i appreciate that so looks like some people are learning really appreciate that feedback uh there's i have videos on how to host it it's a simple application you can follow that tutorial then i also have tutorials on how to host it so just apply those same tutorials probably won't uh probably won't push this one live code with tommy's here yeah i'm finally settled in in florida so i have time to stream i've been doing a lot of talking streams with people a few by myself and i'm trying some codelawns i'm trying to make my tutorials better so that's like the main purpose of this is i'm doing tutorials and the problem is i don't talk and code until i'm filming a tutorial so i'm like i'm not i'm too fresh when i start coding so i'm trying to get more into that teacher classroom environment where i can speak comfortably be okay with mess-ups and just code and not have to have so many misspells because i i do misspell a lot i type slower when i'm recording or streaming or something like that so i'm just trying to break myself into it and just get more comfortable with it so uh with that being said thank you vaults if i'm pronouncing that right that being said uh that's going to be it for this stream i appreciate it thank you anatoly yeah i think that's it anatoly appreciate everyone jumping in to say hello a different time of streaming too so yeah i didn't i didn't know what kind of audience i would have at 8 20 p.m eastern on a wednesday so that's gonna be it i appreciate everyone for joining hope you guys learned something

Channel: Dennis Ivy

Views: 13,829

Keywords:

Id: kDAnnEhb4_I

Length: 65min 22sec (3922 seconds)

Published: Wed Jun 02 2021