Python Django 7 Hour Course

[Music] hey what's going on everybody and welcome to this course where we are gonna be learning how to build out awesome websites with django from the ground up so we're gonna start as absolute beginners where i'll first introduce you to what django is and how it works and then we'll move on to building out a basic website where we'll spin up a server we'll render some templates and add a database to that and we'll even learn how to work with that database so we'll add in things like authentication and search and we'll really focus on the core features of django and how things work now in the second half of this course what i'm gonna do is take the same project and we're gonna start adding features into it and turning this into a really cool application so i'm about to demo this for you in a second but this project is kind of like a discord clone in a search engine for people that want to study and find other people to study with now it's not specific for developers but imagine that you want to let's say study django so you can go ahead and create like a chat room people can find this chat room and then join in and communicate with you so with that being said let me just go ahead and demo the project and then we'll talk about the course structure and how things will continue from here okay so this is the project that our website will eventually turn into as we progress through the course here so if you actually want to see a live version of this website go to studybud.dev and you can check it out and actually see the site for yourself here so in this website we have a basic feed here of different study rooms so we can see this list right here it kind of looks like a social networking feed where you just see post anybody here can create a room here they can set up a topic here and they can see their room posted out here so let's say i go to this website and i see this room right here and i want to learn about view here so vue is an awesome front-end framework so i want to check it out i can see how many people have joined i can see five people there and when it was posted so the host here is praveen so i can see his profile so the host does get credit for sharing the room i can click on this room and i can see the conversation so on the right side i see all the participants here and i can see the chat room right here so this is supposed to kind of look like discord here so it's like a discord server where anybody can hop in and they can just message something and i'll just say anyone here so i'll ask a question see if anyone's on and my message appears right here so it tells me when it was posted anybody can click on my account and they can view my profile so we'll go back to the home page here and on the side here we have multiple ways of searching so we have a search bar here where i can just say c sharp for example i want to see if any topic or any room has this topic or maybe has c sharp in the title so if i type that in i can see c-sharp developers right here so i can clear my search here i can use this search bar or i can go in here and just search for all the topics with python here i can see all the designers and so on so this is going to filter my rooms down by the topic and it's also going to filter down the activity feed so just to create more engagement on the website i thought it would be cool to add in this activity feed here so you see how i just commented something well i added this in where we can always see activity based on certain rooms here so i can see that dennis replied to vue.js developers and here is my message so it creates a little bit more engagement here so that's pretty much the application here so anybody can go and view my my profile here i can see all of my posts here so if i go to someone else's account i can see their post we can modify our application we can go here upload pictures here and it's i'm a little bit too zoomed in so that's why it looks like that so we can edit our account there is authentication so we can log out here log back in or register and we are good to go so that's essentially the site here so we're going to start from the beginning and this is what the project will morph into so we're going to learn a lot throughout this process let's take a quick look at some of the things you should understand before taking this course so the first thing is is you should have a basic understanding of the python syntax so things like variables if and else statements functions loops classes if you know these things then that's enough to move on with django as far as the front end you should have a basic understanding of html and css we are going to be working with templates here so if you don't know html at all well it's gonna be pretty difficult here we won't write too much we are just gonna install a theme but you will need to understand what's going on in order to install that theme so those three things python html css and you should be good to go so before we get started since this video does not have an official sponsor i guess i'll be the sponsor here and tell you about my new django course that recently went public where i covered django from a to z in 19 hours so in this course i go into detail on a lot more topics i cover certain topics that we don't address here so if you want to become a better django developer and enhance your skills go ahead and check that out there is a promo code in the video description for 50 off so it's going to be 9.99 and use the promo code brad now this course from the first month that it was launched on udemy also so i have it on my own platform and on udemy this was a top seller immediately so there's a lot of good reviews on it people really like this course and are learning a lot from it so definitely check that out okay so before we get started i just want to run through a couple of slides here get you introduced to what django is and then we'll move on to setting up our environment so what is django so django is a python based web framework and it is a back-end framework so it's on the server side and this just means that we can use python to build websites so python is one of the top programming languages django is one of the top frameworks for python it's actually the number one used framework so it's an absolutely great choice great for beginners and it makes for building websites super fast i absolutely love it so it is more of a heavyweight framework so it uses a battery's included approach and that means that it really is more opinionated in how you build out your application and that's not a bad thing i will get into that later but with this you get more packages libraries and modules and you follow a good design structure where in python a lightweight framework might be something like flask and some people may like it because it's not opinionated but because of that you're typically installing a lot of packages yourself if you're newer you may not follow the best design structure so you may not have a good i guess framework or structure in how you're building your application so the fact that django really forces you to do things a certain way i think is a great thing and it does not mean that you cannot customize it companies customize this all the time a lot of big organizations that have great engineers completely bend django to their will and how they actually want things structured so if i were to compare django to another framework for another language i'd probably say it's more like rails ruby and rails with php and larval it's more like larval whereas flask is more like expressed for node.js and i'm trying to think of another one i'll just use that one as last reference but it's more lightweight one you can do whatever you want django kind of forces you to do things a certain way but i think that's a great thing especially if you're newer to web development so it uses the mvt design pattern a lot of people may have heard of mvc model view controller for django it's model view template and we'll get into that in a minute so what is a web framework so for those of you that don't even know what this is a web framework is simply a collection of modules packages and libraries designed to speed up web development so it's just kind of like a package if you can think of it in one way where you're not having to use python code to do absolutely everything it really pre-configures a lot for you and is designed for one specific purpose in this case for building websites so i would strongly advise against you hand coding absolutely everything by yourself so it's going to make things a lot easier so back-end frameworks reverse front-end frameworks i already mentioned larval but on the left side there we have our back-end frameworks we have php which is the language larval or level however you say that that's the framework for python we have django there's also other ones for python obviously i mentioned flask for node we have express so you have the language and the framework now there are front front-end frameworks so client-side these actually work well with our back-end languages so we have react angular review i actually used angular and vue with django so they're not in competition to each other they handle different parts front-end frameworks handle all the front-end logic typically we would probably build out some kind of api to connect to one of these and that's how we communicate it doesn't mean that we need a front-end framework django has its own templating engine but if you wanted to use a front-end framework that would absolutely work so what can you build with django so this is one of my favorite topics here because i like to just show the companies that use django and let them validate the power of what django can do so if i were to mention a few things myself i would say an ecommerce website a social network you can build out an api for a mobile app now django can't actually build a mobile app for you you can use part of django to build one of those so if you want to provide some api data you can do it that's a topic for another day so in these companies we have pinterest we have spotify udemy dropbox all of these companies should validate whether django is the right choice for you or if it can do what you desire it to do so this is pretty much showing that it can do pretty much anything doesn't mean that it's always going to be the best option but it can do a lot i know instagram relied heavily on django in the beginning i'm not sure what version of it they use or how much they've customized it but i know a lot of these companies used it at some point and probably modified it to whatever they needed now youtube i can't really confirm whether youtube used it or not and the reason why i put it here is because i read a lot of articles on youtube using it a lot of people saying that they did but i couldn't find anything that validated it so i put it here just to say that there's a chance that they used it but this is something that you can build with django so there's no reason why you couldn't build something like a youtube website or a youtube like website so building apis a lot of you might be wanting to learn django just to learn how to build out apis and that's totally fine if you want to build out a mobile app or use some kind of front-end framework you need some api data django makes this absolutely easy they have something called the django rest framework which is built on top of django and the rest framework helps you build rest apis or just apis so this makes this really fast absolutely love it we'll get into this towards the end of the series i'm super excited for this part so i did want to mention some other frameworks before we get started uh just to kind of let you do your own research i mentioned flask earlier it's a python based web framework it's more lightweight i recommend you check it out i personally think django is much better i don't see why you'd want to use flask but in some cases it could be useful cherry pie web two pi and pyramid i've never used those but i would say check it out do your research but i really think the competition here if there is any is between django and flask here i wouldn't probably even mention the other three but still don't take my word for it do your own research so the mvt model structure or design pattern so django follows the mvt structure there's a model view controller structure which a lot of you from other frameworks may be familiar with django follows the mvt and the only difference here is that django takes care of the controller aspect of things so for those of you that are completely new mvt we have model the data access layer that's your database that's how we model data this is going to be your database tables built out in classes your templates that's your presentation layer this is what the user sees that's going to be their page their web page and then the view is the business logic so if you were to look at an example here we have facebook.com and when someone goes to facebook.com they're gonna be going through some urls here we're gonna find a url that matches some kind of function in the back end and that's going to be our views those views right there in the view layer that's going to go ahead and get some data probably from the models and it's going to render some kind of template to us and we send that back to the user so that's the flow here we're requesting data they've used a business logic and we just get this and send it back to the user so that's the mvt design pattern very similar to mvc okay so let's go ahead and get started we'll start setting up our environment and in the video after that we will start setting up our project okay so let's first start off with some helpful resources for this course as you go along with the tutorial here so the first thing is is the source code so that is up on github it's in this link right here and it will be linked down in the video description so i would highly recommend you clone this project check out the source code and review the code as you're coding along and look through areas where you have any questions all the code here will be what i coded up throughout the tutorial now if you want to clone it and set it up locally there will be instructions in the readme file on how to do that so that way you can get a feel for the project and use it maybe tinker with the actual source code and just see how it all works so after the source code i would highly recommend you use the django documentation i will reference this throughout the tutorial but django has some of the best documentation i've ever seen and i would highly recommend you use it now i understand that it could be intimidating for people just to start with the documentation so that's why you're watching a tutorial like this so i can guide you but once you have a question on maybe how something works or specifics reference the documentation please it will help you a lot so let's go ahead and close that out and let's talk about my environment setup so i'm going to be using vs code you can use whatever text editor you want if you have adam sublime text even notepad plus plus any one of those will work but i like vs code so if you're using vs code i want to show you my setup the theme and some extensions that i will be using so if you're not using vs code i still want you to watch this because i am using some extensions that are going to change up how things function so i want to make sure you see that and understand why it's happening so atom one dark pro is the theme i'm using so if you want to use the theme everybody asks me about it go ahead and use atom1 dark pro it's a really cool theme and for some reason it's not set here right now but that is what i'm using so that's the theme and i'm also using an extension called prettier so prettier is really cool because it auto formats my code here so if i use the prettier code formatter this right here will basically format my code anytime i save it so if i write out some html code and it's not perfectly formatted if i hit ctrl s or save you'll see my code just kind of jump into place so when you see my code jump like that it's because of prettier it really helps me it's absolutely amazing i love it i'm also using something called auto rename tag so auto rename tag this basically allows me to rename a opening tag and the closing tag will also rename so it's auto renaming it so if you look at this example right here when this tag gets renamed you see the closing tag get renamed and it goes vice versa if you rename the closing tag so you're not going to see me edit both html tags as i go through that so that's it i would recommend you check out the documentation the source code these are the extensions that i have if i forget at any point i'll try to mention those throughout the course and let's go ahead and get on with installing our project and setting up our python download and django installation okay so before we get started here i first want to make sure that you have python installed on your computer and if you already have it installed i also want to make sure that you have the most up-to-date or compatible version of python in order to work with django here so if you already have python installed what you could do is simply go ahead and update it to the latest version that way once you're installing django it's going to make sure that you have the latest versions of both and those two should be compatible now if you don't want to update it maybe you need python in a specific version or you think it's up to date just go ahead and go to this link right here in the django documentation just look up python django compatibility if you can't find this link and it should show you this section right here and this simply tells us the version of django that's compatible two specific versions of python so at this point in time the latest version of django is 3.2 and this is compatible with python 3.6 all the way to 3.9 so these are the latest versions if you're watching this video maybe a year or two out you might want to check this maybe just make sure that you're either in the latest versions or that whatever you're using is compatible so i already have python 3.95 downloaded so i'm good to go but if you're wanting to update or download for the first time go to python.org and then go ahead and click on the downloads link and in here go ahead and download the installer make sure you get whatever you need for your operating system and then go ahead and click on that installer i'm not going to do this because i already have it but this should take a minute or two maybe just to go through and install python or simply update it so once you have that complete let's go ahead and move on to the next step here so my entire project is going to be on my desktop and i am using a windows machine so let's go ahead and open up our command prompt here so later on i will switch to vs code but just to get things started i'm going to use the command prompt and you can host your project wherever you want but i'm going to host mine on my desktop i cleared it for everything and i just want to make sure everything's here so it's easier so we're on our desktop and if you just downloaded python or you want to check the version go ahead and do that that's going to tell you the version of python in my case i have python 3.95 i'm good to go and let's go ahead and hit exit so at this point we'll clear that terminal what we could do is go ahead and just install django globally so if i do pip install django this is going to install django on my computer now i like to use a virtual environment in theory you don't actually need one but it's really good practice to use them it's going to separate all your installs from your global machine or any other environments that you have and that way there's not going to be any conflicts so you can skip this step and go ahead and install django directly but i recommend you follow this and we're going to use virtual env so we'll do pip install virtual env so i always have a hard time spelling that one for some reason okay so i already have it installed it tells me i'm good to go there's also a pip env that you can use so this is just a package that allows us to set up virtual environments so virtual env is installed and now i can just run the command virtual env and i can call my environment whatever i want in my case i'm just going to call it env you can call this my env or whatever name you want and because i'm running this from my desktop so make sure that wherever you're running this from you know that file path go ahead and hit enter and that's going to create your environment so this should take a second so on my desktop i can now see this file right here this folder so i'm pretty zoomed in you should be able to see that so we have a folder called env and that's our virtual environment we're not going to open it up we're not going to deal with it the only thing we're going to do here is go ahead and activate it so make sure the file path is there and on windows i can just use env scripts so whatever i call the environment scripts and then we'll just do activate so on a mac it might be a little bit different just look up the difference here it's not too much i don't remember exactly what that was but we just activated our virtual environment so now we're inside of here instead of our global machine now we know it's activated because we can see the environment name right there and we can always deactivate our environment so we can just do deactivate like that that's going to turn it off so now you don't see that right there in the file path and we can reactivate now the reason why i show you that is because i've had people set this process up and then turn off their computer log back in and they don't know why django or all the commands aren't working that's because they forgot to turn on their environment so every time you open this up you're gonna have to turn on the environment because all the installs and other packages that we set up will be in here if you set this up here like this so now let's go ahead and clear that so we created the environment it's active right here make sure you run that script and let's just do pip install django so that's all we need to do this is going to take a second or two it's going to install django for us we can do this now because we have python installed let's see maybe i need to hit enter again so that's going to take a second here so give us some time okay so we have django installed and at this point it looks like everything's successful so if you're seeing this we're good to go we have django and at this point i'm just going to clear this again so we'll do cls and i'm going to do django dash admin so now that i install django i have access to this command if i hit execute or enter i'm going to see all these commands that i can now run from django dash admin and in here we're going to focus on a few here so the main ones that we're going to see are going to be make migrations migrate these are commands that we're going to work with or use to work with our database we're going to use run server that's going to start up our development server and we're also going to use start project or start app and start project so we now have access to this we know django is installed so let's go ahead and clear this again and now let's go ahead and just do django dash admin and we'll do start project so once we do start project we need to give our project a name so let's go ahead and call it study bud you can call it whatever you want so this is going to be the project name and what this command is going to do is it's going to create my boilerplate files to set up my django application so it's going to give me my core configuration and basically my project here so once i run this on my desktop we're gonna see study bud right here and we can see our virtual environment so these are the two things that we created and we're gonna go through the django files in a second here but at this point if you're running this from your command prompt just go ahead and cd into studybud so cd into your django project we'll look at the files in a second and now let's just go ahead and run python manage dot py run server so we're going to start up the django development server and we're going to take a look at what we currently have so at this point it looks like we're all good we see this this note right here that tells us we have unapplied migrations we'll get to that once we start working with the database and we also see that we are currently running on port 8000 right here so we can go ahead and just copy this so on the command prompt it's a little bit harder i can highlight that and i typically have to go to this bar right here and hit edit and then copy so you could just write that out manually but once you have that copied uh you can just go ahead and open up your browser and paste that into the browser one thing i like to do is paste it in and i also save that as a tab so i can always hit this shortcut here so i could do this manually like that or if i open up a new tab i hit that shortcut and there we go so i like to save it there so every time i'm working with it i'm not having to copy and paste so we just started up our django server and this is the project that we currently have so we actually have something running right now we have a server on and the boilerplate configuration that django gives us so if you see this we're good to go so far and we can move on to the next step here so at this point what i'm going to do is go ahead and actually close that out so i turned off my server we'll have to refresh that and everyone can store their environment in a different way what i like to do here is take the virtual environment and drag that into my django project so i'm going to open up my text editor so in this case i'm using vs code if you're using something else you'll still just use the command prompt unless it's already built into the text editor in vs code it's already built in so at this point we'll go ahead and open up the folder we'll go to the desktop and let's just go ahead and go to the project files so we see study bud and we see all our boilerplate files along with a virtual environment i just dragged in so i like to have it in here and if i open up the terminal we could open it up i just go into terminal right here and do a new terminal or we could do a shortcut by just hitting ctrl and then tilde so it's that weird backtick looking thing on the top left of your keyboard typically so go ahead and open up your terminal that way so at this point my virtual environment is already activated by default you might have to run env scripts activate in this case the file path is inside of the project folder so here we see it and it's activated so make sure that you do that and that's all set up so i'll turn on my server right now again so we'll do python manage.py and then run server and if my face is blocking it we'll uh go ahead and move that so we just ran run server and yeah that was all the command so it just blocked that last part there so we see these unapplied migrations we're not worried about those right now it's not going to give us an error we'll go back to that server refresh it and we're still good so let's do a quick breakdown i'm not going to go into too much detail in my full django course i really try to break down as much as i can here but we'll just go over the core jingle files here so python manage.py or the manage.py file this is where we execute our commands from we're not going to touch this that's something that allows us to execute those commands we do get a default database with django so sqlite is a default database in production you typically use something like mysql postgres you can even use no sql databases with django but we're going to stick with the sqlite database here so we're not going into the virtual environment here that's our different file inside of our project we're going to see some more here so we have a wsgi file this stands for web server gateway interface right here this is the actual server and then we have a urls.py file so this is going to be all the routing the url routing to our project so when you go to a specific specific page so if you're going to the home page or the about page of a website this is where we configure all the urls here so this is going to be just a list of different url paths like this so one would be something like home and then you'd have about and so on so it's just a python list of url routes so that's how that's going to be configured later on here so i'm just going to go ahead and get rid of that comment right there so we'll save that then we also have a asgi file this is going to be for asynchronous i guess asynchronous calls here we can actually change that up django does have async support we won't deal with that and at this point the main file that we're going to work with is going to be settings.py and urls.py so settings.py is like our core project configuration this is like the command center to our entire project if we go through it i'm not going to go to every single item but here we have things like all the urls that are allowed to go to this website or to point to it we see all installed apps which we're going to get to we see all middleware configuration templates database configuration for example we see the database and this is pointing to the base directory which is the root directory right here and it's pointing to the sqlite database so this is how we can actually see how it's connecting to everything so we have templates databases urls and everything like that inside of our application along with static file configuration so think of settings.py as the core project configuration okay so now we actually want to work on rendering some things out and changing that default template that you saw where we're just getting that boilerplate file in django once we see our server so in django we are going to work with something called apps here so we already see default apps configured there are apps that handle different parts of our application things that handle uh sessions in our inside of our application user management and so on and basically apps are little components of our website to handle different parts of a website now imagine it this way so if you had something like facebook.com imagine that was built by or built with using django you would have an app for handing handling all your users then you can have an app for handling uh all the groups inside of facebook you can have an app for handling all user posts so these are just broken down into different parts now the application that we're to have here is not going to be that big so we're just going to stick to one app and this app is where we're going to configure all of our models which is our database all the url routing and all the views that are going to handle basically the business logic of our applications so i'm done talking just wanted to give you that overview let's go ahead and move on so in order to create our first app here we're going to go ahead and you could open up another command prompt or another terminal if you're using the command prompt or you could just go ahead and hit plus here that way we're not turning off our server and we're just gonna open up a new terminal and then run a command here so we're just gonna do python manage dot py start app so just like the start project command we can now run star app and this is going to be able to create an app for us and i'm going to call this base it's going to be like our base application so we're just going to hit enter and we're going to see a folder get generated in here so at this point the django project doesn't actually know about this app yet so we're gonna have to connect it all it is is a folder inside of our django project so inside of base we see our views and this is basically what happens when someone goes to a specific url these are gonna be functions or classes and these are going to fire off things like any kind of queries to the database any templates that we need to render this is what's going to be called when someone goes to a specific url so those are going to be our views we have our dot models.py file this is where we're going to configure the database and then different parts like our admin panel and core app configuration so let's go ahead and go back to the main project file so study button here and let's go back into settings.py so we need to let this project know about this new app that we just added so inside of installed apps what we could do is we could just go ahead and add in base like that and it will know about this folder here now what i like to do is i like to specify the direct file path to configure it to the app so what i'm going to do is go into base we'll go into apps here and this is going into the base folder so pay attention to the file structure we're going into the apps.py file and we're going to the base config class so this is going to connect it to the app directly so we're just going to go ahead and do dot base config and now this project right here knows about this new app that we just added so i'll just go ahead and install some defaults that vs code wants me to install run the installation we'll close that out and there we go so now django knows about our app so let's talk about our url routing and our views so typically all of our views are going to be handled inside of the views.py file from that app that we created so i want to show you a quick shortcut because i want to show you how this logic works so let's go ahead and go into urls.py so this is our core urls file now we can have multiple urls files here we're going to actually use just two here we're going to have a root urls file and then one for our specific app so to create a view we're going to use function based views here so we're going to create a function and we're going to call this home and let's go ahead and pass in the request object so the request object is going to be the http object this is going to tell us what kind of request method is sent what kind of data is being passed in what's the user sending to the backend here so we have a request object which we'll print out and show you later and then what we need to do is simply return something at this point i'm just going to return back a simple http response we're not actually going to render a template yet so we'll just do from django.http import http response that's a capital h and a capital r so we're just going to return back a simple response here so we're just going to go ahead and say home page so it's just going to be a string that we're going to render out and now we're going into our urls and we're going to say when someone goes to the home page so we're going to set a path here so that's imported right here we're going to set a path here and then the home page is going to be the root domain you can see a path right here we have an admin file we're not going to work with that yet so when someone goes to the home page which is an empty string so that means that that's just a core url we're going to send that user to home so we're going to trigger this function and that's it so we're just going to tell it which function we're going to trigger and we're going to return back this http response so we'll go ahead and save that and let's open up our website so now when i refresh this we don't have that default we see the home page so that's a simple http response right here so we'll zoom in a little bit and there we go now i want to show you one more page so we'll create another function typically we won't create our views here i'm just doing this for practice and uh let's just say let's see what's another route we're gonna do we're gonna do room so our website is gonna have rooms so we're gonna have rooms for different conversations we're going to pass in the request object and this is going to return a specific page for a room so we'll just go ahead and do return and we can pass in http response and we'll just say room like that now in order to specify the path we would specify it like that set the route so we're going to have a few parameters this one is going to be the route that we're going to so we'll just do room forward slash and then the function that we want to call so in this case because we're using function based views it's just going to be a function we'll throw in the room function now if we go to this route you can guess it it's just going to return back that call so we can go to forward slash room and i actually added in an extra parameter and there we go so we have a room and we have a home page so views trigger or urls trigger views and that's what the user gets back in return that's going to be an http response that's going to be a template or when we're setting up our api it's going to be a json response so this isn't the best practice if we create a really big project it would be really messy to have all our views here and our url patterns because there's going to be a lot of a lot of logic in these views there's going to be a lot of functionality and this is going to get really messy and this is why django creates apps for us and they give us a structure to separate all of our code so let's go ahead and take these two views we'll copy those we'll remove them i'll remove http response save that and then let's go into our app which is base and let's go to views.pui so in views.py we are going to paste in the home page or the home view and this room view right here now this isn't going to work so we have our functions right here and this file doesn't know how to call those so what we're going to do is we're going into our app and we're going to create a urls file just for this app remember if our project gets really big we're going to have to have different apps so we want a urls file just to handle all the routing for this app so let's create a urls.py file so this will be our app urls file and this will be our root directories urls file so this is going to be for a full project this is going to be for a specific app so in here let's go ahead and make a quick import so we first want to import the path function that's what triggers these urls right here so we'll actually remove them and we want to make this import so from django.urls let's import path so from django.urls import path so we have the path function and in here because the views are going to be in their own file they're in the same folder so we see views and urls let's go ahead and go into that file so we'll do from dot and then we'll import views okay so now we need a list called url patterns and we're going to specify all the url paths that a user can go to so we're just going to go ahead and go go to url patterns or add url patterns set that to a python list and we're going to set the routes here so we're going to use the path function right here and the path function can take in three parameters at this point so we're going to specify the direct path so for the home page it's going to be an empty string we can leave it like that then we need to go into the views file here so we're going into views and we need to get the home view so we'll do views.home and then we can actually give our view a name and we'll talk about why this is good later but we're just going to call this home so later on we can actually reference a view or a specific url by its name so that's going to be convenient and it's going to make things more dynamic so we have our home page and we also want a room page so we'll just do room forward slash and we'll do views dot room and we also want to give it a name so let's go ahead and do room and there we go so we always want to add in a closing comma there and make sure that's correct and now we have our two views which we also need to import http response because that's going to give us an error so from django.http import http response okay so that air is going to go away and look at this so we have two views and we have two urls and if i go to the page here so let's go to the home page and let's check this out if i click on this we're going to get an error so what's happening here is we have not configured our urls to the app's urls file so what's happening is we have all these urls and we see some kind of error let's actually fix this first so we have home what's going on here maybe i didn't save the root urls file here so let's try that one more time we'll save this one and we're going to save this one so it looks like everything should be good now let's try that one more time so we'll go to the website and now we have the default django template that django already has prep for us so what's happening here is we have two urls but django does not know about these so we need to go back to our urls file and we're going to include or import a function called include and then we're going to tell django when we go to the website this file is going to handle all the core url routing but instead of adding all the urls in here we're going to create a path here and this is going to be an empty string so every url that matches an empty string go ahead and use the include function so we'll do include and send the user to base and then urls so we're going to the base app and we're going to the urls file so let this urls file take care of all the routing so the user is going to go to this page it's going to match this route then it's going to go to this urls file and these routes will be matched so i hope that makes sense so now if i go back here it's going to remove the default django template and now we can go to room so it's actually a lot faster than that typically i'm just doing a lot of explaining but we just configured all of our urls and our views and now we're ready to render out some real templates so let's talk about templates so we have simple http responses and these aren't dynamic we can't add our own html to that there is a way to do it but it's going to be very messy so let's go ahead and add our templates so in order to add templates we're just gonna go into our main project files here and let's just go ahead and add in a new folder so we're just gonna add in a folder called templates and this is where we're going to store our templates and there's a few ways to configure these so we'll talk about that in a second here so we'll go ahead and pay attention to the file path so now it's in the same directory as the app so in here let's create a template called home.html so now we can actually write some html code and we won't worry about the html semantics just yet so we'll add in an h1 tag and we'll say home template and that's going to be it for now and we also want to add in a room.html and we'll just do h1 and we can do room template so now we can actually add in markup instead of rendering now a simple response we have two templates and we need to return these inside of our views now the first thing we need to do is let django know about this templates folder it doesn't know that this exists yet so we're going back into our main project folder in settings.py and we need to go into templates here and this is where we're going to let django know that we have a new folder for our templates and it's going to tell it where to look so we're going to use a variable called baster that stands for base directory and it's set right here and this just sets the file path back to the base directory of our project so basically it goes all the way back there so we can access any folder from that area and we'll go back to templates so we'll set baseder and we can just do forward slash and then we'll just do templates so we're saying go back into the base directory and find the templates folder and now django knows we have templates in this specific folder so in order to reference these templates we need to go back to our views we can actually get rid of our http response so at this point we can use the render method so this is imported by default and the render method takes in two parameters that are needed and then one optional here at this point and the first one is gonna be the request object so that's gonna be the http request we need to pass that into render this is how we pass data back and forth and then we're just gonna specify the template name in this case it's going to be home dot html now i can also do that for the room here so we'll just go ahead and do render pass in request and we'll just do room room.html so that's how we know about the templates now if we go back here we see the room template and we see the home template so now we actually render the templates and we can do a little bit more with it so let's go ahead and remove the http response and i want to talk about template inheritance now just rendering a template isn't the best thing if we're uh maybe adding in like a navigation bar imagine having to code in the navigation bar into every single template adding in all those tags all the styling and then if we change out one link in the navigation bar we're going to need to go back to all the templates and update every single template so there's something called template inheritance and we can also include sections of templates inside of other templates so let me show you what i mean by this so we're going back into the templates folder and we're going to create a file just to contain our nav bar so this is going to be our navigation bar and we're going to call this navigation and all we're going to do here is create a link here and this is going to be a link to the home page like a logo so we'll just say href that's going to send the user back to the home page we'll just direct it to a forward slash and then we'll just say h1 and we'll say logo so imagine this is our website logo and we just want to add in an h1 tag here so we'll just do h1 or not h1 tag but just an hr so like a line break and this will be our ugly navigation bar until we fix this so this code needs to be seen on every single page so we could do is we can simply go into our home.html page and we can use a template tag and don't worry about these curly braces and percent symbols we'll talk about that in a little bit here so we can use these and at this point use two curly braces and two percent symbols and then write in include so we're going to add and include and then in single quotes we're just going to say navbar.html so we're going to include this template inside of this template right here so if i go to the home page if i refresh that now we see this logo now if i go back to or if i go to the room we don't have it so what i could do is just take the same template tag and i can move that to room and simply include it in the top section here so i can refresh that now we have a home page and the logo up there we have the full navigation bar and we can include this multiple times so we can do something like this and that's just going to add it in all throughout our template okay so we need to go to room for that i think i did that in the room page and there we go so now we see that navigation bar so we're including sections of templates now what we could do is we can also talk about template inheritance so instead of including it what we could do here is go ahead and create a main template so we'll do main.html and this is going to allow us to create like a wrapper around all our templates so every single template that we have by default our application is going to have different styles or a main theme and then different styles per page and we want to be able to simply include like one style tag and little sections into our main theme of our website and we want that to be displayed all over and simply encapsul encapsulate all the templates in our project so let's go ahead and in main dot html let's start typing out html in most text editors if you start typing that out it's going to give you the boilerplate html if not you're just gonna have to write all this out it's just a doctype two html tags uh body tag an opening and closing tag and a head tag with some metadata so let's go ahead and give it a title so we'll just do study bud and let's go ahead and remove the javascript file we don't want that at this point and we also don't need the css file because we don't have one yet so we have our main template and this is the template that we want to inherit from or all the other templates to inherit from at this point so in the body tag what we need to do is we need to create these things called tags and again we'll talk about this syntax in a second but let's go ahead and create a block so we'll do block and then we'll say content and then we're going to need to close this block tag so we'll just do end block so what this is going to do is it's going to tell our website where to add all these child templates when we wrap a parent or another template in our website so in our homepage we're going to have our main page and then all the homepage content will be in here then when we go to our room page all that content is going to be inside of these two tags so it's in a sense just wrapping that content so what this is doing for us right here is instead of having to include this navigation bar in home and then inside of our room page i'm just going to copy this remove it and then add this into main.html so i want this at the top of my page inside of every page so i'm adding that above my blog tags and now we have our main template and i can go into home here and i can simply extend that template so instead of include we're going to use these tags here and we're just going to do extends and we're just telling it which template are we extending so we're extending main dot html now in order for this content to be seen we need to use these two tags right here so inside of main.html we need to specify where this content is inside of our template so we're just going to say block content and then we're just going to do end block and block like that and then we'll just do content okay so now not much is going to change we're still going to see our navigation bar but the nav bar is no longer inside of this template we're no longer having to add it to every template even though that was pretty simple to do we just want to be able to add it to our main template and that's it we need it there once and that's going to be good for us so if i go in here we'll refresh it the room doesn't have the main parent template yet but the home page does so we see that the nav bar is inside of the main template and we see the home template underneath it now let's go ahead and add this to our room.html so you might be using django just to create apis so if you're not worried about the template syntax in theory you could just go to databases and not worry about this but a lot of people still use the django templating engine so we're going to stick to that for now and make sure that we cover it so we'll just do extends here and we can go into main.html or specify the template that we're extending and then we need to wrap the child content so we'll just do block content and we can do end blog okay so the navbar is now only inside of main.html but if i go to room there we go we see the room template and the home template so that is including and extending a main template so let's go ahead and actually pass in some data into the template so how do we pass in data when we query a database so first of all i want to talk about the django templating engine here so django actually uses its own templating engine it looks like jinja so let's just do django wow i can't spell so django template engine and let's talk about tags here so first of all i just want to point out two main ones we can add in variables so inside of our template we can pass in variables any kind of data and in order to do this we just add in two opening and closing curly braces around the variable and that's going to pass in the dynamic data so my first name is and then whatever first name was that's going to get passed in the template and then last name so variables are simply two curly braces now we also have tags here so there's different types of tags and this is basically a way of passing in python-like logic into a template so at some point we might have to or we will have to loop through data and pass out like a list of rooms or users that we want to display and these tags are simply a curly brace with a percent symbol like you saw so there's different types of tags so we can create for loops if and else statements and so on so we can add in a lot of logic so imagine that we have a user and we want to change uh like a hello message so in this case we're going to check if the user is authenticated go ahead and render the username and then we have to close the end if statement so in python you just have to write if in the templating engine we have to close that if statement so we have different types of tags and filters and so on so just think double curly brace or curly brace with percent symbols and we're going to work with a lot of built-in templates so that's what we saw here we're using like the include tag or the extends tag and we're using those tags to add in dynamic data so those are django template tags there we'll address those as we go and at this point let's go ahead and go into our view so imagine that we have a view here that has some data so at some point we're actually going to render some rooms so let's create a variable and this will be a python list and we're going to have some rooms which which will just be dictionaries or they'll represent like objects and each room will have a each room will have an id so we'll just have an id and we'll start at one and then we'll just have a name to that room and for this first one let's just say uh let's learn python so our room is going to be people posting these kind of requests so we'll do let's learn python add in a closing comma after that and let's just copy and paste this a couple times and we'll just do two and three here okay so for the next one we'll just give it a name i just want to make sure that we have something here so we'll just do design with me and then we'll just do front end developers so these are like discord servers i guess so front and developers okay so we want to be able to render this data out inside of the template so inside of home.html so let's close out the navbar we'll close that room and main and settings and we want to render this out so at this point what we could do is go ahead and take rooms right here so we have a variable it's outside of the function but it is accessible here and we can simply pass in a dictionary and specify the value name so it's a key value pair we can add in as many as we want and we specify how we want to address it in the template and then we specify what we're passing in so if i save that now we have access to this list right here inside of the template so this is passed into home into home.html so we'll go into home and let's go ahead and just render this out so we'll just create some kind of div for our main page and let's create a div that renders out all these items here so we'll just do two curly braces so we're creating a four loop so this is going to allow us to create it with a tag here and we'll just say four uh room in rooms and the difference here in uh regular python and in this templating engine syntax here we'll just do end four so we have to close it instead of just closing out or just writing a simple for loop so we have to always close our for loops and our if statements now on each iteration what do we want to do here so i'm just going to create a div and if i can type this out let's go ahead and on each iteration we want to pass in some kind of tag here let's just do an h5 tag and we want to pass in the id so variables can be passed in with two curly braces and we can just do room so we're getting the room object on each iteration and we're just doing dot id and then we'll just do two hyphens and then we want to pass in the room name so we'll just do room dot name so we're accessing the dictionaries names right here or key value pairs so if i save this we can go ahead and refresh it and there we go so as i add data we can render that out so we pass that through the view and into the template now we could just pass it in directly like this i like to create a context dictionary so you can call it whatever you want i just call it context and i set that value right here and then i pass that in as the third parameter into the render function so that passes in the data now if i want to create an if else statement i can go ahead and do that so we can say something like age or something like that and we can say if the age is a certain number render this out if not render something else out and that's how it would work so we'll actually see that in practice so i won't show that in the demo and i want to go ahead and show you a few more things with the templates here so we created a templates folder for all the templates inside of our application now in the future as i mentioned we have different apps that handle different parts of our website and what i like to do here is create a templates folder that represents every single template that is going to be available throughout the application or is not specific to a part of our app here so in this case main is going to be available everywhere in our application and so is the navbar now home and room are going to be specific to the base app now if this was a bigger application this would be an app probably called users and then rooms or something like that we would separate it but for now let's go ahead and create a new folder inside of our app so i'm showing you two different ways to do templates and i guess the reason to why you would separate them so we'll create a new folder and we'll call this templates now the weird thing about this is that django requires us to create another folder inside of this templates folder so if i go ahead and do new folder we're going to call this base so it has to be named whatever your app is called so if you call your app something else make sure you have the app name which is base templates and then inside of templates a folder with your app name in this case it's base so it's a weird structure it's kind of confusing at first to some people but there's a reason to why it's like this now inside of the templates folder inside of base we're just going to go ahead and create a new file and we're going to call this home.html and we're just going to go into the home templates here from the root directory and just copy all of this and paste that into this new home.html file so we're just going to go ahead and delete home.html from the root directories templates folder and in order to actually work with this new template all we need to do is go into the view and we need to specify the app now before and then forward slash so django tells us to do things this way so let's make sure that template is connected so if i refresh it we're all good and at this point instead of deleting the content we'll just go into the application we'll go into the templates folder and we're going to copy room we'll go into our app into templates base and we're going to paste that in here and then we'll go into the root directories templates folder and we'll go into room and delete that so don't let that confuse you it's just this weird prefix stuff that django does and they do it for a reason but there we go so now in order for room to work we need to go into base forward slash room so our app templates are inside of our app folder and our main templates are inside of the root templates folder okay so now i also want to talk about dynamic url routing so how do we get a specific object of a single room here so for example let's say i want to link this up here i want to be able to click on this and then see information about a specific room so at this point the room really has no way of doing that and the way we're actually going to set this up is by changing up the url here so what we can do is pass in a dynamic value here so we're going to use two angle brackets and we're going to say str for a string and we're going to pass in a value name so pk is going to be for primary key or id it really doesn't matter now this value could be an int so an integer or a slug but a lot of people do like to actually have string values i like to use it so in this case i'm just going to do str even though i'm using a integer here so we're passing in the id into the url now inside of the view we need to pass in another parameter here so i can pass in pk right here so now i have access to whatever value is inside of that parameter inside of the room here so if i go ahead and save this before i actually render the value out now i can actually go to room let's go ahead and do room and then four slash one so now this will work so i can pass in a dynamic value and that'll change so let's go ahead and go back to our main page and let's finish this up so from our home page i'm just going to add in a link here so around each h5 tag we'll add in an a tag and we're just going to wrap this so we'll make all of this clickable actually let's just make the room id clickable or the room name so we only want to wrap one section because later on i do want to add in more links so we're just going to do href and then we'll go into forward slash room forward slash and then we're going to pass in the variable of the room id so we'll just do room dot id like that and then later on we're actually going to update this url too so we pass in the url it's going to go ahead and set this value and pass in that value into the id here so if i refresh it i can click on this we see the room id if i go to three we're seeing that value okay so in order to actually get this value later on we'll actually use this primary key to query the database but for now we're just going to use this variable and let's go ahead and actually write in this logic here so we're just going to set a value here and we'll just call this room set that to none so when we first go to it it's not going to have a room then we're just going to loop through the rooms value so we'll do 4i in rooms so that list of objects or dictionaries and we'll say if i and then because it's an i because it's a dictionary we have to access the values this way so if i id is equal to let's see pk and i'm just going to go ahead and make sure that's an integer so we'll wrap that because i believe it might be a string so this might not match so if we find the current room so we're going to go ahead and loop through this list here we're checking all the ids whatever id matches that primary key that's in the url we're just going to go ahead find it and we're just going to say room is equal to i then what we can do is simply set a context dictionary so we'll do context and that needs to be a python dictionary and we'll just say room and we'll throw in room here so we'll bring in context as the third parameter make sure you add that in right here paste that in and that should give us our room here so now in the template we can pass in the value into the room here so let's just say uh we're passing a title i guess we'll just do room dot name because that's passed into the template we can access it this way that's gonna be the h1 tag so let's go to let's learn python there we go it finds it and we see front end developers and design with me so we're able to get the values now i want to show you how to get dynamic values from our templates here so let's go ahead and change this up a little bit so there's a reason why we added in a url name here so let's say that at some point we change this to room page or something like that like we want to update it what's gonna have to happen is we're gonna have to go into every single template or anywhere that we access this url here and we're gonna have to update all these values and that's gonna be really annoying so what we can do here is we can update that value all we want but we can specify or access this value by the name so if this value doesn't change then we don't have to update anything so we can keep this as room name or room it doesn't matter but as long as this value is the same we can keep accessing it that way and it's just going to point to this url here so let's go into the home page and instead of specifying the path here so we're not having to update it we're going to use the url tag so it's a built-in tag into the django templating or inside the django templating engine and we're going to specify the tag name so url and then make sure that if you're using double quotes out here you're using single quotes out here and if you're using single quotes out here you're using double quotes in here so inside of url we're passing in the url name so that's this value and we can pass in the dynamic value so the room id i just want to make sure that i'm not covering that we're just going to pass in room dot id so make sure that's outside of these quotes but still in the url tag now if i save this we can go ahead and refresh it and that's going gonna work here so that tag is just gonna simply generate the url based on that tag so we don't write it out that way but that's how it's seen because we have the tag name so now if we happen to change that url path uh we don't have to go ahead and update everything so it's really convenient and it's a much faster to deal with things that way so we just work with setting up our application we talked about views and urls and we worked with templates we rendered some data out in the templates and now what we want to do is actually set up a real database which is going to be in our sqlite database and we want to actually query the database and render data from the database out here so we don't want to use this anymore so let's go ahead and prep that so at this point we have our sqlite database it's not prepped it's just sitting there it's an empty file and we want to work with that so if i open this up here we see this alert and it says we have 18 unapplied migrations in our application now inside of settings.py we have apps in our project so apps are simply again different parts of our application and a lot of these apps have database sections so basically we have like a database prepped so we already have a couple of tables that are ready to be migrated like jgo builds out a user table for us uh for authentication they already build out a table to store session ids like if a user is logged in so we have all these tables that django has already prepped for us now what happens is django creates these migrations and these are basically like sql commands prepped and are ready to be executed so they're ready to be activated but they haven't been triggered yet so once i run these migrations these commands are going to be activated and they're going to build out all these tables which are inside of here so we have sessions and then a couple of different items in here and those tables are going to be built out so we don't even have to configure these django is really good at setting this up for us and making this easy now we are still going to build out our own tables but these are just the default ones that django gives us so all we need to do is run python manage dot py migrate so it's going to execute these commands so we're going to see all these migrations being applied and basically what just happened is that built out our database for us so it executed those commands and now if i run my server so we'll do python manage dot py run server so if we activate this now we're no longer seeing those unapplied migrations so the migrations that we had already are officially applied and they're ready to go so we want to add in our own tables and we'll see a few of those tables already we're going to have something called a django admin panel that lets us view our database because we're not using like a production database there are some plugins and extensions that let you view the sqlite database like the actual tables but we don't really care about that we're going to stick to the admin panel and later on if we want to use something like postgres we can use pg admin some kind of interface to actually view all the tables and the rows and and all the items inside of that database so let's go ahead and close out settings here we'll close out room.html i guess we'll close everything and inside of our app here so the base app let's go ahead and go into models.py so models.py is where we're gonna create our database tables now i do have a picture that shows you a representation of what a model is gonna do so i'll just go ahead and find that and then explain it here so i pulled up some pictures from that full django course and let's see we want to work with models here so what we're going to do is we're going to create python classes now the class that we create is going to represent the database table so in this example let's say we had a project this would create a table in the database called projects now or project now every single attribute inside of that python class would represent a column inside of the database so we would have an id we would have a title and a description now every single time we create a new row in that table that would be like an instance of a class and that's going to add in the row so the table name or the class name is the table name the attributes are the columns so this is what it's going to create it's a replication it's in a sense a model of a table that's why they're called models so this concept is not specific to django i've seen this in other frameworks here so it's nothing new as far as the style so let's go ahead and get started so the first table we want to create is going to be our table for our room or actually yeah we want to create a room first so we'll create a class here and we're going to create a room and i'm going to capitalize the r that's the tradition for classes and we're going to inherit from models so this is what's going to change it from a standard python class to an actual django model so we're going into models dot model and model is with a capital m so there's going to be different attributes here the first one is going to be the host like the actual user that's going to be connected until we work with that i'm going to go ahead and comment that out we're also going to have a topic until we add that i'm going to comment that out and we are also going to have a name so this value i will add so we're going into models.char field so it's a character field and this is simply a text field so i have to specify the attribute and what type of value is that attribute so at this point the character field takes in the value of max length or it needs this parameter this is something that is required for this value now we can also add in a description so we'll just go ahead and do description so the description here and this is going to be models dot text field so it's the same thing as a character field in this case it's just going to be a bigger text field and what i want to do here is i want to specify a value of null and i'm going to set that to true so by default null is set to false so if i don't set it to true like a name here it's set to false here what this means is that the database cannot have an instance of this model here without this value having something in it so it can't be blank now if i set null to true it means that it can be blank so saying null is allowed so it's true now we also have a parameter called blank here and what this means is that when we run the save method like when we submit a form that form can also be empty so we're going to set that to true so this is for the save method so when we're adding a form and this is for the database we're going to make sure these two values can be left blank maybe someone created a room and they didn't add a description they want to add it later we want to let them do that and we'll just allow them to update that later so we have a room or we have a name and description and we also want to add in later participants so participants i can never spell this name i have to like sound it out in my head so i had to be quiet there so we'll just do participants i'm going to comment that out so what that's going to do is store all the users that are currently active in a room so if you comment in a room you are now a participant like in a discord server you get to join one and we are going to add in an updated value so this is going to take a snapshot of any time this model instance was updated so anytime we run the save method to update this model or this specific table or the item it's going to take a time stamp so in this case we're doing models dot date time field so we want the date and the time that it happened and we're going to do auto underscore now and this is going to be set to true so that means every time the the save method is called go ahead and take a timestamp we don't actually have to add in any value it's going to do it itself django already has that built in now we also want to know when this was created so we're going to do created and this will be models dot date time field so it's the same thing as updated and in this case we're going to set auto underscore now and we're gonna do auto now ad excuse me one second so we're gonna do auto now add and we're gonna set that to true so the difference between auto now and auto now add is auto now takes a snapshot on every time we save this item right here now auto now add only takes a time stamp when we first save or create this instance so if we save it multiple times this value will never change it'll just be the initial time stamp whereas updated with auto now is going to take a time stamp every single time that's going to be very useful depending on how you want to organize and display data so we want to know when a room was created and maybe every time it was updated and when the last time it was updated so that's going to be it for our room model at this point and we're going to create a string representation of this room so we're going to do str and we're going to pass in self here so it's a python class you should know this if you know python and we're just going to return back let's see we'll just do self dot name so this does have to be a string value so if you do a date or try to concatenate values or any numbers make sure you wrap around the string method like that so at this point name is going to be just like that and we're always going to require it so it should be good and we're ready to go so when we add a model we're going to add a few more here so when we add a model to the database the first thing we need to do is make migrations so we have this migrations folder and what it's going to do essentially is basically create a file that's going to have like a list of sql commands and how to execute this and add it to the database so we already migrated our database so we executed built-in migrations and now we are making new migrations so we're just going to do python manage dot py make migration so it's one word so if i hit enter we're gonna see a new file here a new one a new file or a new migration is gonna get generated every single time so right now it's zero zero one next migration you're going to see another migration get created so here we go we see this class right here and it's basically showing all the migrations that we're going to apply and what to add to the database so it's kind of like a staging area before we actually update the database so once we make a migration you're gonna have to do this every single time so make migrations and then python let's see what's going on here let's clear it so we'll do python manage dot py migrate so migrate we'll go into the latest migrations and it will execute those and then we're gonna see these migrations being applied so we see apply all migrations and it's applying this migrations file which is base zero zero right there so it applied those and now that table is in the database now let's say we want to view this so because we're not adding in any third-party package to work with that sqlite database we're going to use the built-in django admin panel so if i go in here into the urls file so we'll go into studybud into the root directories if you go to this file right here now that we have a database you can go to that url and see the built-in django admin panel so we'll go to port 8000 if you haven't saved that as a tab go ahead and do that or just write that in and we'll go to forward slash admin so here we have an admin panel and django already has built-in authentication for us and in order to log in we need a user and this user specifically has to have admin level permissions so we're just going to create this from the command prompt here so we'll generate that user and then we'll make sure that we can actually see this data so let's just go ahead and run python manage and then we'll just do dot py create super user so it's all one word and by default it's gonna follow the computer name here or whatever my username is on the computer i'll just add in dennis and then we'll just do dennis at email.com and we'll specify some kind of password so as you're typing it it will start filling out but it won't see it so i'm typing it and you don't see it that's for security reasons and there we go so the password was created or the user was added to the database now my server is still on so i have two different terminals open and now i can go to the admin panel and it already has the password saved here i have dummy passwords i use for tutorials so we'll go ahead and click login by the way is my face blocking the terminal okay good i just thought i might be blocking it so go ahead and add in the user credentials that you just made with that command so login and here we go so if i go into this admin panel we are able to work with the database and actually see what we have at this point so we have a groups table we also have a users table which shows us the user that we just created we can add new users so i can go ahead and create a user add in the password and that'll generate a new user so i can actually deal with crud operations right now no i do want to build these into my own applications so i typically don't use this in a production environment i build out my own interface but if you want to go ahead and start working with the database right away it's really good for getting set up really quick so we added in the room table here but we don't see it and the reason for this is that we technically don't have to use the admin panel so in order to actually see these what we need to do is go into admin dot py inside of your base app whatever you called it and let's first import our models so they're in the same file path so we'll go into from dot models and we're just going to import room now we need to register this model with the admin panel and we're basically saying we're basically saying to the admin panel that we want to be able to view this item and also work with it in the built-in admin panel so we'll just do admin dot site dot register so we're registering it with the admin panel and we want to specify the model that we want to register so we'll throw that in now if i refresh it now we see rooms if i go in here we see zero rooms i can go to add room and let's see let's just do let's learn javascript like that we'll add in a few here i'll also add in a description so i'll just do lorem ipsum just google this up grab some dummy text here some kind of description to a room paste that in so i can also delete i can save now we see that's added to the database we'll add in a new one and let's just do 100 days of code challenge and we'll just grab some more lorem ipsum text here so click the ding calendar and there we go so we have two items inside of that room table here so now we added those we're able to work with the crud operations and we want to be able to render these out inside of the list and also view the details so we added those to the admin panel now we want to see those here this is still that python dictionary so let's go ahead and update this so we have the model now inside of the view here i'm just going to go ahead and actually i'll comment this out in a second so before i do that we'll just do from dot models so we're in the same file path views and models are right here and we're just going to import room so first we import the model that we want to query now there is something called a model manager so i'm going to set a value here we're just going to do rooms and we can make queries by going into the model so we'll just do room and then we have a model manager called objects right here so i want to show you one more picture i guess i'll show you two so i also talked about this in the full course and this is how we can make queries to the database here so let me move this picture because my face is kind of blocking it or i'll just shrink down the circle here so we have a variable we have a model name so in our case it's room then we go into the objects model manager so we do dot objects and then we can specify what we want to get so if we do all it's going to query all the models or all the items inside of that database table so we specify the method now there's a lot of methods here we have get we also have filter which lets us filter data down we'll work with that we can also do exclude and that's going to filter items out in like a reverse order so get right here is to get a single object whereas all in filter are to get multiple so this is how it's going to work and if i open up this picture right here there's a whole type or a whole list of query sets and how they work so it's basically the same file you just saw right here except for this is how we're passing in values so we can we can filter by a specific attribute we can change up like greater than less than filters so there's a lot that we can do with it we can also order values by different attributes and so on and we have different methods that we can call on these objects so that's all covered in more detail in the full course so we'll go ahead and close that out and we'll just see it in practice so let's go ahead and expand this a little bit so i think it's right here i'm trying to see where my mouse is so i think that should be good all right so okay for some reason the mouse is not being recorded okay so let's just go ahead and work with it and see how this works so we have our rooms we're going into rooms.objects and then we'll just do dot all so that's going to give us all the rooms in the database now in this case this variable is the same as this one but it's going to overwrite it in one second let me try to fix this because my mouse is not showing so i'll pause it and get back to it okay so i just turned off my computer i had to restart everything and for some reason the mouse is still not showing up so it shows up in these sections right here and anywhere up here but as i scroll down it just disappears so if i need to show something i'll try to highlight it i might have to fix some in editing maybe to point something out if you don't see it but i'll try to maybe emphasize what exactly i'm pointing at so that's kind of annoying i have no idea why it's doing that but we're just going to move on here so at this point now that i've restarted my computer so we want to just kind of recap a few things here and we have this query for our rooms here so we're clearing the rooms it's overriding this variable and now we're actually going to the database so we just imported it and that's what's being passed into the template so now if i go ahead and go in here and if i refresh it now we're going to see the items from the database so we see the admin panel as opposed to that list of dictionaries now if i click on these it technically is still gonna work if your ids start with one or two because those are inside of that dictionary and that's one thing that i forgot to mention is that models by default have an id generated for them so the id value just starts at one in increments in the database as the instances go on so we could override this value you could just specify the id and then use something like a uuid field or something more advanced that is something that i like to do in my projects but uh for now we're just gonna stick to the number value and just use integers so we have those ids and we want to do the same for the specific room so let's go ahead and actually comment this out i'll probably leave this in for this course for the source code so you can see that and in the room let's just get rid of all of this and let's just get these specific rooms so we'll just do room and that's going to be equal to models or the model name so we're doing room dot objects so the model manager and then we're doing dot get which is going to return back one single item so we need to get this by a unique value because if this value let's say we have two items with the same value like a name or something like that it's going to throw an error because it needs to get back a single object so in this case we're going to specify the value that we want to get it by ids should be unique you should never have a duplicate id in the database in a table and we're just going to pass in the primary key so if i save this let's go ahead and refresh it click on 100 days of code now we see that so when we go to this page it goes to that view queries a database gets back that single item and then it renders it in the table so the names are all the same so we didn't have to change any logic in the front end and now it's all working well here so at this point we want to add in a few more models to the database so we have rooms here but each room should have some kind of category so we want to bring that in so we'll go ahead and set this up here so let's go ahead and start with a new model and we're going to call this let's see actually i want to start with a comment or a message so each room is going to have a message and i'm going to put that beneath here so we're going to do message and we're going into models dot model like that so we're making this a model and for the values for an actual message first we want to specify a user so the user that's sending the message and we're gonna build this in in a second then we want to specify the room and this is a relationship here so this is going to be the first type of database relationship that i'm going to talk about this is a one-to-many relationship i go into more detail in the course about this uh in the full django 2021 course but we have a mini to one relationship so in this case that means you have one model that has many children so imagine uh this is twitter where you have a user and that that user can make multiple tweets so multiple post so that post can only have one user but the user can have multiple posts so one too many or many to one and in the database they identify each other by the ids so we'll close this out and let's build this in in order to create a mini to one or a one-to-many relationship we specify the attribute so that's going to be the room and we can do models dot foreign key and in here we specify the parent name so in this case it's going to be connected to the room so that is what's going to establish the relationship in the database and that's how we know what's connected to what so in here we're just going to specify a value here we're going to do on underscore delete this is something that we do with many-to-one relationships and we have a few options here so the first one is we can do model or models dot set i believe it's models yeah models dot set underscore null and this means that when the parent is deleted so imagine that someone deletes this room what do we want to do with all the children here so all the instances of the children so all the messages we could set it to null which would mean that that message would still stay in the database or we could do cascade which is what i want to do here so when a room is deleted i want to cascade so that means that we are simply going to delete all the messages in that room so if a room gets deleted all the children will also get deleted so we just want to get rid of those now you can decide how you want to use that but in this case i'm just going to keep it that way so we're going to set that to cascade now let's see after the room we also want the body so the actual message in this case we're going to do models dot text field and we're just going to leave it like that because we do want to force a user to write a message they shouldn't be allowed to write a message if they don't have a value and let's see we'll just take updated and created and bring that in here so we'll do updated created we'll create the straight version so we'll do a function str pass it in self and for the return method we'll just take in the body so we'll do return self.body and in this case we're going to trim it down and we only want the first 50 characters now in the preview we want the first 50 characters so that way if that's a long message we don't want all the content in it cluttering our django admin panel so we have the message value and we created a relationship and in here we also want to add in a user so django already builds in a user model for us and this is something that we're going to address a little bit more uh in the last part of this video but we're going to start with the default user model so let's just google this up really quick and it looks like i have a spelling error so django already has a built-in user model and by the way i open up the figma design so we can start following this once we start adding in the items so we'll just do django user model and let's look at this so this is in the django documentation and the user model is simply a class it has things like a user name first name last name email password uh different permissions like is this user staff member is it active is this a super user when's the last time this user logged in and so on so we can use this value and we can also import the user so we're just going to look up the import method i guess it's not in this file so i'm just going to go ahead and import this manually so we're going to import this user into the file and create a relationship so in here we're just going to do from django dot contrib so this is a different part of django here dot auth and we're gonna import users so the user with a capital u and that's what django already has built into the admin panel so we're going into auth.model so it's a model okay so again later on we're going to customize this and there's a few reasons for why i'm doing it this way without building it in right away and let's take this user model and let's set the relationship so in this case this is going to be a one-to-many relationship so a user can have many messages whereas a message can only have one user so we're just gonna do models dot foreign key we already know how to set this we're gonna paste in the user and on delete when a user is deleted we just want to delete all the children here so we're going to do models dot cascade okay so we have a room relationship and a user and now we want to go up to room and in this case because a room is going to be a child of a topic i want to specify the class above it so we're just going to do class here and we'll create it as topic this is going to be models dot model and we're just going to add in one attribute here so all the topic is going to have is a name and this is going to be a character field so we'll do models.char field and we need to specify the max length so this field does require it there's no need for a topic to have more than 200 characters and we'll set the string value underscore pass itself and we'll just return and that's going to be the name self.name so we need to access that value okay so now we want to specify the relationship to the room so a topic can have multiple rooms whereas a room can only have one topic now we can change that up to a different type of relationship but for now a room can only have one topic so in this case let's just take this field right here let's bring that into room and we're gonna paste that in so it's gonna be models.4 and key and we're going to connect that to topic now because topic is placed above room in the code if we happen to bring topic down here somewhere we can still access this inside of this value but we would have to wrap that in a string like that but for now we specify the topic so the actual value and if a topic is deleted let's see what do we want to do with the room now in this case i don't want to delete the room we'll just do set underscore now that might cause some issues in our code later we can add in some fixes for that but let's see okay so we're seeing a warning right now and this basically is saying that if this value is set null that means that in the database we have to allow it to be true so we have to allow it to be empty because when it gets removed and set to null we need to make sure the database will allow it now for the host we need to set the user so i'm going to copy this value paste this in and that's going to freak out here and throw an error we're just going to take this user i don't know why that got imported so we're going to take that user and then change this value so i'm pointing at it right now i guess i can't see that in the code but i'll highlight it we can see the user here so on line 15 so now we have a relationship to a host so somebody has to host the room and then a topic which is right here okay so what do we do after we add into models well we're gonna go through that same process that we went through earlier and we are gonna have to open up a new terminal here and we'll just do python manage dot p y make migration so we're gonna prep the migration so when i execute that inside of the migrations folder now we're gonna see a second migrations file get prepped it's gonna prep the migrations for any changes or any new tables so anytime you make a change to a model specifically to an attribute or add in a new one we need to run that and then we need to execute that so python manage dot py migrate okay so we're going to execute that and that's going to add it to the database and after we run those migrations we need to register these models with the admin panel so we're going into here and we're going to add in topic and message now the user model is already registered by default so let's just go ahead and do admin dot site dot register register the topic and then admin site dot register and this is going to be the message okay so let's go ahead and check this out so we'll go in here go into the admin panel if i refresh it now we see topics and rooms so we'll go to a topic let's go ahead and add a few so we'll just add in python and let's add in django let's see we'll just do developer or web development so we want to do something more generic so we'll give users plenty of options and at some point we want to customize this go ahead and give users the option of adding their own topics and let's just do java script okay so we have four topics so what we can do is now go to our rooms and in the rooms because we added that uh the host and the topic value you're gonna see this drop down menu and you're going to be able to add in some users so for the topic 100 days of code let's just do web development so that's how many to one relationships are displayed in forms and we can also add in a host so i'm going to specify that as dennis we're going to go ahead and save this so i'll shrink down my face here just to make sure we can see that and let's add that to let's learn javascript so we'll do dennis and then i guess we'll do javascript for the topic and we'll hit save okay so i'll expand that a little bit and now that should be good okay so i just wanted to make sure you can see me clicking that save method so now that we added that we also want to add in some messages so let's just go ahead and add in a user and let's just chat inside of the let's learn javascript room we'll just say hey and we'll submit that so now i'm clicking the save button or i guess i can do save and add another and let me actually add in a user and i'm going to call this user tim we'll add in the password and we'll do password confirmation save that so now we have two users and the password is by default so django takes care of all that so now we can see two users and we'll add in another message and tim will say hi so we'll just do hey hi and that should be good we'll save it and i just want to make sure those are all to the same room so messages hi is let's learn javascript and hey is let's learn javascript okay so we added two messages and we added some topics so we just made some connections there and let's go ahead and update this section here so let's see how do we want to render this out here so we want to go ahead and actually render out the user value so we'll go into the template and let's go into home right now and let's check out the design here so in the design we want to render out the username and we also want to render out the topic so it's not going to look this good yet we haven't added the template yet but i just want to display more information so we'll go in here let's see down inside of the div here let's just add in a span tag so do span and then we'll just do at and then later on this will actually be clickable so we can actually go to a specific user account here so we'll do at and then we'll go into room dot host so we can actually query upwards to the parent item instead of just an attribute so the model does have a value called host so we can actually go to the host object and then we'll just do host dot user name so we can do that with django and that should display the host name so if i refresh that now we can see dennis posted those let's go ahead and go down here let's add in some kind of line break so we can actually see the difference so we'll do an hr tag and let's just do small and we'll add in the actual topic here so in this case we'll just do room dot topic dot name save that and let's take a look so there we go that looks a little better so i can actually click on this and later on we'll just display the actual room information so we're done with rendering out the items i showed you how to query the database for multiple objects a single object and also how to render this stuff out inside of the template like rendering out a parent or two parents here and just working with that data and also the admin panel so now what i want to do is show you crud operations so this stands for create read update and delete it's the core of any functionality on a website you're going to want to view data that's the detail you're going to want to update that's the you and crud read this information and delete this so let's go ahead and add that so we want to learn how to work with a database outside of using the django admin panel so in order to do this the first thing i'm going to do here is create a form for a room so we're going into the apps templates folder so in templates inside of base and let's create a template for a room here so we're just going to go ahead and do room underscore form dot html so we're going to create a template that is going to represent a form for updating and creating a room so one template for two different views now sorry about the weird breathing there almost like choked on air so the first thing we're going to do is do extends and we're going to extend the main template so main.html and we're going to wrap all the content so we want to inherit from that main template this is what we just worked on and we're going to specify the content block and then we're going to do end block content so end block content okay so in this page let's go ahead and create a div here so i just kind of i want to wrap the main page even though we're not styling it i want to create a form and in the form we need to specify the method so we are going to be sending data so this is going to be a post method for creating and updating and the action well if i don't specify the action it's going to send it to the current url that we're at so i could send it to a specific url or i can just say when we hit post send it to the same url except for now send post data instead of get data now inside of every form in django if we're using this templating engine we need to add in a csrf underscore token so this token will be sent on every form submit so when we're sending post requests in django we need to pass in this token and this is going to send it just to make sure that there's no malicious attempts this is helping us from cross site forgery attacks i believe that's the term for if i got that wrong sorry so we're just sending that token along with every request and it's making sure that the user didn't try to do anything malicious with that and i guess mess with our form input so now we also want a submit button so we're going to specify the type here and we're going to say submit and the value is going to be submit so i'm going to make that lowercase so that's the value or the type and then the value the actual text in that button will say submit so we have a form and now we can go back to our view here and let's go ahead and create that view for this so we're going to create the function and we're going to say create room pass in request here and inside of or after request let's just go ahead and do return and this is going to render out request okay so you can see everything just want to make sure and for the template we're going into base and we're going into room underscore form dot html so we're just rendering out the template and we're going to pass in context which we don't have yet so we'll add that right here so i'm just doing some prep work some boilerplate stuff and we'll pass in the empty dictionary so i'll save that we render out the template now we need to create a url here so we'll just do path add in a new route and this is going to be create room forward slash the view is going to be reviews.create room name will be create dash room okay so we have our url we have a view that renders a template and let's just go ahead and link this up so let's go into our home.html page and this is where a user can create a room from so at this point just above all our rooms let's just add in uh some kind of value here and we'll just add in a link so we'll just say create room and let's just do href and the evalue will just go to that url so we're going to use the url tag and the name of the url that's what we want to access that's going to be create dash room so we just highlighted that so you can see it and we're doing create dash room okay so let's check this out so the form is not ready yet but if i click on it i should be able to see the template let's see online three content inside of create room where is that room form extends main.html content oh this is supposed to be block content so it's the block and then the block name so i just got that wrong if i refresh that there we go okay so i could manually create this form and then submit that to the back end now django has different ways of going about this now if we have class based views it's all built in already for us we really don't even have to do much we just submit it and it kind of just processes that magically and now that's also why i don't like class-based views especially for beginners because they're hard for people to understand they're easy to use in basic structures but once you need need to customize something or to understand how it actually works it's hard to make sense of it so they're useful when you know them they're really good for now we're going to use function based views and for this instead of writing out that form manually we're going to use something called a model form now there is a layer of abstraction to this where there's kind of some magic under the hood but it's easier to understand than a class based view so let's go ahead and build out a model form so a model form is like a class based representation of a form so we'll just start this and i'll explain what's happening so let's go ahead and create a new file inside of our base app here and we're going to call this forms dot py now inside of our forms.py file first we're gonna import our model form so we're gonna do from django.forms and then we're just gonna import model form so there's different types of forms we can create so let's go ahead and import our models really quick we'll just do from dot models so it's in the same file let's just import room okay so we have our model form and we have our room now all we do to create a model form is we create a class and the tradition here that i like to use is specify the model name and then form so this is going to be the form for the room so i call it room form and this is going to inherit from model model form here okay now there are two minimum values that we need here so when we set the metadata here we're going to specify the model that we want to create a form for so that's going to be the room model and we have to specify the field so we could do fields like this and what this is going to do is this will create the form based on the data the metadata of this room right here so that means that it's going to create this form field for us which will be that drop down list the topic value it'll create a text field for our name and then the description and then updated and created well those won't show because those aren't editable fields so it's creating a form based around these values so if i specify all here it's going to give me all those fields now later on i am going to want to hide values like the user because that should be just auto-generated like the logged in user that creates it the application should know a user shouldn't be able to specify uh who they are necessarily in the drop-down menu so later on we're going to say things like give us the name then give us the body of the form and so on so it's just a list and we can also add values that we want to exclude so for now we're going to leave that as all so we're creating a form now inside of our view we're going to import that form so we're going to do from dot forms so it's in the same file path let's import room form i'm kind of losing my voice here so let's see how long i can record today so we have the room form and inside of create room we're just going to do form that's going to be room form after we import that and we can render this out in the template so we're going to render that out as form it's in the context here and we can pass that into room form html so in here we pass in a variable and we'll just do form because that's how we passed it into the context dictionary if i refresh that look at what we have here so we have this form with all these field values now we're going to work on styling this and making this look a little bit better but for now we're going to use a quick shortcut and we're just going to do form dot as underscore p what that's going to do is it'll wrap a paragraph tag around every input field that the form has and it'll just render those out now in the django course the full jingle course that i have i do talk about customization and we do work a lot with this so if you really want to see how to modify this form we go into depth there so now this form looks a little bit better we see the submit button and we're good to go so what we need to do now is process this data so if i go back to this view we'll go to form and we'll just say if request dot method so remember method is or request is an object so we'll do if request.method equal to post so we'll just do post like that then let's go ahead and print out the form value so we'll just do where the value that was sent so we'll just do request.post and that's going to be all the data so if you want to look into requests look up the django documentation and it's going to show you that in detail here so let's just print this out so if i go ahead and minimize this i guess we'll add in some data we'll specify dennis as the host django as the topic and we'll just say let's learn okay so if i submit this data i'm going to print out what we send to the backend so this is just going to be like a dictionary of key value pairs that's sent to the backend so if i submit it let's see i can do submit like that and here we go so we see the dictionary we see the csrf token we see the host with the host id the topic id the name which is let's learn right there i want to make sure that's not hidden and then the description which is empty at this point and so on so this data is sent so what i could do is i could process all of this manually so i could do something like request dot post dot get and then get me the name and then extract all those values and then run the save method on the model but in this case we have a model form that takes care of all this logic for us so all we have to do is take in this form so we're just going to do [Music] let's see how do i want to process this so we're just going to take in the data so we're going to specify the form and we'll just do room form then we're going to pass in request dot post so it's passing in all the post data into the form so the form already knows which values to extract from that and then we can check if form dot is underscore valid so these are all methods that the form does have so if it's valid data if there's nothing wrong with it they all match the types of values are correct we can just do form dot save that's it so we're going to save that value and this is going to save that model in the database so once that's saved i want to redirect the user back to the home page so we're just going to add in or import a value called redirect so redirect save that and let's bring that down here so if the form is good we'll just do return redirect and we're just going to send the user to the home page so again because i have the name in the url i can access it by the name instead of this value here so that's what makes that name value so cool so let's go ahead and check this out so we have a form we send the post data add the data to the form check if it's valid if it's good we save it and then we redirect a user so let's try this out again so we'll go back to the home page and go to create a room specify tim as the creator we'll do web development and we'll just say i want to learn html this person's a complete noob and let's just uh i guess we don't need to add a description we'll submit that so now i see i want to learn html down here so it's at the bottom so that value was submitted and where it was submitted and now we have a create method now before we get into update i want to change something here so i could actually go to the model and render out new items first here so when someone adds something to the database i want to make sure the newest item is first so we'll go into models here and there's a couple of ways of doing this one is we can actually add this to the query set or we can add it directly to the model method here so let's go ahead and add this in we'll just do class meta and we can specify ordering so there's different values that we can set and this is going to be a list so what's going to happen here is the first items in this list are going to be prioritized and then it's going to chain on down that way so what i'm going to do here is order the value by updated so the most recently updated value and then we're just going to order it by created okay so if i do dash so here's what's gonna happen so if i do this like if i do the value like this it's gonna order it in uh ascending order so that means the newest one will be last so if i go here if i refresh it it didn't really change much here now if i want the newest updated item to be first i could just reverse that so i can just do a dash and that's going to invert it and we'll do that for created so if i save that now the most newest updated item will be first so i want to learn html we'll just do dennis now django test add it and test is right there so now it goes in the reverse order so that's ordering so now let's go ahead and go into updating a room so to update this we already have a template so we have this template that submits that post form or the post request now we need to create a view so we're going to create a new view and we're going to call this update room so it's going to look a lot like the create room method with a few changes here so we're going to pass in request here then in after request we also need to pass in the primary key so we need to know what item are we updating then what we want to do here is get the item that we're going to update so in this case we're going to update the room that's going to be room dot objects dot get we're going to get this value by the id so that's going to be the primary key then we need to add in the form so let's actually quickly add in the return method so return render we pass in request if this is getting repetitive that's good it means you're understanding it and we'll go into base let's get these notes out here i don't know why that's doing that or all that extra stuff so do room underscore form.html and then we'll pass in context and we'll set the context dictionary okay so we get the room then we get the form so we're gonna do form this is a lot like the method up here so let's just copy and paste that now the only difference is when we click to edit a room we want to be able to actually know what room we're going to edit so this is going to give us an empty form that we're going to render in the context dictionary so how do we get that data pre-filled now what we can do here is we can actually add in instance or initial so we can add in initial and we can pass in the room value so i just want to make sure i'm doing this correctly i have some notes that i'm looking at and that's going to be instance okay so we pass in the instance so this form will be pre-filled with this room value now if the values don't match then that's not going to work but now we have a form that's pre-filled so before we actually submit this let's go ahead and add in an edit value so we'll go into let's see we'll go into our home.html page and let's go ahead and add in an edit button so we'll just add this somewhere here let's just add it at the top here so we'll just do a link here so a tag and we'll say edit later we'll add a delete button so we'll just throw an href and the url which we didn't create so we want to create that first the url is going to be like create room and in this case we're going to change this to update and then this will be update room and then update room for the name so we're going to access it by this value here so update room in home we're just going to do url for the url tag and then we can do update dash room and then we need to pass in the id so this url right here does need an id so we're gonna go ahead and throw that in so two angle brackets with a closing forward slash we'll do str and then we'll pass in pk so in the view we do need that id so that's looking good inside of home we need to pass in the actual room id so on each iteration we get the room and i can throw in the id as that parameter so a little bit of boilerplate there and let's check that out so we see edit here so i can click on that so let's say i want to edit one of these we'll edit learn or i want to learn html i click on that and that data is now pre-filled so we see that information now we need to process this so it's also going to look a lot like this right here so we'll specify the method here so we'll just do if request dot method if this is equal to post so if it's a post method then what we want to do is get the form we'll just do room room form and as we're processing this what we're going to do is pass in the request dot post so the post method all that data but we need to tell it which room to update because if we process this information it's just gonna go ahead and add in a new room so we need to tell it what room to update in this case we're gonna set the instance just like we did above and that's going to be this room value so we specify that here and down here so this data is going to go ahead and replace whatever that room value is so now the rest here is easy we just do if form dot is underscore valid if that's valid let's save it form dot save and let's just do return redirect send the user back to the home page all right so let's try this out we'll go back here go to the home page let's say we want to edit test now those lines are a little bit close here but we're going to click edit and we're just going to do updated we're gonna save this value and here we go we see test updated and that value is now updated so i can click on it and see that here so that is update functionality so we have create update and we want to close this out with delete at least the crud functionality so let's go ahead and finish this up so first what i'm going to do is add in a new link here so we'll go into the edit button we'll change this to delete and until we add in the url tag i'm just going to go ahead and clear that so we don't have any issues here so now we're going to see a delete link so we have edit and delete and for this let's see how do we want to handle this now if a user goes here we need to send a post method so we're going to create another template just to handle deleting so inside of our app here inside of the templates base folder we're going to create a new file and we're going to call this delete.html now this is going to be a dynamic template meaning that later on when we go to delete a comment it's going to be the same template to delete any item inside of our website so we're going to make this pretty generic it's just going to extend from the main template so we'll just do extends here and all it is is going to be a confirmation so you click on it it's going to say are you sure you want to delete and then whatever item we're deleting then we have a back button that we can click or we can we can click on confirm and actually delete that item so we're going to extend main.html and let's go ahead and do block content so repetitive stuff here we're just wrapping all the content so we have our styling and our navigation bar later on here so we'll do end block and then content and let's see so we're going to add in a form this form needs to send a post request the action well we're going to leave that as an empty string it's going to send it to the same url here we do need to pass in a csrf token because we are sending a post request so csrf underscore token and let's just go ahead and ask a question so in the form we'll just say are you sure you want to delete and then the item so are you sure you want to delete and then in quotes we're going to pass this in as obj like that or object let's just do that actually we'll just say obj so obj is going to be short for object and then a question mark so we're not going to say room because later on when it's a message this will have to be message so we're going to pass that in then down here we're going to add in an input button the type will be submit so this is going to submit the form and again we'll add styling so it'll look a lot better once this is complete so the submit button here and let's see for the value i just want to say confirm okay so we're going to confirm the delete or we can just use an a tag here and we'll just say go back here so let's see how do we want to do this section so i want to make sure that the user goes back to the previous page because if they click on the delete button from a post it's going to send them back to the post page if we manually set that url but what if they clicked on it from a message so we want to be able to redirect the user back to the previous page not a specific page that they're on so inside of delete what we could do is just add in hrev and we can actually access the request object directly inside of the template so we can do request dot meta so we have some data about all the urls and we're going to do http underscore refer like that so that's going to send the user to where they came from so let's go ahead and check this out so we have the template okay so i'm getting ahead of myself we ask a question and then we are going to have two buttons here i guess two links so now that we have the template let's go into urls here or into the views and we're just going to add in a delete view so we'll do delete or a function delete this will be room pass in the request object and then we're going to return that template so we'll do return render pass in request here and we're going into base for slash delete.html now i'm not going to create the context dictionary or i'm not going to actually specify the variable we'll just add this in here and here's what we'll do so we're going to pass this in so you access it in the template by the name of the key so whatever we named it here so we're going to call it obj and then this will be the actual room so the room will be called object in the template so that's why we did that and now we can go ahead and get that value so we're going to pass in the primary key we want to know which room are we deleting first of all we want to get the room so we'll do room.objects.get that is going to be the id value by the primary key so we pass that primary key in and then we're going to check the method here so we're going to do if request dot post or if request dot method is equal to post so it is string value what do we want to do here so in this case we're going to do room dot delete so there's a lot of different methods we have the save method there's i guess different things and i'm going to go through the list of them but delete is simply going to remove that item from the database and delete it so if it's a post method that means we click confirm that's submitting that form and it's deleting the room so let's go ahead and save that and then where do we want to redirect the user so we'll just do redirect or return redirect and we're going to send the user back to the home page if they deleted that room all right so let's go ahead and check this out so we're missing the the url here so we're going to copy this one paste that in and we're just going to do delete room this is going to be updated to delete room and then delete for the name so we have the url we have the view we have the template now inside of the home template we need to add in the url tag to send a user there so we're going to do url in single quotes we're going to do delete dash room that's not going to delete the user or the room it's going to send the user to the confirmation page so the room id we'll pass that in and let's check this out so if i refresh this click on delete let's try this let's learn javascript so are you sure you want to delete let's learn javascript so we could go back and it doesn't do anything so it just sends us back to the last page let's uh delete test updated and if we click confirm now we see that that's gone here so we don't see test updated anymore let's try to delete let's see i guess we deleted it we know it's working so we sent that method it removed it from the database and it sent us back so that is the delete method so at this point i want to build in some search functionality into our application here so i want to do two things here the first one is to go ahead and build in like a sidebar here so this is that figma design so it's not active this is gonna be some quick search functionality which means that we can render out all the topics that we have here and a user can simply click on one of these and it's going to filter down by topics so that's going to throw this into like the search parameters and these rooms will be filtered now after we have that in the search bar here so if i go too close to that it's going to go ahead and hover over there but you see that search bar we're going to add that in so a user can also type in a certain parameter based on a topic or the actual title of a room or maybe even buy some contents in that specific room so we want to add in some beginner functionality here and then we'll actually advance that as we go through this section so what we'll do here first is we're actually going to add some styling here now as far as the styling goes it's going to be very minimalistic so don't worry about the css if you don't understand it we're going to add in only a couple of lines here once we do that we're actually going to add in the template that's going to make this look better here so let's go ahead and build this in to start so we're going back to home.html and the first thing i want to do is make sure the entire page is wrapped in a div here so i'm going to go ahead and wrap that in a div and we're going to give this the class of home dash containers so we're going to have to use css grids for this again don't worry if you don't know how they work we're going to just type it out here and it's going to be very minimalistic and inside of this home container we want to create a div here for our sidebar so this is going to be uh the sidebar that says browse topics here so we're just going to go ahead and add that in here so we'll just do an h3 tag and we're going to say browse well we can't spell browse so browse topics okay so that's going to be our sidebar we'll just add in some kind of hr tag there so a line and then we also want to wrap all of this right here so all the rooms we want to wrap that in a div here so we're just going to go ahead and take everything from this link down to this div and we're going to paste that into this container so we're about to have two columns one we have a main container around and everything then we have a container around our topics and a container around that list of rooms so let's go ahead and check this out here so if i refresh it they're all in line so we want to create some layouts here so we'll go ahead and add in some styling right here so we'll just add in a style tag and we're going to take that home container so we're going to get that class home dash container and let's wrap this so we're just going to go ahead and create a grid so we'll just do display grid and we're gonna do grid template columns and we're gonna do one fr and then three fr so that's gonna stand for one fraction and three fractions so technically we created two columns and this is specifying how many fractions of the website or the page that this is going to take up so don't worry about the details go ahead and create this and make sure you have two columns here so if i save this this column on the right should be wider so if i refresh that there we go so we see our topics on the left side and then this section is taking up three fractions now what i want to do is list out all the topics here so we're going to go to this view and we're first going to go ahead and make a quick query for all the topics so we need to go to our models and we need to import these so this will be the first type of search that we do and we're just going to do topics and this is going to be topic.objects.all now for now we're just going to list out everything but if we start adding in thousands of topics into our website we want to maybe filter these down by just the top topics or maybe the topics with the most rooms but we'll leave that up to you to figure that out here so that needs to be topics we want to make that plural we're going to throw that into the context dictionary whoops we'll just type that out so we'll do topics and we'll just do topics right here okay so we have all of our topics and we want to render these out in the home page so we just want to go ahead and loop through all the topics so we'll do four topic in topics and we're going to create that closing loop so we'll just do end for not form and in each iteration we're going to create a wrapper and in here for now we're just going to do a link here so we'll add in a link and this is going to be the topic name so we want to be able to visibly display it and then what we're going to do is add in a link now this link so we're going to use the url tag one second here so we'll do href inside of this link we're going to send the user back to the home page so the url is going to the home page except for outside of this curly brace we're going to add in a question mark then we're going to pass in the parameter name so that's going to be q and we're going to represent query so it can be whatever you want and we're going to set that to equals to and then that's going to be the topic name so we'll just do topic dot name and here we just want to also list out the name i want to make sure you can see that so the topic.name and there we go so what's going to happen here is we're going to the same page when we're in this sidebar so we're going to click on this it's going to send the user to the home page and we're throwing in the topic name now if i go ahead and refresh this when we click on that that's going to be added to these parameters right here so we can see python if i go to django web development javascript that's going to be added in in the parameters and we can get this value right here inside of the view here so we're going to get that value and use that to filter down some data here okay so now that we have that i also want to make sure that when we're filtering this down i can also refresh the filter and go back to get all the values so in this case we're going back to the main url and we're just going to specify all so if i go ahead and refresh that so if i go to python and then django and then back to all it just gets rid of that and we're back on the home page so in the view for the actual functionality we can use the filter method so if i don't do anything here it's going to work just like the all method it's just going to go ahead and get back all the rooms because we haven't added any parameters now what i'm going to do here is create a variable and this is going to be q and q is going to be equal to request dot get so the get method and then we're going to use the get function here and we're going to get q here so q is going to be equal to whatever we passed into the url now what i could do is just go ahead and go into the topic so i can go to the model and get the topic and then i can actually query upwards so to the parent so double underscore and then say topic name is equal to q now we're going to get a couple issues here so if i save this let's check this out here so it's going to filter this value down and where we should get back this data so on the first search we have an issue here and that is because we don't have any parameters here and none of the parameters fully match the specific topic that we're looking for so it just gives us back nothing but if we go to javascript we can see javascript if we go to web development we can see back to results here so we need to create some kind of condition here so the first thing is we're going to use an inline if statement so we're going to check if the request method has something and we're going to say if request dot get dot get and then we're getting q so if q is not equal to none then we're going to go ahead and make sure q is the parameter else we can say q right here q is going to be equal to an empty string so we'll throw that in here and instead of setting the value directly because at this point it's just going to set it to nothing if we have nothing and the filter still won't work we can use a value called double underscore i contains well the value is actually just i contains not double underscore but that's how we have to add that in so what this means is that it's going to make sure that whatever value we have in the topic name at least contains what's in here so that means that let's say we start typing out a a specific value like python and we only add in py into the search parameter so it's gonna see that it contains at least those two letters and then it'll run that filter and that will return a positive match now the i there just means that we can make that case insensitive so that means that if it's a capital p or lowercase one it won't make a difference we also could do contains like that and that will be case sensitive now there's also other options like starts with ends with and so on so there's different opportunities here but we're gonna leave it at that so let's try this one more time we'll go ahead and clear that and here we go so we get back everything so that means that we don't have a parameter and technically all of these topic names match that now if i go ahead and go to javascript web development that still works and i also could manually start typing this in and say w e and go ahead and search that and that'll work because we see web development and that matches this query now we want to add in an actual search bar so you see how i did this manually where i just added in that search well we don't want a user doing that and we also want a user to be able to do that from their own search bar so they don't want to have to manually do that or be limited to these links right here so what if a user wants to search by a specific name or maybe by somebody that created the room let's say you have a favorite room creator or a host and you want to be able to find them so you can say something like go ahead and find me all rooms made by dennis so you'll type in my name and it will display those so we're about to make this dynamic so in the header bar here so we're going back to the nav bar let's go ahead and create a search form so just underneath the link right there we'll create a form here and this form is going to go ahead and set the method to get and the default method is get so we technically don't have to set that and the action well this is going to send the user to the home page so we're specifying the url that's going to the home page and then we want to add in the input field we don't need a csrf token because this is a get method the type here is going to be submit so we'll add and submit and then the value well we're not actually going to have a submit form i just realized i would rather have the user just hit enter rather than clicking a button so let's just do this we'll specify the type as text so this will actually be the input field but i do have to give this a name so we'll specify the name as q so it's going to take whatever we have here and throw it into that url with q before that so that's all we need at this point so now what we can do is actually run that search so just before i do that i actually want to add in a placeholder and we'll just say search rooms so we want to prompt the user and that'll be dot dot and let's make that a capital r so we're going to search the rooms let's check this out here so if we go back up here we're going to see this filter here so that's in the nav bar so that means that if i'm on another page here it will take me back here so let's try this let's go ahead and search for javascript room so we'll just do java and then we'll start typing in script we won't finish it if i hit search now it's going to match this right here and there we go now if i'm inside of a different room let's say i go to let's go to viewer room and i start typing in java like that or jav it's going to go back to the home page and that filter works now i want to show you one more thing here and that is how we can make dynamic values here or dynamic searches so at this point we're only searching by the topic name and i mentioned earlier we want to search by a name of a user or a room and so on and technically we could chain these filters down here so we could say something like uh comma there and then we'll just add in let's see we'll do name of the room so now we have name that's going to the room and we can say the room or the name contains whatever value now the only issue with this is that that means this search parameter has to match everything now we do have a method it's called a qlookup method that django gives us and this is going to allow us to add in things like and or or statements into that search and i'll show you what i mean by this so let's add this above here and we're just going to make a quick import so we're going to do from django dot let's see where are we getting this from we'll do db dot models and then we're going to import q and that's going to be a capital q now with q we can actually wrap these search parameters so we're going to add in a capital q add in the parentheses and then we can go ahead and just chain this so i'm going to fix some indentation here and i can add in an and statement so i can do and and then go ahead and write in q down here so we'll do q and we'll just say name underscore i contains and then we'll throw in the search parameter now the only issue here is that both of the values here have to contain that so i can actually do an or statement so i can add in a pipe and that means or so that means the search parameter has to match this one or this one so i can throw in one more we'll copy and paste that actually and let's see let's go by description so we'll do description so description contains the search parameter so we'll close out that closing one there and that's it so now we can search by three different values so if i go here let's go ahead and clear this what just happened here i contains it looks like i misspelled contains somewhere okay so we need to fix that and let's go back here refresh that okay so name double underscore and then this one has to be a double underscore okay now that should work so if i refresh it still supportive contains okay i just have a bunch of misspells one second contain so description i contains name i contains that should be good all right sorry about that okay so what if we don't want to search by the topic we want to search by a title so we'll just start typing in i wanna let's say we only remember like the star of a room name but we don't remember the full name here so we can click that right there and there we go so we can search by the room name and then later on if i add in a user we can search by the user so that's it for the search functionality i just want to throw in one more thing here and i want to be able to get the room count here so the actual account of how many rooms we have here so if we go back to the figma design we see study rooms and then we can see total rooms found near you in our case i'm going to change that up a little bit i actually don't like how that looks so we'll go ahead and do something like this so we'll go into the home container and we'll take the container for the feed here just above our create room link we'll go ahead and add in h5 and we'll just do let's see we'll just do room underscore count so we're gonna pass this in in a second and we'll just say blank rooms available like that okay so in the view we need to pass this in so we'll just go ahead and take this room here so these are going to be filtered down and in django we can just go ahead and do room underscore count and then we can get rooms so a room count is equal to rooms dot count now in python you could use the len method and just wrap that and that's going to give you the length of a list in this case we get the length of a query set and this actually works faster than the python len method or len so we're going to do that we'll pass that in and let's check this out here so if i go ahead and refresh that now we see we have one room available if i clear all of those we see three rooms so as a user searches we see two rooms available for this topic right here and that's exactly how we wanted it to be so we always see the room count now we're going to talk about authentication so at this point i'm going to build in a user login form user registration and also log out functionality now before we get into this i want to talk about how django deals with this so django by default has session based authentications and how this works is it's the same as what we have in this django admin panel so when we go to this admin panel when we provide our credentials this gets sent to the back end and in the back end there is a database table called sessions here so if we go to installed apps inside of settings.py let's see we'll do settings here we see our sessions here and if you go and actually use something like pg admin and postgres you'll be able to see this table so when a user logs in this is sent to the backend and a session token is created and this stores information about a user so once that user is authenticated we now know when this user logged in who this user is and all this information about them so at this point let's go ahead and do inspect element and we're going into application and then we're going to go into cookies here so depending on what browser you use it's going to look a little bit different but we want to go into cookies so we're going to clear these ones out right here and we're going to log this user in so that session will get created in the database and then we're also going to take that session and we're going to store it in the browser now as we navigate through pages on our website we don't have to keep logging in that session is going to be stored and on each request it's going to be sent to the backend and we're going to check is this user actually someone that's in this website are they allowed to be here are they authenticated and what permissions do they have so if i hit enter here so if i submit this login form we're going to see a session get created i don't know what the heck happened okay so i removed the csrf token so that's going to be there by default django does that for us so we're gonna hit login and look at this so i'm logged in now and i see the session id so here's the value here it's this token right here so i want to make sure you can see that and this is now stored inside of the cookies here in the browser so we went into application and then cookies on each request we double check this session or django will take care of that and then it lets me persist here so let me go through all the pages like when i go to this next page we quickly check the session and it made sure hey this person's allowed to be here so django has a built-in by default and what we're going to do is we're going to build this in ourselves so we're going to use that authentication system and we're going to log users in here so let's go ahead and close out the admin panel because we don't want users to have to use that we want to have our own authentication so for this let's go ahead and start by building out a template and we're going to call this registration login so we'll just do login underscore registration or register so login register.html so we're going to have one template for a login and register form and then the form itself will change based on what page the user's on whether they're logging in or trying to register so we're going to go ahead and do some boilerplate here i accidentally hit caps lock we'll just do extends here and we're going to extend main.html trying to type faster and i start messing up here we need to create the block tags we've done this a lot so we'll just do block content and then close that off here and we'll just do end block content okay so in here i'm going to create a div here so i want to wrap the entire website so we'll do div and it looks like i missed something here and now let's go ahead and create a form here so this is going to be our login form now django does have a built-in login form there's different ways of doing this and they also have a built-in registration form what i'm going to do here is just use my own login form it's going to have two fields of a username and password later on we're going to talk about doing this with an email instead of a username and we're just going to submit it now for the register form that will just be generated for us so the method here well this has to be a post method we're going to send data back to our view and the action well we're going to leave that as an empty string and we need to add in a csrf underscore token okay so now for the input value we want to go ahead and tell the user to log in so the type will be submit and then the actual value well we're just going to say login and let's create the two fields here so we're gonna create an input field this one is gonna be the type of let's see text here so that's gonna be the username the value is gonna be username so we need to know the name of the field when it's submitted and we'll just say placeholder enter user name here okay i also want to add in a label here so let's do label and we'll just say user name and we'll throw that in and let's just copy this right here we'll add this down here so label is going to be password and let me turn off the fan really quick it's actually getting cold i just wanted to turn that off from freezing in here okay so add in a password the type is going to be a password field and this is going to make sure that there's the dots instead of actually displaying the value and then the value itself will be password so we want to be able to get these in the back end and then enter password okay so we have our form we just have a simple form no styling here and extends the main template now inside of our views here we're going back into the views and we're going to create a view for this login page so let's go ahead and add this above our home page so it's kind of like the first step in this process and i'm going to call this login page now do not call this view login because we have a function that we're about to use it's a built-in function called login and there's going to be a conflict if you use that name so try to do something else in this case i'm just going to call it login page you can call it login view just not login on its own so we'll go ahead and return that template render and we'll throw in the request object render that template so that's going to go into base and we're going to get login underscore register dot html and let's go ahead and actually pass in the context dictionary and we'll create that in a second so context set that up here okay so we need a url now so we'll go ahead and put that up here so we'll put that at the start and add in the closing comma and this is going to be login the closing forward slash and then views dot login page now the name we'll just do login like that and that's going to work here so leaving the name like that it's good that works here and at this point i want to let's see i want to render this link at the net or inside of the navigation bar so we'll just go ahead and bring this in let's see we'll just do this above the or just after the form let's just do this right here so we'll add in a link here and this is going to be to log in and the url is going to point to login here so we'll add in the url tag here and we're going to the login page okay so let's check this out here so we see login if i click on that that's going to take me to the login page i see the username uh not sure what that's the case enter username i guess okay so i just used that value let me double check why that's happening that looks a little bit odd so the value is username and okay so this needs to be the name actually sorry not the value i don't know what that why i did that that's that's an issue right there so now i see the username so if i remove that there we go okay so we have the form and now we want to be able to log in a user so at this point when we send this information we need to extract these values so earlier on we did a model form where we used a model form for this and that kind of took care of everything here so instead of having that done manually and using the user login form that's already built in we're gonna do all of this by hand so up here we're first gonna check the method here so we're gonna do if request dot method if this is equal to post so that means the user entered their information and logged in here well we want to be able to get the email and we're just going to go ahead and go into request dot post dot get and we're gonna get the not email but the name here or username okay so that's gonna be username so after that we also want to get the password so we'll just do password and that's going to get the password so these two values will be sent from the front end so we're just getting the values here and once we get those i want to first make sure that this user exists so i'm going to use a try catch block so we're going to do try and we're going to say user and we'll just try to query that user so let's see i need to import that user model so we'll go into models here and i imported that built-in user right here we'll bring that into our views and let me close out the navigation bar so i bring in the user and we're going to check if this user exists so user.objects.get and we're just going to go ahead and say username is equal to username so i want to make sure this user exists if it doesn't we want to throw some kind of error so we'll just go ahead and do accept here and at this point instead of working with something like flash messages we're going to go ahead and just render let's see actually how do i want to do this i actually might be able to use flash mesh flash messages so let's try this let's actually look up django flash messages i wasn't planning to do this but let's go ahead and try this so these messages are really cool because they store this uh inside of django as far as i think they're in the sessions and they only are stored inside of one browser refresh so we won't go into the details here but what i'm going to do here is just grab these messages here so i'm going to grab this import actually let's see so we're going to import this like that so from django.contrib import messages and we're going to bring this in right here so just underneath render and redirect and i'll show you what this means or what this is in a second so then we need to be able to add in a message here so we can go ahead and do messages dot and then we can specify a type of message so if a user doesn't exist we want to be able to throw in an error message so i'm going to take in this one so we're going into messages dot air that's going to give us the type of message we throw in the request and then the actual message that we want to output so we'll bring this in right here if a user doesn't exist we'll throw in an error message and we'll say user does not exist okay so like that so if a user doesn't exist we're gonna throw in that message and let's try this really quick so we're not doing much here we're just going to go ahead and try this so let's say we want to throw in a user that isn't in our database we're going to click that and i just realized we need to output this flash message so now to actually output it we're going to go down here inside of the django documentation and let's copy this entire statement here so we're gonna see if we have any messages in our template if we do we're just gonna go ahead and output all the messages so we're gonna bring this into let's see i'm going to bring this into the main template here so we'll add this to main.html sorry if i'm going a little bit fast i didn't plan for this part but i do want to search this or i do want to show you this so underneath our nav bar let's add this in so that means anywhere we have a flash message it will appear so messages are going to be passed into our template here just like that so we can see the messages here we can access the messages like this so we see if we have any messages then we just output those messages here and there's that weird if statement if you just copy and paste it directly that's what it's going to look like so let's actually just take out this tag here and let's just say i'll put the message here and that's it so that'll clean it up a little bit better so we have a ul tag if we have a message we output it so we check if we have them there we go so let's try this one more time so we'll go ahead and try to refresh this so if i type this in and hit login it says user does not exist and then if i try to refresh that that only appears for that page so we have a message that gets that tells us what's happening here and that's a little bit convenient there to be able to actually just output this instead of not knowing what's happening so we're just going to check if this user exists if they don't we're going to output that error now if the user does exist we're going to go ahead and continue here so we're going to go ahead and do user and we're going to use the authenticate method so i'll then to kate like that and this is a method that we have to import here so we're just going to go ahead and import this and this is going to be from django dot contrib it's about django there so django.contrib dot auth and we're going to import authenticate and we're also going to import the login method and this is why we couldn't name that specific view login and we also want to import the logout method so we're going to use authenticate and once we make sure that we have a user we want to authenticate this user so we want to make sure that whatever the credentials are for this specific user we want to make sure that they're correct so we'll just go ahead and do authenticate we'll pass in request here and then we're going to pass in the username and we'll throw in the username that we got here so from here and we're going to throw in the password so we're going to authenticate the user so what authenticate is going to do is it's either going to give us an error or it's going to return back a user object that matches these credentials so we have a user now if the user credentials were correct if they weren't well it's going to give us an error so now we're just going to go ahead and do if user is not none so that means if we got a user so it's either a user or none then let's go ahead and log in this user so we're going to use the login method so we'll do login and for the login method all we do is pass in the request object and then the user and login what that's going to do is it's going to go ahead and add in that session in the database and then inside of our browser and the user will be officially logged in so once the user is logged in we'll just go ahead and do return redirect and we want to send the user to the home page so that's going to log in a user so let's recap this we get the username and password we check if the user exists if the user doesn't exist somewhere we make sure that the credentials are correct we get the user object based on the username and password we log a user in this creates a session in the database and the browser and then we redirect a user now we want one more thing here if the user is not logged in we'll just say else and we're going to create another flash message so we're going to write in else and we'll just say user name so user name or password does not exist let me scroll up here so username or password does not exist okay so let's check this out here so if i go in here we'll refresh it we're going to enter in our credentials mine are already entered in there so go ahead and write your stuff in there log in and now i'm redirected to the home page so if i go here go into application we'll check out that session i can just remove the session id and that's automatically going to log my user out here so if i go ahead and refresh that go to the home page the user is not there now we're not doing anything like restricting a user from certain pages like that so we haven't done that just yet we'll take care of that in a bit here so if i log a user in session gets created and we redirect a user now what if i want to log out a user so let's go ahead and add that in here so we can actually access the request object directly inside of a template so we'll go into the navigation bar and we're going to write in a condition here so we're first going to check if a user is authenticated so we'll do if user so we can access or if request dot user dot is underscore authenticated so if a user is authenticated then let's go ahead and output the log in button or the log out button so we'll add in another link and we're just going to say log out and we'll fix that or we'll fix up that url in a second so we'll go ahead and close that end if statement or the if statement so we'll just do end if and then we're going to add in an else statement so we'll just do else so if a user is authenticated that means we have a session in the browser then go ahead and add in the log out button if the user is logged in or logged out or not authenticated then go ahead and prompt them to log in so let's go ahead and refresh that so we see a log out button right now so we want to be able to log out a user now so let's go ahead and go back into our views and we're going to create a log out view and this is going to be just a view we don't need a template for this and we already imported the login or the log out function so we'll go down here just underneath login we'll create a method here and we'll just say log out user like that so we'll throw in request and this method is just going to be a get request so we'll just go ahead and return redirect and we're going to send the user to the home page so let's just go ahead and do that now all we need to do here is use the logout method pass in request and this is going to delete that token therefore deleting that user so in the urls here let's go ahead and bring this in we'll copy and paste login and we'll just do log out like that and then we can do log out user and then the name will be log out and now we can go to the navigation bar and specify the url tag to point to log out so we'll just do url and then log out okay so let's give this a shot here so if i go ahead and go to the home page we're logged in if i go to log out it's going to clear the user information and now we're officially logged out so i can go to login i can log in the user right here and we see that be updated here so at this point what i want to do is restrict some pages here based on the user and their status of whether they're locked in or just a user browsing through the website here so we have the login logout functionality but it really doesn't do much for us here so the first thing i want to do is make a quick import here and actually add in a decorator above a view that i want to restrict now with class-based views we use mix-ins for this we can also use middleware for this there's a lot of different ways to actually restrict a user but we're going to use simple decorators for this functionality so the first thing i'm going to do is import this decorator so we're going to go into django.contrib so from django dot contrib and we're gonna go into dot auth dot decorators and then we're gonna import login required now the page that i wanna restrict here is gonna be a create page so the create room here at one point i actually want to remove the button completely if a user is not logged in or maybe just redirect them i don't know exactly how i want to figure this out here so let's just go ahead and do login required so that's that's all we have to do here now if this doesn't check the type of user what permissions they have that's going to be a little bit more functionality but at this point once we add this decorator a user that is not authenticated if their session id is not in the browser and it's not credible they will be simply redirected now we can specify where we want to redirect that user in this case i want to redirect the user to the login page so let's go ahead and try this what the heck did i do there so i'm gonna oh i clicked on that decorator okay so i'm gonna save that we have the login required decorator above the create view method so i want to log out here and it looks like because of that thing that i just did had some kind of big error so let me clear that and restart the server so login required let's see we have a login url and i need to remove that forward slash okay login required got an unexpected argument uh this ecb login url sorry about that okay so now we have a login url and that issue goes away so we'll go back to this page here we log out a user and if i try to go to create room we're redirected back to the login page and for now i'm just going to leave it like this actually so i actually like this because uh we want to prompt a user to create a room but if they're not registered we want to encourage them to either log in or register which we'll add here in a second so once we have that i also want to add in login required to update room so i don't want just anybody updating a room and i also want to make sure that only authenticated users can delete a room so that's how we can actually restrict users now in this case in theory if i know somebody's room id i can just log in and i'll be allowed to go ahead and update their room so i want to restrict a user so let's see how do i want to do this so at this point i'm just going to write in a condition right here there's a bunch of different ways of doing this we'll just say if request dot user is not equal to let's see so we can do if request.user is not equal to room dot user then we just want to return we'll just do return let's see we'll just do some kind of http response so i'm going to import that really quick i know i removed it but we'll just add that in right here so we'll just do from django.http import http response so if a user is not the correct user meaning they're not the owner here let's just do return and then we'll just do http response and they will just say you are not allowed here okay so if they're not the owner we're gonna yell at them here so if they're not the room user so if they're not equal to that let's go ahead and stop them so update room let's check this out here so we'll log in log in as dennis and let's just try to edit tim's room so as a super user at some point we will want to add in functionality so an admin can edit this so let's see which room does tim own so we have tim right here so we'll go to edit and room object has no attribute user so we'll do room dot host like that so that's what it was so we just want to check that again we'll go ahead and see this so i am not allowed here because that's tim's room and let's say i want to edit my own well i'm allowed to do that so we could do something like that and we can also say if request.user is not the host or request dot user or we can say maybe and we can just say if the user is not a super user so i won't worry about that and we're just going to add in this check here for update and we're going to add this for delete okay so now only the correct user can update this now let's see at this point i should probably hide this button completely here from any user that's not the owner so we see my rooms right here i'm logged in as dennis we'll go to tim's and we're going to remove this stuff right here so we'll go ahead and go into the home page so close out the nav bar all these links that i have open here we'll close out urls here and let's go to home and i just want to make sure that if i'm not the user i don't see the delete and edit button so i'm just getting rid of this right here so we'll go up here let's see so that is inside of rooms and we'll just say if the user is not authenticated remove it so if user dot or if request dot user is not equal to the owner let's just do that let's just do room dot host then let's just make sure we hide this information so let's see if the user is the host so we'll just do if the user is equal to the host then we'll display that information so we'll just do end if like that okay so that should hide that information now so let's try this here so we'll go ahead and refresh it so now tim can only edit his i can only edit mine or delete mine and we are good to go okay so let's see what else do i want to do here now i also maybe want to restrict a user from going to the login page so at this point if i'm already logged in and i try to go manually to this url maybe we can just redirect a user here so um we don't want a user re-login in so we'll just go ahead and add this functionality in here we'll go into login and we'll just do if request dot user dot is underscore authenticated so this is a method that really helps us here authenticated okay can't spell that word uh we'll just do return redirect and let's just send the user to the home page okay so if i'm logged in i shouldn't be allowed to be on this page okay looks good here alright so what do we want to do next here so only the owner can update and delete their information we restricted pages here only a user can edit their own post now let's go ahead and move to registration so for registration let's log out here we'll go to the login button here and we want to add in a link for that register page so we'll first go to login register so that template and we're just going to go ahead and add this inside of this div right here so we'll create another div actually so we'll just wrap this for the login page and then we'll have a register page so i'm just going to copy this div right here we'll paste that down here and we're just going to change up the contents here so we'll just say register for this button okay and then for the actual form fields we're going to auto generate that so we don't need that and we want to write a condition so at this point both form fields are going to be rendered here so we want to hide this in a second so what we can do here is we can actually pass in like a page name so we'll just do page and this is going to be the login page so we're just going to specify a variable here in a string value and we'll just say log in why can't i write that login and there we go okay so we're also going to take this page throw this into the context dictionary paste that in right here that's the login page and then we're going to create a register page too so register will be underneath log out and we're going to call this register user okay we'll throw in request here we'll specify the page the page is going to be register return render we'll pass in request and then the template okay so we're returning back the same template and we're passing in the page now i just want to make sure to create a view for this so we'll copy login and we're just going to do register we'll bring in register right here and this is going to be register page so did i call the view there so we'll do register page like that so i can copy that save it bring that to the url paste that in save it and now we have two links so on or in the template here we are going to point the user to the register page here if they're not or if they want that option here so in figma here we have a design for the register page so on the login page we ask haven't signed up yet and then we have a signed up or a sign up link and then on the register page we'll say already signed up and we're going to point the user back to the login page so let's go ahead and ask that question right here so we'll ask that after the form and we'll say haven't signed up yet so we'll ask a question and then we're going to add in a link here and that's pointing back to this page and we're just going to say register or sign up guess that's two words and we're going to create the link itself and we're going to point that to the register page okay so in this case we're going to take this same question and we're going to put that underneath the register form and we'll say already signed up so we're asking the question and we're just going to send the user back to login and this will be the login page okay so we passed in the page value here for a reason so in this case all i'm going to do is check if the page is login if it is we'll render out the login form and if it's not we'll render out the register form so we'll just add in the question right here so we'll just do if page is equal to login and then we'll just do end if and if we'll close it and then we'll add in the else statement between the two divs here so we're just going to separate those and just do else and let's save that so just a little bit of prep work let's go back here and let's check this out so haven't signed up we go to we go to this page and then already signed up we can go to the login page now django has a user creation form that already makes a lot of this easy for us so we'll go ahead and add this in here so we'll just go ahead and make an import here really quick so let's see i need a second here i just need to remember what the actual import was so we'll go back to the view so we have the template and the urls here and let's go back to the views or views.py and let's just import this so this is going to be from django.contrib dot auth.forms and we're just going to import the user creation form so it works a lot like the model forms that we've already used so we're actually going to customize this form later but for now we're just going to work with the defaults here so we'll copy this and we're going to bring this down into the register view so we'll go ahead and pass in form and this is going to be user creation form just pasted that in and we want to pass this into the template here so we'll just do form or the context dictionary so we'll just throw that in right here and we'll throw in form okay so at this point i guess we don't actually need the register page variable because we already have that for login and register shows in the else statement so we're just going to pass in the form into the context dictionary now let's take this form value and let's go into this page here and let's just render this out so underneath our csrf token in between our submit button let's just go ahead and pass in form dot as underscore p remember sp wraps the paragraph tags which makes the styling a little bit better so if i save this let's go ahead and check out what this looks like so we'll go to login if i go to sign up now we have an entire registration page now later on i'm going to want the user to submit things like their avatar or their profile picture maybe their name their email here and so on but for now we're going to leave it like this until we get to the customization and now there's a reason why i'm leaving that for later because we're going to have to customize a few things here and i just want to kind of focus on the basics here so we have a registration form here and now we can actually process this so let's go ahead and actually go through this so we'll go ahead and go into the view now we have our form we pass in the token we set the method here and let's continue so we want to check the method here so we'll just do request dot method or request.method if this is equal to post let's go ahead and process this form so we're going to do form here form and that's going to be user creation form and we want to go ahead and actually pass in the data so we'll do request.post so that's going to be the password and the username and all the credentials that we send then we want to check if the form is valid so if form dot is underscore valid so this is all pretty redundant here at this point we've done this before so if the form is valid then let's go ahead and process the user now we're going to want to customize this user submission here so we can actually do something like this so we'll just do form and or actually we're going to do user and we're going to do form form dot save and we're going to commit this to false here so commit is going to be equal to false so technically what we're doing is we're actually saving this form and we're like freezing it in time here because we want to be able to access the user that was created meaning if the form is valid the user is going to get created but we want to be able to access the user right away so to do that we have to just add in commit is equal to false so we can actually get that user object so the reason why we want to do this is if for some reason the user added in like a upper case in their or they capitalize their name or maybe their email depending on how they're registering we want to make sure that that's lowercase automatically so we want to be able to clean we actually want to be able to clean this data so let's go ahead and do dot username so we got the user that was just created and we're just gonna do user dot username dot lower so we're getting the current user's name and we're gonna update it to a lowercase method so we're just making sure that that name is cleaned so once we have that we can actually save this user so we'll just do user.save and i actually noticed one thing here i want to take this lowercase method and i actually want to add this into the login method because what if the username is one way and then when they log in they accidentally capitalize something so in this case we want to take the username and we'll just do lower also in the login method so we just want to get rid of that issue here there's different ways of doing that too so once we register a user we can go ahead and just redirect a user so we can just do redirect and we want to send the user back to the home page so we'll just do return redirect and we're going to send the user back to the home page now before we do this i also want to log a user in so let's go ahead and do this we're going to use the login method so we have that method we're just going to throw in request and we pass in the user object so the user that just registered we're going to log them in send them to the or and send them to the home page now if something didn't go correct here let's go ahead and process this we'll just do else here and i'm gonna use a flash message here so we're gonna do messages dot error so if there was an error let's see i think we just need to pass in request so we're gonna pass in request and then the actual message here so let's try this we'll throw in request and then we'll just say an error so an error occurred during registration here let me just move this down so you can see it during registration and that's supposed to be two hours okay so yeah that's supposed to be two so now we want to output this error now you can add in different types of error handling for maybe if a username already exists in the database you can do this with javascript or in the backend there's a bunch of different ways that we can actually go about this but for now we're just going to look for any kind of error in registration so we pass in the user data we throw that into the user creation form we check if the form is valid if it is we get the username we make sure that the username is lowercase we save the user we log the user in and then we send the user to the home page so let's give this a try now so we'll go ahead and first i want to throw in that error so let's just try this we'll throw in something like this and we'll just make sure the passwords don't match or something like that so we'll just click register and we see that error so an error occurred during registration so we'll go ahead and try that again let's see we'll just do eric for the name so we'll throw in eric type in a username and password we'll confirm that and let's go ahead and hit register and it looks like we are good to go so i'm officially logged in and just to test this out let's go ahead and add something into the header bar so we'll go to the navigation bar and we'll just say if request.user is authenticated let's just output some text that says hello and then the username so we'll just do hello and then request.user so request.user and let's check this out so if i refresh this now i'm logged in as eric so there we go we can add in new users this user is now in the database so we just took care of login logout restricting pages and registration so what i want to focus on next is going to be user comment creation here so if we go to a room here so let's say i want to go to uh i want to learn html i'm logged in as eric at this point i want to be able to actually make comments and join the conversation here so let's go ahead and first work on the room page so close out the nav bar close out registration and our urls and i promise we'll get to styling here in a little bit here we're almost there so we'll go ahead and go to templates we'll go into room and let's see what we have here so at this point i also want to add in the room description if we have one so we'll just do room dot description okay so we throw in the description and i also want to output the comments that already exist in this room so if we have a comment here i want to make sure to output that so let's see at this point let's just go ahead and add in another div here so we'll create a div and this is gonna be to output the actual conversation so we'll just do uh comment dash wrapper and let's just add in some kind of h3 tag and we'll just say conversation so we want to be able to output this throw in some kind of line break and let's output all the conversation or the comments so let's see why is this div oh i didn't close this up here okay so inside of the room view we'll go down here room let's just get all the comments here so we'll just get all the children of this room so let's just go ahead and do comments or messages let's just do that so we'll do messages and this is going to be equal to room dot message underscore set dot all and i just realized we haven't talked about this yet so at least i don't think we have so message underscore set.all this can be tricky for the first time if you just see this now we can query child objects of a specific room here so if we take the parent model in this case we have a room to get all the children all we have to do is specify the model name and in this case it's message and we don't put that in a capital letter we put that in a lowercase value so message the model name and then we can do underscore set dot all so it's basically saying give us the set of messages that are related to this specific room so we got the room and now we got all the messages so let's go ahead and pass those into the context dictionary we got all the messages and in here we can just go ahead and loop through and output all of those so we'll just create the for loop so four message in messages close out that loop so end four and i'm gonna wrap these inside of a div so we'll throw in the div right there and let's see we just want to output like the username and the message so let's see what this is going to look like in the end here so we'll go back to the actual room design so we're going to output this we're going to output the title hosted by and then the tag which we won't worry about in detail so let's just output the username when this was posted or when this comment was posted and then the actual message here so the username message and the time since it was posted so let's go ahead and do this so we'll create some kind of span tag let's just do small and at first we want to output the username so we'll just go ahead and do message dot user so we're outputting their name then we're going to create some space and we can just do message dot created so message.created and there is actually a filter that i can add to this so let's go ahead and actually check this out first so we'll refresh that and let's see where we have a conversation so let's see let's learn javascript i think i added in some messages here so i can see these messages right here and we have we have a small issue here because uh those messages inside of the django flash flash messages are showing up here too so we want to rename this actually so let's change this to uh room messages here so in the template that's how they're being output and that's going to give us an issue so we'll just do room and then messages and we'll camel case that actually let's just do underscore m so room messages like that so we'll change this name right here let's go back to the room let's do four message in room messages we'll remove that so we get those removed right there and now we can see each message so dennis and tim were added or were messaging in this room and then we can see the time so i don't want to actually see the date what i want to do is have like a time since stamp here so if i posted this like a minute ago i want to be able to see like posted one minute ago or five days ago whatever that value is so to do this i can actually add in a pipe here so that's going to be a filter and we can do time since i believe that's how it is right there so if i add that in and refresh that now i can see 20 hours ago or 20 hours and 10 minutes ago here so we'll just add in a go like that so add in a space here and there we go so dennis posted 20 hours and 10 minutes ago tim commented 20 hours and nine minutes ago and what i'm gonna do here is filter these down to only get the most recent message so we'll just go ahead and i can actually add in order underscore by like this and we're gonna order by the created value so in this case i want to order it by descending order so the newest will be first and we'll just do created so the most recent message at this point should be first so there we go so those just flip their order so now we can see the actual message so we'll close this out right here and i also want to output the actual message value so for now the styling is just going to be pretty rough here so let's just add in a line break so there is separation and we'll add in a paragraph tag and we'll just do room dot or message dot body okay so we'll throw that value in and let's check this out okay so we see hey hi and that's the conversation now once we have that i want to be able to actually create the the user comment section so let's do this one thing here let's make sure that a user can actually edit their own messages actually we'll do that in a second so let's first actually add in the form here so inside of our comment wrapper we're going to create another div so we're going to create the div and this is going to be comment dash form so we're going to bring that in and we'll just add in the form here and this form here the method is going to be a post method the action well it's going to be sending a post request to the room view here so we're good with that we can send it to the same view and we'll just add in a csrf token so we'll do csr underscore token and let's actually add in the comment here so even though this is a text field here i'm going to add in an input field here so i want to try to minimize the length of these messages i want to maybe encourage users to add in more messages so in this case we're just going to do type of text here because if i add a text area field it's going to leave us a little bit too much space here so let's go ahead and set the name we'll add in the body and placeholder let's see what am i going to write here so in here we're just going to say write your message here so it's going to be a smaller field so we'll just go ahead and do write your message here dot dot okay so let's check this out and there we go so we see that and i'm not going to add in like a submit button because when a user hits enter that's when i want to render that out now i also want to make sure only an authenticated user can write a message so we'll go ahead and create a condition here we'll just say let's see we'll do if request dot user dot is underscore authenticated you can never spell that word so we'll just add in the end if right here so we'll just do end if let's try this out refresh it if i log out here go to a room or that's in create so let's just do let's learn javascript now i don't see that form if i log in as eric so we'll just do eric here i'm logged in we'll go to let's learn javascript and now i can see this form here so let's go ahead and actually create the message itself here so we want to submit the post request so we'll go back to the view and this is going to send a post request to the room view so we'll go into room and we want to create a condition here so in the room view here let's go ahead and process this so we'll scroll down here and we're just going to say if request dot method is equal to post so if this is a post method let's go ahead and set message and this is going to be message dot object or objects dot create so we haven't used this method yet we've been using a model form and by the way i need to import message here so i haven't imported that so we'll import it save it bring it down here and we'll go back to the room so we've been using the model form and that kind of auto-generates it for us now we have a create method so we can use a save method to update something or we can do create and this method does what it kind of sounds like it's just going to go ahead and create the actual message so what i can do here is go into the model fields here so we'll go into message we want to set the user the room and the body here so let's go ahead and first set the user and that's going to be the logged in user so request dot user so we'll throw that in and then the room that's going to be the room here and let's see we have the body here so the body is just going to be what we passed in the form here so we'll just do request dot post dot get and then we're passing in the body and we're passing this body in from here so whatever we named it here that's how we're going to get that data so once we get the data we're just going to go ahead and do return redirect so redirect and we're going to send the user back to the room page and at this point we do have to pass in a dynamic value so we need to pass in the primary key and that's going to be the room.id now the reason why i'm doing redirect technically i could just not do this and it's still going to be on that page the form will be there and the page will refresh but the issue is now this is technically going to be a post request and it's going to mess up some functionality here so we actually want that page to fully reload in a sense clear what's going on and make sure that we're back on that page with a get request so we just want to process that so let's go ahead and try this out we're going to test this here so we'll go into the messages refresh it and let's add a message so we'll just say what's up we're going to join the conversation if i hit enter here we go and i see eric's message here that was posted zero minutes ago so there's a few things that i can do here i want to add in uh delete functionality and i also want to add in participants here so let's see how do i want to do this so if i go in here we see a list of participants right here so i want to be able to add these now for this we're going to have to add in some more functionality into our database here to actually do this now we haven't talked about many-to-many relationships i go over this inside of that course on udemy but many too many relationships are just never another level of relationships in the database and what this means is how a many-to-many or a mini to one relationship works where you have one parent and multiple children a many-to-many relationship means that multiple objects can be connected to multiple other objects and vice versa so in this case think of it this way we can have a room that's connected to a user but a user doesn't have to be only in one room they can go to many other rooms and the rooms can also have many users so it's like a interchangeable relationship i guess it goes in multiple directions so i would highly recommend looking that up i'm not going into how many to many relationships work that's a lot of other explanation there so let's go ahead and actually add in participants here like this so the first thing i'm going to do before we add that relationship is i'm going to go into this page here and i need to modify a few things so the first thing is i want to change the layout here to actually add in some columns so when i go to a room let's learn javascript let's go ahead and actually clean this up a bit so we'll go into room.html and the first thing i want to do is create an entire container for the full room so we're going to take this div we need to wrap the entire room so we can actually create a grid so we'll create the div here and then we're going to scroll down to the closing end block and we're going to create that there so it's going to indent everything for me and i'm going to give this a class of room dash container so we have the room container and at this point we want to create two columns here so i'm going to create the first column this will be the wrapper around all the messages and the form so i'm going to remove that div bring that down here and put that down here so this div right here encapsulates all the content from the room name all the way down to this end if statement now this column that we have for participants is going to be on the right side so i need to go down here and create another div and let's just go ahead and start writing this out so we'll create an h3 tag and we'll say participants okay so it's one of those words that i have to like sound out so we'll create a line break and we're going to have that right here so if i refresh that now we can see participants so let's go ahead and create the actual layout here so we'll create some style tags here and again our template will fix all of this later so the theme that we're about to install and we'll just do room dash container so let's go ahead and do display grid so we're going to make this a grid keep saying frid so grid and then we'll just do grid template columns and we're going to say 1fr and then actually we'll just we'll invert it so we'll do three fr like the home page here and we're gonna do one fr so fraction okay so if i refresh this now we see participants we see the room description the conversation and the message here so in order to add the participants we're going into models here and i commented this out here so we have our room participants now in order to create a many-to-many field all we need to do is models dot many to many field like that and that's what's going to create that model relationship so give me one second here to prep so all we need to do is go ahead and go to that room and we need to specify or we need to specify the actual relationship that we're setting so we're going to add in the user here so we already have this imported that's the relationship and we have one small issue here because we already have a user model connected we need to specify a related name now we can do this regardless but in this case because we have it we need to specify it and that just means that we can't reference a user because we already have a user up here so in this case the related name here is just going to be participants okay so like that i think let me just copy and paste this there so that's the related name and then i also want to be able to submit a form without having to check something here so we'll just do blank and that's going to be true so if i save this i need to run a migration now so i'm going to open up my terminal and we're just going to do plus here let's go ahead and run these migrations make migrations so we need to go through this process again we're updating the database manage.py migrate okay so those migrations were just added i'll close this one out right here keep my server on and let's check out the admin panel first so if i go in here let's just do admin and i'm going to log in as a super user so i was logged in as eric eric can't be in the admin panel because he doesn't have super user status so let's go ahead and go to our rooms and if i go to let's learn javascript we see our many too many fields here now so i can actually add a few users so what i can do is click on dennis and then hit control so i have to hold it down it says this in this note right here and then i can go to tim and then i can save this so let me just move my face out of the way i'll just move myself up here somewhere so we'll do that and we're just going to do save so if i go to i want to learn html or where was javascript so now i see that relationship so we have two participants inside of this room so to get those participants we can just go ahead and go into the view and we're just going to bring the participants in so we'll just go ahead and do participants like that and to get those we can just do room dot participants so earlier on for a mini two one relationship we can do the underscore set method right here for a mini to mini relationship we can just do dot all and we can even filter these down if we want so we got all the participants then we're going to pass those into the context dictionary so let me just bring my face down here so i'm familiar with where i'm at and we're going to throw that into the context dictionary so we'll throw that in and we'll add in all the participants there so that's going to indent that for me and now we can actually access these inside of our room here so let's see we have all the participants we're going to create this loop here so we'll just do four let's just say for user in participants i don't want to keep writing that out so for a user in participants and we're just going to lower case that and then let's just do an end for okay and then we're going to create a div around these set actually we're not going to set a class name let's just go ahead and actually output the user's information so at this point we're just going to output a username because we don't have a full name here so we'll just do a p tag here and then we'll just do at and then we'll add in the user dot username okay so let's check this out now so later on these profiles will be clickable so if you want to join a room check out someone's profile if they're in it you'll be able to just click on these so now we can list these out now what if eric wants to join the conversation so at this point the user is not added in automatically so let's log in as eric and let's go ahead and go back to let's learn javascript so eric commented on here but he's not in the room here so we need to add in this functionality so in the view we need to go ahead and actually process this so once the participant is added in this request.post method before we redirect this we're going to do room.participants and then we're going to do dot add and we actually have a method like remove so we can actually do remove later if we want to remove a participant and we'll deal with that later so we have dot add and then we're just going to pass in the request dot user so request dot user and this user will be added to that many too many fields so a little bit of prep work there but that's how we're able to add a user and then render the user information out or the participants so let's go ahead and add this so this is going to be added when i submit that method here for a comment so let's go ahead and do this let's just say hey again let's say eric's mad because no one's responding he submits that message the message is right there and eric is now a participant in that room so we just added participants and that looks good now what i want to do here is also make sure that a user that's logged in can delete their own method or their own message so let's go ahead and do that we'll bring that in here and we'll make sure that a user can delete their own message we'll go in here and let's go ahead and go into the messages so we have the conversation for message in room messages and let's see so we're going to create two links here or we'll just create one link let's just say we're like twitter we don't want to give people uh editing functionality for whatever reason it's pretty messed up that they do that but i guess we're going to do it too so let's just do delete so for now we want to do delete i would recommend ask practice go ahead and add in edit functionality too so we're going to set the url here so url and that's going to be delete message okay so we have a delete message link and i'm not going to save this because this is going to throw in an error right now because i don't have this url so let's go ahead and go to our views and let's first create that view so at this point what i'm going to do here is just copy this entire delete view for deleting the room so we'll paste that in here and we're going to change this to delete message so we need to pass in the id we want to make sure the user is logged in before they can delete it we're going to get a message instead of a room then we're going to check if the user is the message owner so in the message we have an owner or a user actually so message has a user here so inside of here yeah so we're going into that so we have if the request is a request.user is not the message user then we want to redirect them now if they are we want to process this we're going to change this to delete or message dot delete okay and then we're just returning back the delete template remember that template is meant to be dynamic so it can render out that value as obj so we'll change this to message we just updated everything from room to message we had to update this value and we just delete it so we'll go back into the urls now we do need a url path for this let's copy the delete url here and let's just go ahead and paste this so delete room is going to be delete message and then delete message all right so we have the url we have the view and we can now set that link and the link has to be to message dot id so let's save that let's check this out i also don't want to list this link out at all times so let's do this let's make sure that only the owner can see can see that delete message so we'll just do let's see we'll back this up here and we'll do if request dot user is equal to message.user then we can just add in and if and only the owner can see this question right here or this option so we'll do end if all right so we have that if i refresh this let's see we have an error request dot user expected empty let's see if request dot oh if okay so we forgot to add that so if request.user is equal to that let's go ahead and remove that save that and here we go so only eric can delete eric's messages i can't delete tim's or dennis's so let's go ahead and say we want to delete that message where did that send me okay so one second all right so we're going to delete message we'll go to the url that's sending us to the delete message view the delete message view is going to send us here so we are logged in it looks like it redirected us so if the request.user okay let's try this one more time so we'll go in here and that should return back the delete html template okay let's try this again we'll click on delete why am i going back to here so we see delete message for oh okay so it was the right page i just got mixed up by this navigation bar so now we see are you sure you want to delete hey again so that's the message and that was that object that we threw in there so i can go back that's going to take me back to the last page i can go to delete and i can confirm that and that message was now deleted and we can work on that url routing a little bit later so now we only see erica or now we see that eric only has one message here so we are officially done with the message functionality so all we had was create and delete functionality now what i want to do is create some kind of activity feed here so you see how we have this activity feed inside of this template here so if i go ahead and for some reason i can't zoom out here so we'll go down here we'll go back to page one so on the home page you can see that we have this activity feed here so i want to be able to create this full feed so let's go ahead and build this out here so we'll go to the homepage and we're gonna have to change this entire layout so we're gonna have the quick search we're gonna have all the rooms and then we're gonna have the activity feed so we'll change up this layout so let's go into home.html and we'll build this out so we'll go into home.html and what i'm gonna do here is create another column and we'll just do one fr so that means the two side columns will be one fraction or we'll take up one fraction while the middle one will take up the most making that the widest one and they'll just auto adjust now i do need a column here in order for this to work so we have our home container we have our topics so that's one one column then we have our center column and we need to create one more in order for those grid template columns to work so we'll just go ahead and add in a div here and we're going to do class i guess we can just leave that like that we don't need a class at this point and we'll just do h3 and we'll do recent recent activity so for this i want to prompt users to actually engage in the website if they come here they don't see much activity people are less likely to engage but if they come in and they see an active feed here they can actually see what's going on maybe at some point you want to build in like a social networking feature where you can follow people you can modify this to only see what your friends are doing or people that you are following are commenting so if a friend of yours comments on something it might look interesting so you click on it you check it out and it prompts you to engage so that's what we're trying to do here so in this case we have recent activities and because i created that third column and i updated the grid template column for that main container let's check this out here so now we have recent activity so let's go ahead and see how we're gonna do this so let's see in the view i think i'm gonna have to actually get some activity or some comments here so we'll go down or go up to the home page we have topics and then we'll just do let's see how do i want to do this we'll just do how did i call this inside of the room i was going to say message conversations but let's see that was in the room room messages so let's just take this right here so we'll just call it room messages so that's going to be our activity maybe we can change that name later we just can't use messages or it's going to mess up the flash messages that we have so we'll go in here and we'll just do room underscore messages so in this case i'm just going to get all of them so i'll do i'll do a message objects all and this is where you can change it to where only uh where you can only see maybe people you follow if you happen to build that in so you'll be able to modify that right here so we're going to have our room messages we're getting all of those then we're gonna go ahead and create our context dictionary so let me just fix some indentation here and we'll just throw that in here and pass in the room messages okay so we can see those we queried all of those so we'll go into the home page and let's output all of those so that's at the bottom of the page here we'll create the hr tag and we'll just do for let's see for message i think i can just do message like that because it's a variable inside of the loop for message in room underscore messages and let's go ahead and output that i think i actually did that in the room so it should be fine so end four okay so we're going to create the div so we're going to wrap every single message here at some point we are going to want to have styling here and what do we want to do here so in this design we want to output eventually the user profile but for now let's output the name when it was posted who they reply to and then the message here so let's see so we'll go ahead and create a small tag here and we'll just say at and then the username so we'll do message dot user and then we want to say the time it was posted so we'll just do message dot created let me just move this up so message dot created and then we'll just do time since so we're going to use that filter and let's take a look at this so now we should see each message be output so here we go we see dennis tim eric so these are all the messages that we have in this entire website so if dennis goes to 100 days of code we'll just say what's this ask a question go back here and now we can see dennis just message right here so or actually i'm eric right now so we see that it's ordered by or it's ordered by the oldest to the newest so what i'm going to do here is actually change up this filter really quick or the ordering so i can actually add an ordering to the entire class instead of having to do order by so i'm going to remove that and i always want to make sure that we get the most recent messages so we're just going to copy this right here from the room model and i'm going to paste this in right here and we're just going to order it the same way so that should fix that there we go so the newest message is right there and now we just want replied to and then the name so we'll go here in home and let's just do another small tag so we'll do small and we'll just do replied to so we want to show the quote or not the code but the room that they're currently talking to later on maybe you can add a user and we'll do reply to and then message dot room so it's going to output the room and let's just indent this a little bit so we'll do style and then here let's see is it indented here actually we'll leave it like that so we won't add in any styling so we'll remove that reply to and then we also want to output the actual text here so we'll just do message dot body so in this case uh let's do this i want to only output the string representation so i can just add in message without the actual uh full message so i only only want to output the first 50 characters so i can actually leave that and that's going to output this value right here so it's going to trim it down so if somebody writes a long message i don't want to have to see everything and then clutter up that sidebar so here we go we see eric replied to 100 days of code and it shows what he replied and then we see eric replied to let's learn javascript and we can see sort of like an activity feed and a sidebar so let's go ahead and let's see what i want to do here i think i want to add in some delete functionality so users should be able to delete their own messages from the activity feed also so let's go ahead and add that in right here so technically we can just go to the room and we'll just take this right here and we already have all this built in so we're going to the room we're checking if the user is the current owner of that message and we'll go back to the activity feed and let's just put this at the bottom of the message and let's just create a line break so we can see the difference here so try this there we go so eric can only delete his messages here so if we can go here delete it confirm it we're back on the home page and there we go so that functionality was mostly built in at this point i guess what we can do is we have the topics and we have the activities inside of the homepage i want to make them their own component here so let's go ahead and do that let's build those in so right now i want to be able to actually reuse this activity feed and these topics and by the way i can filter these down here so if i want what i could do is actually modify these components to filter down by a specific topic so give me one second to prep this so let's go ahead and change up the messages here so what i could do is actually go into the view here and let's see i actually want to show you this because this is actually pretty cool here so i can actually use the qlookup method and i can actually grab this right here and do messages dot filter and then i can throw in q and let's just throw in the topic name so let's see the message model has a room so we can do room underscore name and if that is equal to a room underscore name is underscore i contains like that and we can throw in q here so we can actually filter that down by the room name so let's try this so let's say that the user is on this page and they want to see all the javascript rooms here so if i click on this now i should be able to only see all the activity for the javascript page so let's go to web development let's uh create a message here so we'll just say hey right there and then if i go back to here if i go to web development i should only see messages related to that so let's see room oh room underscore topic underscore name or double underscore so that should run that filter so here we go now we only see the activity to this topic if i go to javascript now i see all the conversations related to javascript if i go to all now i see all the conversations okay so i want to throw that in and let's make some reusable components now so in this case we'll create a new file and we'll just say activity underscore component dot html okay so activity component and what we're going to do here is make sure that we can use the same activity feed right here inside of our profile page later on so when we go to a user's profile we want to be able to see all the activity for that specific user so let's say i go to eric's account i want to be able to see all of eric's activity and what i would have to do here is actually rewrite all this code right here inside of eric's account so i don't want to do that i can actually just make this into its own component so we're also going to do this for the feed and the topics here so let's take all this right here so everything inside of this div will copy all of this remove it leave these two right here and then go into the activity component so we have the activity component and then we can go into our home page and let's just include that so at this point if i save this and refresh it all the activity is gone so i can just simply include it now so i can go ahead and do include so we'll do include here and we'll just do activity and then underscore component dot html okay so we have our activity component if i refresh that oh okay so we need to go into base so this is inside of the base app so we need to specify the path and that's how it should work so now we see recent activity so i'm going to do the same for all the rooms here so let's see inside of the home page we have our activity if i go to a room if i actually go to a user's profile i want to be able to render out the same components so notice that in the user's profile we still have the same activity component so in this case i want to make this its own component too so let's do that we're just going to break things down into little compartments so we'll just do topics underscore component dot html we'll break that down and let's see we can go into home.html go into topics so we have our home container topics we'll take everything inside of this div copy and remove it go into topics and then we can bring this in right here so we're just going to use include and we need to go into base forward slash topic underscore component dot html alright so now if i refresh this we'll still see our topic base topic component did i name that ron so let's see we have topics components so let's just do topics we'll save that give that a test and now we see our topic so i'm doing this for a reason so i know it seems a little bit repetitive but one is showing you how this works and two is it's gonna save us from a lot of extra work here in a second here so we're gonna go into the feed now and we're gonna do the same thing so we're gonna do new file feed underscore component dot html okay so now we have a feed component so we're going into home again and we're going to do the same thing here so we see this div right here that takes in the entire room at this point i don't want to take everything because i want to be able to save this only for the home page so we're going to take the actual items in that feed so in this case let's go ahead and go down here so we're going to leave the room count and this link and we're just going to take this div right here so that everything that's going to give us this 4 statement right here this for loop so copy that we'll bring that into the feed component save it and let's see so back in home and by the way so we do have actually let me just finish this up and i'll explain what's going on here so we'll just do include and we can do base feed underscore component dot html so let's save it really quick and the reason why we have access to all these items because the reason why we have access is because we're passing this data into the context dictionary now this component is available inside of that template so once the template actually sees it it doesn't notice that there are different components so that's why we have access to rooms inside of the room component the topics and the activities so they're brought into this page here and that information is basically being passed down into them and that's how we have access to them so as long as they're used in the same page if we just decided to drag this into another page without passing in that information well it wouldn't work that way so that's how we have access to the components topics and the actual feed okay so now that that's done we want to create a user profile and pretty soon we're going to move on to static files and that template so let's go ahead and create an actual profile for a user so we'll just do profile.html and we're going to extend the main template so we're going to do extends here and this is going to be main dot html then we can do block content and we can do end block here so close that off and block content okay so we have our home template and at this point let's just output the user's name we'll just do an h1 tag and we'll just do user dot username so before we style it we'll uh just make sure that we know what user's account we're visiting so we just have a simple template for a user profile so let's go into our views now and inside of our views we want to create a profile here so let's just add that above our create room view and underneath our room so create a new one here so we'll do or create a new view so we'll do user profile pass in request return render pass in request base and then we do profile profile.html will pass in the context dictionary throw that in right here okay so there we go so we have the context dictionary now we need a url let's just take let's see i'll put this underneath room so create a new path here make sure you add in the trailing comma and this is going to go to profile and then we're getting the actual user's id so in this case we're going into str here and we're going to pass in the primary key close that off views dot user profile name and that's going to be user dash profile okay so we have a url now and we need to update this in several different areas here so in the home page actually i guess now it's not in the home page it's now inside of the feed component so we'll go into feed and we're going to output the host here so for this host inside of that at symbol let's just actually change this to a link so we'll just wrap that and we'll say href and we're going to point to the url so we're gonna do url and then we're going into user dash profile and we're passing in the user id so we can go into room dot host dot id okay so that is inside of the feed component and we want to render the user's name so this username if i refresh it now we should be linked up if i go to tim let's see user profile got an unexpected argument pk so let's go back to the view we didn't complete this we want to pass in pk and we want to get the user so we'll just do user is equal to user.objects dot get and then we'll specify the id which is the primary key and we can throw this information out so let's see in the profile we're passing that in as the user value and we have that here let's try to refresh that okay so there we go so now we see tim if we go back to the homepage if i go to dennis i see dennis's profile and we have the profile set up so this is where things get a little bit faster here so all we need to do for the profile we're just going to have three different columns here so we're going to have our topics we're going to have our our feed eventually the user's information and profile picture and the activity so let's see so for the user let's go ahead and get all this users rooms here so we'll just do rooms that's going to be equal to user dot room underscore set da all remember we can get all the children of a specific object by doing the model name and then underscore set and then whatever we want there so in this case we're getting all of them so we'll throw that in here remember that because we access rooms this way inside of the feed component or not the yeah the feed component for room in rooms we need to access it this way so now we're going to pass in these rooms into that feed component once it's used so we have that let's go to the user profile and let's see i want to create some kind of container here so we'll do four slash div and we want to just throw in the three columns here so we're going to create three different columns and i'm just going to copy and paste this so do one and then two so this will be our activity our feed and then or the topics feed and activity so let's go ahead and include that now so now that we have the rooms we'll just do include base forward slash feed component.html so if i save this now we don't have to rewrite that in and if we make edits they're just going to be updated right away so if i go to dennis here is all of dennis's rooms right here so let's fix the layout here so we'll just do class profile container and i'm going to create some styling here now so we'll just do a style tag close this out and we can do profile container what happened here so style and okay so there we go so we're gonna display this as a grid so grid and then we're gonna do grid template columns and we're gonna do one fr three fr and then one fr so in this case i'm gonna change that to two so let's check this out now so actually i wanna leave that as three i wanna i want it to look the same as the current home page right now so if i go ahead and refresh this i'm on the profile page now so we see the name and we see the center column right here for the activity and you notice that if i go here we only see my post here so if i go to logo here we see all of them if i go to tim i see that tim only has one room here so we'll go to dennis right now and let's output the actual activity here for me so let's see in this case we're gonna do messages here so let's see how do i want to do this in home in the home page i just did room messages so this is all of my activity and inside of the profile i'll just do room messages so all the messages that i've added in any room and we'll just do user dot message underscore set dot all that'll render those out and at this point let's also get the topics so we'll just do topics and that's going to be equal to topic.objects.all so we need that because we need to access all of these inside of that component and let's see so we can go to profile and let's just copy this right here this will be the topic component then we can bring this in right here and this is going to be activity okay so now if i refresh this topics okay so that's supposed to be topics all right so there we go we see all the topics for some reason they are not being rendered out i think i forgot to pass those into the context dictionary yeah so i need to grab these and i need to bring those in here so we'll throw those in right here topics and then topics okay so i saved that let's check that out and here we go so if i filter these this is going to take me back to the home page recent activity did i not comment on anything let's see so room messages is user dot message underscore set dot all that needs to be messages with an s right there and that should do it okay so now i see all of my activity or all of dennis's activity if i go to or eric's actually then if i go to or no i'm logged in as eric but i see dennis's activity if i go to someone else's let's go to eric let's see let's check out tim here he's only got one message in there and then if i go to eric somewhere here let's see oh eric never posted a room okay so let's try this in order to go to eric's room let's uh move my face down here let's also update the links inside of the activity so the cool thing is is i can just update it in the activity feed and i don't have to update it everywhere so i can just go to the activity component and i'm just going to wrap this right here so i see the user we're going to wrap this inside of a link so we'll do an a tag here and we're going to take this closing tag and we're going to put that just after the username so we'll just do href and that's going to point to that specific user so i hope you're starting to see how things are becoming more dynamic by creating this or making this reusable here so we'll just do user dash profile and then the user id which is message.user.id okay so now if i go here refresh it i can go to eric's account too now i see all of eric's activity eric has two comments here and that's how we can actually link this up to the actual profiles so in this next section what i want to do is work on static file configuration so static files are basically any css files any images or javascript files and in definition they're static so django has its own way of configuring this so right now we've been writing our css inside of our templates and we don't wanna do this so what we're gonna do here is we're gonna eventually move all the css outside of our templates and we're going to create our own style sheet so in django we first need to create our static files we need to let it know where to find these and then we can actually render these out dynamically in a temp template so there's different types of static files we can configure images we can configure css and javascript files and they all have their own way of actually doing things so let's go ahead and create a new folder inside of the root directory so static files will start off this way we'll just create a folder called static and in this folder we're going to create another folder for all of our css files so we'll just do styles and in styles i want to create a main dot css file so in static i also want to eventually create a folder to store all of my images so we're just going to do images here and there we have our styles so we have a static folder these are our static files now to actually let these be used inside of our templates let me close out all these links because i have a bunch of them open let's close everything out and let's go into the settings.py file and we need to let django know about these static files now so it has no idea that this static folder even exists here so what we're going to do is create a variable called static underscore files underscore or static files and then underscore dirs so static files directories and we can actually host static files in multiple areas just like we did with our templates directory so up here where we pointed to baster and templates well we can do the same thing for our static files and we can just say base directory and then we'll point to static so this is going to let django know we have static files inside of this folder here so that's officially connected now in order to actually use these static files let's go ahead and actually add in some css here so we'll specify a body tag and we'll just say background color and let's just set this to this aquamarine color here so to make this work what we're going to do is we're simply going to bring this into let's see we're going to bring this into main dot html here so inside of our templates we'll put this into main.html and this is why it's good to have this template because i'm gonna apply this style to this template and it's gonna apply it to all the children templates that we have so all the pages so in here what i'm gonna have to do is just do load static here so that's one thing that we have to do is we have to let this template know that we can actually use the static tag so once i load that in i'm just going to change this right here to double quotes and we're just going to add in two percent or two curly braces the percent symbols and we're going to write static so what this is going to do is static is going to tell it to go ahead and find this static folder now we need to specify a path for this css style sheet so we have a link here and now in single quotes because these two are double quotes we're just gonna go into the styles folder so we'll do styles forward slash main dot css so if i save that that should now apply that static file so you might have to do ctrl shift r and now on every single page we have this background right here for all of our page because or all of our pages because that's inside of here now we can also do images here so if we wanted to add in an image we would just add in let's see so i'll actually try this right now so let's go into our project here i'm gonna go into my desktop and we'll just find a picture here so we're gonna copy one of these pictures from these diagrams and i'll just take models here so take models i'm going to copy that you can just grab any image that you have and place this into your project file so go into static go into images and paste that in there so once we have that in order to use the image inside of your template here let's go ahead and bring this into our main html file so we're just gonna do image close that off here and then for the source we're just gonna do the curly braces we'll go to static and i want to know if you can guess this what do we do next well we go into the images folder so we're going into static and then images and we're going into models dot and let's see whatever i call that whatever picture you're using so models.jpg so now that image can be used so if i save that there we go and now this picture is inside of my website so i don't actually want to have that there so i'm just going to go ahead and remove that but that's how we can add in css javascript and images now there are differences for user uploaded images which we'll get into like when a user uploads their profile picture we do have to configure things in a different way for that we're going to use something called a static underscore root and we'll get into that later so i'll just comment that out here so we're going to comment that out and we also have to configure some urls for that and also static files in production are going to be handled a little bit differently than they are in development okay so before we jump into the next section where we'll be installing our theme i want to fix up a few things with the website that i noticed so the first thing is inside of main.html i accidentally added this extra li tag here in the flash messages section so if you added that just go ahead and get rid of that and make sure you have an opening and closing li tag so a small mistake if you made it go ahead and fix it if not just ignore this right here and let's move on here so in this next part i want to fix the create room form here so at this point when we go to create a new room we have this option to select a host here now that was good when i was just showing basic crud operations but at this point we don't want to be able to select a host we want this host to automatically be added based on whoever's logged in so if i'm logged in as dennis at this point i want this to be automatically added and this field shouldn't be visible so the first thing i'm going to do here oh and i also don't want the participants to be visible here either so we'll get rid of both of these so what i can do here is go to my base app here so we'll go into forms.py and typically we could just render out every single field item that we want by specifying all and we can also add in a list where we select the exact fields that we want to render i'm just going to go ahead and use the exclude method here so that's also an option and this is going to be a list here so i can get rid of the host here and then i'll go to models here so we'll see i also want to exclude participants so we'll go ahead and add that and we'll exclude these two fields so if i save this so if i refresh it now we don't see host and now we don't see participants so these should be automatically updated so the next thing is i also want to make sure that the back end knows how to process this so in the view now we're going to have to update a few things here so we'll go into views and we're going to need to go to the create room view so in here we have a standard form on the post method we get that data and we save it and now we're not submitting a host so what i'm going to do here is go ahead and get the room value so we'll set the room to whatever is saved on the form and for this we need to set commit to false that's going to give us an instance of this room so we've already done this and well we did it in another view here so now what i can do is just go ahead and do room dot host and we're going to set that to request dot user so you can only create a room if you're logged in we already added that functionality so now we know that a host will be added based on whoever's logged in and we'll just do room dot save so we just added in one more step here where we set the host and that's it so now if i save this let's go ahead and try to add a new room so i'll refresh it we'll select a topic and by the way with the topic i'll also add in functionality where you can add a topic if one doesn't already exist so if you want to select a new topic let's say one is something like study for backend developers you'll have the option to select and search or just generate your own topic but we'll add that once we install the theme so we'll select this and we'll just do uh study with me and triple exclamation point so we can see that and if i submit that here we go we should see that right here and we see the host as dennis so i'm logged in all that's working and now we can move on to installing the theme so our website looks pretty ugly at this point especially with this blue color and i want to talk about how theme installation works so typically you would work with some kind of designer if you're working at a company you would work with some kind of design team and they would give you a theme you would have the designers and front-end developers generate all this awesome content for you and you would write the back end logic and just learn how to install a theme as opposed to writing that all up on your own or maybe you are a sole developer you might not always want to build out all your own code in the front end maybe you just want to focus on one part this is where buying a theme or getting a free theme online might work better for you so i want to show you how this installation process works instead of hand coding all this up this is an important thing to know how to do so we're just going to go ahead and install that now how this will work is we have a standard theme with some html some css and a little bit of javascript we're not going to worry about the css and javascript part that's already added into the theme and that's just going to add functionality where we need it so we don't need to worry about that so we're going to need to grab these html files and we're going to have to replace a lot of the content that you see so every single page here we're basically going to get those pre-built templates we're going to add them into our code and then we're going to have to do things that django weighs so for example the theme with the css files in the javascript files these are all set uh with file paths that already connected to that specific theme so we're gonna have to add our static files the django way we're gonna have to replace all of our images and any other filler content with our django tags and loops and uh if and else statements so we're basically going to have to add the templates and then modify the data that's inside of them so we'll just go ahead and get right to it so to get this theme go ahead and go to the github repo and this is going to be in the source code and this is going to be in the theme folder so if i click on this we're going to see all these templates that are already built out for us we see all the assets so logos icons anything that we're going to use that's already in here so we're just going to start installing this stuff so i already have this on my desktop so to get this just go ahead and go here download this entire repo extract the theme section and you can start working with that so i already have that in my desktop right here so that's the theme folder and i have my project files right here so if i open up the theme folder once you have this installed go ahead and just open up one of the files here so this is index.html so this is all static data right here this is uh just rendered out in html code and this is what we're gonna install and then modify here so let's go ahead and start by adding in the home page here so what i'm gonna do here is go ahead and open up both files here so this is going to be the theme on the left so on the left side that's my theme and on the right side this will be my project files so we're going to open up study bud right here and this is going to be on the right so the first thing i'm going to do is go ahead and replace the home page with the theme template here so let's go ahead and go into base we'll go into templates base and let's take index.html so in the theme index.html is going to represent the homepage here so we'll rename it in a second so i'm just going to copy this or you could just drag it in here and bring that in here now my current home page this is going to be set to underscore old so i'm just going to change the name and i'm also going to change index right here to home.html so we want to show the theme files so we'll do home.html and that view on the homepage knows to render this out so let's go ahead and see what we have here so if i go in here if i refresh this home.html does not exist let's see why this is happening that shouldn't be the case so we'll see we have a view here we have home and we have our templates and home okay so i added in html there twice by accident okay so now it should exist so if i refresh this this is that theme here so if i open up the theme on its own we see all the styling so why is this styling not being output here so for this we need to go ahead and add in our themes css files so we're not even going to bother with with what's in here we're just going to bring that in and let the styling apply so let's go back into our main project folder and let's go to the static folder we'll go into styles here and we're just going to take style style.css and we're going to bring that in and at this point i'm just going to go ahead and get rid of me actually i'll leave main.a main.css in there for now so we dragged in the main.css file now to add in the styling all i need to do is go ahead and go into home.html and you see how the styling is pointed like this with a file path well that's because it works in the theme that way they're in the same file so what i need to do here is simply add in static here so we're going to load static so we need to load in this tag and we're just going to change how this file path points to that css file so we're going to add in static add in a single quote around this and we're just going to go ahead and add in the percent symbols so now if i save this the css file should be applied here actually i need to go into styles and then style.css so if i go into static we can see the file path right here so again i'm not worried about the details of that css file that should be applied to the theme so if i refresh that you might have to do a ctrl shift r now we see all the styling being applied here so this isn't exactly how we want things i just wanted to show you how to connect that css file so what we need to do is we need to connect this main template to our main.css file so we're going to take all of these contents we're just going to do control a select everything from home.html with the theme styles and that new static file and we're just gonna go into main dot html here so what i'm gonna do is paste this above so we're gonna move all the original contents down again there's different ways on how you can go about this but for now because i already have content i'm just going to slowly move out content and replace it so everything from home.html is now going to be pasted inside of main.html so i'll just comment out that javascript file and now we have all this content inside of main.html so the first thing i want to do is i want to go ahead and minimize this header section and i'm going to take everything inside of main here so we're going to highlight everything in this opening and closing main tag so this is the content for the actual homepage so i'm just going to minimize it and i'm going to remove it so we'll go ahead and take all of this and get rid of that now i'm just going to go ahead and take this nav bar and we're going to bring this into this theme here so underneath the header here so we'll bring that in like that and we'll take this opening and closing block tag we'll bring this let's see inside of the themes body tag here so i think we're actually supposed to have a body tag here so i was supposed to leave that let's check this out here no i already have that body tag so that's already there so body starts and closes right here okay so we have the blog tags and we're just going to add in this message right here or the flash messages so we're just going to bring this in right above or underneath our nav bar and above our block tags here and let's go ahead and now get rid of all the original content so we have this section here where we load in that style sheet there wasn't much there wasn't too much to it so let's get rid of all that and there we go so i'm scrolling a little bit here but i hope you see what i'm doing i'm taking all the content from the theme pasting it in and adding in the django stuff so now if i save this let's go ahead and also go into home now so we'll go into home and because we have this main theme wrapping our homepage we now no longer need the head tag and we no longer need the header here so let's go ahead and get rid of the header so i minimize that this is in the home.html page so we're going to get rid of that let's take everything from the opening body tag we'll also remove that so delete that and then at the bottom let's remove html all the way to the script tag so we have our theme styled inside of main.html here we have these two block tags so block content and end block and remember we're extending the main template so now in home.html we're just going to go ahead and extend the main template remember we still have the original home.html that we can refer to so it's home underscore old so we'll just go ahead and do extends and this is going to be main.html now all we need to do is wrap this main tag inside of our block tags so we'll go ahead and just do block content and then at the bottom we just want to wrap all of this here so this is going to be more tedious once you see it applied you should be able to understand how to finish up the rest here this entire section is going to be a little bit longer just because we're going to be going line by line and changing up all the contents here so now we extend the main theme so let's save main.html and home.html so we're going to save that let's refresh it and here we go so we see our original nav bar here so we're going to fix all this up here and the home page right now even though it's in our django project it's still all static so we're going to start replacing this section here so the next thing i want to do before we go to the home page is i want to set this navigation bar so the reason why we see this is because we're including our nav bar inside of main.html so we include the navbar now we have a new navigation bar from the theme it's in this header tag so we're going to take the bottom header tag all the way to the top here we're going to copy that and then just delete it so we have it saved right now and we're going to go into navbar.html so again let's paste this all above the original content and then we'll slowly replace it so let's go ahead and see what we need to do here so in this original section we had a logo that goes to the home page i can get rid of that we have this form that sends us to the home page as a get method and it passes in the queue method so let's go ahead and update the form inside of the theme so let's see we have the link here let's jinglfy this i guess if that's the right term and we'll just make this a django link so we'll just do url that's for the logo that we're gonna that we're about to update and we're just gonna do home so we update the home link then we have our form so for the form the method is gonna be a get method and we're gonna send this to the home page so we'll just do action and that's going to send the user to home okay so for the actual search field so we have an svg file i'm going to minimize that just to clean that up for the search field we just have to specify the name and that's going to be q and it says search post in here so let's see so we we set the method we set the action and we set the name so i can now get rid of the original search form so if i save this everything should still be good so if i hit enter we're still seeing that be added right there and this navigation bar is slowly getting removed now the next thing is i want to update this section right here so i need to add in some javascript so you see as i as i click on this this section should open up it should be like a little drop down menu item so that's not working because our theme also requires a javascript file so we'll open up these two files here on the left we have our theme on the right we have our django project so we'll go back into the static folder so we're going back into static and let's create a new folder for javascript so we'll just call that js and then in our theme here let's see we should have a script file so that's our javascript file let's just drag that into js here so now we have that javascript file now in order for that to work let's go ahead and go back into our main.html and let's bring that in here so i commented that out and originally i was just pointing to script.js but now because this is in our static files this isn't going to work here so we need to wrap this inside of a static tag so we'll do static single quote and then a single quote and percent symbol and curly brace okay so now that i added that static tag i should be able to do a ctrl shift r just do a refresh and if i click on this this should work okay so i actually didn't do that right this is supposed to point to js forward slash script.js so that was the file path based on this structure right here okay so if i refresh that now if i click on it here we go we see this drop down menu with two links so i want to update the user so i want to show the currently logged in user and i also want to implement this condition right here so in the nav bar we have if the user is authenticated show the username if not then we want to show the login button so let's go ahead and take request.user and let's go to this section so let's see this is going to be just underneath the form we're going to bring this in into the header user section and we're going to worry about the user images later we haven't done that yet and i left that for the last section for a specific reason and i'll explain why later but we will actually have user images so for now let's go ahead and just output the username and then for the actual name here let's just output the username again so we'll just do user.username okay so that's the first part here so let's see how do i want to update this so this is the not logged in section so let's take this little section right here and let's bring this down under the user here so we'll save that and let's take this condition so if the user is authenticated we'll scroll up here so if the user is authenticated let's put that above our header user section and let's add an end if underneath this comment here so we'll just do end if so this is all this process is it's just simply changing out this information so i'm going to remove this hr tag we're going to comment all this out and let's go back to this condition so we have if the user is authenticated show the user section and then we'll just do else and let's comment or remove the comments here so now we have this link right here that takes the user to the login page which we need to update so we'll go into url login so if the user is not logged in that's cl statement take them there and say log in so let's try this so we're still going to have to update some images here so if i refresh that if i open this up and click log out let's see in logout i actually want to send the user there so let's see if the user is logged in we send them to the profile page or we have a logout button here so let's see where is that log out button does it say log out in the template it does i just can't find that text here so the username okay so down here so underneath that condition so this is hidden if the user doesn't click on that so we have this log out link right here so it opens and closes right here so let's change this to log out so url log out and then that's going to be in single quotes okay so now if i click on this i log out so now it says log in so the user is logged out and the user can log in now so if i click log in it's going to take me to this form and this is all going to be clean in a second and now i'm logged in and that username will be uploaded or updated so there is an icon here that we want to add and we also want to add in a logo right there so let's open up the theme files on the left and open up our project files on the right let's open up the static folder and let's just get rid of this models file we don't need that and let's go into assets and let's just take all of this and drag this in right here so now we see an avatar and we see a logo and a favicon so we'll go back to the theme here let's go back into our static files and let's update that so for the logo this needs to point to the static folder so we're just going to add in that the curly braces and percent symbol we'll go into static and then we're not going into assets now we're going into images so we'll change this to images and that's going to be logo.svg we'll wrap that in a single quote percent symbol and curly brace so that should add the logo so it looks like i used the static tag and i have not imported that into my navigation bar so just above header let's just import the static tag so we can use it we'll just do load static save that and let's give this a test okay so now we see our logo so the logo is done and there needs to be an avatar right here so i'm just going to copy this section all the way up to this forward slash and let's find that avatar so the avatar is going to be right here somewhere so in the login section we'll just remove assets paste that section in and then wrap this in a single quote and then a percent symbol and the curly brace and that should complete it for our header section for now okay so there we go we haven't added in or we haven't added an account section yet so if i click on this we can log out and we still need to work on the settings section and that's where a user can update their information now let's go ahead and move on to this section so this is all static information this is all hardcoded in from the theme and we need to update this because we don't have 553 topics and all these topics for python this is not in our system yet so we need to change all this so we're going to go back into home.html so let's close our navbar and let's close main.html if i miss anything there's a good chance that i will because there's a lot of code to update i'm just going to go ahead and finish out the video and i'll add in like a final section in this video where we clean up anything that i missed so let's go ahead and go into main or home.html and let's clean this up here so in home the first thing i want to do is i want to get the topics here so here we have a topic section we see this comment right here this was all done by my designer shibuya shuvo so he put in good comments here so i can find where topics start and end right here so i can minimize this section and i can see where everything is so what i'm going to do here is i need to include the topics component so remember in our original template in the old template which i named home underscore old we're going to take this topics component right here so let's take this let's copy that and let's bring that into your home.html so let's go ahead and just paste this in right here and now what i want to do is do exactly what we did with the navigation bar so i'm going to take all these topics so it's minimized that's going to copy all of them i'm going to copy that and i'm going to remove it and then we're going to go into topics here so depending on how you have your website it's going to change how you install a theme here so at this point you should already start seeing what's going on and start understanding it so let's go into the topics component and let's do this again so let's get rid of browse topics uh let's go ahead and just get rid of this url here and let's keep this loop so i'm gonna paste in the templates topic section inside of my topics component then what i want to do is get rid of all of these topics except for one so we'll just keep python here so now we have python uh for all we're just going to set that url to the home url so we're just going to do url and that's going to be home and let's take this loop right here so let's copy this loop let's put that above our python li tag and let's close this off here so we'll just do end for and we can just go ahead and take this link right here let's copy that paste this in as this link right here and now i can just get rid of this okay so now i just need to update this a little bit so we have the topic section included and in this section we want to render out all the actual counts here so the correct numbers so for this section we want to output the actual topic name so this is nothing new we'll just do topic dot name and now it's going to be in a styled format so for the count we haven't done this but what i can do here is just do topic so i can actually do this in the template so i can do topic dot uh let's see we're gonna do what's the child object so that's the room underscore set dot all and i don't need to add in curly braces here and then i can just do dot count so in the template i'm not actually going to add in not the curly braces but the percent symbols so i'm just getting all the topics all the child objects getting the entire query set and i'm just going to do dot count and then i forgot to add in the curly brace so that will give me the current number so for all i also want to get this too so that's going to be topics actually what i could do is just go to this topics query set so we'll just do topics.count and that's going to give me all the topics so i updated the count on each topic and the full number and i also updated all the actual links here so at this point let's go ahead and save that and if i refresh it there we go now the topics component is updated so if i click on python we can see the search bar javascript web development and we'll get to the more section later so that's something i want to do towards the end i want to spend time on that so for the study room let's go ahead and actually build in the feed and update this value so for the study room we'll go back to home.html and let's see let's go into this section right here so we're going to go ahead and update this so we'll just do rooms dot count i think that's how i had it so let's open up the original homepage so old homepage and that was just room count so we actually had a full variable with that value so we'll just change that that should update the number four rooms available that's more like it and now we want to update the feed here so for the feed uh we don't want to update this entire section so we have this room list section so it starts and closes way down there so we have the mobile version of this so we're not going to worry about that there's a search form in here don't worry about this form let's minimize the mobile version then we have our room list header so that's where we have the count we're not going to worry about that so let's minimize it and then we have our room list item so room list okay so these are the individual items so what i'm going to do is go ahead and keep the original room list item so it starts right here and it closes on line 80 at this point and then let's take the second one minimize it and remove it so we only need one because we're going to loop through them and let's go ahead and take this room list item so copy it and remove it and let's go to the feed component so we'll go ahead and paste this into the feed component so now let's go back into home and let's just go ahead and include the feed so we'll just do include and we'll just do base and then feed underscore component dot html okay so we include the speed component underneath the header so there's already technically a container around it so everything's already wrapping it so let's go to the feed component and let's check this out here so in the feed component we have this room list item so i want to minimize that take this value actually you know what i'm just going to go ahead and start cleaning this section up so we're going to get rid of these two divs right here and let's just take this for loop and let's put this above this item right here so we're just going to copy this and we're gonna create like a copy of this section down below so we're just gonna copy that and if you refresh your page it's gonna be a little bit messed up at this point so we have a for loop and we're outputting each item so we just wanna update with all the contents inside of here so in the actual template we decided to uh me and my designer shirashuva we decided to get rid of these edit and delete buttons and let the user do that from their own profile so we're going to get rid of this section and let's just go ahead and update the actual room list item line by line so the first thing is we have a link to the user profile so we're just going to go ahead and add in a url tag so we'll just do url and then user dash profile and then we'll just take the room.host.id so we'll add that in for the avatar well that's going to be updated once we add the user icon here we'll change the username we'll just do room dot host dot username so we're just going upwards there and we're gonna change this section for the actual time it was posted we'll just do room dot created and then we'll just do the time since filter okay so we have the username we have a link the created time for the title here we just want to change that to the room title so room or the room name and we want to update the link to point to the room so let's just scroll down here and take this link right here to the room we'll take this go up here back to the room name and we're going to paste that around the link and i'm also going to get rid of the description i don't like the description in there for some reason the more i look at it just makes the feed look a little bit more cluttered so i figured if users want to have a description maybe you can have like the beginning of the description and just trim it that can also work too but i feel like it would look better without it so now in this section we have some more data about the room or information let's just take this url and this also is going to wrap this section so what is this right here this is the icon of the joined section or the how many people have joined section so the icon that shows the users let's paste in the room link here and let's see there's nothing in the room to update so i'm going to try going through this section as slow as possible so we want the room topic so room dot topic dot name and let's see in this section where we have all the participants we can just where we can see how many people have joined the room that's going to be the participants so we'll just do room.participants like that.all.com so we can just get all of those by that many too many field now i think that's it for all the links and all the content i think we're done again we'll go back and fix it so i can take this bottom loop right here get rid of that and all the information should be updated so let's save that and let's go back to our feed here or let's go back to our template refresh that and here we go this is now the rooms that i have so we can see all the rooms here all these are linked up here i can go to the user and i can see how many people have joined that's also clickable we see the topic and that looks good okay so we're going to get to the user profile really soon and the user profile is going to be really easy because it has the same components so all we're gonna have to do is update the actual title so or not the title but the the container so the last thing i want to do here on the home page is update this activity feed and once we update the activity feed the activity feed in the user profile will also be updated so let's go ahead and go back here we'll go to the activity feed and let's go to the home page actually and let's just take a look at this so we have our home page we have the feed component then we have this comment that says where the activities start and stop so we have all this content and we're just going to go ahead and put this into a component so the first thing i want to do is go ahead and add in the activity component so we'll use the include tag so we'll just do include and this is going to be base for slash activity underscore component dot html so let's grab all this content right here so this is all inside of one main div so we're gonna grab all of that i'll minimize it and then copy it so we'll copy this remove it and let's go to the activity component now so in here i'm just going to get rid of this title here we'll do the same thing like we did with the room component or the the feed component we're going to paste in the activity feed and we're going to start updating things so what do we have in here so we have a link to the actual post here to the actual room based or the user's profile so whoever made that comment so let's take this link right here and let's go back into this style component and let's see so we have the profile which we link to so we're going to paste that over and let's actually just grab one item so it looks like there's two items in the activity feed so i'll minimize the first one and we'll just grab the second one here let's see is it the activities box it is so it's the activities box so let's minimize that and let's take the second one we only need one and we're just going to be looping through these so we have the link here and we haven't created the for loop yet we'll create that in a second we have the logo that's about to be created then we have the actual username so we'll go down here and let's just take the username so message.username which we're going to be outputting through the loop and we'll take the time since tag here so the created time we'll put that in right here and let's see so we also want a link here to be able to remove it to actually remove an item so let's create the for loop so let's take this for loop for message and messages then we output each activities box so we put that right there find the closing tag to the activities box and create the end for loop so n4 okay so in this section this is where we're going to have an if statement right here so this is going to be the delete icon we only want users who made the original post to be allowed to delete it so we're going to create this condition right here around this item right here so the room list the room list room actions okay so blame shuvo for the css convention there for the naming okay so we have the user we check if it's the user and if it is then we just take that delete link and we're going to throw that in right here so that's going to be in this condition right here throw that in that's going to be an x icon here so that's an svg image so we have that right there so i'm just going to go ahead and remove this condition from this section just want to clean things up so we'll take everything from here we also want to output the message so where was the message so the message is right here so the room content so we have the remove item underneath that we have the room content so we'll just do or the message dot body so the message body itself and then we have the reply to so that's going to show the original title so we'll just do message and let's see we did message.room.title i think or name just want to make sure so that's supposed to be in curly braces we want to wrap that right there we'll go down to the original so we did message.room so we're just outputting the room name and we don't need to actually do room name like that so we have the room name we have the body and we want to make sure that we link to that room so somebody if somebody sees that message we want them to be able to click on that so in this section right here let's see let's just add the link right here so we'll just do room here so let's see we're going into message or this is actually going to be a url tag so let's fix that up we'll do url and we're going to room and the link here for the id is going to be message.room.id so we have the body all the links look good here let me just go ahead and remove this so we have the time synth stamp so i'll remove the original content let's save it let's take a look see if we have any issues let's go back to the home feed and we're missing a block tag so invalid block tag on line 29 here so on line 29 this is supposed to be an end if so end if like that okay so here we go so we have the activity feed so if i click on the user i can see the user's profile if i click on the actual item here that takes me to the room and i can see the message and the time sense is correct okay so i thought maybe i didn't update that so time sense looks good and that creates our home page okay so we took the most time here because we had to work on our main template the navigation bar and i had to kind of explain some concepts here so the next thing i want to do here is jump to the profile so when we click on a user profile i want to go here because this is the next section here that is going to be the easiest to update so let's go ahead and open up our theme and we'll open up our website so let's go to the main website let's go into base into templates and then let's find the profile.html file so let's bring that in actually i want to bring that into the base folder so the original profile page actually let's just go ahead and name that to underscore old like that and then let's bring in the new profile so that's going to mess up some stuff here so if i actually refresh now we see this right here so we need to update all of this so let's go into the profile page now so we'll close out the activity component let's keep the home component open because i want to copy this extends main.html and block tag right here and we'll go into profile and because it's a template there's no dynamic data the header section and all this information will be on every single page so the first thing i'm going to do is take this doc tag and scroll all the way down to the closing header tag so where main is right here let's just remove all of that and let's just paste in this section or write that out so extend the main template create the block tag and then go to the bottom here at the closing main tag and let's just remove body and html and we'll just do and block so at this point i'm going to move a little bit faster so we'll just do end block content so i'm going to move faster because the the concept was already explained now i'm just going to be changing out the information so this is now my profile page now it's time to update the actual content here so this isn't the real content this is all hard coded we can see the topics here that's not the right topics that we have here so we want to just go ahead and update all of these so let's do that so let's see we have a topics component that we used in the original so profile underscore old so i'm just going to get rid of actually i'll leave that let's go ahead and take this include topics component and let's bring that into profile so in profile.html into the or inside of the new one here is the topics wrapper so i'm going to minimize that we can see topic start topics end so i can get rid of all of that right there and i'm just going to replace that with this component right here so all i'm doing is just removing that component updating it and that should be good so if i go ahead and refresh this now we see the real topic so i can do the same for the activity feed so if i go back into the home page i'm just going to go ahead and grab the activity component let's go back to the new profile page and let's just minimize this room list right here let's go into activities and let's just remove all of these two so we'll get rid of those and paste in this activity component save that and there we go so that's all updated now and i also need to update the feed here and i'll just update these contents in a second so shivo's being funny here wrote in dennis kardashian ivanov that's funny trolling me so let's go ahead and update that so we see the room list here we have a profile so this is the profile information so we'll update this in a second i'll minimize that then we have the room list header so okay so that's the header section then we have the room item here so we can see that we have two of these so room list and room list okay so let's minimize these i keep forgetting the names here so room list content no it's room list right here let's minimize that and minimize that so we have the two fake components let's remove both of those so let's remove these two divs and let's include this feed component so we're just going to update that and this is going to output each user's feed right here so that can be pasted in right here so inside of the room list or underneath the room list header let's paste that in right here okay so that should be it so if i refresh it i can see dennis is not hosting any rooms i'm not sure if that's the case let's just try this let's see if i go to dennis okay so i am hosting rooms this just needs to be updated so we actually need to update the contents here at this point we're not going to update the about section because we haven't added that in we'll take care of that in a little bit but i do want to update the name here and the username and then the edit and the user icon here will be updated too later once we get to that section so let's go ahead and go to this right here in the room list tag we'll go to the profile section let's change the name and this is just going to be user dot username and then later on we can actually output a real name so we'll just go ahead and take that copy that replace it in the edit link will be updated once we add that page so if i refresh it there we go so if i go back to the home page let's click on eric eric doesn't have any rooms hosted but i can see his information and i can see all of eric's comments let's try one more and let's just go to tim there we go so that's all good here so let's go to the actual room itself now so if i click on a room i want to style this page now so let's go ahead and open up the two folders again and let's bring in or let's rename the old room page so let's rename that to room underscore old and let's grab the new room template and let's just bring that in right here so we have the new room template if i refresh that we need to change out the content so the styling is there let's go to the home page take those same block tags right here these two block tags to extend the template and we'll go into room.html so again we're going to go to the opening dock tag copy all of this all the way to the main tag so right here i guess my mouse isn't showing so we're gonna paste that in right here and then we can close that up here so we'll just take this tag and let's remove the closing wow that's a lot of scrolling so we'll fix this up in a second let's remove the closing html and body tag and we'll just do end block so now if i save this you might have to do a ctrl shift r do a hard refresh so now we see the page again the content needs to be updated so let's start with this participant side right here i want to change that because that's just making my html file a little bit obnoxious here so let's start with these participants here so here we go we see a participant the actual link so each participant is wrapped inside of a link so let's take the opening participant and let's just scroll all the way down to the last participant so i see that right here let's go one above and let's keep one so if i save that we should see one participant and we want to go ahead and just loop through so in the original room page we just looped through all the participants like this so we did four user in participants go ahead and output that so here we go we have one participant inside of that section then we'll put in the closing and four tag so n4 save that and now that should output that information we need to update the actual contents so this is going to be user.username and we're just going to repeat this right here and we'll just do user dot username we want to add in the link here so we see oh we didn't link it up earlier so let's add in a link to the user's profile if you see a participant you want to go ahead and visit their profile see what kind of rooms they're hosting or reach out to them we can just do user dot or dash or hyphen profile and then user.id okay so we have the link we want to get the account here so let's see we'll just take the participant count let's just take this value because i always have a hard time spelling that word we'll just do dot count so that's a query set so we can just take that value and do dot count refresh it and there we go so three people have joined this room i'll zoom in a little bit that's all taken care of i can click on a user profile that all looks good and now we need to update the actual study room in the css might look a little bit off because i'm so zoomed in right now so we'll work on that if there are any issues i'll make sure that the template is updated by the time you take this course or follow this video so now we need to just update the room information so let's update the name here and let's update the delete and edit links here so we also want to update that backlink too so let's just start by going through line by line here so we'll start at the top here and let's see so we have the room so one second we need to get some notes ready so we have the room uh this is the back button here let's just send the user back to the home page we're not going to worry about the details here if you want to send them somewhere else or maybe the previous page you can do that for now i'm just going to send the user back to the home page that's an arrow left button study room let's see so in this section top right let's see we have the edit links right here so top right section we have the edit and delete link so let me minimize these then we have the delete link so what i want to do is make sure that only the owner of each room can actually modify this so i'm going to update this right here so we'll create a condition and for this top right section let's go ahead and create that so we'll just say if room dot host is equal to request dot user then we want to output this otherwise we don't want just anybody editing the room so we'll just do n4 save that and let's take a look so let's refresh it what did i do here so i did that whole thing again where i forgot to make that end if not n4 okay so we see the study room if i go to a room that i'm not hosting i'm logged in as dennis here let's just find a room that tim is hosting so i actually want to go to the room i want to learn html so i can't edit that but i can edit my own so if i go to i want to learn javascript we can see these two links so let's update these links we'll go in here let's expand these so this is the edit link so we'll just go ahead and create the url tag so we'll do url and then this will be update dash room and we want the room id so room.id okay and let's just copy this right here and minimize this section and then we'll go to the delete link and we're just going to add in delete room okay so delete room right there refresh it so if i go x right there that works edit that gives me the form here so we'll finish up styling those okay so now we should move on to probably updating the title so let's just remove this comment here that should be gone by the time you see that i'll try to make sure that's updated here we have the room title let's modify all of this so room dot name not title then we have the created time so we'll just do room dot created and then pipe time since then hosted by well this is going to be the host url here so first we want to add in the link so url and then user dash profile and then that's going to be room dot host dot id hosted by and then later on we'll update the user profile and let's just output room dot host dot user name okay so refresh that let's learn javascript that looks good we see the host that link works at this point let's also get rid of this description i don't know why but i just don't really like the idea of a description like on a discord server you might have some kind of description there but it really doesn't just show up there so what i'm going to do is just comment that out i feel like it's going to look better and it's going to make this website a little bit more responsive here so the description the description of our room is gone we want to output the topic so room dot topic we'll save that okay so that's javascript if i go to study with me that's python okay so we'll remain here because there are three comments here that we want to output so these are all the fake comments we're gonna modify these right now and again this footer right here if it needs to be fixed we'll fix it later in the template the html should not change um but also i'm really zoomed in so that's why this is probably happening here so let's go into the contents so let's see we're going line by line uh author of a thread here so i think it's called thread i think that's what each item here is called so we see threads so if i add some space here minimize this class of thread i can see another class of threads so what i'm going to do is go ahead and delete all of them and keep just one and then create the for loop so i can see three fret three threads right here i can't say that and uh let's go ahead and create some space let's make sure there's only one okay so i see one thread right here now let's go ahead and create that loop so let's see in the original room we just did when we outputted this content we just did four message in room messages so let's paste that loop in or just write that out and then at the bottom of the thread let's just do end for okay so in the thread now we want to update the contents so we want to link to the user so we're just adding in a bunch of the same links this section is going to be pretty long probably an hour maybe even an hour and a half and i'll just make sure to timestamp it but this is all important for making sure this project is nice and styled so profile and then we'll just do user dot id or we'll just do message dot user dot id then we'll just take the message user i'll put that user name the post here that's going to be the message with the time synth stamp so message dot created and then pipe time since okay i'm really oh did i i blocked that out sorry about that so let me just minimize that so my face blocked that so there you go you can see the code right here oh okay so there we go we see the message and we see the username and we also want to make sure that this delete method is conditional so if a user is the owner of this specific message then we want to output this so we'll add in an end if statement and then an if statement right here so we'll just do if and then we'll just start with request dot user is equal to message dot user that should output that and this should send the user to the delete section here so i need to add in a link around this i noticed that the link was not built in so if it's not added by the time you see this go ahead and just add this link around here and let's just do href i guess it's not an issue because i showed you as long as i don't miss out on that and we'll just do a url and this will be delete dash message and then message dot id okay so for the actual contents of the message right here we'll just do message dot body paste that in let's check this out we'll refresh it and there we go we see our messages that looks good we see the time stamp we see each user the user is clickable if i go to delete so in this case i am dennis here as a user i'm logged in as dennis i can click on delete and i can confirm that and everything looks good for the room section so let's go ahead and work on the create room form so at this point uh let's see we have this link here or we should have it where the heck did that link go so i'm logged in was that not in the original template or did i get rid of that okay so i had to pause for a minute because apparently i deleted this create room link right here so i'll make sure that it's in the template once you're working with this but i couldn't find it and we must have accidentally removed it when we're making edits here so at this point inside of your home.html file go ahead and open up this section right here where we have the study room title and the room count and go ahead and go to this link and just update this to url and then create room so create dash room and that should update our link so if you go to the page here now you should see this section right here so when we go to create room the first thing i'm going to do here is style this page so i want to make sure that it's all styled we'll install the theme and then i'm going to add in some functionality here so a user can actually add in their own topic here so that's going to require a little a little bit more in the back end to customize that so we'll get to that in a second so the first thing is i want to go ahead and install the theme here so let's open up the theme and let's open up the original template so on the right i have my current project on the left i have the theme so this is going to be create room right here so let's bring that in and let's just do this i call that room form and this can actually update a room too so it doesn't only create it so i see room form right here let's just change this to room form underscore old and we'll change this create room right here to room form so room underscore form and that's already an html file so now if i refresh it i can see this so we're gonna have to update this information right now so we'll just go ahead and take these block tags right here where we extend the template let's open this up and let's go into the room form so in the room form we're going to take the doc tag all the way to main remove that paste in the extends method and take this block tag go to the bottom and we'll remove everything to body and we'll make sure this is an end block okay so we want to be able to update the room so we have a form here so let's go ahead and first fix up some links here and then we'll output the form so in this section here at the top let's go ahead and start here let's just kind of read through everything start with this first link and let's see we'll just go ahead and add in a url to the homepage so we'll just do home or url tag and then we have create study room let's just do create slash update or something like that save it like that and for the form value the action is going to the original url the method is going to be post so let's look up the original or the old form room so we have the action the post method we're going to get that csrf token let's paste that in right here and let's see so if i go ahead and look at the fields now so here we see a form group we see some information here so let's just comment this section out right here so i want to comment that out we have a form group right here so what i could do is just create a for loop around this so i could just go ahead and do something like 4 field field in form and then just do end for so if i do something like this and get rid of these fields right here this will actually work here so if i save this let's just see what we have at this point so let's just make sure the form is working looks like we need a closing block tag let's see end for so let's refresh that and this should be good once we output the field values so in this case we'll just do field field dot label let's get rid of that r right there fix the spelling error and we'll just output the actual field so i'm just going to comment that out and then let's just go ahead and bring in the field so we have the label we can access the label like that and then we can actually output the field value so for the most part it should be styled okay so here we go so we see our topics if i select django let's just try python let's just do python and we'll just say let's keep learning i'm not really creative with these titles and we'll submit that so here we go i see that i created it the form is officially working and it's styled now in this section we're going to learn something new if you don't already understand how this works so we're going to use an input field that also has a drop down select option here so let's go ahead and get rid of this for loop right here so we'll still use the model form but some of the fields i'll manually render them out and one field in particular for that drop down list all hand code everything so with a model form i can actually access the form and then access a specific value here so this will be form.name and that will be that form field now i could also do the same thing with the label here in this case i'm just going to write it out because it's a small field here so we'll just we're a small form so we'll just do room name and let's just go ahead and get rid of this let's copy this one right here and we'll just do form dot description so we're just going to get the values manually room description and let's continue here okay so i already have the code right here in the template but i want to manually code it up just so i can explain as i move along here so the first thing is i just want to go ahead and copy this div right here so let's just copy all of this paste it in and i'm going to get rid of this value here and for this section in the for attribute here we'll just do topic so we'll get the topic and let's actually update this to description and let's continue okay so this is going to be a drop down list but the first thing we're going to do is add in the input value so it's a drop down list with an input value the type will be text and the name needs to be topic here so this is how we're going to get this in the back end so we're still submitting the same form data so we have that and we're also going to set this to required so we want to make sure that a user can't submit it without selecting a topic or adding their own and then we're going to add in the list property here and we're just going to set this to topic dash list okay so we have a standard input field the only thing that looks different here at this point is this section right here so if you're not familiar with it that's all that's changed here if you already know this well i'm just going to be going over stuff that you understand now we also have a data list tag here that we can work with now a data list is going to be the options that drop down when the user starts typing something in and in this section we need to add the id and the id needs to match this section right here so we're basically saying we're basically saying where is this list right here and we're pointing to topic list and that has the id right here so make sure those two match that's how it knows where to find it then let's go ahead and add in the select option so we'll just do select here and we're gonna give this an id here so we'll just do what the heck did i do there okay so we'll do id and this will be room topic and then we want the options here so the option we'll just use the option tag these are going to be the form options so let's say we just do something like python and then we set the value here so the value typically would be something like an id but in this case we're just going to set the string values so we'll just do python so it would be the id of like the child objects and then we can throw in django so there's a reason why i'm doing things this way we'll see it in a second okay so now that i did this we added the data list with the options let's go ahead and take a look at this form here so if i go here when i click on this we see this drop down option and we see these values so if i start typing in python it does a search if i want to add in my own let's say i want to add in java then i can actually submit my own value so that's just what we need in the front end here and what i actually need to do here is pass in some more information because i don't want to hard code this value out that also needs to be dynamic so we need to go ahead and go into the create form view and let's just go ahead and get the topic so we'll just do topics that'll be topic.objects.all so we'll get all the topics we'll pass those into the template and then we can go into the room form and we're going to create a for loop just to output all the real topics so as we add them we obviously want the users to see all of those so we'll just do four topic in topics and then let's get rid of this last option or the second one and we'll just close off the for loop so we'll do end for and we're going to pass in the topic values now so we'll just do topic dot name take this right here and we'll we'll bring that in for the value so i also want to do the same for the update view so for users updating it we're going to need the same values now so we want to be able to get the topic so let's bring that in here pass that into the context dictionary for the update view and now if i go here if i click on this we see all of our real topics if i start typing something in it starts searching automatically and there we go so that's all we need for the front end now in the back end we're gonna have to process this a little bit differently so now we have this data list and our form looks a little bit different so we're not gonna be able to use the standard model form now i probably could customize it a lot to work with this but in this case i only need to customize this view so we'll stick with just keeping things simple so the first thing i want to do is get the topic name so we'll just go ahead and go into request.post.get and we're going to get the topic okay so once i get the topic we're going to go ahead and set this value and we're going to use a method called get or create so we set topic and created and we're just going to do and i'll explain what this is in a second so we'll just do topics.objects.get or create so it's a method here i'll make sure that i'm not covering it and what's going to happen here is git or create is going to return back either an object or it will return an object and created and what's going to happen here is if we pass in the topic name for the name value so let's say we add in javascript or python we already have python so get or create is going to get the value of python and it's going to return it inside of this topic object now created will be false because python wasn't created we already had this but let's say i added in a new value like just java now we don't have java in our database at this point so what's going to happen is created will be true and this will simply create the object so if it can't find it it will create it so that's what get or create is doing so this is how we're going to be able to customize that form since we are trying to also add this now what i'm going to do here is get rid of everything in here so i'm just going to comment this out right here and i'm going to change this up here so we're not going to be using the form here and i can also comment out this right here so at this point underneath this section we're just going to go into room dot objects dot create and we're gonna use the create method because we're customizing that topic section i try to find easier ways to do this and this is actually very easy but i try to find a way to do this with a model form easier and i couldn't find one that wouldn't require more explanation so i wanted to keep it simpler so we have the host here and once we get the host and we just finished updating our form so now we're like redoing the same information here or redoing the same thing but now it's going to be a little bit different so we're just going to do host and that's going to be request.user so you still got to at least learn that method if you need that elsewhere so at least you know how to do that so now that we got the host we're going to get the topic and we're going to set the topic to either the newly created topic or what we had in the database so we're creating a room with all this information and for the name we're just going into request.post.get and we're passing in the name so the name will still be passed in from the form value so we still have it right there we still have the model form fields those will be sent so we get the name and then we need to get the description if we have a description so that's not required so we'll just do a description and we're just getting the description from the front end so i hope that makes sense so once we run through this i'm just going to go ahead and let's just remove this actually so we'll just remove that there's no need for that so now when we submit this we create that topic and then we redirect a user so let's go ahead and save that and here we go so let's try this so let's see what's the new topic let's just do java so we'll just do java and we're going to create a room and we'll just say calling all java developers okay so now we submit that here we go we see the room and we see a new topic added now if i go to create a new topic java is now here so the next time someone submits this that's gonna go ahead and create this so for the update functionality let's see so we need to be able to also update a room and this i haven't really thought about yet actually i didn't really prefer this in the tutorial but let's just uh see how we can figure this out so let's see so in the update room functionality we're rendering out the topics and in order to pre-fill the room name i guess that's supposed to be a topic not a room name so let's fix that in the form so we'll go back here this is supposed to be the topic actually we'll just say enter a topic so we want to prompt the user so to enter a topic let's try that one more time okay so first of all the form needs to be pre-filled so let's take care of that issue so we'll go ahead and take the room we'll pass that into the context dictionary we'll bring that in then we can go into the room itself and for the value we'll just set the value here and that will be room dot topics a room dot topic dot name now let's see if that gives us an issue with the create room so if i go to create room okay so it's not giving us an issue so it's totally fine let's try to add in another topic we'll just say c plus plus let's learn c so i just want to debug on the go so c is added and there was no issues okay so now we want to edit that so we see c plus let's learn c and i also need to process this too so when i submit this this form will not work in the back end so i'm going to do what we did up here i'm just going to copy this right here we're going to take all of this and we're going to bring this into the post method then i'm just going to go ahead and remove all of that and we'll just set the return method back and we're going to get the room so we'll get the current room and we'll just get the name we'll get the room name and let's just do room name is equal to request dot post dot get and then we'll get the name value so we're just simply going to get the model and update all the values so we'll set that for the topic and the description so we'll just do topic and then for the topic we'll get either that newly created topic because the user can edit something and decide to create a new topic and we want to be able to set that so we'll just do description and then we'll just do request.post.description and then we need to save it so let's try this some things i don't plan for in all the tutorials or in these tutorials so let's try this again okay so let's say we decide to change this up and we'll just do c sharp now so throw that in i think that's the symbol so we'll just do let's learn c sharp exclamation point add in a description let's just say something random here so we know everything's submitting and let's go ahead and hit create room let's learn c sharp and that was updated perfect okay so that's c sharp we see the topic c sharp was added and everything looks good so instead of saying create room let's just say update too i want to make sure that form looks good i could write some kind of condition here but we'll just say submit that's going to be a little bit more generic okay so that's it for our create room form so we're able to update and create with a styled form with the ability to add in multiple topics here so now you can see all these new topics be added okay so the next thing i want to do is give the user the ability to edit their account so we don't even have this page here so we want to start building this in here so let's go ahead and do this and at the bottom here or let's just go ahead and open up our files here let's start with the theme and let's start with or let's move to our app too so we'll go into uh study study bud we'll go into base so in the base app in templates in base let's go ahead and go in the templates here and we're going to take edit user okay so we're going to drag this in we have edit user and i'm going to change the name to update users we'll do update dash user and that's it okay so now we want to create a view for this so this is going to be a completely new page so we're not going to be changing content out we'll just be building it for the first time we'll go down here let's create a function based view called update user pass in request i also want to make sure this view right here is restricted so you shouldn't be able to update a view if you're not logged in we'll just do login required and then we'll set the login url and that's going to log in let's see how do i set that yeah so we set the login url to login okay so we're creating the view then we want to return this is going to be render we'll pass in request here and we're passing in base forward slash update dash user dot html okay so that's in here now update user we see the full template and let's pass in the context dictionary well for now we might not even need one i don't even i don't remember how i was going to build this one out so we'll just kind of wing it here and see so we'll take this delete message let's go ahead and move this down here and we'll just say update and then change that to user let's remove this so we don't need an id because the user is going to be the logged in user change that to update user and we'll just do update user like that okay so we have a view and we have a url that returns back the template that needs to be fixed up right now and inside of our navigation bar so we want to link to this from a few sections the first one is going to be the nav so we'll go into the nav bar here and let's see in this drop down section we see the user name and then down here are going to be the drop down menu items let's just change this to update users so we'll set the url tag update dash user okay so let's try this out if i go into the navigation bar i'm logged in go to settings here we go here is my update user page so let's make sure that it's styled so we'll go ahead and fix that we'll open up update user in templates and let's just go ahead and take everything from doctype all the way down to header extend the main template i'm sure you guys are getting pretty annoyed at this point dealing with the same thing but it's just repetitive and we have to do it so main.html i think we've done this like 15 times at this point so we'll just do block tag or block content and then end block content we'll just copy that bring that down here remove body and html at the closing main tag and let's take a look at the page here okay so here is our editor edit user template so i also want to link to this from my profile so if i happen to go to a specific profile so i'm logged in as dennis we have an edit profile link here so we'll create a condition i think i might have already did that we'll go to profile here and let's see so we have the about section edit user so we'll just go ahead and write the conditions so if request dot user is equal to the currently locked or if the user that we're on is currently matching the logged in user then we want to render that button and we'll add in the link so end if kept messing that one up early or earlier and we'll add in the url tag so we'll just do url and update dash user okay so we have that information we have the template this link should now work so if i'm on my own profile i can edit my account if i'm on let's say eric's account i can't edit that so that is hidden so let's work on the functionality so we want to be able to create a form that we can actually process so that link also needs to be updated so that was also one in the navigation bar it looks like there's two in the nav bar so let's take this update user link and let's go right here so that also needs to be updated so we can click on that without having to go to the drop down menu okay so let's go in here let's go ahead and go into update user and let's take a look here so we have a form here we have a container we have a link to the profile the profile picture here oh so that's the back button so let's just go ahead and let's just redirect the user back to the homepage for now we're just going to stick to that so if you want to change that up i would recommend just going through and updating all of these so we have our form this needs to be sent to the same url so we're going to leave action blank the method needs to be a post method we need a csrf token so we'll just do a csrf underscore token now for these form values here let's go ahead and remove all of these and we'll just leave one so we're going to use a model form for this so we'll take all these and we're going to leave form action so we're going to leave our template with one form that looks good and let's see so we're going to have a file upload field once we're dealing with that profile picture so that'll be taken care of in a little bit here so now let's go ahead and create a model form for our user so we'll go into forms and what i need to do is actually import my user model so we'll go to models and let's just take this import and we'll go back into forms dot py so we're going to import the user and we're going to create a model form based around this user so we'll just do user form pass in model form then we can throw in class meta specify the model and that's going to be for fields instead of specifying all of them because a user model has a lot of fields there's passwords is super user all this information we don't want to give them everything so we'll just specify the username so that's what's going to be output and then an email and later on we'll do like a bio in a profile picture but for now that's going to be it so we'll just output the username and email and the user can update that so inside of the view we need to import this so we'll just do user form let's bring this down here let's render this form so we'll just do form that's equal to user form and let's see so the instance well this is going to be the request dot user so we want to make sure to get the initial user value actually let's just set the user value like this so we're not using request.user every time so we'll set the instance as the user and then we want to send that into the context dictionary in this case i won't create a full context dictionary i'll just pass it in directly like that and that is going to be hidden there so i want to make sure you can see that so we pass in the form and we can access that as form so we'll go into the template and let's create that for loop here so in update user we'll create a for loop and we'll just output every single form field this will help us keep some styling so we can just do four field in form add in that end for loop and four and let's see we'll just change this to field dot label and then we'll change this to the actual field so the model form once we add in the upload field well that will manually output itself so we'll just do field so the model form will take care of that for us so if i refresh this let's go ahead and oh i need did i pass that in for field inform this is user update we have our form passed in let's save everything oh i didn't specify wow i completely butchered this one so we'll just do fields hopefully you notice that and we need to specify the model so let's just do model and that's going to be the user okay so that was the issue so if i refresh this let's see what's going on right now so fields is prohibited with the exclude value so let's try this let's just i can't tell if it's this form or the old form that's having the issue which i don't fully understand so it's in user form we have the user model let's try to restart the server so let's scroll up here make sure we can all see the issue start the server and let's see if i still get the issue okay so maybe i spelt something wrong there so uh use update user okay user wow that was a dumb mistake okay so this is why we don't specify all the fields here so it outputs everything my hash password last logged in all this information so let's try this one more time i think the issue occurred because i was messing with the wrong form here so let's try this again so we'll just do username and email and this should work okay there we go now we have a form with my username and my email so all i want to do is just be able to process this now so we'll go into the view and this is going to be a standard model form so we'll just do if or a standard post request so if dot request or if request dot method if this is equal to post you already know what we're going to do we're just going to go ahead and set the form that's going to be the user form pass in request dot post set the instance to the user and then we want to check if that's valid so if form dot is underscore valid let's go ahead and process this so we'll just do form dot save and then we want to redirect our user in this case we're going to send the user back to their profile so let's just do user dash profile and we're going to pass in the argument of primary key and that's going to be the user dot id so user dot id like that okay so let's try this so let's say i want to change my username so i'm just going to change it to dennis ivy and we'll just change the email to dennis ivey at gmail so if i submit that okay so it updated it apparently it didn't redirect me so return redirect wow i don't know why i'm starting to make all these mistakes so let's try dennis iv one submit that and there we go so i'm back at my profile i can edit that let's go back to dennis ivy submit that and there we go so we can now edit a user profile so at this point i just want to do some cleanup work here so we want to make sure that our website is completely mobile responsive we also want to make sure that our delete template is filled out here so we're still not using that main template and also the login form here so when i go to login this template needs to be finished up here so we want to use the themes template now there's a few things i noticed here so we'll just keep doing cleanup as we go and i want to try to finish up most of this before we move on to the django rest framework and building out our api and that custom user model so the first thing i noticed is that when i submit this form it doesn't actually submit anything and i think that's because in the template here in the room.html file i forgot to update that form so there's a chance that i'm going to miss a few of these here so we'll just keep going back and fixing those so in that room message form we see this form tag the first thing is i want to make sure action is blink here so we're sending that to the same url and we want to add in the post method so we want to make sure that's a post method anytime we are sending a post method we want to add in a csrf token so csr underscore token and we need to pass in the name here so this is going to be the body of the actual form so let's give that a test here so if i refresh that it looks like it added in a search parameter we'll go ahead and refresh that and we'll just say looks cool and there we go okay so that's working now it just added us to the participants everything looks good and let's go ahead and add in the delete template so when i go to delete an item remember that you need to be logged in as a specific user so i can't delete any one so make sure you find one that you can actually delete here and let's add in this template here so we'll go ahead and open up our theme again so we'll add that to the left side and then we're going to open up our project here on the right side so down in the templates folder we'll go to delete and we're just going to do delete underscore old so we're just going to replace the content here then we're going to grab delete from here and bring that in here so if i go to the delete page actually before i do that let's go ahead and actually extend the main template so we'll go to delete.html take this doctype right here so this tag all the way down to the main tag delete all of that go ahead and extend the main template so i just want to make sure to see that before we actually check out the page and we need to create the block tags here so we just have two more templates i think to replace right now and then we're going to add in a couple more pages here for mobile responsiveness so this is going to be block content and then down here we can get rid of body and html and also script and we'll just do end block content so end block content okay so now if i go to this template it looks a little bit better so we just need to complete this form so we'll just update this information make sure that it's actually a real page here so we'll need to open up the old delete html file we'll just bring that in like this and we just need to make sure that it's a post method so we'll take that right here let's go to the form so we see the main tags a couple of divs here and we see the form right here so let's just go ahead and replace action right there with the method and the action with the empty value so we're just pasting stuff in here take that csrf token bring that in right here and for the back button instead of doing things this way we're just going to take this section right here and we're gonna add that to this back arrow so that's just gonna send the user back to the previous page so that's gonna be on the top here that's this link right here so we'll replace that and let's see so we just have a confirm button so that's going to be it at this point so we have our token are you sure you want to delete and then we need to change this value right here with a dynamic object so we'll take that throw that in right here so that needs to be replacing the 100 days of code so that's going to be our dynamic value and let's give that a test here so we'll go back here let's delete a comment we'll just delete let's or it looks cool here so we'll just confirm that and now that's gone so now my comment is gone and that's working so the delete template looks good so now we just want to update the login and register page okay so in here let's go ahead and let's see how do i want to do this what i think i'm going to do here is just paste in the template well i guess we'll do the same thing we'll just start replacing bit by bit here so we'll just take login we'll bring that in and we have a login underscore register so that's our template name our original one let's see if i go back into the text editor here we see login underscore register.html we'll change this to underscore old and then we'll change login to login underscore register so we're going to change this information so this is the new template login underscore register and let's just go ahead and get those block tags so i'm just going to take this from the delete template right here we'll go back to login register and let's just remove all of this again so we'll just take this tag right here all the way down to main remove that and then paste that in here extend it take the block tag here remove body and html and we'll just do end block okay so let's take a look at this template here so end block is not working let's see what we have here and block content and let's refresh that okay so here is our new login page so we want to make sure that this works and then we're going to add in that condition to also render the register page so back in the new template here so this is the new layout let's see we have a main layout here then we have a container we have the layout box for the login page let's just do this here so let's take this container and we're going to write our condition around here so we'll just take this condition and we'll just say if page is login then we'll render out the login form so if page is equal to login then we'll wrap the end if just before the main tag so we'll just do end if and then the else statement for the register form so we'll just do else and that's going to be the register form so i'm going to take this div right here so all of this content so then the entire container let me just minimize that so you can see it let's take this entire container and put that also into the else statement so now we're going to modify this so let's open up the old login register page so we'll move this right here let's make sure we can see both of these and let's check this out here so the login form will scroll up here let's see we see the login page we see the form so we want to make sure the method is post so let's take action out right there leave it blank set the method to post take this csrf token from the original page let's put that into the form so we have a username the name is username this is a text field so that looks good then we have a password as long as the name is password that should be good for the login page so for this signup link we're just going to send a user to register so let's just do url and then register and i made one mistake here i accidentally just updated the register page so this is in the else statement so let's just go ahead and take this container if you happen to do this too and paste it in right here so we'll update that register one with the register form so now if login we just updated this form with a csrf token the action the method and the input fields look good so this should now actually make our form work here so let's go ahead and try this so i'm going to refresh that and then we'll just log in as dennis ivey that's a user if i log in that's all working so we didn't have that much to update there and if i log out here let's go back to login if i click on sign up well it's going to be the same page here so this is what we need to change for the register page now so inside of the else statement let's minimize this container right here and let's open up the container after the else statement and let's go ahead and change this to register then we already updated the form so that looks good then we just need to update this section right here so we'll just say already already signed up then we want to prompt the user to log in and let's go back to our original register form so i'll just bring that in here so we can see everything and let's check this out here so we just have form as p here so what we're going to do here is just go ahead and do that loop through the form fields and we're just going to output every single field and that should be it for the forum field here or the register form so let's take the password here let's get rid of that so we're going to take this form group here for the password we only need one because we are going to create a loop then we have our submit button so that looks good we're just going to go ahead and loop through this field right here so we're going to say 4 or this form we'll say 4 field in form close out that loop right here we'll just do end four so end four and let's just output the field values so we'll just do field dot label and then for the field value well we don't need to use this input field we're just going to do field so this will be our register form and make sure again it's in the else statement because i already made that mistake so let's do register here instead of login and that should be it here so all the links are good it says sign up let's try to refresh it so if i go to sign up that's going to take me to the login form if i go to register now it says register and let's just register a new user let's just say tom here we'll add in some kind of password make sure that it's actually working so nothing on the back end needs to change an error occurred during registration let's try that one more time so let's just say todd i don't think i have taught maybe i already had tom and let's see here okay so if i hit enter now i'm officially registered i'm logged in as todd the register form does work and i have some landscapers outside so if they get too loud i'll try to pause this there they go so i'm gonna pause it and wait okay the landscaper is done for a minute that's the thing about landscapers they always know when you need peace and quiet or when you're filming something like this and then they just kind of jump out and get you they'll hide all week and then they come out and also if you ever find yourself facing a landscaper they can also smell fear so never show fear they'll get you so that's my personal vendetta against landscapers okay so where the heck were we all right so we finished the login and register page and what i want to do now is do some more cleanup here and i also want to make sure that this is fully mobile responsive so there's a few things that you should know about so when we go to the mobile version of the site here and right now based on my browser and my zoom it looks a little bit weird but you should see something like this here so let me just expand this really quick so when we go to the mobile version the search bar in the header goes away so this search bar then appears so these are two different search bars so i want to configure this search bar and then these two links right here so as we expand it we see this search bar go away then the one in the header appears and those two buttons disappear now we also have browse topics and recent activities and the reason why this is here is because we have these two sidebars here so browse topics and recent activities and as we go to the mobile version they disappear now there's different ways of doing this we could make this like a toggle uh drop down option or something that just appears like a modal in this case i'm just going to make these different pages here so you'll be able to click on this and you're going to see all the topics in their own page and so will the recent activities so these are going to be their own pages so let's go ahead and build these in also when we click on more topics what i'm going to do is limit these so we'll limit this to like five topics and then when you click on this it'll take you to that page even on the desktop version and you can see more topics so let's go ahead and build in this search bar so this is already built in but we want to configure it so it actually works like at this point if i click that it doesn't do anything if i try to search for java script and start trying to type that in it won't do anything so in the home page in index.html let me just bring in the text editor here i don't know why the heck that went away okay so we're going back to the templates folder and in index or home.html we're gonna see a search bar somewhere here so we see the topics component we see the room list right here and we see a mobile menu this mobile menu contains a form that opens and closes right here and then we see those two buttons right here so browse topics and recent activities i just wanted to move that out of the way so you can see that so let's start with this form so the first thing is is we want to send this form back to the home page so we'll add in a url and we're going to say home now the method by default is already get but i'll just add that in right here and we just need to add in queue to the name so that's what's going to add in that get parameter and it's going to send it back to the home page and that should make it work so if i refresh this and type in java now the search bar works we see calling all java developers so the search bar is now responding to this here if i go to c sharp now we only see c sharp okay so let's start with browse topics what we're going to do here is add in a template this is going to be a completely brand new template we'll make a view and url for it and we're gonna link up to that and then we'll add in some dynamic content okay so let's clear this and let's go back into our two folders so here we have our theme right here and here is our django project so we're in the templates folder in the base app let's go ahead and grab the topics.html page bring that in and before we actually start working with it let's go ahead and take this block and the extension of the main.html file and let's just open up the topics.html page so this is the page that we just brought in and we're just going to go ahead and start at the doctype again take everything down to the main tag so remove everything here paste in the extension the block content tag go down to the bottom here and get rid of everything to scripts and then add in and block okay so we have our topics page here and we need to add in a new view for this so in the views.py file let's go down to the bottom here and let's create a view for our topics page and we'll pass in the request object we don't need this login required decorator right here so this is going to be available on the homepage so no need to hide this right here and let's go ahead and do return render and we're going into request we're passing in request and we're going to base forward slash topics.html okay so we also just want to pass in the dictionary right there for the context data so we'll just pass it in directly like that and now we need a url here so let's just take update user copy and paste this and we're just going to change this to topics so we'll just do topics and then we'll just call this topics page so the view that we just created and we'll just take topics and paste that in right there okay so we have our url we have a view that renders that page and now in the home page we need to go to this mobile menu so this mobile menu right here opens and closes down here we need to update browse topics here so let's go ahead and update this so we'll just do url and we're pointing that to topics and let's test this out so if i refresh this let's actually also update this more link right here so we'll update that right away and then we'll test out both so in the activity component or in the topics component so not the topics page but the topics component we see this link tag at the bottom of the page so we just want to update this too so i'm going to paste in or i guess type in the url tag right here so we'll just do url and topics so we updated two links and now we can test it so on the desktop version if i click on more topics does not exist so it looks like i messed up that view this is supposed to be dot html not forward slash you probably noticed that okay so here we go so we see browse topics here so we need to update this page here and also in the mobile version here so as we go to the mobile version we see browse topics if i click on that there we go we can see the search bar and all the information in here so let's update the template now so we want to update that backlink and then change this content and make sure this search bar actually works so we're going to have a search bar for the all the rooms and then one to search all the topics and again this will be updated by the time you see that so we'll go back here and let's go to the topics page so topics.html the first thing is i want to make sure that this backlink right here points to the home page so we want to send the user back to the home page we'll just do url and we're sending them home so this is on the topics page then in browse topics let's just go ahead and get rid of all the topics except for one so we'll just take everything from python down to databases remove those actually let's leave python here so we're going to get rid of these right here and what i'm going to do here is go ahead and just pass in topics so we'll do topics that's going to be topics.objects.filter so i need to change that to a capital t and we're going into topic the object stop filter so right now until i add a filter it's going to work like the dot all method so we're going to add a filter for a specific reason so then we want to get these topics and we want to pass them into the context dictionary so we pass the topics in then we're going to create that for loop and we're going to render this out in topics so the first thing is for the all method right here we're just going to go ahead and let's see we're just going to send the user back to the topics page here so we'll just do url and then we'll just do topics so that's going to be it and then we just want to output all the topics here so we'll just do topics dot let's see so we're doing topics.room underscore set dot all dot count i think that's how we did it in the original one so if i refresh that let's see so we should have seven rooms so for some reason that is not updating so all let's go back to the topics component i want to see how i did that i actually forgot at this point so we just did topics.count okay it's already a query set so i can just do dot count i don't know why i forgot that so that's a query set so i don't need to do room set it's a query set so i can just do dot count now for this one right here we're just going to loop through all the topics just like we did in the topics component we're just going to do four topic in topics and we're going to add in and end a forum so let's close that off here and four and let's just grab the topic itself so we're just gonna do topic and let's go ahead and pass in the url so that's supposed to be a variable so we're doing topic name got distracted there so topic name topic.name and then let's see in the topics component for the actual account that's where we did topic.room underscore set dot count okay so let's throw that in right here paste that in for the account and then the actual url here all we're going to do is go ahead and send the user to the home page so they're going to go to the home page and then we're passing in the topic into the get parameter so we're just doing url home and then after the curly brace we're going ahead we're going to go ahead and pass in the question mark q equals and then topic.name topic.name like that okay so let's try this out if i go to the topics page we see all the topics let me just zoom out this is all messed up because of my zoom so don't worry about this overlay if i go to django it sends me back to the homepage so we don't have any django topics let's try web development so we'll go back web development and that search is working now what if we have a ton of topics now this could happen where we can have i don't know 100 200 topics here we want to be able to actually search these topics so you probably don't have to fix this because i'll update the template if i forget we'll just go ahead and go into this section right here in the search bar and just type in search topics so i'll try to make sure that that's fixed before this video comes out now in this search bar we're also going to pass in the name and the name is going to be q so we'll throw in q and we're going to send this to the same page so for the action we're just going to leave that blank the method is going to be a get request so this information is going to be sent back to this view here so what i'm going to do here is scroll up to the top here to the home page so we're going to take this request right here and we're going to pass this down to the topics view so we're getting that qlookup method we're just making sure that we have something there and then let's just do name and we'll just do underscore underscore i contains and then we'll set that to q so now if the user searches that q method will be sent to the topics page because we're sending that to the same url and then we should be able to filter down topics so let's try this so if i refresh this and let's try to search for java search that now i can search topics then i can click on javascript that takes me back to the home page and that's it for the topics page so let's quickly just limit these so let's just do the first five so we have one two three four five and then c plus plus and c sharp will be hidden so you could try to find a way to organize those by values there's different ways of doing that we won't get into that here but let's just go to the home page and landscapers prowlin right now i can hear them so i don't know if you can catch that in the video but let's hope not so four topics in the home view here as we render these out let's just get the index from zero to five so that's how we can limit that and that'll only give us the first five topics in this query set so if i save this if we go to the home page there we go so that's limited if i want to see more i can click on more and now i can see all the topics and i can also search the topics so that's it for this section what i want to do is also work on the activities component so when we're on the phone here when it's mobile responsive we want to be able to click on recent activities also so we have the topics and now we want to click here so this will also be its own page here so let's go back to the theme so we'll open up the theme on the left side our project on the right side and let's just take activity.html and we'll drag that in here so now we have an activity component and an activity template so we need to make a page here so let's go ahead and start building this out we'll just minimize this right now we'll go back to the home page let's just take these block tags here again and we'll go back to or we'll go to the activity page so activity.html take this doctype right here so let's grab all these tags all the way down to main let's just paste in the block tags take the closing one and let's update this so end block we now have the activity page we want to create a view for this so we'll close out topics and let's go to our views file so we'll go to views and just underneath the topics view let's just create a new view for activities okay so we'll just do activities page or activity page so that's gonna store all the information so or all the activities that we or all the activity on this website i guess and then we're just going to do a return render pass in request and then we'll just go to base four slash activity dot html and we're just going to pass in some data here so for the activity that needs to be a comma for the activities we want to query some data so we'll just do room underscore messages so that's what's going to be in the activity feed and we're just going to do room messages because of those flash messages so we don't want to call them messages in the template and we're just going to do message objects all so we're getting all the messages passing those into the template then we're going to urls let's go ahead and copy and paste topics here so let me just make sure my face isn't covering anything so we're going to topics here paste that in here and we're gonna change this to activity so it looks like my mouse is actually showing wow sometimes just restarting your computer works sometimes it doesn't i have no idea why that's working and that probably annoys me more than it not working when you fix something and it works but you don't know why you fixed it okay so we have the activity url we have the activity view that renders the activity page now in home inside of this mobile menu let's go ahead and add in this url so we're going to take this topics url paste this into recent activities and we'll just do activity so activity all right let's see let's refresh that go to recent activities and now we have the activities page here so we can go to its own page and we just need to update this we want to update the back link here so we want to change that and then render out real activities so let's go ahead and go back to the activity page here and the first thing is is i want to set this link right here to go back to the home page so we'll just add that set the url and that's going to go to the home page now for the actual activities we see this activities page layout here so this div right here is what contains all the contents inside of the page right here so we just want to update these now we already have these activity components inside of the home page so what i'm going to do here is just take the for loop here and i'm just going to bring that into the activity page here so let me just zoom back in because that's the only way i can get to this page we'll go back to this size of a screen and let's go ahead and open this up here we'll take this activities box so it looks like that's the name of the wrapper so we have an opening and closing div right here and one right here so let's get rid of both of these and let's open up the activity component so in the activity component we have this for loop and it's the exact same thing that we're going to have in this page so let's scroll all the way down to the closing for loop and let's just copy that and let's paste that in here so into the activities page so now if i go ahead and refresh that we're not going to see those right now because i haven't passed those in yet so back in the view here we need to take these room messages and we're going to throw those into the dictionary right here into the context dictionary and we're just going to pass those in so now we have all the messages here for the activities if i refresh that there we go now we see everything so it looks a little bit weird because it's only supposed to be mobile responsive and also because of my ridiculously zoomed in screen so now if i go here i can see all the activities and that's supposed to list everything out for the home page if anything if this is messed up i'll make sure to fix this with my designer but now a user can see activities from the home page okay so topics we can always go back activities we can always go back and there we go so that's it for this section what we're about to do now is move on to building out our api so we're going to build out our api and then we're going to work on a custom user model so before we get into this next section i want to talk about apis a little bit here now if you don't know what an api is or what they're used for i don't want to get into too much detail here because that's something that's a whole topic on its own i just want to show you how to make one with django now with django we could build out our own api and work with all this json data but that can be a lot of work and what we have here is this package called json django rest framework built on top of django so it's a package specifically for django and it makes for building out apis very easy now just to do a quick summary of apis we can use an api to maybe share data with other applications so in a sense we can take all this data that we have and we can provide a series of urls or endpoints that we would call and instructions on how to work with this data now this data would be retrieved usually in json format so if you wanted to work with some kind of front-end framework or maybe you're building out a mobile application i actually have a video on youtube where i use django and then flutter to build out a mobile to-do list it's on my channel it's on a live stream that i put together so this right here needs some kind of api data to work with we need some kind of json data if you want to work with react native flutter maybe you want to work with react.js or angular review these are all front-end frameworks that need apis we could use it for that we can also use it maybe to share data for example facebook has their own api uh so does youtube and twitter so if you want to get some data from twitter but you don't want to actually go to their website they have certain apis that you can go to read the documentation and call their data and actually view and modify data in the back end within their database using the api to interact with so it's a means of communication and a format of how we provide data so my rough explanation of apis let's just go ahead and start building this out so we're going to start by setting up a simple api and then we're going to install the django rest framework and we're going to get to this so remember mobile applications front-end frameworks or just sharing data these are all examples of when you might want to use an api if you don't know why you need one just don't worry about it for now and stick to whatever you're building until you either get requested by your boss to build one or you need to build one for yourself for some reason and then you can look into it so if this section is not important just go ahead and jump to the custom user model modification so let's go ahead and create our api now there's different ways of doing this we could create a new app inside of our django project what i'm going to do here is i'm just going to create a new folder on its own so we're not going to run the star app command i'm just going to go into my base app because it's the only app that we have in our application and i'm going to create my api inside of this app so we're going to create a folder called api and in order to make this work we first need an underscore init double underscore dot py file so go ahead and do that double underscore init double underscore dot py now we are going to need a urls.py file for our api our api will have its own url routing system so we're going to have urls specifically for this api and we also need our own views so we're going to create a views.py file and then we're going to need something called serializers so serializers it's a word that i always have a hard time spelling so serializers i'll explain what those are in a second so let's go ahead and actually start working with this api so let's say we want a view in our api and let's say we just want to respond with some json data when someone goes to our url so we could just go ahead and import from django.http and we're just going to import json response so if you don't know what json data is it's just a format of data it stands for javascript object notation i'd recommend looking into this but it's a format of how we can provide data here so we're going to create a function based view with a django rest framework we can also use class based views here we're just going to create a function based views or function based view and we're going to create our first view and this is going to be called get routes so this is going to be a view that shows us all the routes in our api so request and then let's just return this data so we'll just do return and then json response okay so these urls or these routes are simply going to be two get methods here so we're gonna pass in the method so it's gonna be a get request we can also send put post delete methods to our api and this route is going to be api for slash and we're just getting rooms so let's say that we want to create an api for people to see all the rooms in our application so imagine that our website gets huge it has millions of views and now people want to access our api and build out their own applications and maybe they just want to create like a website that just displays rooms on the most popular website in the world which is uh study buddy so they just want to list out all the rooms inside of study buddy so they make this request to us and we say sure we'll make an api for you so here are the two routes that you can access this will be like our documentation so go to api for slash rooms that's going to give you a json array of objects of all the rooms in our database and we can control what kind of data gets shown then if you want to get a specific room let's say you want to create like a page for your project or your website go to rooms and then just go ahead and add in the id of the room that you want and that will get you a single object and information about a single room so we have a very simple api and this is what we're allowing users to see now for this json response we're just going to take this python array or python list of strings at this point and we're just going to throw this into the json response now for this we also need to add in a parameter and we're going to set save to false and basically safe means that we can use more than just python dictionaries inside of this response so safe is going to allow this list to be turned into a json list so this json response is going to convert this data into json data so we now need a url so we want to be able to hit this endpoint so we're going to go we're going into our urls file we're going to import from django.urls import path so we need a path here we also need our views so remember that we're in the base app inside of api now and we're going into views here so we're going into that directory and we're importing all the views now we also need a urls or url patterns list here so url patterns and i just want to make sure that it's url patterns not urls okay so that's correct so we'll close this one out so we're creating our url patterns and we're going to set a path here so this path right here is going to be an empty string this is going to be for our routes so we're going to tell the user if you go to forward slash api in fact let's just add this into our view so let me close out all these other pages here or files and let's just say if you go to get well you're going to get this home page and they obviously know that because they're currently on that page if they're viewing this so we're going to that home page that's going to be forward slash api and we're going into views dot get routes and we're not going to specify a name now we need to connect this url patterns file or this url's api file to the main project here so django technically doesn't know about this right here so we're gonna we're going into study bud right here and we're going into urls.py this is now in the root directory so we have three urls files here and we're gonna create a new path here and this one's going to be prefixed with api forward slash and then we're going to send the user to base dot api and then we're going into urls dang i keep hitting forward slash so urls so we're going into base api and we're pointing them to urls so any url that starts with an api or with api after the home url send them to this file and let this file take care of everything so this url's ipy file will now handle that so let me make sure my server is on the urls are connected we have a json response and we should see this information so we'll go into our project here for 8 000 forward slash api and there we go so we have a json response this is now json data that anybody can make a request to and actually pull this data in so they can use python they can use javascript whatever they want in their side and they can call this url if this was a live link so right now only i can call it because it's on localhost but imagine if i had this on a domain anybody can go to this url make this request and get this information okay so that's a simple json response and a very minimalistic api and there's not much we can do with it now we can actually make our api work without the django rest framework but why do that when we have this awesome package so let's go ahead and install that and let's talk about what it can do here so let's just go ahead and google up django rest framework and let's open up this link right here so we have the domain and in the documentation it shows us how we need to install it before we can use it so we're going to pip install django rest framework and then we need to add it to installed apps here so let's go ahead and do that we'll open our terminal up here let's open up a new one and i'm just gonna make this a little bit bigger paste that in so pip install django res framework as one word and i actually need to do python m first so if you have that issue go ahead and do that and now it's installed so i actually already had it installed here so i don't need to worry about that and now i need to go ahead and take rest framework and add that to installed apps so that's all i need to do to enact to actually just install it into my project so very little we need to run the pip install and then in settings.py we need to go to installed apps so i'm going to create some space here and then we're going to paste in rest underscore framework or write that out in a single quote and now we are good to go so at this point what i'm going to do here is start building out my actual urls and make sure that they're based off of the django rest framework so let's go back to our views here and in our views the first thing i want to do is update this so we don't want to return back a simple json response we want to use what the django rest framework gives us so in the django rest framework if you want to look up the documentation i'm going to try to change up my zoom here so in the documentation we can see this api guide and these tutorials on how to work with our requests and responses here how to work with serialization and so on so i highly recommend you check this out here so at this point with class-based views we use this mix-in right here called api views with a function based view we add this decorator and that's going to add in extra functionality to our api here so we're first going to import response right here and api view so i'm going to copy these right here and we're going to go into our views and let's just remove this and paste this in so from rest underscore framework dot decorators import api view so we now have access because we installed it and then we're going to do from rest framework dot responses import response so the first thing is let's go ahead and add in a decorator so api view and in here we're going to pass in a list and these are going to be the get or the http methods that are allowed to access this view so that means at this point this view can only take in a get request now if we want to allow a put request we can say put if we want to allow a post we would add it like that so these are the methods that we can specify here so we just want to allow a get request users can only get data and now we also want to update response here or the json response to response which we just imported now we don't need safe here so i can get rid of that let's save this and let's take a look here so if i go back to my api if i refresh this we now get this user or this interface that shows more information about our api and this actually gives us more functionality than it looks right now or than how it looks for example we can actually make post and put requests directly from this interface so it's like a ui for our api we can see the methods that are allowed we can see the content type and we can see this data formatted so it's not too much but it just gives us a better interface to work with now what i could do is just go to this section right here go to json and that's going to allow or add in format right here and give us the standard json format so you don't actually have to add this when you're calling the api just go to this route and you'll get back this data let's say if you were trying to use this in javascript you wouldn't get back anything else here you would just get back this list right here so it's not too much more that we added it just gives us an interface but we want to go ahead and actually render out some more information and we'll see why this is or why the django rest framework is so cool so at this point we want to create another view here so let's create a view here and this is going to be called get rooms so we're creating this route right here that we're going to allow everyone around the world to access and we're going to pass in request and we're just going to do return and we're going to do response here so we're getting back a response so let's throw that in and we're going to pass in the room so let's go ahead and get the rooms here we want to import that so we're going into base so now we are one folder outside of it so we need to go back into base.models and we're just going to make a query for the room so we're getting the rooms and we're just going to go ahead and do rooms is equal to room objects all so all the rooms in the database now we do need to add in the decorators so we wanted to use the django rest framework functionality so we'll just go ahead and do api underscore view and we're only going to allow a get request so we'll pass that in and there we go so at this point we're going to have an issue here and i want to show you what's going on so before we actually fix it i want to show you the issue so let's quickly get this view let's go to the urls here so to our api views and we'll create the path and this is going to be api forward slash rooms and then close that off and then the view is going to be get rooms okay so we have our url and we have our views that return back our rooms and let's try this so if i refresh this we're gonna get an issue here and i'm not sure why it's not causing it let me just try to fix this so get rooms we'll save that we have our response our api view and for some reason the url is not working so let's try this one more time i'll do ctrl shift r oh i need to go to rooms okay so we're going to rooms and here we go so object type of room is not a json serializable so what's happening here is we're making a query set and this is a python list of objects here so it's a python list it's a query set and we need to make sure that we can serialize this data so that means that response cannot return back python objects now it was able to do it with this and we can even pass in dictionaries and that json response method was able to serialize and convert it but objects cannot be converted automatically so what we have here is a file for our serializer so our serializers are going to be classes that take a certain model that we want to serialize or object and it's going to turn it into json data so it's going to basically take our python object turn it into a json object or a javascript object i guess a json object and then we can return that so the serializer is going to work a lot like the model form we're going to import a serializer we're going to create a class specify the model and the fields that we want to serialize and then that will be rendered out so let's go ahead and make a quick import so in our serializers.py file we're going to do from rest framework.serializers we're going to import a model serializer so it's a lot like the model form you're going to notice a lot of similarities here so bass from models import room just like we did with the model form i'm going to keep referencing that because you'll see the comparison and then we're going to create a class here and i like to call my serializer the object name and then we just do serializer like that okay so just like we had room form now we have room serializer this inherits from model cereal serializer that's a word that always trips my tongue up so we're gonna set the meta and then we need to specify two fields at a minimum we're going to specify the model which will be the room and then we're going to specify the fields that are allowed and this can also be a list but at this point we're just going to say give us all the fields so take this model right here this room model and serialize it so return back all these fields and turn that into a json object so now that we have our serializer we're going to take this serializer we're going back into our api views we're going to import it so it's in the same file path so we're doing from serializers import and then i'm going to paste that in our room serializer so now we just need to go ahead and add in a variable here we're going to call that serializer and we're just going to use the room serializer so room serializer then we need to pass in the object or objects that we want to serialize and then we need to pass in a parameter called mini and this is going to be set to true so many means are there going to be multiple objects that we need to sterilize or are we just serializing one in this case we are serializing a query set so mini is going to be set to true so there are many objects so serializer is now an object here so what we want to do here is just go ahead and pass in serializer but we don't want to return back the object we want to return back the data attribute so i recommend maybe just printing out serializer see all the values in it or look up the documentation but if we access data that's going to give us rooms in a serialized format so if i save that let's go ahead and refresh this and look at this so we have our get rooms value here we can see a array right now so that's now an array and all that data was now serialized so we see the first room right here we see one object then we see another object we can see the id the title all the information about it so now we can officially return it so let's say in our application we don't want to just allow users to get the rooms we want to give them an end point to maybe open up a room in their website and view details about it or maybe we're building out that front end so what we can do here is go ahead and copy this view so get rooms paste that down here and we're going to change this up a little bit so we're going to change that to get room so a single room and then we're going to change rooms to room room.objects.get the id is going to be pk so we're going to pass in the primary key so pk like that and then the serializer is going to take the room and then mini is going to be false so this means that it's going to return back a single object as opposed to that entire array so we have a view now we just modified that a little bit in our urls so if we look at this route right here it's going to be api rooms and then an id so in the urls we're just going to copy this paste this let's make sure to add in that trailing comma and i'll just add it twice here change this one to get room get room right there and then we're going to pass in the dynamic value that's going to be a string value for now pass in the name and there we go so that's going to be the end point and let's try this out so if we go here we have a list right here we can see the two square brackets let's say we want a single room let's get room number one right here so with the id of one so i'll throw one in and for some reason that was not configured let's check this out so rooms that needs to be plural sorry about that i just got into the habit of removing all the s's there so now if i refresh that here we go we get back a single room so we have information about the room we see the all part all the participants ids and we can actually nest serializers so we can have children in these and that's not something that we're going to get into i get into that in my full django course and i also talk about authentication with the django rest framework and we use json web tokens there so that's it for our simple api now i want to show you how to use this maybe you see how we put this together but it doesn't fully make sense in what we're trying to do with this so let me just try to give you one example and for this if you want to skip this you can we're just going to use a little bit of javascript here and just make a call here and i want to show you one issue that can occur when someone else tries to call this api so let's give you an example so in our application here let's go ahead and create a new file here and we're going to call this front end or let's just call this cool website okay so somebody from the other side of the world let's just say they're completely across the world here they're creating a new website and all they have at this point is a simple html file so just to really show you separation let's open up study bud here let's grab that file and let's bring that out here so once i'm done with this i'll actually bring it back here but for now we can see our website which will represent our api and then we see cool websites right here so if i go into that website let's actually open up a new text editor so let's go ahead and do new file let's actually close this out we'll do a new window open up a completely different text editor remember these two applications do not need to know about each other at all they're two separate applications so we're going to go to new file here or open file we'll go into my desktop and we're just going to grab our cool website okay so let's add in some html so this person is starting to build out their awesome new websites that's going to display all these rooms they're just going to go ahead and create that html tag and we'll just call this cool rooms okay so let's get rid of this link right here in that javascript file they're gonna start building out their title here and they'll just say cool rooms and they're going to create a div where all these rooms are going to be displayed so we'll just create an id here and this is going to be rooms dash container okay so let's open up this website so i'm going to minimize all of this we'll open up the cool website and here we go this is all we have so they have this part of the website done let's say they're not into css and they want to keep it simple now they need to get some data so they're going to use some javascript and they're going to call our api here so they're going to go into their text editor and they're going to start making requests here so in their website here the first thing they're going to do is create some kind of javascript file here so let's see just underneath our body tag we're going to create a script tag and they're just going to go ahead and create a function called get room so don't worry about the javascript if you don't know this we're going to go quick and i won't explain it just code along or kind of follow for the concept so we're creating a function called get rooms and this is going to be an arrow function so if you don't know what that is don't worry about that so we're creating an arrow function and this function's job is to make an api call to this endpoint so we're going to use the fetch api so they're going to make a request and we tell them okay go to our website here on poor 8000 and go to api forward slash rooms this is the end point that you need to call and this will give you this response right here so once you call that data then you can do whatever you want with it so we're going to pass that in into that fetch recall or the fetch request now in this fetch request we want to actually pull this data and get some kind of response so we're going to use async await these are going to be the alternative to our promises it's a different way of working with the fetch api and we're going to set a variable called response here and this is going to be a wait and then we're making that request so this request right here will get us some data so what i can do here is go ahead and just do console.log and we're going to console the response and we'll just console the response here so let's go ahead and trigger this function so we need to call it and there we go so that's all the function does right here so it's a simple function makes a call and it's supposed to print out the data so let's go ahead and check this out so if i open this up let's go to our website let's open up the console we want to see this printed out and oh crap we have an issue so this was planned so we need to work on something called cores configurations so course stands for cross origin resource sharing and you can see this right here so if i hover over that we see this issue and what's happening here is this person is trying to access our website here and django is saying i don't know who you are you're accessing this website from a completely different resource and i'm not going to let you access this so what we need to do is configure that so django can either allow all endpoints to make requests to our api or we can even provide a specific set of urls that are allowed to call our api so let's go ahead and configure that so this is a very common issue the core is issue so we're going to go ahead and fix that and for this we're going to use something called django cores headers so this is going to be a third-party package that we can install that takes care of this so the first thing we're going to do is run this install so we're gonna do python dash m pip install django hyphen cores hyphen headers so we're gonna go ahead and install this so let's open this up we're gonna open up a new terminal and we're going to paste this in so we just installed it then in the documentation it tells us to add this to installed apps we'll bring that in so we'll minimize this now we'll close that one out leave the server on and let's go to settings.py so underneath the rest framework let's add in course headers like that so you can write that out or just add it and then after we add that we need to add in the course middleware to this middlewares variable inside of settings.py so we'll go into middleware let's bring this in right here i'll create some space so we can see it so coors headers middleware and then dot cores middleware so based on the documentation we can set three different things so first we have cores allowed origins and this is going to be a list of specified urls that we're going to allow so it's going to look something like this go ahead and allow example.com allow sub.example.com pour 8080 port 90 and so on so we can allow multiple ports and urls to access our website we can also use regex here and specify some kind of regex right here that allows certain types of domains or we could specify cores allow all origins so this is going to be what we're going to use and we're just going to bring this down here at the bottom of our website and we're just going to say true so by default this is false and cores allow all origins means we're going to allow all urls to access our website so if i save that once this configuration is done i can close out the documentation and let's check this out so we're having this issue now if i refresh it boom the issue goes away and we have our response now this response doesn't tell us anything so or it does tell us a lot it tells us information about that it tells us the status code but we want to see this data right here we actually want to see this response so we need to specifically with our front end here we need to parse this data so with a fetch api that's a way to make requests you can also use axios jquery if you're still using that there's different ways of doing things but with the fetch api we can go ahead and get the rooms here and the rooms will get using the awaits right here and we're just going to do response dot json and before i jumped off on my site engine i meant to say that with a fetch api when we send data we have to stringify it when we get it we have to parse it and turn it back into json data so that's just how it works so let's just copy and paste rooms here and now we want to see the room's information so we can go back to our front end in our cool website and here we go so imagine this is somebody from the other side of the world they just made an api call and they got this data right here from our api and they're able to see it and actually start working with that data so that's how that works we create the api and then somebody can access that so it's a way of sharing information it's like a phone call where you're or i guess sending emails you're passing data and you're getting data so let's actually just show you how you can render that out we might as well show that right now so let's say this person gets this api call then they just want to add in some data into the room's container so they're going to use a query selector so we're just going to set the rooms container and that's going to be equal to document.getelementbyid don't worry about the javascript here so we're not going to focus on that and we're just going to do rooms container okay so we have this div right here so we have access to this and after we get the data what i want to do is create a for loop so i'm going to remove that console and we're going to create a javascript for loop and we're going to set the loop here so we're going to set i that's going to be equal to 0 and with javascript here we're going to do rooms dot lane so while so we're going to do length like that so while i is less than rooms dot length we're just going to increment i so we'll just do i plus plus so that's a for loop in javascript for those of you that don't know that or one of the ways of doing it then we're going to set the room variable and this is going to be set to rooms and then we're going to access the index of that so i know it's a little bit of a side tangent from the django risk framework but a lot of people like this in the course when i showed it this way so i want to do this again here in the full django 2021 course that i did so we're going to create a row now and this is going to be set to these two backticks here so these are template literals and template literals allow us to add in more than what we would do inside of a regular quote here so we're going to create some divs here and it gives us some extra functionality in how we can work with it so we're going to create like an html element using these backticks then we can create an h3 tag and because of these backticks or template literals we can add in variables directly into our content by using a dollar symbol and then these two curly braces so it's actually a little bit like the django templating engine syntax that we had so we can now go ahead and just do room dot name and that gives us this div with this content so in the for loop outside of these back ticks we're just going to do room container so we're getting this value right here so this item and we're going to create some space here and we're just going to append all these divs right here with the h3 tag inside of this div so we're just going to do room container dot html so in our html plus equals and then we're going to set that to row so we're passing that in let's go ahead and create some space and let's check this out so undefined okay let's see what's going on here so we have our room we're going into rooms we're getting the request here rooms.name okay that needs to be room.name so this variable right here so we're going into that and there we go so this is the awesome website that this random person from the other side of the world wanted to build out using our api and regardless of how cool or uncool their website is we now gave them a way of doing that now if we can tell them go ahead and access you know a certain id at this end point that's how you would do it so they would add in links here when they click on these they can display that information so sort of a side tangent but we just took care of that and i wanted to go ahead and show you how to do that so let's go ahead and move on to working with a custom user model and i kind of want to do some explanation here and explain why we left it out in the beginning here and why we're going to add it the way we'll do it now so the user model is already built into django and this is something that gives us or this is something that contains how a user gets authenticated and it contains very important information about our user and it's a vital part of our application now there's multiple ways of adding to it for example in our user model we don't have a bio we don't have a profile picture maybe we want like a full name value we don't have this information in that user model now one thing we could do is add a one one-to-one relationship and this is how we do this in my django 2021 course we add in a one-to-one relationship and we would simply create a profile model so the profile model would contain all the information like the user's facebook account social links bios profile pictures and so on and we created this one-to-one relationship and this one-to-one relationship would simply connect to the user model and that means that a user can only have one profile and a profile can only have one user so we would connect those and then we would add in things like the profile picture and all that information to the profile model so this way we never actually have to touch the user model now what i'm going to do here because i already did that in that course so you can check out that option if you want and i also have videos on youtube for free on that instead of using that method we're gonna modify the user model now i typically do not like to use this method there's downs and ups to both sides with the method where we add the one-to-one relationship it does require a little bit more configuration when you register your user or update information about the user it does require some more configuration but it's safer because the user model is not being touched now in here we're actually going to override the user model and then we're going to customize it so i don't like doing this so what i'm going to do here is create a completely new project it's going to take a second here we're going to create a completely new django project i'm going to show you how to customize it so we can focus on just that part and then we're going into this project we're actually going to have to clear our database because now once we start messing with that user model it's going to really change things up and you'll see why and then we're going to re-add in data once that's remigrated so this is why i saved this part for the very end so let's go ahead and actually uh apply this right now so we're gonna go ahead and close everything out here so we're gonna close out this project right here we'll close out our django project any other projects that i have i'm going to leave or i guess i'm going to close it out here and let's just take our cool website and bring that into studybutton in here i'm just going to rename that to we'll just do api example okay so that way when you look into the documentation you can see how that looks okay so i already have django installed globally you could just go ahead and reinstall that you could also set up your virtual environment for now i'm just going to go into my desktop here so cd desktop just go ahead and run pip install django i have it globally as you can see i don't have a virtual environment make sure that's installed and then just do django dash admin and we'll just do user model or we'll just do custom user model okay so django dash admin start project so let me zoom in here one second sorry about that okay so i'm gonna try to go as slow as possible here so django custom user model and then we'll just add in start project okay so this is going to start up our new django project we're going to go ahead and open up a new vs code terminal here or new vs code or file text editor so go ahead and open one up find this new project we should see [Music] user model right here custom user model go ahead and open that up in your desktop so i have that right here it looks really small for some reason but just go ahead and select that file so now we have a new django project so let's go ahead and start customizing this so the first thing we want to do is go into that terminal and create a new app so we'll just do why the heck is this doing this okay python manage dot py start app and we're gonna call this base so the same thing that we did in our original project we have our new app we're going into settings.py and we're just gonna go ahead and configure installed apps so we're going into base.apps dot base config okay so that's all the prep work now there is documentation on how to modify the user model so instead of going into that i'm just going to start adding this in right here so we have our new app here and we have this user model and before we start migrating our database this is why i'm starting this from scratch so we don't have to redo anything we're going to go into the models file remember the user model is already built into django so what i'm going to do here is go ahead and build out my own user model and it's going to inherit from the original django user model and then we're just going to extend it so we're just going to go ahead and run an import so from django.contrib dot auth dot models import abstract so import abstract user okay once we have that we're gonna create a class here and this is going to be called user so user is going to inherit from the abstract user and we're just going to set pass here okay so that's our new user model and it's going to have all the functionality of the original user model and this is also where i'm going to show you the example of how to customize like the username to an email field instead of logging in with a username we can log in with an email okay so we have that new user model and what i'm going to do here is tell django that i want to use this model right here instead of the original django user model so we'll go into settings.py and we're going to set this variable called auth and then we're going to do underscore user underscore model and we're going to tell django which model is going to be our new authentication model so the auth model so we're going to point this to base so that's our app and we're going into user so this model right here we're pointing it and we're saying use this model now to actually use our authentication or handle our authentication and everything like that okay so we have that and once we point to it let's go ahead and run some migrations so we're going to do python manage dot py make migrations so we're going to run those migrations we have a user model python manage dot py migrate and now that's all migrated so all the default tables i got migrated that's all added to the sqlite database so really quick let's just go ahead and create a user so we'll do python manage dot py create super user we're going to call this user dennis and then dennis at email.com set a password so nothing new here one second let me restart the password okay so we have a user created now typically we don't have to register our user with the admin panel but because we created our own user model we do need to go into admin.py and now we're just going to do from dot models import user and then we're gonna do admin dot site dot register once you see some of the issues that we're gonna run into you'll thank me for starting it fresh like this because it's actually pretty simple but it could get tricky for someone that doesn't understand it and especially with our project at the size that it is it's going to be a slight nuisance it's not going to be too hard but just in case so let's go ahead and run our server now so manage.py run server and let's check this out okay so all we did was we went ahead and created a new user model we imported or inherited from this we added in settings.py the auth user model pointed that to base and then user and then we registered that with the admin panel so now if i go into the admin panel let's go to port 8000 let's go to forward slash admin i can now log in as this user and you'll notice users is no longer inside of authentication and authorization so the app that we've been working in up until now the user was originally right here but because we created our own user model it now says the user model is inside of the base app here so it looks like the original user it has all the functionality the password all this information and all the stats about our users so it's a standard user model and that's how we can simply customize it now let's go ahead and or that's how we can change what user model we're using but now let's go ahead and actually customize some of the fields here so the first thing is i want to make sure i can register with an email value instead of a username that's a little bit annoying to do so let's just pull up the admin panel i just logged out so we'll just do admin and we want to log in with an email instead of a username it's really annoying to have to remember a username for every website a little bit easier to remember your own email so let's go ahead and go back to the user model and in the model we're going to go ahead and remove pass and we're going to set a few values here so the first thing is is we're going to set a name so we're actually going to add in some custom fields the default field here or the default user model has a first and a last name and then a user but i want a name value i don't like the first and last name method so we'll just do char field here we'll set the max length that's going to be 200 and because we already have a user we do need to set null to true otherwise it's going to give us an issue okay so we have the name then we are going to add in an email field even though it has one we're just going to override it this is going to be models.email field and we're going to set this to unique so unique has to be true in order to actually log in with it so that means that two users can't have the same email because once they try to log in django won't know which user is trying to log in so this needs to be unique so make sure you set that and let's just add in a bio so we'll just do models so models.txt field and null will be true because we already have a model here so we just want to make sure that user doesn't have to add in a bio so now we're just going to do user name field and we're going to set that to email so we're going to tell django the username field is now going to be the email field right here so use this instead of the username so just change it right there now we're also going to set required fields go ahead and add that and just make that an empty list for now and that's it so once we make these modifications we're going to go ahead and open up our terminal do python manage dot py make migrations so we're going to make the migrations first then we need to migrate them so python manage dot py migrate and we should be good so my server is still on so i'll close out this terminal and let's check out the admin panel so if we go here now we see email now if i try to log in with my username it doesn't work i'm gonna do dennis at email.com voila i'm logged i'm logged in here so let's go to the user we'll go here we see the first and last name that was already there but now we see the name value and a bios we have customized our user model and we added in the email field so again the reason why i started this off blank is because i wanted to show you how to do this without running into any issues and i didn't do this in the beginning of the project because i didn't want somebody running into these issues and then having to fix it later and then having that be a pain and stopping them from completing the tutorial so if you're ever doing this do this early on in your project don't do it midway through now we are going to do it midway through because if you do happen to want to change your mind and do it i want to show you a different way of actually being able to actually go through this process and change it because there's a good chance that you might have to do this i've had to do this before so now that we've done the easy way i want to show you the more challenging ways so let's go ahead and close out what we currently have and let's just open up our original django project so we'll go back in here and for some reason my text is super small okay so now i'm able to zoom in a little bit so i guess whatever's on my desktop doesn't really matter so just go ahead and open up study bud and get that server going so we're going to add in some profile pictures and things like that so go ahead and make sure your virtual environment's on activate the server so python manage py run server start that up here and let's make sure our project is open go back here pour 8 000 and let's go ahead and do this so the first thing i'm going to do here is go ahead and i'm going to clear my database so at this point we already have data in here and this is why i say do this in the beginning of the project we already have data in here so we're going to need to completely clear it so if you don't want to clear your project and you don't want to use this method don't do it but at this point you could maybe make a duplicate of your project and try this out that's actually what i would recommend go ahead and make a copy of this project so you have a backup you can revert to so that way you don't lose what we've worked on just in case so let's go to the db sqlite database and let's delete it so we'll delete it permanently in fact my server is on so you're going to have to turn off your server before you do that so go ahead and delete that and then go ahead and go into base go to your migrations and delete all the migrations because you are going to have an issue if you try to migrate with all those previous migrations so go ahead and clear it as if we've never had a migration and we've never had any data in our application so now that we've cleared all that out we're going to have to do a few weird things here i guess because we're having to basically start from square one so we'll go into our application the first thing i want to do here is comment out all the other models so we're gonna act as if these models were never even added into our application and then we'll have to remigrate them so i can comment all these out by hitting control and then forward slash that's a trick to do that so i'm not sure if that's gonna be different on your computer but go ahead and comment all that out and let's go ahead and remove this right here so we're no longer using that default user model that django gives us so now we're going to create our new model just like we did so we're repeating what we did in the last section here and we're going to use the abstract user model here so let me go ahead and open up the demo code that i need to view for this so give me one second okay so all right i have that prepped here and i'm gonna continue so i have that open and we're just gonna go ahead and make that quick import so before we finish this abstract user let's make that import so from django.contrib dot auth dot models and we're going to import abstract user so we just did this then we're going to take abstract user we're going to paste that in here let's go ahead and add in paths and that's it so all we're trying to do is get django to look at our new user model as opposed to what we originally had so once we set this in the last step here what we did was we went into settings.py sorry about the outside noises if you can hear those i have like construction companies out there now so now that we have this we're going into settings.py and we need to go underneath our urls well technically it doesn't matter where you add it but i'm going to add it under my urls and we're going to set the auth underscore user underscore model and that's going to be pointing to base dot user so the user model we have in here now so we just did that okay so we have that taken care of and now let's try to migrate this so i want to show you the issue before we continue so i might as well show you this right now so if i try to run a migration so we'll just do python manage dot py make migrations we're going to see some issues so at this point we have all these files and again i'm going to do this more manually but we have all these files and it says hey i can't import room and topic and message because i don't know what these what the heck these are we haven't even ran those migrations now if we didn't comment out our models when we try to run this migration django would give us an issue right here in fact let's just try this so let's uncomment this and let's try this one more time so python managed py make migrations so i just clear that okay never mind wow it actually did work right away sorry about that okay i guess i'm not sorry because that actually fixes our problem so go ahead and clear your database or delete the database make sure you add in this model clear all the old migrations that was important because this will not work re-migrate it so re-add in all these in the migrations and then just do python manage py migrate boom okay perfect wow that actually really saves us a lot of time so we just created a new database and new database tables but now we're using this user model right here so let's go ahead and create the super user so python manage dot py create super user let's try that one more time so python manage dot py create super user and we're just going to add in dennis this will be dennis at email.com and then the password duplicate that password and there we go okay so let's run the server now so python manage dot py run server okay so we're gonna see a few issues still here though so at this point if we go to the admin panel we'll just go to forward slash admin i can now log in with this username and we have a clear database here so we have no messages and we have no topics all we have is our user so we need to register the user with the admin panel so we'll go into the admin panel or admin.py file and we're just going to import the user now so it's going to be a little bit weird because now we import user from the models instead of that default import that we had and let's just add this right here so we're going to go ahead and do admin dot site dot register and we're gonna pass in user okay so we registered the user now we can see one user here so we're just kind of restarting from the beginning and back in all the pages here we're going into the views now so let's just go ahead and go line by line here we're not line by line but file by file and we're going to change this default import and we're going to change this to user right here so now we're going in here so this is the difference now that we're allowing our own user model to be or now that we're accessing our own user model so now we're using that we're not making that original import also in forms.pui we also import the user model that way we're going to change that and change it to this okay so we have that user model everything should be good views forms all right so let's go ahead and just uh start changing the login field here so let's add in our custom fields now so we're going into models now and we're going to do what we just did in the last section here so in the last section we went into that model and we added in the name value so we added name that's going to be models dot char field max length we're setting that to 200 null is going to be set to true so we're just repeating a few things here we're adding in an email so email is going to be set to models dot email field and null is also going to be true and we want a bio this will be models dot text field so we're gonna do a text field for the bio and null will also be set to true so let's also add in blank as true here so actually you know what we're going to leave it like that because i want to require this at some point so we're going to leave it like that and then we're going to have an avatar so avatar like that and this is something we're going to comment out so i'm going to do this in a second because it does require its own configuration so now we just need the username field so user username field is going to be email so we're just overriding this and i'm doing this step by step so as we face the issues i can fix them right away so we'll just do required and required is going to be empty okay so let's run these migrations now so username field must be unique so i forgot about that so the email field needs to be unique that's going to be true and let's try this okay so this issue this issue should go away let's run that migration make migrations python manage dot py migrate and let's check this out so let's just make sure this was added so in the user model i can now add in a name so we'll just do dennis ivanov and for the bio let's just add in some lorem ipsum text here so we'll just say actually we'll go to my website dennisive.com sorry about that chainsaw outside so we have that we're going to add that as a bio we'll save that and the user now has some more information okay so that all worked now what we want to do is add in a image field so i'm going to pause it and wait for that chainsaw to be done all right so now when we refresh the page all the content goes away because we have a completely new database so before we add in the user profile picture i do want to add in some content so that way we can actually output it and see what we need to update and actually see those profile pictures rendered so the only reason why we were seeing that earlier as far as the content was because i didn't refresh the website after we made all those changes so completely forgot about that so let's go ahead and just add in some more information so we'll add in a room and we'll just say let's learn python and then once i save that i can see what picture i need to update and once i actually update that part of the code we'll see that it actually works so for the room messages we also do have profile pictures so we'll just say looks cool and then later on i will register as another user and we'll output that user's profile picture so back inside of the model here so in the user model in models.py let's go ahead and uncomment the avatar attribute so this is going to be set to models.imagefield so before we even run the migrations or actually save anything let's go ahead and open up the terminal here and i want to show you why i waited for this so at this point if i hit save here or control s we're going to see this issue here so the image field relies on a third party package called pillow which is simply an image processing library and we need this in order for this field to work here so i didn't want to deal with that right away when we're still making the user model so now that we have it let's go ahead and run this install and we need to configure a few more things here so we'll go ahead and turn off our server and we'll just do pip or python dash m pip install pillow so we'll get pillow installed and once i run the server that issue should go away so python manage dot py run server and there we go so i haven't run the migrations yet so we want to finish up the actual attribute here and what i want to do next here is set the null value to true so we already have a user here so i don't want to have any conflicts in the database and we can actually set the default image so let's say a user registers we don't want to have we don't want to have to force them to upload a picture right away they might not have one ready right away so let's just set a default picture with some kind of like avatar picture and that way they can choose to update this later so we're going to set this to an image inside of static and images and if you downloaded that template you should have a picture called avatar.svg so if you don't have this go ahead and get that from the source code or just add in your own image into this file path so static and then images and then set that right here so we're just going to do avatar dot svg and i always talk funny when i'm sounding out and typing okay so we're still not migrating yet we just added in a default so every single user model by default will have this picture until it gets updated so for user uploaded content we talked about static files earlier and these images are static files now there's a different way to handle user uploaded content or user uploaded images so what's gonna happen here is when a user uploads it we first need to tell django where to upload this picture to and then how to actually render out the image url so let's go into settings.py and we'll go down to where we configured our original static files so down here we have the static files directory and that works for the standard images on our website and the css and javascript files but for user uploaded content we need to set media underscore root so media root is going to tell django where to upload these user profile pictures so if we later on had some user uploaded content maybe for a room or maybe a user can add a picture to their message media root is going to tell django when that form gets submitted where this picture is going to go so django's going to look at media root and it's going to follow the file path that we give it so at this point we're just going to set this to the base directory and we're going to tell django go into the static folder and store this picture inside of the images folder so we'll go into static and then we'll go into images so you can store your static files in different ways typically in a production environment you'd use something like an aws s3 bucket and upload it directly there but for now in our development environment this will do just fine so we're telling django put this picture right here now after we have our media root and we're not going to worry about static root in this video here so after we have our media root we also need to specify a url for these pictures so we're going to do media underscore url so in this case just like we have a url for the static for all the links here the links and standard images well we're going to specify a media url for user uploaded pictures so now they're going to be prefixed with images here so we have a media url and a media root so we're not done yet we also need to configure our rootdirectoriesurls.py file so in here we need to add in the file path to these urls so we first need to make a few imports so we'll just do from django.conf and we'll import settings so this will give us access to settings.py so to this folder so after that we need to do from django.conf dot urls and we're gonna import or urls.static and we are gonna import the static method okay so we have our url paths and we're gonna add in one more path but instead of adding it as a path like this we're just going to do url patterns and we're just going to append to it so plus equals we're going to use the static method and we're just going to tell jane go go ahead and set a url url path to settings dot media underscore url then we're going to set that to document underscore root and i want to make sure my face isn't covering this and document root is going to point to settings and i'll explain what's going on here in a second so settings dot media underscore root so we're setting a url and the file path is going to be media url from settings so this is the url so we set this url right here and we're telling it set the url and get the file from media root so settings dot media root so we just connected these two right here so in settings.py we connected media root to media url so let's save all of this and now let's run our migration so the default model that we have already should be attached to this avatar when we run this migration so let's go ahead and open up our terminal and we're just going to open up a new terminal here our server is still running and i'm just going to run python manage py make migrations so that's going to prep the migrations for the avatar in that user model then we need to run that migration so we'll just do python manage py migrate so we ran the migration and let's take a look at what we have here so if i go into the admin panel let's go ahead and do forward slash admin if i go to users go to dennis right here i should now see avatar here so if i click on this we can see the file path so that's the domain images that's what we set in media url and then we see the picture so when i ran that migration by default this was added to dennis so let's go ahead and change that picture so we'll go back to the admin panel i shouldn't have closed that and we'll just go into users and let's actually update this profile picture so you can't do this from the form on the front end because we have not configured that form yet so i added some pictures of myself here we'll just take this one right here and we'll just do open submit that and django already knows how to process this so we'll take care of that form submission in a second for now we'll just do it from the admin panel so let's render this picture out now so we'll go back to our home page and i want to render this out right here and anywhere i make a comment or anywhere i set up a room here so we'll go back into our template and we want to start with our index.html file or our home.html so the home page so that's actually in the feed component or the room component let's see what the heck did i call that i'm like starting to lose all this okay so we have the feed component okay so in the feed component we're looping through all the rooms and we want to output the user profile picture so let's see let's just go ahead and do a search for the image tag so here we go we see the avatar and right now it's a link to this random picture generator and we're going to remove all of that and we're going to get the profile picture so in this case i'm going to go into the room then we're going into the host which is the user then we're going into avatar and instead of just specifying the avatar i need to specify the url here so we'll do avatar dot url so now if i refresh this now i see my picture right here so we're rendering out the profile picture and that looks a lot better so i can also do that for the header section so we'll go into the navigation bar we'll just update this in a few pictures and then eventually i'll leave this up to you to make all these updates i don't want to spend time on the tutorial just uploading or updating pictures so we'll go into templates in the nav bar let's see in the nav bar where do we have the image tag so we have the logo then we have the avatar right here so we want to update this so if the user is authenticated output the avatar so in this case we're going into user or we'll just do request dot user so we're getting the user based on the request.user model and then we're going into avatar.url so we're specifying the url so if i refresh that there we go i see my profile picture so i'm just going to go ahead and update this in a few different areas here and i want to show you one little issue so if we delete this user picture we are going to get an error so i guess i won't show it to you but if you delete that picture you're going to get an error because we're accessing the avatar url attribute so make sure users cannot not have a picture so if they delete it have some kind of default picture go in there so we'll make a few more updates so we'll add this to the activity feed so we'll do that right here and then we'll add in a new user and we'll show you how to submit that form so we'll go into activity and let's see so we have the avatar right here we'll update this so message.user.avatar.url and we'll also do this in the chat so we'll refresh that that should have updated it or was that in the avatar or the activity page so i guess that works but we need to go to the activity component and update this right here so let's see up here in the activity component let's update this guy right here refresh that and let's go to the message we'll update this host information so what i'm going to do is just update the host and the chat and then i'll leave it to you to update all the participants and any other areas where i may have missed this so i got my point across as far as showing you how to do it now it's up to you to apply that so let's go to the room here go to room and let's see so we have the room the host should be somewhere right here so if the request user that's the update method the room header right here hosted by and here we go so we see the avatar let's update this so we'll just do room dot host dot avatar dot url and we'll also update the conversation so down here let's see random user okay so the avatar right here let's take this value and in this case we're going into the message dot user dot avatar dot url okay so let's test this out right here so now we see the host let's say i register as another user so let's go ahead and do that um actually before we do that i want to update the user update form so i want to fix that first so let's go ahead and fix it so we'll go ahead and go into settings so in this area now this form needs to be updated so we just have a username and an email but it doesn't represent our new user model so for this let's go ahead and create a new form and render that out so we'll close everything out we'll go into forms dot py and let's actually go to views so we'll go into views we'll take this user creation form and then we'll open up forms.py and we'll just paste that in here so what i need to do is go away from the default user creation form on registration and then i also need to create an updated user form to represent these fields here so we'll import that for now and let's go to our user form so in our user form we now have a name then we're going to have a username email and let's just add in avatar so avatar and then we'll add in bio so i'll make sure that i'm not covering this so this is inside of the user form so remember that so we'll just do bio okay so you can still see that so if i refresh this now we see all of this and again i'm all messed up here because i'm so zoomed in my screen is just weird i'm at 175 here plus zooming in on this too so now we see the current picture we see this file and we see all this information so i can actually update and process this right now this will all work fine but the only issue is that the image right here will not work so we need to fix up the front end and the back end to actually process this so from the front end inside of this form we're gonna go into the create user form i have so many files here but i'll leave them just so you can have the originals so update user we'll go in here and what i need to do is add in multi-part or we need to specify the ink type and this is going to be multi-part forward slash form data so this is going to tell us that we're actually submitting files with this form and not just content in the original field so we specify the ink type and then in the back end to process this we do need to update the views so we'll go to the edit user page so we have the register page user profile create room update room delete okay update user so in here all we're going to do is also pass in request files and that's all we need to do and this will send the files with it and actually process that so update the form update the update user method and anytime you're submitting files you want to make sure that the form takes that in so i'll refresh this now so i'll just do a hard refresh ctrl shift r and let's go ahead and add in some information we'll just say the bio was now updated so we'll just say updated we'll take a new profile picture and let's say i want to revert back to this picture so we'll add that in if i submit that now my profile picture was updated and you can go in and update the bio update the profile picture inside of the user form and just make sure all that's modified so we added that in we updated the user the user update form and now we just want to update the registration form so i want to register as a new user so if i go to login and then sign up we have new attributes here so i want to represent those attributes so we'll go in here let's go into the forms file so we imported the user creation form so in here let's just go ahead and do class and we'll just do my user creation form so we're going to create a form that's going to inherit from this user creation form so it's going to have all the same attributes here so we're going to go ahead and add this in that's our user creation form and then in this user creation form we need to specify class of the or class meta pass in the model that's going to be the user then we need to add in the fields so when a user is registering what fields do we want to render out so we just want to render out the name so i want to get the name right away we want to get the username then let's get the email we also want to get the password so we have a password and the password confirmation so in this section and in the form by default they're called password one and then password two okay so my user creation form so inside of views i can actually remove this user creation form and i'm going to paste in the new form that i just created so i already copied that and i'm going to paste in my user creation form so now back in the registration view we're just going to change this to my user creation form and then paste that in right here too so right here and right here so now if i refresh this now i see more form fields so let's say we want to have someone named tim register tim will register with the username of tim and we'll just do [Music] tim at email.com that's what he's going to log in with we'll just add in the password confirm that and let's register so now if i register i'm registered as tim i can see that default avatar that looks good i can join a room in comments so we'll just say all check it out okay so now we see tim's comment and again update the participants there and if tim wants to update his avatar let's go ahead and just say tim's going to take my old picture we'll update that and we'll add in a bio we'll just say i like to code and that should be good okay so there we go so tim is now part of this room right here and we can see tim's information and my information and that's it for the registration page so the last thing i'm going to do in this tutorial here is going to be to update the login form so typically a user logs in with the username and it will still actually work like this we can still log in with this user so let's actually log out and i'll log in as tim here so we'll just do tim at email.com and we'll just let the password auto fill so that works here so that works at this point but i also want to update the login form to say email instead of username and i want to make sure that it's just more precise in the backend here so in the login form we'll just do login register and we'll just change this to let's see so in the form that's the registration form so we need to open up this container we're just going to say email so we want to prompt the user for the right name we'll just say email and again the username was working because django still sees the email as the user the username value so at this point we'll just update the name so we're sending an email back and we updated the label so in the back end we're just gonna go ahead and get the email value and i'm just gonna go ahead and replace all of these so email and then we're gonna get the user by the email so that has to be unique now so we have the email here the email updated here this will now be email email and that should be it so we just wanted to clean that up make sure it looks a little bit better and we'll just do dennis at email.com and we'll log in okay perfect i'm logged in as dennis now i can see all this stuff right here i can see my account so that is going to be it for the entire course so go ahead and update all these sections i noticed a few things here like if i go to create a room and if i hit cancel well it's going to take me to this template so just update that url these are little things here uh update all the participants so in the room here we see participants update these values go ahead and make sure that the user has their name here the profile picture and just make sure all this is rendered out with things like the bio and so on and make the customizations you need so i'm super excited if you got this far you finished the course you probably learned a lot in this process and that's going to be it for this tutorial i highly recommend you check out my full django course check out my youtube channel i have a lot of free content a lot of premium content also on udemy and on my own website i'm so happy that you made it through this course and i hope to hear about this in the comments section let me know how this was

Channel: Traversy Media

Views: 39,434

Rating: 4.9710612 out of 5

Keywords: django, python, python django, django tutorial

Id: PtQiiknWUcI

Length: 430min 4sec (25804 seconds)

Published: Wed Sep 29 2021