CRUD mastery with Django | Build a CRM application | Django projects | #1

foreign [Music] and welcome to my next video tutorial which will be focused on creating a crud application in Django now for those of you that are wondering what does crowd stand for stand for create read update and delete so when you are getting started with web development and you want to go ahead and create an application especially in the back end typically one of the first things that you'll learn is how to go ahead and create a crud application so let's get started so as you can see here I have this very simple looking app here so what we can do is register or create our account and once we've done that we can log in so let's create an account here so we're going to create a simple account and I'm going to call this manager one enter in a password confirm that password and then create the user account now if a user already has an account they can simply log in so let's say create account okay there we go we also have a nice flash message here and to do this we make cues of Django messages and we also add in a little bit of JavaScript just to time out that notification and as you can see here we also have icons here so you saw earlier the check mark and hereby login we have a key icon so we're also going to make use of font awesome icons to make our application look a bit nicer so we can go ahead now and log in with that account that we created okay great and then we redirected to the dashboard so we have our dashboard here and we can sign out or log out now we can see here we have a nice message saying hi manager one so it's going to say hi to which every user is logged in a nice Emoji here of the wave we can create a new record and each record that we create will appear in this table here and let's go ahead and test this out so create a new record I'm just going to say John Smith's Smiths mail.com add in a phone number so let me scroll down so let's just add in some data okay I'm going to say to Street L Pine Drive let's say Cape Town Western Cape so of course you can change this to your own Fields as you'd like this is just a demonstration we can either return back to the dashboard or we can go ahead and proceed with creating the record there we go so a nice nice flash message again so you just added a new record and here we can see it according to the ID the name email phone all the various attributes you would expect from your model in Django and if you want to read a bit more and have a bit more insight we can just click here on this nice icon here to view it so we can view this particular record we can see the ID email a little bit more information we can either return back to the dashboard where we can update the record so here I'm just going to switch this to Marcus so let's say we got the first name wrong scroll down update the record or return back update there we go we can see we've updated that record accordingly and the dashboard is going to house all of the records that we want to manage now let's say we wanted to delete that record we can go back to view and here we have a nice icon here and a button for deleting that particular record so it's going to delete this record and there we go all done what we can also do then is go ahead and sign out and as you can see for each action that we are undertaking we have a nice flash message all right so that's it in terms of the demonstration so let's uh move on with the rest of the tutorial and let's get stuck in hi everyone so before we get started with the crowd application I just have a few announcements to make here very short so we now have Channel memberships on the channel so you're more than welcome to join so if you want to show Extra support you're more than welcome to join I will also add in a additional product here so if you do join you will be eligible for a 30 discount on my premium udemy courses so each month I'm going to host a 30 discount on one of my courses each month so for one course every month I'm going to host a 30 discount so this is one of the perks that you'll get if you join the channel so you're more than welcome to go ahead and join and see for yourself and see if it's of interest to you another thing I want to mention really quick is that I also have another YouTube channel called codings on them here so here the channel will be focused on web development and programming so here I'm going to have General topics here on web development Etc such as HTML CSS JavaScript get Json anything that pertains to web development you'll see here so if there's of interest to you you're more than welcome to subscribe for free here if that is something that you would be interested anyway thank you guys for the support as always and let's get started with creating our crud application in Django hi everyone so let's get started with our crowd application all right so what I'm going to do is just set up our Django project first of all now there's many ways you can do this so for those of you that are a bit more experienced feel free to go ahead and set it up in your own preferred manner so what I'm going to do is just right click on my desktop and I'm going to create a folder here and I'm just going to call it Dev so something very simple I always like to group my Django projects in a folder here so there's my folder in place now I'm going to open up my CMD so I'm just going to search for it and I'm going to type CMD like so and that would open up my command prompt so I can click and open that now if you are on Mac OS this will pretty much just be your terminal so you can just go ahead and search for your terminal on your Mac all right so let's go ahead and type CLS so let's clear this up okay and what I want to do now is head over to my Dev directory here so I'm going to say CD and we need to go to the desktop and we then we can say forward slash Dev so we're going into this directory right here clear that up so I always like to do type in CLS just to clear everything from clutter all right so the first thing that we want to do is we want to install a package and that package is virtual EnV now the virtual EnV package from poipi okay is going to allow us to create virtual environments now this will be one of the few cases where it will be acceptable to go ahead and install a package globally on your local machine now usually for good practice you don't want to install any packages globally on your system there may be one or two exceptions like here where it's okay but generally speaking you should always install your packages and dependencies within a virtual environment so what we can say is PIP install virtual EnV so we can install that package and this will grant us the ability to create virtual environments in Django okay as you can see I already have it installed if you already have it perfect if you don't you should have it now installed on your system globally perfect so we're still in the dev folder as you can see here so what we want to do now is we want to go ahead and create a virtual environment so now that we've installed the virtu the virtual EnV package we can go ahead and create a virtual environment with the following command we can say virtual EnV that's the command and now you need to call you need to specify a custom name for your virtual environment you can call it EnV you can call it myvenv you can call it anything you want here so I'm going to call it venv that's what I always call mine so virtual environment and you can press enter and that command here is going to create a virtual environment with the name in my case of venv get so that's the name of your virtual environment so it does sometimes take a moment sometimes it takes a minute or two other times it takes a few seconds and there we go all set and ready to go perfect so we have created a virtual environment perfect all right so we've got that all set and ready to go the next thing that we want to do is we want to activate our virtual Enlightenment now to activate it you need to reference it according to the name that you gave it so I called it venv so I'm going to say venv and then you're going to want to say backslash Scripts backslash activate and that will activate your virtual environment and you can see here in parentheses on the left here there's kind of an indentation here with our virtual environment active so if you see it here on the left next to your C drive here in parentheses here you can see that it is activated so no matter what happens now it will be in place now if you wanted to deactivate this you can just say v e n v and then you can say backslash scripts backslash activate all right now that is the command for the activating your virtual environment in the command prompt now if you aren't in the command prompt okay in your Visual Studio code you will just say deactivate but more than that soon enough okay so let's go ahead and activate it again so we're in our virtual environment now so whenever you install a package make sure you see this here don't install packages globally so now we want to say pip install Django so make sure you install Django and that you install it while you're in your virtual environment while it is active if it's not active that means they're going to accidentally install it globally which you don't want to do so we can see now that Django is being installed now Django comes with a bunch of other packages along with it such as TZ data SQL parts so these are sub packages you could say that come in with Django which is the main package of course so we can just wait for that to install so let's just wait for that all right perfect so we can see everything was installed and let's clear this up all right so the next thing I'm going to do is we want to type in PIP list now this is very useful a very useful command to see all of the packages within our virtual environment so we can see we have Django as getif setup tools SQL pars TZ data wheel and we have Pip now pitbulls of course already installed when we went ahead and created our virtual environment but we can see we have all the other packages now all the other packages here as gear if SQL parsed easy data wheel setup tools so a lot of these packages came along with Django as you as you can see it was combined together so a very useful command type in PIP list very useful to run this command globally and within your virtual environment to just double check if you install the correct packages uh you could say in a virtual environment anyway let's clear this up and now what we want to do is create our Django project so we can type Django Dash admin start project and then we want to give our project a name I'm just going to call it CRM so you can call it any name that you want so let's just go ahead and run that command great so we can see that our project was created perfect now to validate this we can always head over to visual studio code to check out the directory structure so what we can do now is close this command prompt for now and I want you to open up visual studio code so you should go ahead and make cues of your own text editor or IDE per se so I'm using visual studio code so I will include a link in the description below where you can go ahead and download it it's very simple to set up and download and what you want to do if it hasn't automatically open up the files for you here you can go ahead and click on file and you can say open folder and go to your desktop choose your Dev directory here and within that you should see your virtual environment here and also your Django project called CRM which is also going to list your settings.pify your what else dot Pi file wsgi.pi and your manage.pi file for running and issuing commands on Django itself so make sure you've got this all in place and set and ready to go now we're not going to use a CMD to issue commands anymore what we're instead going to do is we're going to go ahead and click here on toggle panel here and this is going to open up a panel right here in the bottom with the visual studio code terminal here on the left and we can just click on the Arrow here to remove the debug console just shift that to the left and we can see it's already in our virtual environment automatically we can type in CLS here to clear this up and we can see we've got automatically our virtual environment active as you can see now what we want to do next is we want to ensure that the python interpreter is set up according to this virtual environment now usually it is by default but in some cases you need to explicitly set it now this might seem a bit strange because sometimes it's not covered that often but what you want to do is you want to configure it now to do that you want to head over to your directory here Dev you want to click in your virtual environment folder and you want to copy this uh this pass here to your virtual environment so you can copy that so you can say Ctrl C then you want to head over to visual studio code and you want to type in control shift and P so control shift p you want to select The Interpreter and you want to say enter interpreter pass now it may already be configured for you automatically but in the event it is not you want to click on enter interpreter pass and then you want to enter the path to interpreter then you want to paste in this uh root this address here that you had for your virtual environment paste that in and press enter now the point of this is to ensure that no matter what type of packages are installed okay in our application that we don't get the pylons resolved error so usually with the pylons resolved error it's kind of a visual studio code sort of a bug or a glitch you could say that sometimes happens you just need to ensure that you route your python interpreter correctly to your virtual environment where that package is so sometimes this happens it only happens with a few packages I think only about I've only seen about three or four packages that have this pylons resolved error it's just something important to note later on so you don't have this issue so just keep that in mind anyway so we can now see that we are in our virtual environment we're in the dev directory here but we want to head over to CRM so we can run our python manage.pi file so we can actually get our server running so to do that we need to head into CRM and we can do that by changing the directory so we can say CD and CRM that's the name CRM here and now we are on CRM now if we close if we just open this up we can see we have manage.pi and we can run that now because we are in the correct directory so we can say python manage dot Pi run server so you want to run your server you're going to just give it a moment and there we go our server is running we do have migrations to make but don't worry we will get to that and we can open up our application at the following URL so I already have it put in here so all you can do is just go ahead and copy that and add it to your URL in Google Chrome or whichever web browser you're using and just press enter and there we go we can see our Django project is now installed and set and ready to go so well done if you got to this point it's great to see all right so now that we've got our project up and running the next thing we want to do is we want to create a Django app and then we want to make our migrations create a super user and basically just get up to scratch was the basics of Django before we venture uh into the crowd application part so what we can do now is head over to our terminal here and we can press Ctrl C to stop our terminal that's the command you can use so Ctrl C we can also type CLS to clear this up nope there we go all right so what we want to do now is we want to go ahead and create a Django app now before we do that I just want to mention the first time you run your Django application it's going to generate a sqlite database file here so by default Django uses SQL Lite now this is perfect for local development and testing perfectly fine however if you are moving to a more production based environment I'd recommend you use something like postgres or MySQL I'd recommend postgres because it's much easier and it's got a lot of better functionalities in my opinion that in comparison to mySQL but the choice is yours anyway so we want to create a Django app so now we can just say Django Dash admin start app and give your app a name here so I'm going to say web app so that's going to be the name of my app here so you can give it any name that you want there we go so we can now see in our project directory here we have web app so this is our app folder here where we're going to send all of our URLs where we're going to create our models we're going to create our templates make our migrations Etc all pertaining to this app now in order to actually use this app we need to configure it in our settings.pi file so you want to head over to CRM here and you want to head over to your settings.pi file we can remove these comments here they sometimes um you know make it a bit difficult to read so you want to scroll down to installed apps here and you just want to add in the name of the app that you created so whichever name you assigned here and that you can see here you just want to add two installed apps so you want to add this in so I'm going to call it web app and be sure to remember the comment that's something I always forget to add in so make sure you add that in of course just make sure that you've cleared this up by typing CLS and then you want to just run python manage dot Pi run server now the reason that we're doing this is just to make sure we don't have any configuration error in terms of our app so we can see it's running fine so let's refresh and we're good to get great it's always good to do some testing and well debugging just to make sure everything is working fine let's clean that up all right so just make sure you stop your server all right now the next thing that we want to do is we want to run our migrations so to do that you just want to say python manage dot Pi migrate so go ahead and do that so we're going to migrate all of the default apps that come with Django so we can see we have admin ORS content type sessions messages and static files you can also see them here so essentially what's happening is it's migrating all of the default database files of these installed apps here and you can see they all here particularly so all of the default DB files are being migrated so these are all set and into place and the next thing we can do now is create a super user so we can access Django admin so what you can do now is just go ahead and say python manage dot pi create super user and you want to then go ahead and give your super user a name so it may automatically come up with a pre-configured one for you depending on your system on your user so I'm just going to keep it at honor so my name is username that's fine as the admin email you can add in if you want I don't really like to add in the email that you can add in a password this is mandatory so you have to enter it in twice so go ahead and enter in that password great and now let's just run python manage.pi run server all right everything's set and ready to go so now we'll be able to actually access the admin page of Django so what you can do is you can head over to URLs and you can just remove this comment here and the URL that we're going to access here is based on the pass here of admin so this is the route name that we're going to take in so we're going to head over to the admin page so we can just type that in the URL bar at the top right so we can head over to the admin Page by typing in the route name so it's a forward slash admin hit on there and now we need to enter in our super user credentials so the credentials we just created earlier on and you want to enter in your username along with a password that you associated with that super user and you can log in now what you can do is scroll down and here you can see we have our basic uh installed app setup according to groups and users and if we scroll down here we'll be able to see the users here now don't mind this Django Administration section here looking warped up so with Django 4.2 I have noticed this there is a bug in terms of toggling the scene to change the colors so don't worry too much about this okay now we can go ahead and log out and we can head on back to the default home page here that we have which is Django perfect all right so we've got that all set and ready to go so the next thing that we want to do is we want to actually go ahead and set up our urls.pi file and our views in our app and our app is web app okay so what you want to do is open up web app and make sure that you have your views.pi file and your models.pi file Now by default this will be here but just to make sure you have it just double check but one thing we are missing is our urls.pier file so let's say we have very specific URLs for our application this may be for example let's head on to our application let's say we have one for forward slash register and we have one for my login and we have one for let's say dashboard okay so these are some URLs that we want to configure for our application and the best way to configure them is to configure them in our app called my web app and here we also want to set up our models our views our templates and we want to add this all to this app that we have here Now by default we can only set up URLs in our Django CRM project here so if we click on the uls.pi file within CRM here we can see we have our URLs patterns here and this is where all the URLs are being served for our website now we don't want this to go ahead and run for our application we don't mind keeping the admin URL here for our main urls.pi file and CRM that's fine but for our application like I mentioned the register URL the login dashboard Etc we want this to come from web app itself so to do this we need to create our own urls.pi file in web app so what we can do is in web app here you can right click on it on your app say new file and I'm going to call it uils.pi okay so here's our urls.pi file now the next thing we would need to do is just borrow some of the functionality from our main projects URL which houses the admin URL so we can go to CRM open up URLs here to the side and we can see we have the one the ols.pi file from CRM which is our main project here and we also have a blank one here from web app here so what we want to do essentially is we want to configure and connect all the URLs here from urls.pi okay we want to create them here and we want it to be connected and configured to our main project URLs now manually you can add them all here but it's better to include them all from this file here when you create your own so we can go ahead and set it up accordingly so the first thing you want to do is you want to go ahead and just add in a comma and say include so we need to make use of the include function now before we carry on it's best to turn off your server for the moment so press Ctrl C because it's going to show errors until we configure it correctly next you want to enter in a pass so it's best to enter to say pass and leave it as a empty quote here you can of course put in a route name but it's best to keep it empty then add in a a comma and you want to say include and in quotes here you want to include all of the URLs that you plan on specifying from this file in urls.pi from web app so to call this urls.pi file you need to First reference your app so my app is called web app so you're going to say web app Dot and then you want to configure your urls.pi file so you can just say dot URLs that's how you would reference it just remember whenever you create a URL here just to ensure you add a comma at the end there so this is how you would configure it the next thing we're going to need to do is we're going to have to use some markup here so whenever we create a URL we need to use the pass function and we always need a URL patterns list as we can see here so we can borrow some functionality here so we can copy this so from django.urls import pass and in your urls.pi file here you want to paste that in like so remove the comma and you want to also copy this markup here URL patterns and add that in there and you just want to close it like so okay so we can clear this up and if we run it now we shouldn't have a problem so let's just go ahead and run that there we go okay perfect now you'll notice if we don't have this URL patterns in place if we delete that okay and we reload you can see here it's not configured because it doesn't see the ul's patterns so this is something necessary that we need whenever we want to set up a urls.pi file now the pass function here is going to help us to create a URL now this can be a register URL my login any place you want to be redirected to any web page now we're going to keep it very simple here so I'm going to keep it simple so as you can see here we have our Django page here so this is essentially our home page so when you see localhost here so 127.0.0.0.1 at colon 8000 here this is essentially going to be our home page so our web page the main page that users see the first time they go to our website now just to prove that we've linked our we've created our own URL here okay and set it up what we want to do is just change this up so what you can do here is you can just say pass and within your parentheses you're going to take in three parameters or arguments per se so first it's gonna I'm Gonna Leave another Mt string since this is our home page then you need to add in your view so you can see here we're missing the view so to do that you need to open up your views.power file from your app here so let's close the main URLs here this is configured you can open views.pi and you want to create a view here so you can keep it very simple so we can just return a simple HTTP response so let's go ahead and do that right so we can remove this here and we can just say from django.http import HTTP response okay so you want to go ahead and set that up next you want to create a view here so we can just say Def and we can call this uh create a function here call Home Pass in our request and you just want to go ahead and say return HTTP response and within parentheses here you can just say hello world so we just want to have something very simple here for now now the request object here you don't actually need to keep here so usually we need this if we want to say render but for good practices just keep that in it's not a problem if you don't use it for now and the function that we created here is home okay so this is going to be for a home page you could say and it just has a basic HTTP response that says hello world so home is what we need here and we need to import our views file here in urls.pi so we can actually call views here so to do that you can just say from dot import views so that means we are looking in our directory here so the same directory here we want to import views then what we can do is we can just say views dot term and that's going to pick it up there we go so it's picked it up and a extra argument that I add in here is a name argument here and this is very useful if you want to go ahead and you know connect your url pass in your href attributes in HTML so it's best to always add this in and I always keep it the same as the route name here that so in the first argument here I always keep it the same as the route name just for consistency now anyway we have this configured here just make sure you add in a comma at the end there so whenever you create a URL here make sure you add in a comma at the end now what you can do now is refresh your page and there we go we have a simple hello world piece of content here on our home page so you can see that Django mockup has now disappeared alright so we can now see that we've configured our basic URLs and our views all in place here okay now like I said this request object here we only need this if we want to use render okay we don't need to add this now but like I said just to get into the habit of it just keep it there for now it's okay if it's unused for the moment okay so we've got that all set and ready to go now the next thing that we want to do is we just want to set up uh our urls.pi file and oh sorry our static files excuse me so we've set up our urls.pi and our views uh file accordingly now we want to set up our static files now let's say you want to use CSS and JavaScript you need to set up your static files so what we want to do in our project here you can click on your project and you can right click or you can go ahead and click on the folder icon either way so let's right click say new folder and within CRM you want to type in static so this is the folder for our static files and then you want to go ahead and create two more sub directories or folders so you can right click and say new folder and I'm going to call this CSS and right click on static now say new folder and say JS so make sure that you have your static folder and within static you have CSS and JS under it make sure JS isn't within CSS or css isn't within JS very important and I know this is going to be a lot of code at the end of this video tutorial so I will include a GitHub link to the source code so you can go ahead and verify that if throughout the tutorial you get lost or struggle right so make sure you created those two subdirectories perfect now we need to link up our static files so what you're going to want to do is head over to your settings.pi file here so you can click on CRM head over to settings.pi and you can scroll down to the bottom right here and I'm gonna just add some space here and oh actually Statics here so that's fine we can keep it here actually just to be clear so we have our static URL now what we want to do is go ahead and connect it and tell Django where will our static files be served from so we know our static folder is in the base directory here so we can just reference that by saying static files dirt so you have our static URL which is fine now we need to say static files underscore doors and we'll say equal and if you're using Django 4.0 and up you can just say base dur so base directory space forward slash space and here you want to reference the folder for your static files and we can see here it's static so you can type in static like so all right so let's just say Ctrl C here and we run our server to make sure we don't have any issues in that light there we go let's refresh okay we're still good great so it's always good to run your server like I mentioned before just to make sure we don't have any errors or whatnot okay so very important make sure you configured your static files here okay so we've got that all set and ready to go all right so now that we've configured our and set up our static files we want to go ahead and set up our templates directory now for those of you with experience with Django you'll know that you can either set your templates in one of two ways you can either head over to settings.pi and let me remove this we can scroll up and you can see right here by templates in templates durs here you can go ahead and set up your directory now this is one way of doing it I don't really like this way um the way I prefer to do it is set up app level templates you can these are known as project level template so um you can choose which way you want to do it I prefer app level template so what you can do is head over to your app so mine is called web app here you want to right click on it and you want to create a photos in web app called templates so this is where your templates will be served now Django by default automatically knows that whenever you create for example a HTML file in templates here it will be very easy to render in your views but to ensure we don't have namespace issues or any areas like that it's recommended to create a subfolder that is you know set to your app name so if this app name was called web1 we would go ahead and right click and say new folder and call this subdirectory web one now the directory here is called web app or our app is called web app so here you want to create a template called web app and this is going to house all of your templates in here so you have templates and then you have another folder called web app which needs to always be the same as your app name here up top to ensure like I said any namespace issues then you want to right click in web app here say new file and within web app here you want to go ahead and add in a template for example so you can say index dot HTML for example and that's perfectly fine so you can add in index.html within your web app folder here and just to keep it simple so you know I'm not going to say H1 hello world here and that's our template here set then we can head over to our views here and instead of saying return HTTP response we can comment this out for the moment we can now say return render and we're using the render function to render out this index.html template now look very carefully what we do we need to now pass in the request object that will be passed in here for our home here and then in quotes here you don't need to look at templates because by default Django knows to look in templates here if you create a templates folder in a Django app it knows what templates is instead you need to reference web app here in quotes forward slash and then you want to reference the actual template you want to render so index.html now remember to add in the dot HTML part so that extension and that's all you need so now we can rerun your server here we can see it's running and refresh your page it now says hello world so now we're rendering templates we're not rendering we're not returning a HTTP response we are instead rendering a HTML template so just remember that there that by default Django will recognize the templates folder so if you just added index.html to templates it would just say index.html but like I said to to ensure we don't have namespace issues it's better to add in a subfolder under templates just to ensure that you're nice and safe so you don't have any sort of issues or whatnot okay very important to set that up so we've got now our templates directory in place and all of that is nice as we can see all right right so the next thing that we want to do is we want to start to set up all of our basic templates for our application so essentially we just want to create the blueprints we will go ahead and customize each one of them as we move step by step throughout this video tutorial so what we want to do now is we want to create a base.html file so essentially the purpose of this based on HTML file is to extend it onto our other HTML template so we don't want to have to constantly reuse code each time okay this can be quite Troublesome so intentionally we want to go ahead and inherit you could say you could say some general markup so I'll show you what I mean so we can just remove this comment for now from the home page and the good thing about the space.html file is we don't need to set a URL for it we don't need to create a view or anything like that so in our directory here so web app under templates we can right click say new file and I'm going to say base.html okay so go ahead and create that I'm just going to click on Explorer here now this is going to remove this directory structure so we have some more space to work with in our base.html okay so this is going to be the file that we want to extend you could say or inherit or to be inherited across all of the HTML pages for all of our our templates so the first thing we want to extend will be based on our static option so we want at the top here say within curly braces we want to say load static and close that up because we want to go ahead and extend our CSS files in due course so make sure you say load static at the top then what we want to do is just create some basic htl markup so you want to add in doctype so usually you know seems yeah you can say doctype HTML okay sometimes Visual Studio code doesn't recognize it which is fine so we want to then say HTML so this is just basic markup that we need so this will be our basic HTML file and what we need to do is enter in a head tag here and within our head tag we want to add in all of the basic peripherals so the first thing would be the metadata so we're going to say meta Char set and we want to set that to utf-8 so we want to use utf-8 characters so don't worry too much into about this or look into it too much this is just basic markup for our HTML template then the next thing we can do is just set a title and I'm just going to say project X here so you can give any title you want so essentially the title here is what you usually see right here in the top left now we won't see this now because we have an extended this template yet but that's where that title is going to be put in so that's the name of the tabs that you see on websites that's what you see here okay next thing that we want to do is we want to go ahead and add in a seam so we want to add in a bootstrap seam here now a useful tool is to make use of the bootstrap seams on bootswatch.com so boot Swatch offers free seams for bootstrip I will be sure to include a link in the description below so if you're wondering of all the links that I use in this video tutorial just go ahead and check out the description below where I'll include all the links that I use accordingly so you want to head over to bootswatch.com and we want to add in a theme here so don't we don't want to manually use too much CSS because that can be Troublesome the focus is on Django now we will do other things as well but I want to kind of limit that as much as I can so you can see here a lot of seams here um a lot of them look pretty nice here so you can choose what you want to use um the choice is yours as to how you want to proceed so you can see there's a lot of nice ones such as slate Simplex pulse quartz Sandstone um Etc there's a lot of different types that you can use now the one I'm going to use is flatly so it's for flat and modern looks now of course each one of them has their own unique logo so you can choose one and what you want to do is click here on the drop down and you want to look at bootstrap.min.css make sure you don't left click on it right click on this and open it open the link in a new tab here and here you're going to see that raw CSS all in place here so it's going to fix everything nicely for us and this is what we want now to link this up we need to add in a link here based on CSS so here in our base.html within our head head tags here you just want to go ahead and add in the following and that's going to be link Rel and you want to add in style sheet okay and then you want to add in a h a type actually you want to add in the type which will be text forward slash CSS since it is CSS and you want to add a href attribute and this is just literally going to be the link so you can copy this link right here for the scene that you decide to use paste that in just be sure then to close your link accordingly here and this is going to input that boot Swatch theme accordingly now the next thing that we want to do here while we edit is we want to go ahead and add in our CSS um files we want to connect it so in Explorer what we can do is under static and CSS we can see we don't have a CSS file so we can create one so we're not going to use CSS that much because a boot Swatch theme Here will take care of most of the functionality that we need but sometimes we need a bit of an adjustment so you can right click on CSS say new file and I'm going to call this styles.css very simple and I'm just going to as a test just say H1 and open a selector here and say color red just for now so you can add in whatever you want here this is just a test if it's connected head over to base and here in your base here you just want to go ahead and add in link and let's close this Explorer so you can see and we're going to say Rail and you can add in style sheet here and type again will be text photo CSS and under your href this is where it's important so we are loading static in here so we're already going to configure a static here so in curly braces you want to add in your percentage symbol static and here within quotes you can just leave that blank and add in your percentage symbol at the end you now want to link your directory to that static file so we're in static here we're in CSS and it's known as styles.css so we have static here we're pointing to static so href is a link attribute if you're wondering um in HTML which you can use to add in links so we want to link to the styles.css file so we're already saying to Django look okay look in the static folder then I want you to look in CSS so in quotes we need to say look into CSS forward slash and grab styles.cssat file then you can see styles.css and just add that in so that you're linked to that particular structure so in the CSS file styles.css and static is the main directory at the top which is here so static CSS starts up CSS so it's kind of a directory from top to bottom approach if you want to better make sense of that okay so we can close that and just close up our link here so we're now loading the bootstrap seam here or the boot Swatch seem like I prefer to call it along with our CSS styling here okay now the important thing to keep in mind is the order is important so this boot Swatch theme must be at the top and the CSS must be at the bottom don't switch them around you're going to have problems so make sure you have this at the top and this at the bottom right here okay so that is our header tag for now okay we can move this terminal here just to create more space uh yeah that's fine so we have that down there now what we can do is carry on with the markup here so the next thing that we can do is we can set up our body tag for now so we're still in HTML so now we can add in a body tag so let's do that so I'm going to say body and this is where the main logic will be in place now we are going to plan to add in a navigation bar so just for the moment let's just add in a comment that says um enter create nerve bar here okay so we can create that later we don't need to do it for now so just a comment to remind us now what we can do next is just go ahead and create a simple container which we're going to use soon enough so we're going to create a container here I'm going to say div class and I'm going to say container and we can leave that as so and we're going to add in a breakpoint and I'm going to add another comment now the reason I'm adding these comments here is just to add in a placeholder so that we know what pieces of functionality are going to be put into place because remember this is going to be replicated on all of our templates so let's just add in another comment here and I'm going to say here um let's say I want to have notification note to location messages sorry guys notification messages that will be here so that's nicely in place perfect so we've got that now in place and ready to go now the next thing that we want to do is we want to add in the block content now this is very important so what you're going to want to do is you're going to want to ensure that within your div here your container that you add in a area for your content so here you want to add in Block content within curly braces and then here at the bottom you want to add in end block okay so essentially what's going to happen every template that we create any index.html file that we create is going to inherit everything up here so everything up here such as the CSS that we're using the boot Swatch theme the title the HTML logic here and everything below here that we can add okay is going to automatically be on every single page including the navbar which we'll create later on and the notification message logic which We'll add later on now the blog content here is going to be the space where we are going to essentially add in the unique Logic for our template so anything unique to that template such as the registration page we may have a you could say a particular button or icon that will only be on the registration page we don't want it on this page here because this is generic this is generically going to be sent out to all of our HTML Pages block content just gives us a space which we can use where we can add in the extra content for those unique Pages now don't worry this all makes sense as we work on it I will refer to it okay now what we can do then is outside this div at the bottom here we need to add in and Link our JavaScript page as well so we need to create a Javascript file so what we can do here under Explorer we can see that we have a JS folder here and you can right click on JS say new file and I want to call it app.js like so and we can keep that as is so app.js is the name we can close these files here and we just want to provide a pass to that so what you can do essentially is just say script Source oh equals and here in quotes you just want to use a similar mock-up to CSS here so you can copy this here for CSS so we want to link and tell Django hey this is where my app.js file is where it's located in the static folder within the jsub folder and I want to use the app.js file and you want to add this within Source like so and just replace CSS with JS like so and what you're going to do is remove this here of course because remember we're looking in the static folder yep JS yep app.js and what you want to do is just leave it like so and leave it like script you can leave it like that that's perfectly fine so make sure you've got that in place very important to just set that in to place and get that organized as such all right so you want to add in that script so what we can do is just refresh our application make sure everything's running still so we've got that all set and ready to go now the last thing that we need to do is since we are using boot Swatch which is essentially a bootstrap seam we would like to go ahead and add in the generic JavaScript that is required for um bootstrap so that's something that we need to add in from the bootstraps website so that's the next thing we need to do right so let's go ahead and add that in so what you want to do is head over to the get started with bootstrap link here so I will add this in the description below as well so not to worry just be sure to check it so like I said every link that I go to I will ensure that I don't forget to add it into the description below for you all right so what you can do is scroll down here and like I said it is possible in maybe a year or two of this video going on it may be possible that bootstrap will slightly change their documentation so this is where it's very important to refer to the project source code which will also include in the description below so you can at least reference that accordingly so just something to include and just keep in mind so what you can do here is go ahead and add in the following so we have a viewport here this is just some extra document extra code we can add in now this is just to ensure that we have a nice um responsive part of behavior for mobile devices so you can copy this here I will zoom in so you can see what it is so we have this meta viewport which is equal to device minus width here initial scale equals one so like I said this helps to ensure responsiveness on mobile devices so you can copy that and there's something you can add actually at the top here you can add it just before this meta chart set option here just to ensure we have uh some good responsiveness going on with our application all right so the next thing we need to do like I said back to the bootstrap part so let's uh zoom out here so we can scroll down here and you have the option to include bootstrap CSS now this is not necessary since we are using a boot Swatch C which is bootstrap related so we don't need to add in the CSS however what we do need is we need to enter in the popper JS and js4 bootstrap separately so this is something we can add in so what we need to do is copy the following here to our clipboard so we have popper here which is going to help with some effects with bootstrap and then we have regular bootstrap JS which is minified that we need to add in okay so we can copy the following here so we can copy to the clipboard head over to our base.html and you would just want to paste that in and you can paste it in below your Javascript file here so we need to ensure that whatever we put in our app.js file here overrides this bootstrap here so that's something that's important however earlier on with our CSS here we needed to ensure that the boot Swatch overrides the CSS so um kind of opposite ways here all right so we've got this now set and in place so make sure that you've got that bootstrap logic um in place and set and ready to go all right now it's not always um to say that we will need jQuery there usually isn't a use case for it but just to ensure we don't have any problems or any kind of issues we can also add in jQuery so this is something you might want to use so we can close the Explorer and we can just go ahead and add that in so we will have script source and here we're just going to add in the link so as far as I recall it would be https and we want to add in code.jquery.com forward slash jQuery and then we want to have Dash and version 3.3.1 the unified version should be fine not JS like so and cross origin we can keep as Anonymous across gen Anonymous oh no no Miss and you just want to close that up so we may not need to need we may not require jQuery but in the event while we work into this course we may want to add in some specific functionality we can go ahead and add that in but generally speaking as long as we have the bootstrap JS here and the popper here we're good to go now the reason that we need this is for our navigation bar so in our navigation bar we want to ensure that we can actually um use the basic bootstrap effects with proper and bootstrap.min.js so that's the reason why we're adding this logic here for bootstrap.js of course we're adding the following uh um excuse me we're adding app.js here our custom JS file the reason for that is because for our flash messages we want to ensure that we set a timer and this time is going to ensure that those messages those notifications disappear after a few seconds there's nothing worse than seeing a notification that sticks on the screen so that's why we need to add in some custom functionality for JavaScript and regarding the jQuery here that we have um as we build our project we may require some code specifically focused on jQuery and we'll see how it goes but just something that you want to add in now this Base today and it's good to add this in because remember like I said this base.html is going to extend over all of our HTML templates so at least if we have it in place here we don't need to worry at all now I wanted to go back to the block content here so it was the end block here so essentially you should see this as a Gateway for all of our templates to go ahead and add in unique functionality so this block content in Block here will be will be going to pass this over and extend it to our other templates and add block content and end block here so essentially this is going to be a placeholder for our other templates okay now I understand with some of you you want to get stuck in and straight to it so I do have a tendency to take my time and explain these things from scratch so what I've decided to do is add in chapters for this long video tutorial so you can skip ahead um if you understand everything and you want to go further but just in case um I just decided to just take time explaining this so um just keep that in mind so you're more than welcome to skip ahead Okay so we've got all of this set in place here so we've got our base on HTML we will return to this because we want to add in of course our icons for our notifications we want to add in a navbar area for notification messages but all of this in due course so as long as you have the following logic here um you're good to go now of course if you're missing anything don't worry just make sure that you have of course the code with you so you can go ahead and reference if you are struggling all right so that's our base on HTML so what we can do is just refresh the page make sure our server is running and we're good to go perfect all right so let's just clear this up your directory structure is a bit of a mess so let's close this up Okay so we've got most of our based on HTML file out of the way the next thing that we want to do is we want to create the blueprints for our files so what I mean by that is we can go to web app and templates here so we have base.html index.html so what I want us to do is I want us to create all of our index.html files what are we going to be using for this application so we can just get that out of the way so we have based on HTML index.html so index.html is going to serve as our home page so the main page for our application so whenever user comes to our website or application they have this index.html page to go to so this will be our main page that greets users now we also need to go ahead and create other pages so we want users to register so we can right click on web app say new file and I'm going to say register.html now we're only going to create these files we're not going to add anything in them we just want to have a good clear sense of what we're doing so that's register done now if someone registers you would expect them to log in so we can right click and create a template for logging in so I'm going to say my Dash and login.html okay perfect so we have a login page for users all right so they've logged in okay and now they want to go ahead and create records and delete records so let's say it's a manager or a application for managers or supervisors to manage their employees or for someone to manage his or her clients what you can do then is go ahead and create views pertaining to records clients dashboards Etc so if someone wants to see a set of Records we can obviously use a dashboard page for that so we can say new file dashboard.html so that would make sense so once it uses on the dashboard and they done with whatever they want to do they want to obviously log out so we can right click and create a new page for logging out however you don't especially need a page for logging out because we can use the URL in A View to take care of this so we don't actually need that the next thing that we would need would be the basic crud application pages so if we want to create a record so we can say here create dash record so we can use dashes it we can create a record let's say we want to um let's say update a record we may need a page for updating since we want a unique page for that so right click and it say update record the HTML we can use that so we have a template for updating our record now you may think that we may need one for deleting a record now we don't really need this because if we are viewing a record let's say we're taking a look at a record itself we're reading it we can tell Django to delete that record on that page that we're on according to the URL so essentially to do that we would need a view record so if we're reading a record a individual record we can have a page a template for that and we can also delete it on that page so we would only need one template which is called view dash record so you can change these names as you want you don't need to call them records you can say add update delete whatever is applicable to your use case Okay so we've got view record Okay so we've got our base HTML create record dashboard index.html my login register the HTML and of course we have update record and we have view record all right now we're also going to have a navigation bar but we'll only get to this later on so make sure you've got the basic templates here for now we will add in a navigation bar one soon to come but these are the basic ones that we need and I wanted to mention was the navigation bar okay it's going to extend on all of these templates so like I said it we're going to include it in this base.html right here and that's going to show on all of these templates here because we're going to extend this based on HTML to override all of these templates here so each template has the following functionality which I'll show you in Greater depths as we work throughout the crash course Okay so we've got that set so these are the blueprints for our basic template so at least you have an understanding of what to expect all right all right so let's go and dig deeper into the functionality that we need for going ahead and setting up our register and login forums accordingly so that's all you want to go ahead and set up all right so we can close this for now and in our web application we want to create a forms.file so in our web app we can right click on it say new file and we want to say forms.pi okay so this is where we're going to create you could say our model forms for users that want to register and log in so here we are on forms.pi so let's set up the functionality for it all right so what we're going to do is create two forums which will allow our users to register or to go ahead and create a user account and another form to allow users to log in so this is what we're going to use at the start so I'm going to zoom in here just to make it a bit clearer so make sure you create a forms.pi file within your app here so we have web app make sure you've created that now what we can do is go ahead and import the default user creation form which comes pre-assembled with Django so we can import that so you can say from django.comtrib dot all dot forums import user creation form so this is a default form that Django provides us to actually allow us to create users based on the username password email first name last name Etc now to actually implement this we need to have the user model so the user model of course like I said houses the basis of the username the password Fields the email Fields Etc so what we need to do is import that user model the default user model from Django so we can say from django.comtrib dot auth dot models import user so you want to add that in excuse me intellisens is all right there we go okay now the next thing we want to do is we want to actually go ahead and import forms okay now forms is going to allow us to create Char fields and go ahead and inherit widgets so in terms of widgets okay we get something known as a text input widget and as a password input widget so these are things that we can use if we want to go ahead and extend our application in such a way so we can say from Django import form so this is going to allow us to make use of those widgets so text input usually that will be for a username and a password input we know of course for a password so we just want to import all of these first before we actually create our forms we don't want to go back and forth but what we can do to keep this simple and structured we can just use we can import what we need and then use that accordingly and then go back and import as what we need later on so we have some structure so we can do that so what I'm going to do is just move this a bit down and we can add some lines here okay so the first thing you want to do I'm just going to add in a comment here and I'm going to say here register a user I'm going to say register or create the user okay now what we can do is create a class here so we're going to create a model form so I'm going to say class and I'm going to say here create user form so you can give your class name here anything that you want and the important thing here now is we want to inherit this user creation form here we want to inherit that within the parentheses so you want to say user creation form add your semicolons into the class and now we want to set everything up so let's zoom out here we want to say class meta and now we want to specify our model so we want to create a form known as create user form which takes in the model user okay and that's because we are importing this user form and then what we want to do is we want to specify the field so the fields that we want to use we can just say Fields equals and within our list here we want to add in the username comma password one and comma password 2. now the reason that we have password on and password 2 is because when a user goes ahead and decides to set up their form password one is going to be the password they want and password 2 is simply a field used for confirming password one essentially but there's only one password so don't try to look into it too much so these are the fields that we want to use so when we are setting up a registration form for example we want to Output the username field and the password one and password to Fields namely password one for setting your password password to confirming your password so that's what that field is for all right next thing that we want to do is we want to create a model form or a form here to allow our users to log in so what we can do essentially now is just create another class here so I'm going to add a comment here and I'm going to say log in a user so this is going to allow us to log into users this form so I'm going to say class and I'm going to say login form so let me scroll down here and within that we need to include the authentication form that Django provides so Django by default provides us with an authentication form which we can inherit so now we can import now so I'm going to say from django.comtrib and we're going to say dot or dot forums import authentication Forum now as I can see here it's the same here so you can just put a comma there and and just add an authentication form choice is yours next thing that we want to do is we want to import our widget so the password input and text input which is based on this forums here so from django.forums.widgets import password input and text input okay so let's move on with this so now what we want to do is in login form we want to inherit and take in into control that authentication form so we can add that here okay and what you want to do then is set your username and that's going to be forms and that's the reason why we import forms here so now we can make use of these widgets namely password input and text input so we can say forums.char field and now we can add in the widget which is going to be equal to text input add in your parentheses and then the password to be forms dot Char field add in widget and that will be your password input add in empty parentheses so this is the form that you need to actually go ahead and set up what you need to log in a user so this is the functionality you would require so the text input will be a username simply and a password will be set to the password input widget okay so this is everything that you require um for creating a form for to allow a user to register for an account and for a user to log in of course we need to add in some more functionality with our views and also create a URL to actually link this up accordingly but there is the basic functionality here and like I said um if you want to double check this you can download the source code go ahead and check it out all right so we've got that now in place now what we can do next is go ahead and set up our view accordingly so that's the next thing we want to look into so make sure you've got this set and ready to go Okay so we've got our forms done there for now so we can close this up and now we want to go to views here so you can go back to our views now we want to start to set up our view page here okay so that's the next thing we want to do all right so let's go ahead and fix up our home page so as we can see and let's get on to our home page here we can see it's very Bland very plain and not much to it looks pretty bad here so let's just add some markup to it let's make it look a bit nice now the first thing I want to teach you is how you can make use of this based on HTML here so what I'm going to do here is we can remove this HTTP response we know that that view is linked here so we don't need to come back here we know we're rendering it out correctly according to index.html so whatever is in our index.html file will appear here so we don't need to worry about this for now so just keep in mind that we're just modifying our home page so let's take a look so we have base on HTML here and let me move index.html here so it just says hello world now what I want to do is I want to extend this base.html file now and all of this logic here is going to appear in index.html on this file here now the first thing I want to show you is if you right click here and you say view page Source here you can also say control U you can now see the HTML logic here just says H1 hello world that's all it shows now what I'm going to do is I'm going to add in some logic here at the top here of our index.html that's going to extend this base.html file here so that we can inherit all of these default properties here everything here we inherit everything so to do this on the top of index.html in your curly braces you can just say extends and in quotes here you want to say web app forward slash base dot HTML close your curly braces the percentage symbol right like that now if you go ahead and refresh your page first you'll see the title will change and if we view the page Source a lot of alterations will be made so refresh and you can see we have Project X and if we refresh here and view the page you can see we have all of that logic here so we are inheriting as you can see here our base.html in here we can even see the comments that we added in here so it's inheriting it but one thing that you've noticed is probably what happened to our indic what happened to her world it disappeared now the reason that this has disappeared is because we need to add it in within the block content so in base.html you'll notice here that we have this block content option here and N block so essentially this is where all of that logic will be placed unique to that particular template now to call this block continent n block here we need to add this to index.html within the unique content we want to add so let's say hello world is something unique to index.html then up here we will add in the following and that is block content okay and we can say here end block so this is what's unique to index.html everything unique to that file must be put within this here and now what you can do is close this refresh and you can now see we have hello world now the reason we have some styling as well is because remember in base.html we have this boot Swatch right here we have boot Swatch here giving us that theme now if we were to delete boot Swatch like that and delete it and refresh we can see we don't get that nice sort of functionality put into place here for us so that's the reason for that so let's just put it back you can just add that back in and that's the reason for that we can now see it's now put into place nicely for us okay all right now a question that some of you are probably wondering is earlier on we set our styles.css to change the H1 attack here to set the content to Red now you can see it's not red now what you'd need to do to fix this is you'd need to just simply clear your cache now sometimes it shows instantly other times you need to clear a cache so to do that you can click here if you're using Google Chrome head over to so click on your settings the three dots then more tools then you want to look for developer tools open that up and then here on your refresh icon here you want to right click on it and say empty cache and hard reload and that is going to clear the cache and show any CSS that it has been uh that hasn't been cached correctly and you can also hard reload if you wish as well and that should show you the color another measure that you can use is to head on to your terminal and run your server again and then you may want to refresh as well like so and a final way is to ensure that your server is on then you can click on settings more tools developer tools and then empty your cash and hard reload so these are three ways in which you can double check and ensure that it has been loaded correctly all right now we don't want to have this here we just needed to test it to ensure that if we view the page source and we click on our CSS here that it's actually rendering out correctly and we can see it is so that's perfectly fine but we don't want this red text here we were just testing it out so we can go to static CSS Styles and we can remove this H1 here we don't need that that's that's fine okay so what we can do now is refresh and that should disappear so now again as you can see here it's not showing so we need to clear the cache so just something that we sometimes need to do here just empty that crash and there we go okay all right there we go so mine's caching a lot recently which is strange but we have got that all in place all right perfect all right so we've got that all in place so we also Now understand the base.html and the purpose of it so we've got everything set and ready to go now essentially with this extends um web app forward slash base.html now the reason we're saying web app here okay is because remember we are rendering it calling it from this folder here and we're looking for base.html so that's why we say web app forward slash and we're looking excuse me we're about forward slash base.html that's why we're looking for and that's how it is now we would need to just add this line of code to all of our templates here now this is really beneficial because like I said we don't need to have to manually copy and paste this same logic on every single template it really does help in the long run um especially if you have a very large application but this is a perfect use case here because we can just write in now minimal code okay so let's anyway get started and make our home page look nicer I mean this hello world is very simple too simplistic so let's uh make it look a bit nicer so we can remove that so let's start this year so we've got all the HTML all prepped and ready to go now if you're wondering about structure and logic you can right click and view to the page source so here you can see the logic that we have already and what we're going to do is just add in extra content here within block content here so you can see we have this pre markup already for set for us so just to give you some um Clarity there just refresh and we can start so in index.html what can we add in so let's add in a body okay so this is all unique content so all unique content pertaining to a web page will be in this block content here for each of our templates so here we embody and let's just add in some space okay and I want to close this Explorer here and what we can do is go ahead and say div we're going to say class and I'm going to say text Center so sometimes um with boots watch or with bootstrap we're going to have properties that we can invoke so sometimes we can add them in accordingly such as text Center now let's say H3 and I'm going to say Project X management at its finest okay um what else can we say just add a break point and let's say the H5 tag and I'm going to say keep track of your records effectively okay you can add anything that you want here the choice is yours HR is going to allow us to add in a horizontal line here break point it's nice refresh all right so we've got some nice uh styling here nice uh very good so Project X management and its finest keep track of your records effectively now you can see everything is centered because we added this text Center um value here so we added that in so that's looking great next thing that we want to do is since we're using bootstrap we can also make cues of a lot of functionality such as the buttons and the colors so what we can do is here create a link so we can say a class button button primary so we can use button primary we can use info we can use success we can use danger okay and all of these are usually primary will be the boot swatches same color info will also will usually be blue um danger will be red and success will always be green as well and then we also have alert which is usually orange but we're going to keep it primary and stick with the theme of the bootstrap um scene type we're going to say button href here and here we're going to add in a URL so I'm going to add in a URL I'm going to put leave it as an empty string for now and close that up like so and here I'm just going to say create your account just like that now this URL here okay is always going to pertain to what you said in your name attribute so if you go to your uls.piofile we have a name attribute here so usually if you add in the route name it's best to keep the route 9 the same as your name here that you add in now name is an optional argument that you can add in you don't have to but usually it makes it easier for um tracking the URLs in the href attribute here that's why you should always add in something within the names if you have to if um you don't you don't have to do that but for example here we're leaving it empty that means it's going to correlate to our home page so this URL is just going to redirect to the home page so if we were to refresh we have a button here that says create your account and we can see in the tooltip in the in the bottom left here you can see of the screen it's just going to redirect the page because we just set that to an empty string which correlates to an empty route name and an empty name argument here okay now of course we're going to set this to the register URL and we're going to set these up accordingly so the URL just goes to whichever URL you want it to go to accordingly that's a simple way of understanding it so here it will be create your account so we want to when the user clicks on this button we want it to go to the register page where users can go ahead and register their account so that's something that you want to ensure that you add into place and ensure that everything is set accordingly all right so that is essentially the full force of our index.html page now like I said you're more than welcome to download the source code if this is a little bit uh to easy for you or you just prefer to follow along with the source code that's perfectly fine either way it's fine but we've got this in place so this is our index.html for now okay so you can see it's much easier now that we just extend the base so we just have a little bit of code right we don't need to write that much now this HR is horizontal line so that just sets the line here in place so you can see it's a bit clearer and a bit more concise so I just want to tighten this up here just to make it a bit easier and clearer to see there we go I think that's that works nicely there we go all right all right so the next thing that we want to do is we want to go ahead and add in a navigation bar now Okay so we're going to add a navigation bar and this is going to appear on every page now what we're going to do for that is we can close the following here and it's going to be extended through web app through the base.html file so if we go to base.html remember we add in a comment here that says create navbar here so what we're going to do is to make it easier we're going to include the nav bar so we're going to add in an include function which is going to include the navigation bar for us from a HTML based template all right so let's get started with our navigation bar so to make things easier for you what I'm going to do is I of course like I mentioned I would include the source code in the description below so a link to the source code but additionally what I'm going to do is if you're following along with the course here I'm just going to want to show you the nav bar that we have for this moment so I'm just going to open this up so you can see so here is our nav bar as you can see here the code for it now the nav bar that I've made and created here is based on bootstraps and responsive nav bars here so this is another link that I'll add in the description where you can read more about creating an AV balls bootstrap so it's basically one that I've just gone ahead and copied here and just modified here so there isn't really much to it I would explain it in detail what I've done and what I've added in so you can see it but what I've done is I've gone ahead and created one for us so what we can do is just add this into our code now what I'm going to do essentially is I'm going to add in the code for the navbar if you're following along with this course here in a pinned comment of this video so make sure you check the pinned comments because I'm just going to add in the source code here which you can literally copy and paste in your own navbar.html file here and I have it right here so for those of you that want to rather just check the project source code and go from there that's fine but for those of you that are actively watching the video and actually want to follow along this is what we need to do so it's very simple we can just create a new file here on our template historic user under web app so you can say right click new file and I'm going to call it nav oh sorry Nev bar dot HTML and under the pin comment of this video all I want you to do is copy the code that's there and that code will look like this okay so all I've done is is it's exactly the same as the final project source code the only real difference is is that I've removed the URLs here so that the navbar won't have any issues or whatnot when we actually run it so I've just taken out the URLs for it so you can copy this this will be in like I said this will be in a pin comment of this video so you can copy that and you want to paste it in your navbar.html like so okay now I will explain this in just a moment I just want to render this in base.html so you can see what it looks like so this is the code that will be under the pin comment and I will explain it in just a moment so what I'm going to do essentially is go to base.html and to include this navbar that we have here all that we need to do is add in include and here in quotes you want to reference where that nav wire is from so it's from web app and it is forward slash where is it navbar.html so here we want to say web app and then we want to say forward slash Nev bar.html and close that tag with the percentage symbol so now if we head over to our application refresh we can now see we have our nav bar in place so we can see we have register and we have login okay so this is the navbar that will be extended on all of our templates if we use the extends operator which we had here so extends because remember the space.html is now going to include a navigation bar every time on the base.html so every time we extend it it's going to still include this navigation bar which will be on all of our templates okay so make sure you've added that in accordingly and now let me explain this nav bar here so let's look at the logic so essentially what I've done like I said is I've just taken down a responsive nav bar here from bootstrap so you can read a little bit more there and I've added in various attributes so let me go through that right so as we can see here for this navigation bar we have a few attributes which come with bootstrap so here for example we can change it to dark we can change the color so let me for example show you here so on our navigation bar let's say we want to change the background color to light instead of primary so remember it's bootstrap color so primary dangerous success there's a light okay we also have success so these are the common bootstrap colors that we can add in so you can really play around with it decide what is your preference we also can Center in accordingly our um our navigation items expand our navigation bar set it to a darker color then of course we have the heading here which points to the following URL so when you click here on Project X it seems here okay that is a link since we have a href and that will just go ahead and redirect us to the home page which is the default localhost we also have a button here so essentially when we decide to minimize this here we can of course click on the button and then it essentially will drop down our register and login attribute here now there has been an update with bootstrap so there is something that we need to fix well update should I rather say in based on HTML which I'll get to in just a moment now we also have a div here so this is going to collapse of course all of our links so essentially what happens is if we are in a shorter frame and it is linked down when we click on this essentially what will happen is it's going to drop down all of the items here now naturally it it will still show the navigation links even if it doesn't drop down but if it was responsive it's then going to show in a list here as we can see an unordered list it's going to show our dashboard here and sign out now I've added functionality in here that says if the user is authenticated all right then it's going to show the dashboard link and it's also going to show the sign out link as well so it's going to show the dashboard link and the sign out link okay here but the user is not authenticated so we're saying else okay show register and show the login link here and of course we need to add an end if here to end the statement here so that's the reason why you're seeing register and login because we are currently not authenticated within an account just yet you can also see here we have our links and that refers to the href property so it's all redirecting to the home page as of now so everything that you see all the links that you see will redirect to the home page here and now this is why I said if you're following along it won't have a problem with the final project source code these will obviously be filled out with the necessary URLs that we say in our web app for the register page the login page Etc now you'll also notice something here next to it which is this I class Fafa sign out now this is an icon from font awesome so I've just added this in place here later near the end of this video tutorial I will um explain this a little bit more in detail so you don't need to worry it's not going to show for now um especially on the register and login page here this will only really show if we are on our dashboard and sign out page so this is something later that I will explain so you don't need to worry about that so this is essentially icons from font awesome 4.7 that we can add in Within These eye tags this nbsp is used as a non-breaking space so to give some space so you can see here I've also added in some space for example between register and login I've just added in some space in between just to make it a little bit more clear and that's our navbarrow there now you'll notice that if we try to click here on this it doesn't open now bootstrap regularly updates its source code here so what I want us to do is re-evaluate our base.html so it's a quick fix not a problem you can head over to base.html and here we have our logic now do keep in mind that the minified popper and bootstrap min.js does update as well as jQuery so we just need to quickly update this so you can remove everything here for the moment and like I said this will be in the final source code and what you want to do is we can head over to get bootstrap here so another link here that we're going to add in was the introduction so I'll add this also in the links of the description of this video so what you can do is head over to JS and we can see here the full and latest version here is available so what you can do is literally copy this here on JS and you can paste that in your base.html so it's all in place now you can also indent this to make it look a bit cleaner so this will include the slimmin.js popper and bootstrap so we include everything in here nicely for you so very important go ahead and update that so that you'll be able to actually refresh this and open up and make this a bit more responsive so we now have register and login now available if for example someone was on a smaller device such as a mobile device it's now more responsive so make sure that you add this in this updated one like I said I will add in the links there you just need to go ahead and check them out as you follow through the course so just a quick update there so this is something that you will obviously have to do regularly as bootstrap and moves along Okay so we've got all that in place all right so let's move on so what we can do now is just move this up a bit and we want to now carry on with the functionality for registering a user so you can head over to views and what we can do is also open our forms.pi so that we know what we're doing so here we have created our form and we created earlier so the create user form and the login form as well so we can head over to views dot pi and the first thing that we want to do right at the top here is we want to actually import our form so we have create either form but we can also while we add it import the login form so we can create it in our views.pi so you just want to say from so let me make this bigger here and zoom in no excuse me there we get all right wrong button there so let's Stop This Server from running just for the moment so we have from and I'm going to say dot forms okay so we're calling forms dot pi and essentially we want to add in create user form and login form we want to import that so we can say from forms import create user form comma and then we want to add in login form for now we will have other forms but we'll get to that later on okay so add in those forms next thing that you want to do is create your register view so here I'm just going to say register then I'm going to add in some comments here I'm going to say home page and just add some space so here's register so let's create and set up our register view so we can zoom in here and I'm just going to say def register and I'm going to pass in a request okay and make sure you win that nicely here so what we're going to do first of all is create a variable I'm going to call it form and form is going to house and consist of this create user form so it's going to consist of this create user form which has the username password 1 and password to field so that's going to be linked to this form variable that we create so I'm going to say create user form leave it empty and empty parentheses and now what I want to do is say if the request Dot message is equal to that of a post request I want to go ahead and add in some functionality here so this if request method uh equals post request okay we are checking okay essentially if we're making a post request from our register.html page now this request Dot message equals post okay we're going to check it in the register of the HTML page which we'll get to soon enough and then I will explain what we're doing here in that template when we get to it but let's assume we're making a post request which means we are essentially sending data to our database so if the request is a post request not a get request or a delete request or whatever if it's posted and we're sending data we want to say okay so the form which is equal to create user form I want to then go ahead and post all of that data so I'm going to say request.post I want to post that data if my form is valid so this create user form here if this form is valid no errors or anything like that and it's a legitimate form I want to check that first so I want to say if that form dot is underscore valid okay so if it is valid I want to post the data finally so what we can do is say form dot save so essentially this is posting the data but we say dot save to do that and then what we can do is we can redirect so once we have registered a user we want to redirect to another page so we can say return redirect and here in quotes we can add something in now you can notice here that redirect is not defined so the reason is we need to import that along with render render is already imported so with it's a Django shortcut so we can just add a comma and say redirect and that will allow us to use the redirect function so now you'll see that yellow warning has gone and we can redirect to a page here so for the moment here I want to comment this out okay so just comment that out and we want to essentially redirect at the end to the login page all right so what we want to do now is we want to essentially render this out to our template so our template as we can see here we have a register.html template so this form here we want to essentially render out this username password one and password two Fields onto our template register.html so to do that what we can do is create a context dictionary now make sure it's in line here with your if request method um functionality here so inline you can just say context and you're going to say equals here and that will be equal to an object so a key value pair so you would have form and you would have your colon and you can say Forum here as well that will be your value so this will be the key that we reference in our template and the value of course is based on the form here which houses those widgets such as username and password now what we can do is render this out onto a registrar HTML form so to do that you would say return render and you're passing the request object and then you would just add in that template so it's in web app register.html so web app register dot HTML and then you'll just pass in that context dictionary and I always add in context is equal to context that's what I usually add in you can just say context but the choice is yours as to what you want to add in and this will pass it to the register.html page which we are now going to configure so that we can actually get this data accordingly okay so here I just want to say register a user so it's just a bit clearer so we add our comments in all right so let's go ahead and set up our register.html page so we can open this here and let's set that up all right so let's get started so what we want to do first of all is what we've done before we want to extend the base dot HTML template so we can just say extend so we can extend that markup so web app bass dot HTML like I said remember your curly brace and we can just click outside there and sometimes you just need to press enter twice there to fix that all right now the next thing that we want to do is add our block so remember we need that block content so we can say block content okay and we just wanna go ahead and say n block content here or in Block there we go perfect now we need to construct our register.html template so what we can do essentially is we can go ahead and create a container so a div so I'm going to say div class and I'm going to say container and I want to use some bootstrap attributes so I want to set the background color of my container so the form I want to say BG dash light okay I want to also add a shadow so I'm going to say Shadow Dash medium and I want to set the padding to five so P5 you can also set that to P2 P3 depending on what you watch and the next thing we can do is just close that up like so okay now what we can do next is we can go ahead and add in the rest of the detail so here we're in a form so we can say create your account okay and then we can add a H5 tag and let's say start managing your clients today now this is really up to you what you want to add in um it's really your choice so we're just adding some markup then we can add a line here and a breakpoint okay so let's zoom out now okay and what we can do now is go ahead and actually create an ad in our form so let's add in our form now so I'm going to say Forum method equals to that of a post request and I like to set auto complete to off because I don't like the fields Auto completing adding in um the details okay because it's quite annoying sometimes so we can see here we are sending a post request now that's the reason in our views while we're saying here if request dot method is equal to a post request because we are checking based on this register of the HTML file if we are grabbing in a post request here so that's the reason why we are setting it and how are we setting it okay so autocomplete off as well I just want to go into more emphasis here so when you are essentially creating your form you know that when you go ahead and click in a field the input field such as an email input input field is going to show you a whole long list of all the emails that you've been using that's cached on your web browser now this can be annoying because sometimes it scrapes data that is from a from strange websites so it's best to just set it off of course the choice is yours all right so next we want to pass in a csrf token now this is mandatory for every field that you have in Django so this prevents any csrf attacks or anything of the like so it's essential that you add this in or else none of your post requests will work in the Forum okay next thing that we want to do just to make it easy we can just say form so we're referencing our key so in the views we are passing the form here so the key value pair so we're passing in this value and we are referencing it according to form that's the key and this key that we have here is what we're referencing here and that's going to consist of our Fields such as username password Etc and what we can do is say dot as underscore p and this is going to allow our form to look a bit cleaner and a bit nicer so it's going to give it some styling so you can go ahead and add that in accordingly we will of course alter this later but for now we can keep it like such next we can just add a breakpoint and we will want to add in a button here so that button will pertain to creating a user account so we can say button type so we need to say submit because this will be a submit button we can edit the attribute classes so for example we're going to say this is a button and the button will have the color of the primary color so that's similar to what we did on our index.html page accordingly when we went ahead and set this to button primary okay then we can set the width so we can say our width 100 button block so we're adding it to a block and P2 would be the padding on the button itself great now we can just say create account here very simple we can add info icons later on but this is the basic uh structure that we need okay so we have our Forum we've got that all in place now what we can also do is go ahead and add in some space for for already have an account so what I mean by that is we can add in a breakpoint just blah form and a div and we can say attack Center and within it we can just add in a paragraph tag that says already have an account like so and then we can add in a href tag here and that href tag we can just set that to the URL and here we can put in the login URL but we haven't constructed that yet so we can leave it empty for now so just go ahead and set in the URL tag with the curly braces and here we can say login and for the meantime we can just put in um we can we can just leave it blank for now actually so we have our div and what we can essentially do now is we can just go ahead and ensure that we just add in a break point here and I believe we need to close our body deck so we can add in a body as well so here for the div in the content we can add in a body tag then we can indent everything so we can highlight our code up to here indenter and we can add body right here at the end there we go so we've indented it nicely here so there is our register.html page done of course you can check the source code if there's something you wanted to double check or anything like that so you can double check and see what we're doing here okay so that's our register.html page done so what we can do is head over to our views and we can see we've got that set and ready to go so we can just go ahead and check out this web app.register but before we do that we want to set this up in the URLs so we can head over to our uls.pi okay and here we can set our next route so I'm going to give it the route name of register okay then I want to set the views to register so it's taking in the function name here so the function name is register here now the attribute here I'm going to the name attribute I'm going to set as register as well for continuity and the reason I'm sending it to register is because in my index.html I want us to actually click here or here to go to the register page so that's the reason for setting this up just make sure you add in a comment at the end here so when you are setting up your URLs you must always add in a comma at the end now for clarity we can run the server just to make sure it's working fine okay it's working perfectly fine that's good so what we can do now is open up index.html and if we scroll down here we should have an option yeah on the page here it says create your account and here we can put in register okay now that's going to pertain to what you set to the name attribute right here so make sure you set it to the route name as well just for continuity so it's important that you just link it there so now when we click on the create your account button here okay it's going to send us to the URL of register which is going to help us send it there so what we can do essentially is refresh and if we click here it will take us to the register page and there we go we have the registration page that's set and ready to go so that's how you can go ahead and go to the register page all right now this looks a bit ugly it doesn't look so great so what we're going to need to do is style it at some point but it's okay for now all right now what we also need to do is set register on our navbar so when we click here on all the pages it goes to the register page so as soon as you've fixed that in index.html okay you can close that I think we're pretty much done with index.html for now and for the rest of the video we can head over to our nav bar and we want to look for register there's register so we can add that in plug that in register so just look for the register link here and plug that in so now if we refresh click on register it takes us there now this is going to be throughout the application and we only need to do it once we just need to edit doesn't have bar once and it's going to be across our holding application now like I said this is why it's good to make use of extends and include the base.html include the nav bar and you only do it once that's a great thing all right so we've got that in place so if we set that in the nav bar and we're good to go so we can refresh again go to register and we're good to go right now this registration form is not too bad but it looks pretty ugly the first thing that we can notice here is that it is way too wide this is not good it needs to be a little bit more concise a bit user friendly so what we can do is shrink this a bit so we can go ahead and close the see what else for now and register here we can keep open views we can close that for the moment and what we want to do is add in some CSS so you want to head over to static CSS styles.css and we want to go ahead and set up a uh class here so I'm going to call this dot form layout so we're just creating a class here and I'm just going to say for example border Dash radius I'm going to set that to about 15 pixels and then I'm going to set the width to about 500 pixels which is pretty good that will shrink it a bit and the Border radius here is just going to allow us to have a more of a rounded border on our form and this width here is just going to tighten it up make it a bit more concise so you'll see what I mean in a moment so we've got this in place all we need to do now is add this class to our class you could say so this is called dot form layout and on register we can just append this to our container here on register.html we can append this and we can just simply go ahead and add that in so it's form Dash layout so we added that in now if you refresh okay you're going to see that nothing happens now the reason for this is we need to ensure that if we go ahead and make a change that we actually just refresh and empty our cache so right click empty your cache give it a moment close this and there we go all right so we can see it's looking a bit clearer a bit more concise a bit more user friendly however the input Fields aren't looking great okay this can be improved I mean it's okay but it doesn't look good these input boxes looks very old-fashioned okay so we need to fix that up so what we can do is this style stop CSS is perfectly good so we can use this form layout for all the forms that we use in our application just to make them look a little bit better so that's fine now what we can do next is we can go ahead and make use of a package known as crispy forms here okay so Christy crispy forms is going to help us to make our package our input Fields look a little bit more user friendly per se you can use it for many sort of use cases but we're going to use it just to improve the quality of our input fields so you don't want to install Django crispy forms 2.0 okay it is a little bit different in terms of the configuration with the latest version here so what I'd recommend that you do is install the previous version of the last set so 1.14.0 should be good the other versions are a bit too old so I'd recommend using 1.14.0 this version works perfectly fine so we can install that package so look very carefully at what I do so 1.14.0 and it's crispy forms so what we can do is head over to our console so head over to your console you want to stop your server and you can say pip install a Django Dash crispy Dash forms so make sure it's at least on the same name Django crispy forms and now instead of adding it like that you want to say 1.14.0 so you're going to say pip install j and crispy forms equals equals 1.14.0 please don't install version two you're gonna have problems I know there's some of you that are going to do it just please don't do it just add in 1.14.0 very important don't install two you're gonna have problems and issues okay so just go ahead and install this so Django crispy forms 1.14.0 okay and to just verify just in case some of you accidentally installed to run pip list please so go ahead and run that and if you scroll up make sure you have 1.14.0 not version two because they're going to have issues again I'm going to say it again when you install crispy forms don't install little it like this you need to say uh you need to say equals equals 1.14.0 I'm going to do it again so let me show you say pip install Django crispy forms equals equals 1.14.0 don't put version 2 please okay so make sure you install it like that and double check your pivot list I'll do it again so install pip list set it up confirm is 1.14 if it's two you're going to have an issue okay so make sure you've got that in place the next thing that we need to do is we need to actually set this up so what we can do is head over to our settings.pi file to actually set this up so we can close that and you want to click on settings.pi and what you can do now is you can head over to installed apps now we're using crispy forms so we need to add that as an installed app and that would be called crispy underscore forums and remember to add in your comma at the end right there next you need to set the crispy template pack and we're going to use bootstrap so I'm going to say crispy sorry crispy underscore template underscore pack and here you just want to add in bootstrap for don't add any other bootstrap like bootstraps three or bootstrap five you're going to have an issue again so make sure you do it explicitly like I do it so bootstrap 4. next you want to head over to register.html and what you want to do here is you just want to load in crispy form tags so what you can do is add it above here now you cannot add this to the base.html for some reason the base of HTML doesn't extend the crispy forms package so every place where you'll have to use crispy forms you need to manually add that to each of your templates and you need to do it above block content for some reason so here you need to go ahead and say load crispy sorry crispy underscore forms underscore tags like so so you want to add that in now we need to reference this so what we can do is we can scroll down and here where we say form dot as underscore P we need to load this crispy Forum filter so you can remove the following add in the following symbol and you can just say crispy oh sorry crispy so go ahead and add in crispy now rerun your server so piersonmanage.pyrun server okay there we go and what you want to do is head on back to your application refresh and you can see there everything's looking nice and clean okay so you can see it's looking great all right so we can now see we have a username password passive confirmation everything looks a lot cleaner a lot better so crispy forms really does a good job at making this a bit cleaner now if we say create account you're going to see here we also have inbuilt validation with our model forms so it's going to force us to enter in the required Fields before skipping ahead to create an account all right and that pretty much does it for our user registration okay so don't worry we will test all of this momentarily the next thing that we actually want to do is we want to set up our login view as well so at least we have the basic functionality before we head over to the dashboard part of our application so we can create our account head over to the register page we can also see the route being rendered if we click it here it works go back to Project X go to register it takes us to the right page login is just going to go back to the start but we will figure that out as soon soon as we get the login page all set and ready to go all right so that's the next thing that we want to go ahead and Achieve so we can close the following up because this close this close that close that array so now the login view so what we can do is head over to our views close this up now we will deal with the redirect in a moment because we just need to set up our login view first all right so we need to import a few things so the next thing that we want to do let me zoom in here is we want to go ahead and import the alt function and the authenticate function so the alt function would need to log out out of our account and authenticate function of course to authenticate our users so in the meantime we can just stop our server and right here we can go ahead and say from django.comtrib dot OS dot models import alts okay so that is a function called also all allows to log out next we need to say from django.contrib Dot uh I believe it was Earth import authenticate excuse me all right so this is going to allow us to this is a function that will allow us to actually log out and authenticate to us indicate our users according to a username and our password so we need to import these two functions okay next we can go ahead and set up another view so here I'm going to say how did I do the structure okay log in a user okay so we can start to log in our user here so we can move this a bit down okay so you want to just say Def and you can set your function name so I'm going to call it my underscore login pass in a request object and now what we need to do is similar to the process we did before so we know we have a login form okay and our login form as we know if we take a look at forms.pi it takes in a username and a password so these would be the fields that we would use so we need to set this login form to a variable so what we can do here if we scroll down to login a user we can go ahead and say form equal to login form with empty parentheses so we're assigning that form to a variable next the same thing again we want to check if we're going to send a request now this of course is going to be a post request so we can say if request Dot message is equal to that of a post request if it is what we can do is we can just say forum is equal to login form and we want to essentially go ahead and ensure that we are sending in a post request so we need to say request and we want to set the data to the request of a post request so essentially what we're doing here is we're saying okay so if we are we if we expect a post request of data a username and a password what we want to do is say Okay I want to send a post request with all of the data in the login form and that data for the login form will pertain to the username and the password so I'm going to essentially send a post request based on the username and password from the login form great next what you want to do is you want to say if the form dot is underscore valid colon so here again we're checking if our login form here is valid if there's any errors or any issues what we want to do is just simply say username equals request dot post dot get and within parentheses we want to get that username next we want to say password equals request dot post dot get and we want to get that password okay so we're going to set our username and our password we want to get that accordingly and we want to use those credentials to authenticate our user so we can then say user is equal to authenticate so here we're using the authenticate function and here we can say the request is we're going to pass in a request that allows us to check the username entered sorry and we want to check the password that has been entered okay so essentially What's Happening Here is we are sending a post request we're going to grab the username here we're going to get the username and the password entered by the user then we want to authenticate okay a request where the username entered is equal to the username uh that the username in the database so excuse me compared to the username that has been entered and if the password in the database matches the password that has been entered so that's how we authenticate right so that's what we're doing there so you can take a good look here at our login function so far so you can have a good look and see what we are doing at the moment great so what we can do next is we need to just go ahead and check if the user exists so what I usually like to do is I used to say you'd like to say if the user is not none okay so if the user exists I want to say aus.login so here we can also use Aus the alt function and I want to send a request with a user is logged in next I want to say return redirect and here again I'm just going to leave that as a quote so usually I would say the dashboard so I would like to return to the dashboard accordingly if the user is valid so I can log into my dashboard page okay perfect now what we need to do now is pass in a context dictionary because remember we want to pass over the username and password Fields into our login uh HTML page so what you can do is ensure that by let me actually zoom out a bit more so here on this line here where you see if request.message.post you want to say context is equal and here you want to say Forum as a key you can do the same here again and form so make sure you've got it on the right line and then here you want to say return render don't worry I will zoom in to make it clearer request and here we need to set it to our login page so it's called my login in my case my Dash login so you can say web app dash my login.html set your context dictionary so I say context is equal to context and it's going to pass over to my login.html where we can use the form and output it so let me zoom in for you so you can see so we can see clearly here that we are setting our context dictionary we are going to return that form in our context dictionary on the my lot Dash login page here we're going to get these fields okay so make sure you've got this in place and set it ready to go so that will be our login function here that we need to essentially make use of so just ignore the redirects here for now and we will deal with that in just a moment okay so we've got that part out of the way next thing that we need to do is create our login as our HTML template so we can essentially just close the forums here we can keep the view here because I want to go over it again um yeah so let's open my login okay all right so we're going to do the same thing as we've done before so we're going to say extend so let's see if I can zoom in for current yeah so we're going to say extends and remember again web app forward slash base.html like so so you wanna just add some lines here okay all right now of course we need to use we need to load crispy forums because remember we do have a form that we need to manage now the block content where all of our unique data for my login will be passed in so we need to say block content and you want to say end block there we go so everything that we need That's Unique uh will be in here so we can add that in here accordingly so what we can do to make this easier is we can actually just open up register so the logic is going to be very similar okay and you want to go to register and we can pretty much we can copy just about everything actually you can copy everything in register up to body here you can copy everything add that name okay um you may need to indent a bit Yeah you may need to indent it a bit like so and we just need to update it just a little bit all right so we'll need to do here then is in our login page all we need to do is just update it a bit so we can remove this H5 line here so make sure you're in my login make sure you're not in register and we can just switch this out for login to your account um yeah it's very simple and scroll down and here by the login here okay remember when the login page so let's say a user that doesn't have an account um it clicks on the login page by accident we can just say register here and we can actually we have a register URL so we can add that in as well so here we can say don't have an account and then they'll be able to click on the register a link accordingly and go back if they haven't just in case so make sure you've got that in place here for your login page that's all you really need here um register is perfectly okay um so what we can do now on the my login page I just want to mention something in our views here you have form that's the key now if you want consistency and you want to change it up okay what you can do is call this form two if you want or login form as your key so whatever you state here is your key and your key value pair here you need to State here so if you say form two here you need to say form two here as well okay so just something important to note a last thing we can do here is for the button we can just say login okay all right but remember this is the my login page here but we can go ahead and check it out so that's really all you need here and the last thing we need to do is set up our URLs for this so we can go to urls and we need to Now set the the parts for the for the login page so I'm going to call it my Dash login as the route name now the view I added an underscore so remember I added my underscore login I don't really like to add in hyphens here so I just add in the underscore here for the view so here I'm just going to say views Dot and it was my underscore login now with if using visual studio code it has intellisense so it will pick it up then the name here I'm going to set exactly to the route name so I prefer to set the name value here to the route name exactly so that will give us Clarity so we can call this my login and remember your quote at the end Okay so we've got that in place now now if we run our server so python manage.pyron server we should be good to go without any issues or whatnot okay we're good to go now what we can do is refresh our application is working fine so remember now we have a login URL so like you know the drill so we can add it where we need it so we can close this up and let's see where we would need this so we can go to the nav bar and let's look for log log in so here's login on the navbar here and here we can just put in my Dash login so that's what we stated it should be so this is in the nav bar so automatically on every page we'll now have login so if we refresh we can now click on login and it will take us to the login page here it is nice it's looking great so here's our login page looking great all right so we can see we've got that in place here now what we can do now as well on register so if someone doesn't have an account we can add in a UA link here to the login page so register scroll to the bottom and here we have already have an account for the register page so here we can just put in my Dash login so now essentially what happens if we refresh and click on login here it will take us to the login page and if we click on register it will take us to the register page so we have some basic navigation between creating an account and logging into an account so we have both of that functionality in place I don't have an account register I already have an account log in so we have that option in place there and we've got our nice redirects now the next thing you can do on register is remember we have a redirect so we can close this up okay and we can open up views and remember we commented out this redirect so hereby register what we want to do is we want to head over to our view here so we want to head over to the login page so once we create and register a user we want to be redirected to the login page so we can log in so the URL here I believe was my login so here we can just add in my Dash login and that will take us to the login page once we've actually created and registered a user okay now don't worry later on we will add more effects such as notification messages some JavaScript some icons but those are the non non-essentials we need to at least understand the fund the underlying excuse me uh infrastructure of crud first so we'll get to that momentarily so when we redirect we will head over to the login page and then we can go ahead and log in and once we've logged in we want to head on over to the dashboard page so that's what we want to do then all right now before we go ahead and register a user we want to work on our logout functionality that's very simple and easy to do so we can deal with that so what you want to do is just stop your server for now and we can do that so you're more than welcome to test it out if you want choices at your time we will get to that if you're following along all right so the next thing you want to do is we want to set up our logout view so we know how to log in let's also set out our logout view so that's very simple so make sure your server is off we can then head over to the views and we have registry user log in a user now we can have log out so I'm ensure user is logged out so I'm going to say user logout and we can create our function here I'm going to call this def user underscore logout and we're going to pass in a request object and we're going to use the same function from before so this alt function here allows us to log in and log out so it's very useful so here we're going to say alt dot logout and we're going to pass in the request object there and what we can do then is say a return redirect and we can redirect to anywhere we want here so we can redirect to the login page that might be a good place to go so let's say you want to go back to the login page remember the URL for the login and that was my login here so we can just set that up so here I'm going to save my Dash login and we're going to redirect accordingly to that okay now what I usually like to do as a redirects I like to put double quotes I don't really like single quotes so you can choose what you want to do so essentially I just want to add it in even here for the comments I remember so double quotes instead um that's just what I prefer here um I feel that runs a bit smoother as well so you can switch it out for double quotes in your redirect um if you say wish the choice is really up to you so just keep that in mind okay now I would want to go ahead next and register a user but I feel that we need to complete the call first so I want us to be able to essentially to register login and go to the dashboard as well so I'm being a bit greedy here excuse me um I want us to be able to do all of that first before we actually test it because it's just going to be in pieces and I don't really like that so what we need to do then is we need to start to create our dashboard view so that's the next thing that we want to do we want to create our dashboard view next okay so I'm going to put this I'm going to put user login at the end actually and here I want to create the view for dashboard so the dashboard is a page that will only be visible to use this within an account so if you don't have an account you won't be able to view the dashboard essentially and everything that's going on on the dashboard for the necessary account pages all right so let's get started with our dashboard view so first of all we're going to create a function so I'm going to call this dashboard name anything you want pass in request all right great now the next thing that we want to do is going to be very simple we will add on to this once we set up our models Etc so what we can do is just look at what our dashboard is called so it's called dashboard.html so for now we can just say return render request and you just want to pass it in so web app so remember we're looking in web app here then forward slash dashboard.html so dashboard.html and that's all you need for now what we can also add is a login required decorator to ensure that only authenticated users can access all syndicated views per se so we can head over to the top of use.pi and here we just want to say from django.comtrib dot decorators and we'll say import login required so this is a decorator that I said is like I mentioned before it's going to help us to ensure that authenticated users can only see the views that we want authenticated views to see so we're going to add this onto the dashboard view here so we can say at login required and we want to pass in the login URL so you need to be very specific here and in single quotes we can add in the URL which is um my login so we can see it's my login the route name so my Dash login like so okay so that's our dashboard view done so very simple we will add to it and add a little bit more soon enough but that's all we need for now great so we've got that in place so what we can do now is set out these redirects so let's start from the beginning so we'll be on our home page and on our home page we will be able to essentially head over to our registration page and we can go ahead and log in so once we hit to the registration page here we will go ahead and register a new user based on the username and the password and once we create that account we're going to be redirected to the login page as we can see here now we're on the login page now and we want to authenticate our user based on the username and password that we set up in the registration page so once we've set that up okay we're going to return and we can uncomment this and we want to redirect now to the dashboard okay so we're going to redirect to the dashboard page and we can see here this is our dashboard and we don't have any content in the dashboard HTML page so what we can do is head over to dashboard we can add something there that just says um let's keep this simple we can just say welcome to the dashboard page and you can put here in curly braces in double curly braces you can put in user and that's going to show the user name of the user that is logged in it's just going to say welcome to the dashboard page and so and so you can add some basic logic there for now we will of course go ahead and add in some context for the dashboard now what we can do in the meantime is just get started with the basic functionality the block content Etc so we know we need to add in extend so we can add in the meantime extends and for now we can just say uh web app base dot HTML and we can just have a look at our login page just to confirm that okay we can actually copy that that will just be easier so we can just um copy that in and we need to add block content so we can add that block content and close that off end block okay so you can just double check the functionality that you need to add in there we can also just indent this slightly so we have the basic markup for dashboard.html for now so that's all we need and that's what we're going to see once we ultimately render this and when we get redirected to the dashboard once the user has logged in okay so we can close these up and we can go ahead and move on to the next step right so what we're going to do is just move this terminal up here so it's a bit clearer and what we need to do is we need to make sure we set our URL so something there that we need to add so we have our URLs here now we need to add in dashboards so this is the last thing we need to add before we do our our final testing so we have we can call the route name dashboard the views will be dashboard because that's the view that we set so if you want to compare it you can just double check here so that's the view then we need to go ahead and set in the name here so the name is going to be dashboard so you want to add that in so ensure that it is linked up now once that's set and in place we can of course append our navbar so let's open the nav bar here and we have dashboard now okay so we can add in dashboard for the URL now we do have an icon here in place here now what we can do for the moment you can either keep it in or take it out no it's not going to be shown because we need to add in the font awesome CDN before that will work so we can leave that as is we have the dashboard now later and we can also while we add it add in sign out now as well because we also have that so we need to add in the URL for logout as well so while we're here so remember what we can do here is create a pass and it's best to add this just here that would be best so pass and we can say user Dash logout and the views we can just set that to user logout and the name we're going to set that to user Dash logout just remember your comments at the end so I'm just going to run through this so you can understand so we're setting these route names here are customizable you can decide what you want to set them and also my advice like I mentioned before make sure your route names are the same as the names that you have here so if you go to views you can see here we have the dashboard function so that's pinning to dashboard user logout of course is pending to the user logout function name so that's where we get the views and compare them in our URLs accordingly okay now we can head over to the navbar and here we can put in user Dash logout which is going to pertain to signing out now something I want to mention now is if we are authenticated so we have an if statement here that says if the user is authenticated that's us we will then be able to see the dashboard and the logout page if we are not authenticated okay then we will see the register link and the my login link it doesn't make sense to show the my login and the register link if we are authenticated because we don't need that it's just a waste what we do need is the ability to log out and the ability to go to the dashboard if we are authenticated so just something that I wanted to mention there so we have fully completed now our navbar so that's done we've completed our registration page our login page and the opportunity to log out and head over to the dashboard Okay so we've completed all of that and we've completed the views according to the following URLs so our home page our registration page our login page our log out um URL accordingly and our dashboard so we can close that up run the server now okay make sure you run your server and what we can do now is start from the beginning here refresh you can either say create your account or click on register here so let's say create your account and I'm just going to say manager 1 enter in a password confirm that password and we can say create account account was created because remember we redirected so what we can do now is just have a look what we did so remember again we went ahead and registered and we redirected if it was a success and it was so now we're on the login page so the view here is we're going to authenticate the username and password and if that's a success we're going to log in and be redirected to the dashboard so let's enter our credentials so manager one password login and then this is going to take us to the dashboard and there we go welcome to the dashboard page managed one it is a little bit big I must admit but at least we have that in place we also have a navbar here which is now showing only dashboard and sign out now the reason for that like I said is in the navbar we only set the if authenticated so since we are syndicated we can see the dashboard link this is the link here so the dashboard link and the sign out link that's what we are seeing here now if we were to sign out this statement here if user is authenticated will be invalidated and then the else statement here is going to show register and login instead so if we were to sign out now it will redirect to the login page and we can see we have register and login now now if we were to log in again so manager one okay and sign in okay it's going to take us straight to the dashboard and now it's going to show The Following okay so we can see now we've got everything nicely and in place and we've completed the basic functionality so now we can go deeper into our crud application Okay so we've got the URLs in place all right so we can close these up so we can just compose ourselves for the next part so the next part what we're going to do essentially we need to ensure that we create our model so we're going to create a model and we're going to decide what decide what type of data we want to essentially store right now the next thing that we want to do is we want to manage our data so we want to essentially create a model and this model is going to be based on a record where we can store for example some data pertaining to a customer for example or a client and this may include his or her first name last name email address city province country and essentially what we're doing is we're creating and we're allowing our managers or supervisors per se in our fictional example to create accounts such as manager 1 supervisor 2 to either manage employees or to manage clients and essentially what we want to do is in order to manage clients we need to do some data entry so we can do this based on a model which has a set list of attributes or Fields like I said such as first name last name email phone Etc so to do this what we're going to have to do is head over to our app and we can get over to models.pi okay so we can open this up and I'm going to zoom in okay that's not looking great that looks fine so we can create our model here we're only going to create one so we can remove that comment so we're going to say class and you can call this anything you want now I just want to stop the survey here because it does sometimes get a bit annoying here because we are Midway programming so you can either call it customer client whatever you want anything interesting I'm going to just call it records I'm going to say class record and here I'm just going to inherit models.odel okay and now we want to add in our attributes or our fields so the first one is going to be um when the record was created okay so here I'm just going to say creation underscore date and I'm going to say equals to models dot date time field so you're going to use certain Fields so this will be a date time field and we're going to add in Auto underscore now underscore add equals to true and essentially what's going to happen is whenever we create a record so let's say we add a record or create a record the one of the fields will take into account the date that that record was created that's why we're saying Auto Now underscore add is equal to true because it's going to add the exact date and time when that record was created or when it was entered next thing we want to do is we want to add some attributes or fields that we wish so you can decide what you want to do now generally if you're storing text-based information you're just going to use Char field so usually we'll just use Char Fields unless you want to work with numbers you'd usually use integer Fields Etc but let's stick with trial Fields with simple data so I'm going to say first underscore name and I'm going to say models.tarfield and you need to say the max length of your Char field so I use like to go around uh I'm going to say 100 that's that's fine last name and say models.char feel so the max links you can say 100 okay you never know um then we can set an email so we can say models.char field Max link so I always like to take 255 you never remove the email uh phone number we can add that in as well so we can say phone is equal to models.char field we can say Max lengths 15 say 20. and we have address so that's also something that we can add in so we can say models.char feel so the user address Max lens let's say 300 but Overkill uh City so this is going to depend you can decide what you want to add I'm just going to add it for something that I would know and province so this is very similar to State um just slightly a bit different 200 and secondary models.cha oh remember models is a lowercase and maximinks 125 okay that's perfectly fine so you can add in any sort of attributes that you prefer so I have creation date so when the record is created a first name here a last name email phone address city province and Country now you can decide what you want to add okay now the next thing I want to do is I just want to create a simple function here so I'm going to say def string double underscores on the left and the right self and here I want to say return self.firstname plus and here in quotes I'm just going to add in let's say one two three three spaces so this is a lazy way of doing it and say self dot last name so essentially for each record that I create so for each object I want it to show the first name and the last name of this particular record so this record will be based on a employee or client Etc I want the record in Django admin to show the first name and the last name now I will show you this in Greater detail when we get to the admin page so you can see what I mean by this I will illustrate this so don't worry if it's a bit confusing but the important thing to note is add in the data that you want to collect for your particular record so first name last name email anything go ahead and Vary it remember if it is based on text you need to use the chart our field other words you'll need to look for something more integer based if you're using numbers per se okay all right so what we can do now is make our migration so you want to say python manage.pi make migration so you want to migrate all of this and prepare it so if I open the Explorer what you'll see here is a migrations folder so it will show zero zero one I believe so that would be the migration now make migrations is essentially going to prepare the migrations to be pushed to our sqlite database or a database per se so make migrations prepares it so we first need to prepare our model Data before pushing it and to migrate so we can say pi submanage.pi and make migrations press enter there we go we've gone ahead and made a migration here called zero zero zero one underscore initial dot pi and we created a model called record so now we can head over to migrations and we can see we have a migration file here which is going to list out our records and our Fields our attributes Etc such as ID last name first name phone address city province country Etc now all we need to do now is we need to migrate and push this information so to our sqlite database so here in our terminal let's type CLS to clear this up and we can say python manage.pi migrate so we can migrate our model to our database and there we go we've applied that migration and it's been sent accordingly perfect the next thing that we need to do is we need to go ahead and register this model's admin.pi so that we'll be able to actually see this model and we can actually use it in our page so what you want to do is you want to head over to admin.pi in your web app so here we have our app web app so we can go to admin.pi and here you want to register your model so the model name or the class name per se as we can see is record so remember the class name for your model head over to admin.pi and we can register our models here as they tell us so what you can do is go ahead and register it so we just need to import the model first I'm going to say from dot models so the reason we can say dot is because we're in the same directory here and we can just say model since it's in the same directory and then we can say import and you want to import the name of your model so here it's called record so you can import record perfect and now we can register it so we can say admin so we're using the admin function here by default Dot site dot register and within parentheses you want to enter in record so we now have it registered so now we'll be able to actually access this model and we can technically create a record if we so desired so we can actually go ahead and test it out so you want to run your server now and then you want to head over to your Django admin so run your server let's see okay let's give it a minute all right you want to go to admin your admin page go ahead and enter in your credentials and now we can see the Django admin is working again which is quite uh interesting so go ahead and enter in your credentials so we want to enter that in accordingly right now you can go ahead and log it okay so we are now logged in and what we can see here is our app so it's called web app now that's coming of course from our app name here and then we have our models.pi file and here we registered record which is one of our models and that's why it's called record here now you'll notice here it says s and that's because automatically Django appends an S to it so that's just how it works there so we can click on it and here we can see we have the ability to add a record now and we can see we can add in all of the various Fields so first name last name email phone address city province and Country here so you can add in the necessary details as you wish okay but we can see we've got it registered and we actually have a model in place so just something I wanted to show you before we move on so that you're aware of how everything is put into place all right so we've gone ahead and created our models now that's very important now the next thing that we want to do essentially is before we move on we need to go ahead and add this we want to go ahead and head over to our views.pi okay and essentially what I'm going to do is on dashboard here we want to go ahead and and output all of our objects so we have no objects at the moment but let's actually go ahead and set the logic for now so what we can do at the top here we can go ahead and just say from okay and you'll see dot models import record so we are importing that record model that we have here based on the name so you always refer to the class name that you assigned it that say you refer to that particular model itself now in our views here we have it imported what we can do now is head over to dashboard because this is where we want to see all of our data all the rows of data itself and we want to see it being output here accordingly so here in our dashboard we can just create a variable I'm going to call this my records and I'm going to say equals okay that's going to be record dot objects.org so we're just doing a query here let me just turn off the server and we're doing a query here to select all of our objects so that is the method that we're applying there then we can just pass this through to our dashboard or in our context dictionary so I'm going to say context is equal and here in quotes I'm going to put in for example um records and I'm just going to put in my underscore records here as the value so I'm going to pass through all of the records through to this dashboard.html page and here I'm just going to set the context dictionary to context now you can decide what you want to do there what you want to set the key and the value to you can call this a record if you want or record anything that you wish so we need to pass this through now what we would need to do next is we would need to style and set up a record first of all so what we can do is turn on our server again because we need some data to be output there we go and we can head over to admin go ahead and enter in your credentials so I'm just going to add them in so we had oh no there we go and what we can do now is go to records we can add a record here and I'm just going to enter in some data so I'm going to say John Smith's Smith's at mail.com enter a random number here I'm going to say 42 Street comma Alpine Drive City uh Cape Town Province Western Cape South Africa okay that's fine so enter in a dummy record now don't worry we are going to have a forum in our later on in our functionality where we can add this inside of the admin page I just want to demonstrate this to you we can save that record so we have one record here and it says John Smith here now this is what I meant earlier was the model.pi file so in our models remember I said we are returning the self.firstname myself that last name here now if I remove the space here and save and rerun the server and refresh the page here you'll see now it's now together that's the reason why I added that space just to give it some space to breathe now there are many um string formatting options that you can use to do this I just quickly added this in but you can return anything you want it's better to return something because usually it will just say record the name of the model and then in parentheses it will show one and then it will go up to 1990 you have 99 records per say or 99 objects so just keep that in mind when we are just returning this okay so that's what's happening there so just so you know okay so that's fine so our views are in place now we now need to find a way to actually go ahead and output our record so we would need to head over to the dashboard page so we have dashboard here now it's going to look very ugly the first time that we do this now first of all I just want to change this heading because it's absurdly large and I just want to Output that data essentially so what we can do to make this easy is we just want to Simply go ahead and output what we need here so we're on the dashboard page here and we want to Output the information that we require on our dashboard page so we can just go ahead and say for record in records okay and we can just essentially go ahead and end four so we're going to end it as a for Loop like so and now what we can do is we can just enter out the model data that we had so we know if we click on this record we have a first name last name email phone address Etc so I'm not going to do all of them for now I just want to grab something simple so we can go to the models and let's just output first name and last name for now so here we can just go ahead and say record and Dot first underscore name so this is going to be set to the attribute that you set it needs to be exact so first name and let's do last name for example okay and that's the last name now I'm also just going to return the ID as well so you can see it's the first record at least so we can say record.id now by default Django adds an ID so this is something you won't see in the model it will by default be added in accordingly now we can also just uh indent that slightly so what we're doing essentially is in our views okay we're passing in all the records from our database so we're selecting all the objects so we only have one object here which we are dealing with only have one and we are just returning it the key is going to be records and that's what we're referencing here we're referencing it according to records now since it's a for Loop we do need to have sort of a placeholder that's why we say record and then we're going to say record.id now the dot part here is going to help us to reference the attribute in our models so first name dot dot first name dot last name that's all we have.firstname.lastname and Dot ID like I mentioned is by default Django already setting that as it should all right so we've got that in place now what we can do is test this out so just so you get an idea we can log out now uh log in and we're going to log in with manager one and it's going to show some data that gets output and we can see here one John Smith okay so we can see we are successfully rendering data now of course this looks very ugly we need to of course work on this we need to work on the styling and what we can also do is add in the table here so we have a row which makes this look a bit nicer a bit cleaner so that's something that we can work on just improving and setting up accordingly so let's work on that a bit right so what we're going to do is we're just going to work on the styling here um while we add it so we're going to also Implement a table here so you're more than welcome to go ahead and look for a table that you like one that you prefer and this will help you to go ahead and manage your data in a better way okay now what I'm going to do is I'm going to do it in my own way setting up this table of course you can decide how you want to do it I will add this link here as well from bootstrap so you can go ahead and add in your own table style it customize it and just decide what you want to add into place all right so what we want to do first of all is we just want to make this look a bit nicer so first thing we can do is we can just append to this here A bit so I want to first set that to a H5 okay so remember like I mentioned earlier on um you're more than welcome to skip ahead in because I will add chapters to this video tutorial so you can skip ahead um I just feel this is important because on our dashboard page essentially is where we want to see our data itself um when it builds up gradually okay so we can add in a HR tag here so that's going to give us a line here okay that makes it look a bit cleaner then what we can do is we need an option for a button and this button is going to be to create a record now we are going to fill in the add record functionality soon enough so in the meantime we can just add a placeholder here and get our styling right so I'm going to create a button here based on this link and we're going to set this to a small button set the href we can leave that as an empty URL and I'm just going to set it to dashboard so it's just going to redirect here for now um I will get to the details in a moment and we can just press enter here and here we can just say create a new record and that's all we need for now okay here that's looking fine okay great all right now the next thing we can do is just add a line here we can add that line okay there we go so that's looking a bit cleaner we can also add in an outline here for this button so let's add in the outline so that just makes it a bit more professional looking so when we hover over it so the good thing about outline it comes in with the hover state so if you hover over it it does look it does give that effect now what we're going to do is create a table here so this record thing here that we have here is not looking too great so what I want us to do essentially is we can just go down here we can add some space so under our line here so HR stands for horizontal line which is roughly here what we want to do is we want to go ahead and set up a table so I'm just going to say table and this of course is based on the functionality from bootstrap so you can add it in as you please and we're going to say class table and I'm going to say table light and table hover because we want to have that effect okay we can open that table tag here let's move this down and what we can do now is we can create a table head so I'm going to say t head so this is the head of the table and I'm going to say class table and I'm going to say light for now so that would be the T head and then we need to add in some rows so this is the header of the table we need to add in some rows for our table and essentially we're going to say t t r so T row so this is going to be the row and then we're going to have our columns essentially here so I'm just going to say th scope and that's going to be set that to the column and here we can add in the headings so we can start off with the ID and we can copy this a few times so let's see how data we need to store so we have ID so we have ID so we need 1 2 3 4 5 6 79 okay so we need a couple so it's four five six seven eight okay and we can just replace that with our models so we have first name last name email so let's add that in so we can actually put it as one so we can just say full name so we can save on a row there and then we have email we can keep we need to keep that separate phone address city province address I'm going too fast here so address so this one unfortunately takes some time we need to do it right and it needs to look good first time City uh Province country so we save on a row okay that's fine remove that okay so we have these sand in place so these are essentially going to be our headings now there's one extra heading I want to add in here so that's going to be view because in view here I'm going to add in a nice icon which we can click on if we want to check an independent record itself so I'm going to add something extra here which is view here so you move them welcome to add that in just make sure here that you have your row set you have your table head here t-head and your table so this is what you need for now so let's start from the beginning so we need to extend this add our block content we have our welcome message a horizontal line that's HR we have a button placeholder here we will replace this URL with ADD record once we get to the add record functionality we have a table here and we added some attributes so it is a table it's going to be a light table that has the hover effect the heading will be light here will be this will be a table row with the following column so that's the reason for call we have a column for ID full name email phone address city province country and an extra one for view which is going to include an icon which we can click on to actually go ahead and view our data itself all right great perfect now the next thing that we want to do is we want to go ahead and add in the body of our contents here so we know we have our T our table we need to now add in a body in between so here's the head now we need to add in a body so that will be called tea body so this will be under the rows so we can call this tea body and this is where we're going to actually add in our records accordingly so what we can do essentially is we need to add in a row so I'm going to say TR so we need to add in a row okay and this is going to comprise of our data so we can say TD and that will be our data okay and this is going to show the data and this data will be under these columns so we need to put it in the right order in the right positioning from start to finish so here we have our data right here okay now it's not going to work so nicely because we need to make some changes so for now we can take this out okay and I will show you what I mean so let's move this a bit up okay there we go so what we need to do here under the tea body we need to check if we actually have records so essentially in our views here we are selecting all the records but we just want to double check that we actually have records so in our dashboard we can go ahead and check this out so remember the key that you set here the key is very important so I call this record so what I'm going to do here under t-body is in line with it I'm just going to say if records enter in your colon and write down here at the bottom so I'm going to add this right at the end I'm just going to add an end if statement and that will just be below the body here and if okay so if there are no records we're just going to end okay so that will be in between here and the next thing that I want to do is I want to add in my for loops and now we can add in the for Loop and it must just be above the row and it must just end just at the end of the row so we can now put in our for Loop so remember the key was record so we can say um for record in records so we're doing the same thing we did before and then we can end for after the row here so in the four okay excuse me there we go and now we can add in our data that we had before so what we can do is we can start off very simple and I'm just going to say record dot ID okay now what I want to do now before we con actually we can we can actually just stop for the moment and actually see what it looks so far looks like so here we have our row so far so it's not looking too bad we can see we've got the ID already set and in place here now we can filter in and complete the rest of the data as we see fit so we've added in the ID now remember we have a first name and last name but we grouped in the column heading according to first name but we can add two of these this data together we can match them up together so we can say here under record ID we can just switch it out for a first name and next to it we can just put in record dot last name now what you name here is dot last name and Dot first name and Dot ID needs to match explicitly and exactly what you stated here by your models it needs to be exactly the same now we can also add creation date that was one thing that I missed here so we can add that at the end uh creation date or we can say date join that's also fine they join so just one more column because I over the oversight here creation date anyway let's continue here so we're just outputting so this four loopy essentially allows us to Output our records all of our records individually here okay now the next thing that we have of course is record Dot email and this is going to be a bit tedious so let me copy this a few times okay and we also have phone all right I always like to have a space in between um then I we have a dress okay City province country and we can say date created or whatever we had we had we need to be exact creation date okay that's fine so we have all of our data here and we can refresh and there we have it we have everything in place here now we can see here this looks a bit ugly I mean we need a little bit of a change here in terms of the color which we can actually update here so we can change this color as we see fit so we can update this so we can see here by the T here that we have light so let's say if we remove this HSA if we take this out or we can say table dark for example so we can update this okay so we can see here okay that's not too bad it's at least changing the color at the top but let's say we want it to change it down here let's say we wanted to change it a bit set this to set that to let's take that out actually okay so we can see here it's a little it's now white here and what we can also do is add in a border so we can say table border so this is just a bit of Child's Play here you can just um set it up as you wish okay that looks a little bit cleaner a little bit nicer and we can set this to light perhaps depending on what we wish to see so there we go okay that doesn't look too bad so we now have this light um border right here now we do need to add in a view here so we can add in an icon essentially and that's going to link to a particular record itself okay but as you can see here we now have our data showing here and if we were to create another record for example in our admin for now we will see it under row two so it will show another row here with id2 another name email phone address city province country date join Etc it'll show all of that data in The Next Step all right so that's what we need so far so we can see the basics we've now rendered out our data now for each record it's just going to show under under this table that's why we added this for Loop to then Loop through a new row each time with new data underneath it so that's what's going to happen when we have another row of data another row of data another row of data and it's good because if a manager or supervisor wants to log in for example they can click on the dashboard and then they'll be greeted with this here as you can see all right so that's the basic of what we need at least for now okay we will of course add in something extra here for the view but we've at least got the basics done for the dashboard so we have some sort of functionality in place um at least for the moment so at least this is um in place as it should be okay now the next thing that we want to do is we want to actually learn how we can actually add a record so that's the next thing that we can add in that functionality so what we can do is close this up okay and we can just prepare ourselves so now we want to create a view for adding a record so we can head over to web app views and we can open URLs in the meantime as well and what I'm going to do here is I'm going to say crutch okay so now okay actually cred starts off a dashboard actually because we have reading data it's a good okay so let's just get that right okay now we're going to start with adding a record so we can scroll down here below dashboard okay and in our views here we can just go ahead and add a comment that says create a record or add a record okay and of course we need to copy that logic and we can just switch this out for create record and we can say pause for now this pass function is very helpful if you want to create a view early on but you don't actually want anything any areas or anything to be shown so a very useful keyword that you can add in into place all right so we're just going to keep that view for now because we will return to it so just remember that keyword now what we need to do is we need to create our forms we need to keep on building on our forms so what we can do is head over to forms.pi and what we're going to need to do is we're going to need to create a form that will allow us to actually add in a record so that's what we actually need to do we need to create that functionality per se to actually add in the record that we require so we can give this any name that we wish it's really up to you what you want to call um your Forum so you can decide what you want to name it so let's go ahead and set this up so let's do that all right so let's go ahead and create our model forms so since we are creating the ad record form we might as well also add in a model form for our update record so we don't need to come back to forms again so let's go ahead and set it up so first you just want to go ahead and give your class a name so we can say class add record and you can say Forum if you want that's really up to you so earlier on we have been using from so you can say add record form for continuity and within parentheses here you want to say form dot model form like so okay so we're making a custom model form you could say and within here we want to Simply go ahead and add in the metadata so here we have class meta so essentially what we want to do is we just want to we can actually borrow this logic actually from create user form we're obviously going to change it a bit so what you want to ensure that you have it ensure that it is indented nicely so the model here is going to be from the record so models.pi here we have this record model so we're going to use that so we need to just import that so we can do this up top and we're going to say from dot models import record so remember dot is because it's in the same directory so we can now swap out this model user for record and of course the fields we need to modify so I just want to add in a comment here first so add a record okay or we can say actually create record that's also fine so create record and here I'm just going to say create a record so create record form okay so in terms of the fields here we need to look closely and in the correct order accordingly so we don't need to have adding creation date we can skip that so we can add in the rest here so let's start with first name so in parentheses here first name and then we are going to add and last name so this is going to be a bit repetitive so just bear with me email phone address so it needs to be exactly the same so email phone dress email phone address city province country City province country okay so that's all you need there so make sure that's fine make sure you've got this in place now the update record form is going to be identical to this so we just need to swap it out for updates so it's going to be the same here so what you can essentially do is you can just copy the following logic and just down below you can paste it and you just want to swap it out for update a record now I know this terminal is in the way so let me lower it down so it's going to be the same you just want to change the class name to update record form and it's also going to be based on class meta on the model record and it's going to have the same Fields accordingly just be sure that you exclude the creation date field if you are using the same as me of course you'll need to add in the rest of your records accordingly just make sure you omit it if you're using this date time field there is no need to add that in okay because automatically it will be generated by Django itself so make sure you've got that all in place so we have our record so create record form here forms that model form we're setting the class meta is going to be based on the model record and we are passing in our Fields so we're doing the exact same thing that we've been doing earlier with the registration um form and the login form all right so we've got that in place now what we can do is head over to our views so we can close this up close that up and here in our views where we head past what we can do now either at the top we can just import those two forms so we already are importing from forms here the create user form and the login form so we can switch it out and look for create record form so if you're using visual studio code it will use intellisense to pick it up so we can add in create record form and update record form now for delete we don't need this and I'll explain soon enough why we don't so we can scroll down to create a record now again we're adding in this login required decorator to ensure that no unauthenticated users or users within an account sorry tongue twister there so we want to prevent users that don't have an account from creating a record all right excuse me so what we can do now is do the same before so we're going to create a variable called form add that to create record form then we're going to check if we're sending a post request so it's pretty much the same logic that we've added in before and we can just check if it's a post request that we're sending and if it is we want to then go ahead and say create record form and we want to post all of that data was in the create record form which you can include first name last name Etc next we want to just check if the form is valid so if the form dot is underscore valid we want to go ahead and save that form so we want to send that post request and save the form now we can then say return redirect and now we'll have the opportunity to actually just keep it the same the first time and we're going to redirect to the dashboard so usually when we make our updates we want to redirect to the dashboard so we can see the change overall in all of our objects great so we've got that done now we need to set our context dictionary so in line with your request of method post say context equals n was in quotes we can set our key value pair so the key is going to be form and the value we can set to form as well so we're just grabbing it and this is going to allow us to Output those fields into a form next just below context we can say return render and passing the request object and essentially we want to say web app forward slash and let's see what the name of that file was so on the templates we have create record so it needs to be precise so we have create record.html so it's exactly the same and you just want to pass in the context there say context equals to context okay or you can just put context on its own if you want this is just a preference that I'm using you can just leave it as context like that choice is yours as to how you want to proceed all right great now we can just go ahead and add this in to our create record form so we can move create record here and we can just add in the functionality here so let's add that in so let's zoom in here so make sure you're on the create record HTML and first of all we just want to go ahead and say x and say extend so and in quotes here we just want to say web app forward slash create oh sorry excuse me base.html excuse me it's getting a bit late here and you just want to extend that accordingly okay that's fine so we're extending that now we will need to load in crispy forms again so just a bit of repetition here so you want to load crispy forms tags okay that's fine and now we need to add in Block content so this is the unique content that we're adding and you want to end the block okay there we go so there's our basic function in our team place now within our block content here what we're going to do is we're going to add in the similar logic from before so if you want to save time you can head over to let's say the login page for example and we just want to add in this basic structure and functionality here you don't need to add everything and you can just add up to you know we can just use for example we can add body we actually don't need body actually we can just use let's have consistency let's add body up to we can say up to the form so you can just use that up to the form so on the my login page you can just reuse this code here and go to create record then you just want to close off your div and your body first of all because we didn't have that so you want to close off your body tag in the div and you may want to indent it a bit so we're just basically using form logic now instead of logging to your account we can say create record you may want to add a little bit more here just to make it a bit more concise so you may want to say start adding in the required details for your record okay we can keep the same structure here we can say foam crispy that's one way you can go ahead and do it we can update that later and here by the button submit you can just switch it out by saying create account okay so that's all you need to do there so if I make maximize that all we're doing is we just switched out the button name for create account we're also passing in the form here it's going to use crispy forms and we're going to keep it like so for the moment we will make our updates later but let's just keep the basics in check for the moment at least okay so we've got the basic functionality so just to iterate so the key here is form based on create record which we're passing to the create dash record HTML in the create record.html we are just passing and referring to that particular key now like I said before you're more than welcome to change the key uh here and change it here for continuity if you wish all right so that's all for this part here now we can head over to the URLs and Link this create record um HTML accordingly so we can go ahead and Link that up so I'm going to say pass and I'm going to call this create dash record as the route name then you can just specify the view so the view is create record create underscore record so views.create underscore record enter in the name and like I said it's best to name it the same as your route name so you can say create record and there we go so we've got that now in place so now we'll be able to actually create records in our application so what we can do now is we can just ensure that we set the location now so create records in place so we can close this up here and even the view so now we want to go to dashboard and we need to ensure that when we want to create a record here you'll see that we added the option at the top so let's say we run the server so let's run our server here in the terminal so we're running the server it's on and let's say we just refresh the page okay now we want to add in the link here so the link here create a record just goes to the dashboard and the reason for that is because we set the default URL as dashboard but remember now in the URL so if I go back there we set that to create record and the name here as well so you want to copy that and just replace that like so create record so now if you refresh you can see here in the bottom left it says create record so if you could click on that it's going to go to a page here where we can create our record as we see fit now I know it does look a bit ugly here we can add in some spacing and make use of crispy forms to a greater extent but we just want to get the basic functionalities done and then we can do all the fun stuff so essentially we can go ahead and create a record as we see fit so let's go ahead and do that so I'm just going to say here Jane um let's say Jane I don't think I've uh surname here Linus minus mail.com uh enter in a number so sad whatever and I want to say 54th Street snow cone F and I'm going to say Johannesburg casting South Africa okay then when we create the account so according to what we said so if we go to our views okay when we create the record we're going to redirect back to the dashboard if this process was a success so if we create the account now we're going to go back to the dashboard and here we go you can see we have our second record in place now on our dashboard as you can see here now the next thing that we're going to have to do the next set of things that we need to do is we need to actually go ahead and update our records delete our records and to do that we would need to essentially view it so here we have an option for view now that's what we need to work on so we would need to be able to actually view these records and in that process we would need to update the record as well that's something that we're going to have to work on essentially so let's move on to the next set of steps so let's do just that so what we can do now is we can see the views working fine dashboards in place here so we don't need to add anything to the dashboard except for an entry point for the view that we need to add in so that's something that we'll deal with soon so let's move on to the next set of steps all right so before we can go further it would be best to create a view and set up our update functionality now we will test it soon enough but we do need to do this before we can advance further so what we can essentially do is we can head over to our application and let's just clear everything here let's just start from scratch here all right so we have our server here we can just stop that so Ctrl c will stop it now we want to create a view for our function so we know that in our web app in our forms we went ahead and created a for uh excuse me a model form to update our record so update record form we already tested and made use of the create record form for creating a record so as you can see here we have that second record that was a success now we need to be able to update records and essentially we want to view singular records so we'll click here essentially in the spaces here in order to actually go ahead and actually click on this record here and click on this record here so if we want to view this record we can click there it will take us to a link where we can view record with the ID of one and view record was ID of two Etc and we can go into greater detail as we see fit but let's update the record now so we can go to our views here and just move that there and as you can see we've got the create record part done we've got that in place now what we're going to have to do is we're going to have to create a a we need to create another function and this is going to be update a record so the comment here will be update a record and we're going to add in that functionality here so first of all we need the basic structure so we can just literally copy from here and paste that down so again login required my login so you would need to authenticate yourself if you want to log in and this will be called update record so if you want to update a record we can say pass for the moment okay so by updating a record we need to make use of a dynamic URL now we will get to this Dynamic URL in just a moment so just bear with me so what we can do is we can ensure that we have this pass keyword here so that our view is a valid View for the moment make sure your server is stopped and we can head over to the URL because we need to do this at the same time so that you can understand what we're doing so essentially what we need to do here is we need to ensure that we update our URL so that's something that we need to ensure that we add into place so you need to say pass and then you can say update dash record okay so that's fine for the rec for the route name for now but we need to make this URL dynamic because we need to know which record we want to update so essentially as you can see here the aim here that we want to do is we want to be able to click here on a link for example and that link is going to take us to another page okay where we can view okay a record such as John Smith's for example or we can view a record such as Jane Linus okay now essentially what we will do then is we would need to update based on this ID so what we can do is we can go ahead and construct a URL which will allow us to actually go ahead and set this up accordingly so we need to ensure that we set this up so that we'll be able to actually view it okay so what we can do is we can go ahead and just make this a dynamic URL by adding a forward slash so be sure to add in a forward slash and then within angle brackets we're going to say int because we're going to pass in an integer so a number so the record number and PK just like that okay what you can do is also add in a forward slash at the end if you wish I prefer not to so I'm just going to keep it like so then you want to add in the view now the view we have is here called update record we have an added functionality yet so we can just say update record and then the name here okay you can go ahead and add in and I'm going to set that as the first part of that route name just update record that's fine you don't need to add the dynamic part to the name and just add in your comma there at the end okay so this is going to be our pass our URL for updating a record now essentially what's going to happen is when we decide to update a record what's going to happen is it's going to take in the the URL it's going to have for example let me take this out it's going to have update record and here you can see five so for example you want to say update record One update record two okay and we want to update pertaining on the record ID that we click so we click on ID and we want to update based on that record that we want and then we're going to take that so it's dynamic because here by the PK part here this is going to house that particular value of the ID that we have which is going to serve as a placeholder or marker to tell us which record we want to update so if we want to update this this will be one for example and that will sit as part as a dynamic URL in this logic area here and two of course we can switch that to two and that's going to show right here accordingly okay so that is how this Dynamic URL is going to work now it will make sense soon enough so not to worry about that so now to the functionality so let's assume to ourselves that we've put in this URL here and we're saying update record two okay then in our view once this URL gets checked in when someone's um types it in for example I'll in our view we can go ahead and grab that in our update record along with the request we can grab it and say okay I want to grab that PK and that PK which is primary key is going to refer to the ID that was passed here in this Dynamic URL so it's going to grab that ID so once it grabs that ID we can perform some functionalities with it so what we can say is let's say um let's say for example record is going to be equal to the record of course the object and we're going to say instead of objects.org we want to say objects.get and we want to get the ID based on the PK so the PK essentially as we can see excuse me the PK as we can see here is essentially going to house the ID so we're going to pass the ID here that we have of our individual records here pertaining to a user so essentially what we're doing in our views now is we're saying okay I want you to look into my record model and I want to get the ID okay from the database that is equal to PK which is based on the ID that we sent here in the URL that's what I want to collect okay so that's what we want to go ahead and collect okay so essentially we want to grab that so once we've got that ID that was requested we can then say form equals update record form so now we're doing the usual thing we did before we'll be all grabbing in that form okay and then within that we're going to select an instance and that will be that record so essentially what I mean by the instances I want to get a particular user record so let me turn on the server for the for one minute so you can see just give me a moment and let's refresh so you can see here I want to get a particular instant so we can count these as instances one instance two instances based on what I say here in the top when I say update record um I want to get instance one so essentially I want to get id1 or I want to get id2 so that's what I'm doing here I'm saying form okay I want to get uh I want to pre-load the form based on the instance of the record that is selected or entered in the URL and it's automatically going to fill out that form with the necessary data okay next what we need to do is like normal we're going to say if the request let's turn the server off now so we don't need this anymore we can say if request Dot message okay is equal to that of a post request what I want to do is I want to say forum is equal to update record form and here we're just doing the basic logic we're going to say we want to send a post request based on the information of that particular instance so whatever I updated on that instance I want to send a post request as all that data so whatever I updated such as the first name the username whatever I updated then I want to check if the form is valid so this is basic stuff that we've been over so just to make sure we don't have errors so if that form is valid we're going to say forum.save and we can just say return redirect and we can redirect to the dashboard page once we have updated our form and then essentially remember here in line of your request.post remember you need to put in context and the same functionality as before we want to set the form to the form so the key value pair and we want to return render and send the request here to web app and remember this will be on update record so on templates we can go to update record and we can paste that into update dash record HTML pass in your context dictionary like so so you just want to pass in that context dictionary that we added in here okay so a bit of repetition here in place all right so make sure you've seen that now I know this update functionality can be changing for some of you but I will go into extra detail and explain it again so you don't need to worry I will come back to this Okay so we've got the views here in place so that's all set now what we can do now is head over to our update record HTML we may as well open up our create record.html as well because we're again going to copy some logic here just to forms and what you want to do is you just want to we're going to use yeah we're going to use the same content here so extends web app forward slash base HTML load crispy forums tags block content same piece as a basic functionality end your block okay just like so and what you can do is just add in the basic functionality that we have here so our body here we can just copy the same thing this will be quick quick and you just want to swap out the heading here so you can just say update record now I would love to go ahead and inherit this from another base.html but unfortunately we can't do that I mean we can but it'll be messy so what I recommend you do is get creative you know try and innovate and find a way to prevent us from copying here again so that would be quite a cool thing for you guys to figure out as a side project so here we can say update your record down below okay everything's fine here we can just switch out the text here by saying update record and it seems therefore create record I said account so we can replace this here by saying create record so just be sure to set that up correctly here so it seems I said create record so you want to say create record instead of create account so just keep in mind of that text there that you can just go ahead and set up accordingly Okay so we've got that in place update record in place so that's um in place and nice running just be sure you end your block as well that's very important make sure you've got your URL in place and that you've got your view also in place accordingly all right so that's so you can go ahead and set the functionality for updating a record now before we can go ahead and test this update record we need to be able to essentially view a record here okay now before I add in a nice icon here we're just going to do it the manual way and I'm just going to say click me so something very simple so a link to go to these particular objects you could say so these particular objects we will need to add something like that in place so let's go ahead and simplify this so let's close these up and let's just gather ourselves and get ready for the next part so now we can just add in a link that will send us to a singular view so that's the next thing that we want to essentially set up so we can go ahead and create a view for that so we'll make it very simple so we can go ahead and click on views here and we're now going to copy the comment and just down below we're going to create something called read or view a singular record so we can say read or view a singular record and we're going to we're going to use the same functionality again here so we can use that okay and we've got this in place here perfect and we can just say pass for now so again we're going to have to create a dynamic URL so what we can essentially do actually what we actually need to do I don't believe we actually need to do that yeah we don't need that Dynamic our URL what we need to do is ensure that we add in the ID to our dashboard so we can actually go to that page so I'll show you what I mean so here we can just say all records we can filter through all the records and I'm going to say record dot objects dot get ID based on the primary key so that is going to be based on the ID that we have selected here so I'll show you um what it will look in just a moment so we can just Bear Just Bears me so we can say return render request and this is going to be on web app and this will be view Dash record.html and you want to pass in your context dictionary so another way that you can do this instead of passing a context dictionary you can literally put in that key value pair manually so what I mean by that is you can put in here a record and you can just say the value here such as all records okay you can add it like that but that's a bit of a Messier way it's a bit disgusting in my opinion keep it clean and just say context and rather uh copy it like that I mean that's a bit better and then say context and you could either say like I said context like that which I prefer or just context on its own singularly so make sure you've got that in place and what we can do next is we can ensure that we set this up and output it to a HTML file and what I'm going to do then is show you how this Dynamic URL comes into play so we can do that in the moment so we can go to view record so now we have View record.html add that there and now we can just add in the basic functionality that we've been working with so it will be a bit different this time so what we're going to have to do is we're going to have to add extends of course so we're now in view record.html so we want to say extends in quote so we can say web app base.html and close okay and then block content like so and you want to say n block okay so this is going to be a little bit different because we're going to add in a card so we're going to add in a card here to make it look a bit nicer so earlier on we made use of a table so as you can see if we run our server and go back to our dashboard and let's go to our attachments refresh keep forgetting that so if we go to our dashboard here you can see here we used a table but what we can also do is we can make use of a card in bootstrap that's something else that we can look at and actually Implement accordingly all right so let's build our view record.html page so what we're going to be using is based on the cards option from bootstrap again like I said I will add the link in description below so you can go ahead and check out check it out now we can see here a few examples of some cards here along with the code along with it they explain of course the body part of the card by referencing cart Dash body if we want to start off with a card we need to set our class we can also go ahead and add in an image if we wish that's something that you can add in a link we can also add a description a title we also can add in a body here which is the body section here which includes encapsulates the title description which is under the paragraph tag and a button so that's all encapsed later down here you can also see the types so of course we know we have the body we can add in a title text a link Etc we can also add that in as we see fit all right I won't go into too much detail with this here or else we're going to be forever but I will attach the link below so you can go ahead and read more about it as you wish okay so let's go ahead and set this up so we can head over to view record and here within block content we want to start off so first I'm just going to say div class card so we're going to keep it very simple here and we can indent while we at it so it's best to indent early on so your structure is perfectly set as it should be now we're going to say div class card body so we saw that card body attribute earlier on so we're aware of what that is and what that entails so in card body we can go ahead and set everything up so what I'm going to do is add in a paragraph tag and also the strong tag here and that's going to allow everything to be bold so I'm going to start off with the ID and what I'm going to do here is I'm going to pass in that record dot ID here now we don't need to add in a for Loop or anything and the reason for that is as you can see here we're just passing it directly based on one particular instance now we are going to have to go ahead and create a dynamic URL for this as well okay there are some ways you can pass away the Dynamic URL you can cut throughout you can cut it off but in this case we're going to need it unfortunately and I think it's easier for me to show it to you so you have a clearer understanding of passing in Dynamic data okay so we'll pass that in we can also add in additional information so let's go ahead and add in the email so there's a special way in which we're going to pass in the first name and the last name um so you don't need to worry about that just yet so we're going to add that in so we actually need to add this in between excuse me so we want to add this in between our paragraph tag so let's do that okay so the strong tag is for the we can say the ID or the email here and right next to it we'll have the email and the ID yeah that will be the logic so we can use that and Logics throughout here so we would also have the phone so we can put in phone you can put in phone number if you wish and then here we have record.phone so remember that what you put here needs to be according to the model so again just to remind you make sure that you set it accordingly to how it's stated here so first name and last name we'll get to in a moment but for example email phone Etc it needs to be exactly here as specified so the dot and after that the dot attribute so after dot okay we need to reference the attribute exact so email id id by default will be dot ID so you don't need to worry about that since that's passed in Django by default but dot email DOT phone here needs to be exactly as you see it here so we're just referencing the model attributes or Fields depending on what you want to refer to so just keep that in mind so we can add in the rest so we of course won't have the following so phone and then we have address so we can say address okay City province country and then the last one we can add in is when it was created so that last one is creation day so we can add that in here so creation date so here we can add it okay there we have it and we've got our div and this is going to be all part of the cart body and our cart there now what you can also do is um just below the cart here itself you can go ahead and add in some data for the cart head now what you can do is you can essentially go ahead and just add in a strong tag for example right above the cart body and we can add in here the record DOT first name um what and you can add in the last name as well that last name now what I like to do is I like to invert this I like it to show last name first and then the first name like a registry so we can switch this out for last name if you wish you don't have to do this if you don't and I like to use a filter known as upper here just to capitalize the last name and keep it first name so it's shown as last name in capital letters and in the first name afterwards so typically when you're looking at a lot of Registries and documentation a lot of the time you're going to address a client or an employee or user Etc by their last name and then the first name usually the last name will be in capital letters and then their first name after it so just uh something extra just to note all right so we've got that in place here so we've got all of that now before we carry on with this view record we need to add a few things I just want to at least show you what we're doing so you at least have a concrete idea of what's going on here because we're just coding a lot so let's go to the URLs and we need to create a dynamic URL for this so we can see uh the views here so the views we have update record we are passing in a dynamic your uh Dynamic value so essentially what's going to happen now is when we click here on view okay we're going to go to Let's remove we're going to go to record and one or record two so very similar to update record or record five or record three or record two that's what we'll be going where we're going to go to so that's what we want to do so to do that we need to create a dynamic URL here so it's going to be the same as update record except we're going to have a small change so I'm going to call it record stop the server and here we're going to put in int PK says the same logic the views is going to be sent to what we had so here we called it update record let's just swap that out for a different function name let's call this singular record okay so you can swap that out and this is because we want to view one record at a time so here we can just say singular record name equals and then here we can put in what shall we put in here so we can put in record that would be best so we can put in record here so that's going to be for a singular record so make sure you just change that function name there accordingly for what you have and you just want to ensure that you've got this set and ready to go so again we're going to pass in that URL we're going to put in record and we're going to put in that value here and then in the views here what's going to happen it's just yeah that's fine we're gonna grab that value we're going to then do a comparison in our database and see if the ID is equal to the ID that's placed in there and we want to get that particular instance and then go ahead and render it out onto the view record page all of the data associated with this individual record that we are getting now the trick is now how do we actually get to the view record here so we would need to go from the dashboard of course so we can go to dashboard here and what we can do here under view so this is the last column we can go ahead and just under record creation date we can just put in TD and here we're going to add in some functionality which will allow us to go to the designated page so that's what we want to do we need to add in um this bit of functionality in order to actually go to that page now what you're going to want to do is add in a link to a href and you can just keep that max out and here you want to add in the URL so it's going to be very specific going to say URL and in quotes end that up so in between here in the single quotes let's move this like this we want to go to record here so you're just going to refer to the first part of this record so you're going to add in record and then what you want to do is you want to pass in the dynamic value so here by views where we have PK what we're actually getting is essentially this part here so essentially when we want to say record that's what we're doing for the moment so at of this moment we are just adding in the URL record now next to it we need to put in that Dynamic URL so this is going to be based on ID okay so we need to pass in the ID here so to do that we can just see that We're looping through this data so for each one of these here we're going to show that unique ID where we can go to so we can just put in next to this this record ID here and we can literally paste that in here but you'd want to take out these uh curly braces here you don't you can't add this in you just want to have record.id and that's what you want to pass through now what you can put in the text here in your a tag here is up to you so you can for example say click or view record or um click here or click me we can keep that simple for now so you can add in what you need there run your server so let's just give it a moment okay and now if we refresh let's go to dashboard now we can see now we have option here that says click me and if you've seen the tool tip in the bottom left corner we can see we are using this Dynamic URL that states the record and one and two and that's pertaining to the ID that we have here so if we click on this it's going to go ahead and let's click on it it's then going to go to as you can see here Smith John here and it's going to give us some information about this particular user as you can see down below now if we were to head on back and go to click me here it's going to show uh Jane Linus and if we go back of course um Smith John okay so this is how we are passing it through so this is how you can view the record itself so if we go to our views and take a look again so I'm explaining it one more time here so in our URLs we're creating a pass here the route name we can see is record so that's here and then we're passing in that Dynamic URL with the ID so this is this placeholder here we are calling this view here singular record so we can go to the view we're calling singular record here we have the request the primary key here we're grabbing that primary key which is a placeholder for the record ID and this is this part here we're grabbing that and then we want to so essentially one here is technically PK and then what we're doing is we're performing a query here to check our record our database in the record model and we want to get the ID based on PK so the ID that we're passing through is one so essentially ID is equal to one so we're going to go ahead and grab that particular record okay that says one and that record that says one is essentially this one here and that's why we're updating it and rendering that data in view record we're outputting that particular data as you can see here we're rendering according it to ID email record phone we can see I the email phone number and that is being output when we click here we can see it's being rendered out accordingly now you'll notice here that we have it set to phone number now the reason for that is we just need to change the text here so we have phone we can just set this to address okay excuse me you can set that to address we can set this one to City so that's just something you want to add in I just wanted to show you how to render that data and we have province and we have country and we have creation date okay so we have all of that data there in place so if we refresh we can now see it's all there set and ready to go so just keep in mind you just want to change that text there that you have you just want to add that text in okay so just give that a change there so we can now see it set so I'll just copying it just so we can get that data being output accordingly all right so that's how we can work with this Dynamic data and that's how we are essentially making use of this view okay great so essentially what we want to do is head over to the dashboard and whenever we click on this record okay we want to be able to then based on this URL we want to go ahead and make some changes so let's say we want to for example update the record delete the record or go back to the dashboard we want to have some options so some buttons on this page here now essentially this here is linked to the view record.html page here so what we can do is we can add some buttons um right at the bottom here so that's what we want to do next we want to add some buttons so what you can do is look for a nice place where you want to add them um it's really up to you when you want to do it I would recommend that you add the buttons right at the end here so just after the div on view record so you can just add in a breakpoint here and what you can do is essentially create a link here you can carry a set of links so I'm going to say a href and the first one is going to set a URL to the dashboard so I'm going to say URL dashboard and I'm just gonna set that there then we can set the class here and this is going to be button secondary and it's just going to say return for now okay so very simple what we can do to add some space you want to use this at in bsp so non-breaking space and you can just add some space now we need about two more buttons so one more for update and then for delete so we can add that there so just add in your non-breaking space in between next we want to head over to update record so remember we have update good and for now for delete we can just keep that on its own we're going to leave that as it is and just say delete we're not going to set the URL because we haven't added the delete functionality but here we can say update record in the meantime and we can change that button secondary to something like button info and delete we can say button uh danger so that would be red now the thing here I want to mentioned was the update record pile is you can see we need to go to the URL so here again we have a dynamic URL so we're saying update record here so in the view we have it we have update record and then we need to pass in this Dynamic variable again so essentially what we're doing is let me show you for example let's refresh the page and we can see here we need to add in that argument so that's what I wanted to mention so let me add that in first so I wanted to add that after but it's fine we want to add in the record ID so you can say record dot ID that's fine so add that in and then what's going to happen if we refresh now we can see it okay well I preferred that before but fine so here we'll be able to update the record delete it which we'll get to end returns if we click return we'll go back to the dashboard we can click on back and we can see this will be on each of the pages as you can see here now as you can see here on update record in the bottom left you'll see the tooltip it says update dash record forward slash one and that's exactly what we see here in our URL here so we have update dash record forward slash in so this is a dynamic part of the URL so if we scroll up and move from singular record to update record we have the same logic here so essentially what we are doing is we are going to pass in the record that's on this page so we're going to pass in record one here okay and we're going to update the record and go to that URL which is update record and we're going to take in according to that ID that we have captured so it's going to take in the record ID of that particular record that we are viewing so if we're viewing record one here it's going to take in that idea of record one and it's going to pass it through to this link here so we're going to pass the route name and the ID of this particular record that we have and this is record one and then it's going to send us to the update record page so if we click on update record it's going to take us to the update record page here where you can see this URL which is update dash record forward slash one and it's going to take us to that page according to this Dynamic URL that we made up so that's how it's going to work it's going to grab that data and you can see here if we go to the dashboard and go to Jane this is going to be number two so that means if I say update record for example it's going to take us to number two here and the reason it got number two is because it figured out the ID that was rendered of that particular record because when we clicked here it took in that particular ID it configure which ID is pertaining to that user okay so I feel that should make more sense now so you should understand now the difference between this update record and the record that we have here for viewing so the singular record part so it should be a bit more clearer to you as to how these are working and what we're doing so this PK part here this can be named anything you want it's technically a placeholder for the ID that we are passing in our URL okay so that should cover it what you're trying to understand all right okay so what we want to do now is we can just clean this card up it's kind of annoying at the moment so let's just close everything here and keep view record open so I just want to clean this up so essentially was the card here we can add in a an HR Tang as well okay that makes it a bit cleaner and what we can also do to make this a bit nicer is we can just find a way to indent that a bit as well we can see our mpsb so that's something you can add so that will also just move it a bit slightly you can also add a double one if you wish choice is yours as to how you want to go ahead and set this up you can also add in a breakpoint as well so you can just add in your own form or method of styling as you wish and you can see here that does that's not too bad but it does bring out this bar so it's not something that we need we can just you can really just play around with this depending on what you want to do okay now we will fix this later just to make it a bit nicer but it looks okay now at least we have a line it looks a little bit decent so we can update the record and we can test the update record functionality so according to our review now so if we head to our view update record if this is a success we'll return to the dashboard with the update so here this person is Jane so let's say it was in Jane let's say it was Kate and we want to update the record so if we say update record it's going to come back and we can see there was an update of Kate Linus here and that change will in effect and we updated that record successfully so we can see that's working nicely in the update working nicely and the singular record view is also working great now let's say we want to delete this record so Kate Linus we want to delete this so if we go to click me we want to say delete and once we delete it we want to return to the dashboard page and we shouldn't see this anymore because the dashboard is a place for showing all the records so as we can see in the dashboard it we're using the the dot all method here to get all the objects so if we were to delete an object here it should disappear from the main view since that is rendering on the dashboard.html page as you can see so what we can do is essentially delete this so let's do that so let's add in some functionality so the delete function is very simple actually so all you'll need is a URL the URL and the view so we can start The View so right at the bottom here below reading a singular record we can create a new view and I'm going to call this delete a record and let's set up that functionality so what we can do essentially is borrow again so stop the server first of all we don't have issues and just remember to change the function name I remember it a bit too late right we can just call this delete record is fine just rename that we don't need we actually do need this so we need we're using a dynamic URL again so what you want to do is just say record for example create a variable say record .objects.get and you want to use ID so we're getting that value again via Dynamic URL and you just want to use the delete message so record.delete that's literally it then you want to redirect um to the dashboard okay so I want to add the double quotes in here and that's all you need really all we need to do now is we need to set that URL um and you can go to the URL and here you can say pass and it will be delete record dash record and we're going to add in the same functionality here so we're adding that Dynamic URL again so I'm gonna add that in views dot delete underscore record so for My Views I always add in the underscores for my routes I add in The Hyphen it's just my preference there the name we can just use the start of that route name which was delete record and add that in double quotes remember your semicolon at the end your comma at the end excuse me and we can see we've got that in place so I can explain this again so what we're essentially doing is we're going to be able to delete this record from The View so we need to go to the view a record HTML and if you scroll down here we can now add in that logic so we're doing adding the same logic here for update but accept of update we're going to say delete record and we're going to do it based on the record ID of that particular record that we are standing on and we're doing the same thing here we're passing in the URL based on what we are viewing grabbing it and deleting that particular record and once we've deleted it we're going to return to the dashboard so to be clear let's run the server give it a moment okay uh refresh the page let's say you want to delete this record keep the ID in in check the ID is 2 K minus say click me and here we have Caitlin this is and if we say delete record you can see in the tool tip in the bottom left it says delete dash record forward slash two so it's picking up that particular record ID so the ID of this current record it's outputting so we're grabbing that particular ID of this user which is two so it's on that page and then we're going to check if it's in the database if it is we're going to get that record and we're going to delete that record from our database and redirect to the dashboard so we'll head over back to the dashboard itself so what you can do is you can say delete here and there we go it's gone we've now been redirected to dashboard and the record is gone so we can see that in our dashboard if we go back up okay that record was deleted from our list of all objects so that object is gone we're rendering all the objects we have and we only have one because the record we had before is now deleted and it is gone in fact all right so let's do a quick run through Let's test the whole thing again so let's create a record and let's just add in some detail I'm going to say here um should I say n it's here and and mail.com and I'm going to say and 54th Street now just keep it simple city-ish and take Cape Town again just in Cape South Africa create record so now let's create record not account so just excuse me for that earlier there we go and could see it we've created a record so we've created we've done crud so the theme correct create we're reading this technically so we're going to read it through the dashboard all the records and if we say click me we're reading again through crud so now we're still reading now let's say we were to return let's return great you can click and let's say we wanted to update this and instead of that could see her here we're going to say her surname is uh can we say [Music] um and we can say update record and Alvera and we can say click me and we can see that update was also in place so we've now able to update our record so we've done create so the scene crud are reading we've done that update we've done that now order to delete so we can say delete and there we go she's gone from the database now great so there we go we've achieved the basic functions of crutch so let's go ahead and test the rest out so let's sign out now sign back in and see if that data still exists if it still persists log in and there we go the data is still there we can click here and we can see everything's working nicely perfect so there we go we've got crud in place now that's pretty much it for our application but however this does look a bit ugly just click me button and I'm not happy with this card it looks pretty bad not really liking it um so we're going to update a few things we're going to add in some icons we're going to add in some JavaScript so stay tuned for the the next set of parts I know it's been a very long and strenuous crash course you could say of course per se but we are going to add in some extra things because it's not good enough just yet all right so what we can do is we can close everything up here take a break for a few minutes if you wish and then what we're going to do is get back into it and we are going to just add in some font styling so I think the next thing that we can look at is we can add in some fonts we can just fix it up a bit add some icons and then to sum it up we're going to add Django notifications then we're going to use those notifications with the fonts that we've learned with font awesome and add in some JavaScript and then we'll do a final final demonstration and this is going to add something extra and then we'll go from that point so we can sign out and essentially we're going to have to create icons and add them from the beginning and then move on to the rest of the application all right all right so let's get stuck in with our icon so the first thing that we're going to need to do is we need to add in the font awesome CDN now before we do that I just want to give you a run through those icon so we can see here the font awesome 4.7 icons I will of course like I said add the link in the description below so you can go ahead and check it out additionally speaking what I'll also do is I'll ensure that I add this next link as well in the description below this will give you a link to the font awesome CDN or what you can do is just use the project source code and go from there so what you can essentially do is start off by looking at the icons you can see what you like what's of interest to you and once you're happy with that you can go ahead and add in the CDN so this is the CDN that we need to actually use for an awesome now of course your guess is as good as mine and if we're going to use this it would be best to add it to our base.html so we can have this access to all our templates so we can go to base and you want to add this to the top and I would recommend that you add it you can add it right at the bottom here so just below your CSS now if you add that in I just want to show you something so if we were to refresh our page and log in I just want to show you so try and log in now and log into your account you go to the dashboard and there you can see we have icons already set now this is because that source code that I added in the pinned comment of this video tutorial you'll notice if we head over to navbar You'll See by default what I mentioned earlier on by dashboard for example and user logout I did have this you know the non-breaking space that's just space and right next to it we have this eye tag here which houses that particular icon so here we have an icon that says fa sign out and Fa home now this is based on the font awesome icon from here so if I were to click for example on a dress book you can see for each icon that you get you just need to copy this part here so if I zoom in here so for each icon you find you can copy the following here and you can just paste that in right next to your link okay so that's what has been pre-configured here before I already added on so it's a good demonstration so you can see it in fact so you can see how these icons look so they look quite nice actually so that's how you can go ahead and add that into place as you wish so it's really up to you how you want to add this in but anyway that's how you can do it so as long as you have that CDN in your base.html so you need to add this in here the CDN to the base.html it'll extend on all your HTML templates then all you can do is add in the eye tag here for the icon wherever you want so you can just literally click on an icon here anything that you want here and you can copy that I tag here and you can just paste it in wherever you want so in any HTML tag will be appropriate okay so let's go ahead and set that up so essentially what we want to do is we want to start from the beginning and see where we need this so sign out Project X so we can use one by create your account so we can go ahead and look for something so let's see something that is relevant we may need to zoom out here okay and I'm just going to type in user okay so type in something relevant and I'm going to choose user plus here okay so this is fine we can copy that so you're more than welcome to skip ahead um or you um it's really up to you what you want to do so we're going to go to index.html but I'd recommend you just stick on with me just for continuity so here we have create your account on index.html I'm going to add in in bsp so this is a non-breaking space so you have space between your content so your text and that particular icon so we can add that in like so head on to Project X and refresh and then we have that first icon great all right so you can close the CDN link I'm just keeping the font awesome 4.7 open so here we have it create your account create and we can add something here by create account so we can add maybe another icon so that would be on register I can close this here and again um what we can do is by create account we can add in bsp and you can find something that looks good so here I want to add user okay so you can decide what you want there we go user so that looks pretty good now login we can add maybe a key here next to it so let's go to login okay so this is very simple guys probably the easiest part for last so logins so we can add something there so at nbsp and just look for a key I think a key would be good so you can just use the search bar it's Auto um searches for you so we have a key there we go Okay so we've done the front part of our application create your account we've got icon login yeah this is good so this is the main part done next what we can do is we can go ahead and add it in here for our button perhaps and create a new record we can add like a plus icon here so we can look for Plus and I'm going to use plus Circle here okay now that means we need to look for dashboard okay dashboard so at the top we had it yeah create a new record so here's the a class we can easily just say at in non-breaking space and I think we we didn't paste that now we need to paste that copy that paste that in and refresh there we go we have a nice plus icon here that highlights nicely for us okay great so we can say create a new record and all right this is good so what we can do now is we can add in perhaps a tick here or something so let's add in a tick oh it's called a check so we can head into check my bet and that would be on the add record or create record link so you can see the URL create record and we can go to create record here and we have it right here move that along okay and to make it clear for you I'm just going to press enter here so you can see what's going on we've got that now in place there we go create record nice all right um just go to click me and we can add a few here now before we do this what we can do on create record is we can just update this a bit so instead of just going ahead and essentially having a create record button let's say we want to go back to the dashboard but we'll be already here so what you can do is add in an extra button now this will be optional because the reason that you'll have it is because let's say you want to go back so we can update that now so we can set this all as is so button button primary we can remove this button width part as well okay that's something that we can go ahead and remove so we can remove that we can just keep it to button primary remove everything here and just leave it as the default you can leave it like that now if you were to refresh you'll notice this will be smaller and that's good because we just want some spacing now we can also add a breakpoint for our form here at the bottom so we can add that here I believe yeah so you have some space to breeze on your Forum so we're just outdating as we go and we can create another button here so a we can go ahead and set it as a link actually so instead of a button we can create a link and we can do it as follow so we can say ahref and we can set that URL to the dashboard so if someone wants to go back we can just set that to dashboard okay and we can set the class here so this will be button button secondary we'll make it gray and we can say we can then press enter here so you can see what I'm doing we can say return at NBS npsp and then we need an icon so I think a good Arrow would do so let's look for an arrow and I can go back for an arrow Say Arrow left Arrow left means go back that's pretty good you can copy that paste that in and there we have it now if we were to refresh we now have the option to return as well so we can click on return and that will send us back and if we were to click click on create record it will create the record for us okay great so we've got the basics here all done and dusted now let's go to click me and actually while we at click me we can remove this click me part while we're here so create record is done we can go to dashboard and hereby create here by if we scroll down we have click me we can remove this and in place of saying click me we can add in for example a i so we can type in I and we can have an icon like this okay and that's going to act as our view so we can add that in paste that in here instead of the text and what we can do is go ahead and refresh and we can see we have a nice eye icon however this does look a bit Bland so what we can do is we can go ahead and update this a bit make it look a bit cleaner um a bit nicer so we can just make those changes as we see fit so what we can do essentially is head on back and here we have the record essentially we can just set the class here so we can say class okay and here I want to say button button Dash success that will be green and button small okay so that's going to make it look a bit cleaner now so if we were to refresh we can now see we have it in a button like sort of format so where we want to view a particular record let's say this record in row one id1 you can click on this here and we can be redirected to this page here it looks a little bit nicer and a little bit cleaner all right so now that we are on the card here what we want to do is we want to edit everything here so we can go ahead and add in some icons the color is perfect so essentially what we want to do is look we can actually copy some icons here so on the next page it will be view record so on your view record here we have the following so return update record delete so we can just add in PSP so you want to add this just to give space between your text and your icons now you don't need to worry about the color scheme because we set the class here as button info button danger button secondary so give that nice touch so essentially what we can do is look for the arrow again uh we had Arrow left that will be return and we can paste that in just like that then we have update record that can be a plus or a tick that's really up to you so we can say Plus for example look for the plus icon here we can just keep it regular it's fine plus then we have delete that can be minus so delete would be minus that makes sense this and we can say minus Square that's also good and add that in like so there we go so now if we were to reload we can now say we got some nice icons um with uh our buttons here accordingly all right so if we say return of course it's going to return update it's going to update so we've got that in place so we can say return and there we go if we want to say update this will take us to the update page so update record here that particular instance we can change this up and use similar functionality to what we did before now do keep in mind we're not using primary for update we're using info so you can keep to the color screen using BTN info not primary so what we can do is just set that up accordingly and we can copy this um this here in the meantime so you want to copy that icon head over to update record and here are my update record you can actually just press enter and indent this so I'll make it clearer for you and add that in okay so if we say update record we can see it's got that plus icon we may need to change remove this and say info so we now have an info color there we go and ask plus record there we can add a breakpoint at the bottom so just here I believe just at the end there we go we have a nice break point here at the bottom as well now what we can do essentially is we can just add in a return button but we already have that logic in create record so you can just go ahead and move that along so we already have it here for the dashboard so there's no need to retype that again you can just paste that and it's there now if you want a space you can just add that in this here the non-breaking space and we can add it also while we add it for the create record since that is also missing it so we now have that in place so we can see it's a lot nicer now we have those icons and they're nicely in place okay so we can view we can see we can update return fine update fine great okay we will do the final test at the end so you don't need to worry about this Okay so we've got all the icons I think that is all of them okay so we've got delete update return find sign out create record just checking return that looks clear the view looks clear up they looks clear update return fine okay next thing that we want to do before I solve this insufferable form here which is annoyingly we want to just adjust our crispy form so we can sign out and we can see here this is too close together username and password way too close it's a bit annoying actually so what we can do is we can update this so what we can do in the start is go to create your account and we can start off by doing it here so let's start from the beginning here so essentially what we can do is we can go to our forms and instead of saying let's go to register for example instead of saying form um crispy you can literally go ahead and change this up you can go a little bit more specific and then you can add in a space or a breakpoint so what you're going to need is you're going to need your models your forms excuse me you're going to need your forms.pi as a reference so here we have as we can see here we have our username password one password two we are using a username and a password here for the login form and we are using first name last name email phone address etc for the records so we can start with create user form which is the registration form so Seas of the fields username password one password two so in register instead of saying form Chris B we can literally go ahead and be a bit more specific so we can delete that and say form Dot and I'm going to say let's say username and then you want to add in the following symbol and say as underscore crispy underscore field and then you want to just go ahead and refresh and we can see we have that username only but we have a bit of a space now so we can add this breakpoint here which allows us to add our spaces so this is the good thing with it because with the normal crispy everything is tied down together so now we can just add in the following so we had password one so that's what we had here password one and we have password two for the confirmation but the good thing now is we can add these breakpoints here with HTML just to make it a bit cleaner so we can just add that in so remember you need to be specific here and with what you're adding in so it needs to be dot according to the fields here in forms that by models we don't have for that so we can re reload and there you have a bit of a space here now you may need to add one just for the button as well so just above that button um let's add that okay and there we go so we can see it looks a bit cleaner you may need to add two but I think that looks good one one looks good all right so we've got that in place now so we have a bit of styling now we can go to login and we can do the same here um that will be username and password so specifically here username and password so you can head over to your login page okay and you can remove crispy forms here and you can just say form Dot and it would be username as crispy field you have a breakpoint already and then here you can just say form dot password as crispy field okay and remember to add in a breakpoint at the end there and you can refresh there we go so we can now see it looks nice and clean so it's now tightened up so we can log in while we add it and don't worry we will do a full demonstration at the end like I said so you don't need to worry okay great so now when we create a record add record we have this as well to deal with this is a slightly longer so what we can do is just tidy this up okay so you're more than welcome to skip like I said it's really up to you so we have our Fields here if you need to reference them and we have create record and instead of having this form.crispy we can go ahead and just adjust it so we can just say Forum Dot and what do we have at the beginning first name first name so it's quite a lot as crispy field let's just see if it works as the first initiation there we go yeah it works fine so we're rendering her out properly so we need to copy a few of them here so let's do it step by step all right so we had last name then okay uh email phone and address okay okay that will be email okay and we can put in the same phone so let's see first name last name email phone let's name it doesn't mean my phone address city province address City so what we can do is copy this straight as it is to the update form so we don't need to literally type this again province okay and we don't need to add in the created pump that's automatically generated by Django itself and you want to add in a breakpoint for your button okay that should be all the field so let's reload and there we go first name last name email phone address city province country double check perfect and I'm back and now we can do the same thing for the update record so when we say update record we can do the same thing now it will automatically be filled so what we can do is open up update record you can remove that now the form will be automatically filled so it will show a good example of how it will look at the end we have a break point just make sure you have a breakpoint um excuse me there we go from first name paste that in and there we go so we can see it adds in nicely so we've got that correct and return so we can see we've got our crispy forms all set that looks pretty good um that's working nicely okay that's great so now green green just double checking here and manager one three okay great so we've got this all sitting in place all right so the next thing that we're going to do is we just want to fix this card here um I just want to make it a bit cleaner and then we can move on to the notification and the messages all right so let's fix up our card here so what we can do essentially just close this up it's a bit cluttered so just close everything up because I want to stress you guys out okay so let's get started so we can head over to our templates and you want to go to view record since that is where our card is close this Explorer mode move this to the left and let's see what we got here so we have the card body here I think it'll be best to do the following we can remove these non-breaking spaces and instead of adding this to the card we can just move this in so what I think we should do is remove this the strong tags the record last name first name strong even the HR the horizontal line paste that in the body itself move this so we have nothing in between and that is in the card body so let's see what that looks like oh yes so much better that looks a lot cleaner now what we can do is also add an icon here um I want to add an icon so I'm just going to add in user and we can do this one okay so I'm just uh adding something in here that I think would be good and I'm going to add that before add in non-breaking space and there we go yeah there we go that looks pretty good guys so I'm happy with that that's pretty good so we can now see our card um table here of sorts is now fixed and it looks a bit nicer and we can see at the bottom we have our buttons here now of course you can change the position if you want on the top left right center Etc you can decide what you want to do all right so we've got that now fixed and in place now the next thing that we want to do is we want to get our notifications in so we're going to we can close this we want to close all of this now and before we move on further let's discuss what we need to do so we need to now go ahead and make use of Django messages so Django messages is essentially a form of flash flash excuse me as former flash message that we can go ahead and implement this is something that we want to add into place so to do this okay what we're going to have to do is we're going to have to import and make use of the Django messages package and it's best to add this in whenever we trigger an event or an action so an inventor action for example maybe whenever we create register a user whenever we log into an M account whenever we log out whenever we update a record so for each Action Now logging into an account I don't think a notification is practical that's kind of annoying to be honest I don't think a user would like that choice is yours though however if you want to log out I know that's very important I've seen that a lot on banking sort of websites where it says you've logged out and it's probably something that you would want to know if you're logging out of something so secure but logging in I don't know I mean I'm getting into a debate with myself here of course you guys can decide what's best for you but anyway let's get started with that so what we can do essentially is we can go ahead and start the process so you want to head over to your views.pi file and right at the top here you just want to import Django messages so it will be from django.com trip I believe um import import messages now let's look at each of our actions here and I usually will do this before we redirect and stop this server and what we can do is we can start off with register so just before we redirect we can just say messages dot success okay now you can it's you can say messages.ero as well but let's start off with messages.success we need to pass in a request and here you need to put in the literal text that you want to be displayed so I'm going to say here account created successfully okay so that's the message so whatever you put in here is the message and you need to pass in that request and messages of success you can also use messages.error and you can also set a error As You Wish as well now this is full register we can obviously copy this over and add this for example to login and just before we are redirected to the dashboard we can add that in and that can be um you can say you have logged in okay but I don't like to do this for the login page it's not really a good idea I think if you're logged into the dashboard so you can decide what you want to do I don't really like doing it that way but that's another option if you want to add it there next we have dashboard there's no need for that there create a record yep so just before the redirects you want to add these messages so here we can add in for example um record was created so record uh let's say your record was created your record was created okay fine so that would be in place for the record now we can go ahead and move down I just want to move this terminal update record yep just before the redirect we can say your record was updated fine messages of success now you can just add this in here so we don't need it for singular record there's no type of Trigger or event being triggered delete yep so we can say your record was deleted okay it's fine um user logout is a bit far away here in our views so when we log out so just before the redirect here we can just add in log out success okay so they are our messages in place so that's simple how you can add in Django messages now all you'll need to do is modify this in our base.html and I'll show you how you can do that and then we're going to need to add in some JavaScript just to make it look a bit nice as well so let's go ahead and start that process so just ensure you've got your messages set um and I'd recommend you do it before any Trigger or sort of action and just do it just before you redirect that's a good place to remember with add them in if you forgot where to add them so just add your messages dot success options so remember you need to pass in the request first so you take two parameters or arguments the request and then the message itself here in the string so make sure you add it in strings and that's very important now of course not everything is going to have it and nor should you have it on everything the choice is really yours as to how you want to proceed from that way okay so make sure you've got that in place the next thing that we want to do is we want to set this up and call it in based on HTML so you want to head over to your base.html and this is going to appear on every page right here at the top so here is where we set notification messages so it'll look very consistent here now it might be best to open up the views so you can understand what I'm saying here so remember we call the messages uh record it um messages dot success or messages and what we're going to do here is we're going to check if we have a message so we're going to Loop through first of all so first of all we're going to say for message in messages so we're going to look through all our messages okay and of course we can add an end for at the end here and then excuse me and then what we want to do is we want to check what the message level is if it's success if it's Error if it's info so like I said you can set this to error if you wish so that's something that you can experiment with but let's keep it to success and keep the simple since it's a New Concept so here you can say if message dot level is equal to the default underscore message underscore levels dot success so if it is equal to success so if we have success here we're going to execute a certain command or show a particular image if it were error we would say dot error instead and we can then go ahead and say end if here and then you'd have your N4 Etc now in between here so let's say if it's true so if it is if there's a message if this messages dot success has been fired okay for a particular view we would need to go ahead and add in what we want to add so what I'm going to do here is I'm going to say for now I'm going to add a paragraph tag and I'm going to set a class and I'm going to say alert alert Dash success so I'm adding some bootstrap here so I want it to be green I want it to float in the center check Center as well and I'm just going to leave it like that for now okay so that's all I want to add we can open up this paragraph tag and what you can also do is you can add in an image as well a icon excuse me so I do have a check icon I believe so I believe we added it for I think it was create record so we can just reuse so you can add an icon if you wish so I have a check icon here and we can add that here and you can add in that check icon say at in a non-breaking space and very important now now you need to pass in that message so you want to refer to the text here in that message which will be displayed on the relevant page at the relevant time so here we can just say message okay and this is going to pertain to the message that was actually sent in each of these depending on where it was sent and it's going to show in your on the on the necessary page the necessary text based on the necessary view that was executed so if we are updating a record we get redirected to the dashboard this is the message we see at that point of time on the dashboard page so you're going to see the message on the page that you redirect to that's why it's important to add in the message beforehand so that you see it um afterwards so you can see it um there so that's why you want to add this Now by default the myth the font color and the text color is not going to look so great so what we want to do is we want to change the color so I'm going to add some CSS for now so we can go to static CSS Styles and here I just want to say dot message Dash text and I just want to change the color to white so I just want to make it a bit cleaner so the icon and the color are released in tune so in your style stop CSS add that dot message text and here what you can do is you can just add that in as a property to message Dash text remember it's a class you don't need to put in the dot so message Dash text um and then you can just add that in so now we'll have that nice color with it we will add the JavaScript in a moment but just let's just test this out and see how it actually runs so now what you want to do is you want to run your server okay to move this up so you can see login it's login now let's sign out that's the easiest way so we don't need to create a record or anything and there we go log out success now of course you can change the size and everything use some CSS now the one thing that we do have here that we don't like is a message the notification sticks here now this is pretty bad we don't want this we want it to disappear or dissipate after amount of time now you're more than welcome to re refresh the page here but that's kind of tedious so we want to add in some JavaScript here that we can link via the ID here and we can add in a timer here so this message goes away so that's all we need to do next we need to add in some JavaScript so what we can do and for the moment we can close the views the Styles and now we can open JavaScript app.js and now we want to enter in the relevant functionality in order to allow the timer to go so we can stop the server for now and now we need to add in that functionality right so what we want to do now before we add in the necessary code to app.js we need to have an identifier so we want to identify this paragraph element so we can use an ID to identify this unique element so we can just set here message Dash timers you can call it anything you want as ID that an app.js you want to add in the following code here so I just pasted that in so we can create a variable call message timeout we're going to say equals dot document.getelement by ID and you want to select it to the message timer so that's going to be according to this timer element that you set then you want to create a function so first you want to say set timeout and within that you want to call a function when curly brace you're going to say message timeout you want to call this variable so essentially this element here you want to go ahead and change the style to display nothing and do that after a center amount of time and here you can change the time as you wish and depending on what you want to add in so this is what you need for your app.js so this is essentially a timeout function so here I'm going to say message timer okay so this will help to time out those Django messages or notifications so we can just say notification timer just to make it a bit clearer for you so this is what you need and what you'll require so just make sure your ID is going to match whatever you get the element by so this is a simple variable that we are assigning and we're assigning it to that element so we're saying document.get element by Deep message timer set that timeout function and add a function in between with curly braces and it was in curly braces you want to add in the functionality where you are timing out you're setting this the display to none and over here you're just setting the timer accordingly now what we can do with here over to our application and make sure your server is running so if it isn't running what you can do is just run it again so make sure you run your server now clear your cache so we've done this before go to developer tools right click empty cache hard reload sign in as the test sign out give it a few seconds and then the message should disappear the notification and there we go so we can now say we it was a bit long but at least it timed out now you can set this lower if you want it to go quicker so it's free sales and full sales and Etc the choice is yours now we can see we've now got that notification in place so we've pretty much done everything now the last thing that we need to do is test the whole application and then that's it guys I will then of course be sure to attach the link to the source code so to the GitHub so you can go ahead and clone this and download it Etc and then that's that for the application so I cried Mastery application in a Django right so before we run through the full test another website that's cool is called get emoji.com I'll include the link in the description below and I just want to add in an emoji here for example you can copy and paste so it's a good website where if you want to copy and paste emojis and I want to add it to my dashboard so to the welcome page so here at the top where it says welcome to the dashboard page I just want to add in a nice uh Emoji there just waving at us so that's something cool that we can add so go ahead and add that if you want I will include the link in the description below anyway Let's test this out let's create an account and I'm going to call this manager 2. okay create account all right the account was created successfully now let's put in manager 2 and while we're typing this in we can see the notification notification dissipates great login and we can see that nice Emoji there welcome to the dashboard page manager too or we can just remove welcome that won't be a bit cleaner to be managers too now let's create a record so here I'm just going to say align this default faults mail.com added a number of course you can set that up yeah let's say cape Town's the best of course create there we go records created perfect now let's update this so let's change the name to Henry and the street to 100 Street update 100th Street so I'm just pressing tab here 100th Street Henry notification great let's delete this so bye bye Henry delete great now let's go to create record so this record was deleted we can return as well let's go to the view we can return as well so all of that's working nicely and of course the final part is to sign out all right there we go so you can see guys we've created a basic crud application in Django so we've mastered it we've mastered the fundamentals and everything is in place I will be sure to include the GitHub code as well in the description below among all the other relevant links and we can just check check these links while we're here and there we go perfect all right so that's it guys and thank you for those of you that are watching and I hope you enjoyed this video tutorial quite long I know but yeah thank you as always for the support I really appreciate it and yeah until next time see you guys [Music] foreign [Music]

Channel: Cloud With Django

Views: 95,501

Keywords: Cloud With Django, CWD, CRUD mastery with Django, Build a CRM application, learn django, django basics, Django, build a django app, django crm, django crm tutorial, django crm demo, django customer relationship management app, django crm app, django tutorial, django tutorial for beginners, learn django web development, python django tutorial, django tutorial full, django tutorial project, django python project

Id: pqWyUAT38e0

Length: 262min 7sec (15727 seconds)

Published: Wed Apr 19 2023