Django Project Management System | Django project with source code

hey guys in this tutorial we are going to build a simple project management system from scratch using Jango and I'm going to use Tailwind for the design I haven't made anything for this tutorial yet so you will be able to follow along all the way all I've done so far is to set up a to-do list as you can see here so this is just a little bit to help me and give you a little glance of what we actually are building I will start by setting up some of the templates and then head over to Jango where we will element authentication learn about database models om and similar and at the end I will deploy this project to a cloudbased service called Acorn I will add the link in the description below you can sign up for a free account yourself and if you want to try out their Pro plans you can do this for free as well you can just ask them for as long as they are in beta which will be until March or April 20124 Plus in the description below I will also add a link that you can actually test out the project you're going to build in this tutorial yourself all you need is a GitHub account and a free account at Acorn anyway it's time to get started with coding okay so we can begin with the base template I created a folder called pisara which is the name of this project so then I just want to create a new folder here called templates and then in here we can call this um base. HTML so this will be the menu and a little bit more like that so I'm just going to use Tailwind for this project so if I just Google Tailwind CSS go into installation and then the play CDN so I'm not going to bother installing tablein CSS and similar if you want to learn how to do that I have a few videos where I have done that so let me just make a copy of this go back and save and then I want to fix the indentations here like that and then I can just save this and open up in the browser just so that it's easier to test paste. HTML okay so at the top I want to have a simple menu so it can begin by creating that so nav close and here I want some space at the top and bottom and also on both of the sides so py six and px8 can set the background to be BG slate 800 which I think is a dark gray color can check it out yes so it's dark or blueish and then on the left side I want to have a man the name of the project so we can call this H1 pisara you can call it whatever you want of course add some styling to this as well I can add the color of the text should be white text white and we want to have a font size a little bit large so font sorry text three XL I think that should be okay maybe a little bit too big let's stick with just XL okay so then this is then the link to the front page and similar and then on the right side here I want the simple menu where we can go to the about page but also login and sign up button so here can create a new div just empty closes for now and then we can create a link a hrf this can go to nothing right now about so if I save this now and refresh you'll see that it appears below here if you actually can spot it so I want to move it over for hair and to do that I need to introduce Flex books so on this nav books here I can say flex and save and then it was moved to the next to there but I want these to be on the same line at least to do that I can say Al line Sorry items Center so they are centered next to each other you can see that there's a line in the middle of these where the these are connected and then I want all the available space to be between these to do that we just say justify Das between save and refresh and we can see about is there pisaro is there we need to make this white as well so you can actually see this so close text- white and save nice next to this I want the button for log in and sign up so a hrf can just be empty for now close and since I want this to be a button we need some spacing so py 4 and PX 8 and BG and this is stand the login button so that doesn't have to stand out like the sign up button so this can just be BG slate 600 and have the text white as well log in save and refresh okay so we need some space between these I think so on this one I can say close space-x 4 yes that's better so anyways I know that this project doesn't look good but that's not the point of this tutorial anyways I want to teach Jango now so okay let's go back here create a sign up button as well copy this replace the title with sign up and then we need a different background color for example sky so it's a blue button nice okay so that is the base template for now when you are logged in these buttons will be switched out with for example projects and similar and then we should have a very simple footer in here we just need a main I don't want to add anything here now Main and then a simple footer so footer P copyright C 2023 code with Stein if I save this now it does not look good so we can fix that by giving some spacing and background to this one um py 8 PX 8 so it's the same space on the sides as the navigation bar and the BG can be a little bit darker than the menu so we can say BG slate 900 and then on the paragraph We can say text white and I also want this to be centered on the screen so text Center save and refresh and now we have it here at the bottom nice maybe we should add some padding on this as well just so that we have it and that can be the default so close py 6 px-8 nice okay so let's now create a very simple front page I'm not sure what I want to have on the front page but we can create a new file just so that we have it front page save it as front page or index which might make more sense front page like that maybe we can take a very quick header here so header class py2 PX um no we don't have to have anything there but it can be text Center and then in here H1 class text 3 Excel welcome to P Sara okay so now we have very simple there let's add the background to this as well PG slate 200 okay nice so I don't want to just keep adding some random content here so I can just continue to the about page so just copy everything here paste it save it as about. HTML here I don't want a header so let's remove that now we can say about and the size can be the same just check out about the HTML and then below here we just want some random information so let's add some LM ipsum blah blah blah save we can have two paragraphs and then maybe a div class space- y 6 so that we have some space between these paragraphs save go back and refresh and we need some space between these two as well so this can say margin sorry empty 6 for margin top six like that no this is okay this is Lettin but never Translate Okay so let's just jump back to the to do list set this to done this can be done this can be done now we need a simple template for loging in and signing up so we can copy this again create a new file save it as login. HTML and here I want a box more centered on the screen so div class um max with uh XL um and then MX Auto BG slate 800 we can see what this looks like can remove this box here indent close that save and go here change to login and refresh okay so we can clearly see that this is about here there are no spacing or anything in there so we need to fix that but I can say text Center and this can be text white and replace this with log in save refresh so now it's centered and the title is correct but we need some space in here so py 8 great and then we need a place to fill in your email address and a password and click sign up so below the title here we can create an empty form tag label a username or email break line and an input type email class um with full BG slate 500 text white and we also need some spacing in here so py4 PX 6 you can see what this looks like not good can't see this and this was a little bit too wide um we can set some padding on this to separate it close PX 6 px8 and I also want a div for each of the elements or fields in this form so close it save and refresh and then we need to make this white so close text white and we need some space between this so this form can have an empty D6 as well and refresh okay so then we need one more for the password so copy this rename the label to password the type should also be password save and refresh and we need a space between these that can be placed on this one space- y 4 four yes nice and then last but not least the log in button so I can copy code from the button we have up in the menu this one just create a new div button class log in and save so if I refresh now I have a very simple login form ready so this can just be copied so we can use it for the sign up just copy paste save the file as sign up. HTML replace the title to sign up and the button should also be sign up here we need two password Fields so this can be renamed to repeat password okay that was actually it here so I can just go here now we to sign up and then we have the sign up form as well perfect so now I can set this to done now we just have two more templates before we are ready to dive into some Jango so then I need a list page for listing out projects let's make a copy of this about page copy paste and say list. HTML I can remove this one and rename this to project so if I now go back and then project project sorry list. HTML and then below here I want the list of projects that I can click and work on but I also need a button here for creating new projects So Below the title can make a copy of this button here again and then we can say add project and then we can add them space here and be six so that's default on the title add project you can see here that wasn't so much space that's because this is an inline element but if I say inline block instead then it's moved and the space in here is not added to the margin bottom or subtracting for the margin bottom and then below here a list of projects so div close empty D6 so there some space up there uh we can have a grid for listing out four and four projects grid and uh we need to set how many columns um I forgot how to do that Tailwind CSS grid Jesus how can you forget grid calls of course grid calls four and GAP four so it has a space between each of the projects and then in here I just create one box per project div class BG slate 200 and then in here we can have a title H2 project title and this also needs some padding so py 6 PX six and this can be Clause text XL and then below here we can have a little description so p short project description let was typo but we don't care close text SM and text slate uh 600 so it's not too visible also space between this as well so mb-4 and save so that's how we can list out the project um yeah that will do for now I can duplicate the project a little bit just to let you see that the grid is working refresh yes nice this should be not very mobile friendly but that is also not a part of this maybe I can do that in a followup video okay so for the to-do list I can set this to done by the way this is almost how the project page will look as well where we list out the to-do lists for a certain project not just the detail page left to build just want to close a few of these so if I copy everything here save this as detail. HTML then I can remove this projects list like that um for example task title and then here we want the description for the project this is the description for the task not project of course um maybe there should be some more detail and here we can say Set uh set as done Mark as done maybe Mark as done and maybe a delete button as well delete and we want an edit button edit so done can be for example Emeral addit can be sky and this can be m which is sort of a redish color Let's test this detail yes that looks okay need some space between these so close empty D6 save and refresh so that is how the project is going to look like okay just need a sip of my Cola okay so let's go to the to-do list and set the last scare task to done and now we should be finished with creating the templates so now I want to set up a Dev environment so locally now we are just going to use a typical virtual environment and then at the end of this project we're going to deploy this to a where you can test the project online and you can send the link to your friends family and similar and they can test it and it will run for free for 2 hours before it's automatically deleted and you can deploy again how many times you want all for free Okay so let's start with the dev environment so I go to the terminal then I'm here in the base folder where I have my to-do list and the templates folder and to create a virtual environment I just say python 3-m van and then the name which can just be EnV which is suitable and when this is created I can activate it by saying Source EnV bin activate then you can see here before my username CWS that it is activated because I can see the name there if I want to deactivate it I can just say deactivate okay so activate it again and now that this is activated I can install python packages by saying pip installed and all packages I install now will be created just for this environment and not for other things on my Mac so let's install D Jango which will then install the newest version of Jango which should be python no sorry Jango 5 maybe it's because I have a old version of pip but it doesn't matter um four and five are very similar so if you have Chango 5 you should still be able to follow along so then we have the dev environment we can then create a new empty project so D Jango Das admin start project p and hit enter so I can go into this then you have the typical manag p and the sub folder which is also named the same as the project with asgi wsgi which is just entry points for the web server URLs which is sort of like the table of content for the whole project settings.py which is global configuration for the project done I hope I don't go too fast forward now if you're very beginner at Jango you might want to start with some other projects but I hope you are able to follow along so then I want to create the first app which should be the core app which should have Pages like uh the front page the about page and similar so let's create it python maned by start app core and then we need to open up settings.py and tell D Jango that we're going to use this app so in the list of installed apps we add core and now Jango knows that it's installed and sorry that we're going to use it and now Jango will automatically for example find template folder in this app and similar so uh boops go back here set this to no it's not done because now I'm going to create the front page okay so in pisar in core I'm going to create a new folder called templates and since we added core to the settings file it will automatically find or look for a folder called template in this app and then in here I want to create a new sub folder called core and that is to separate other templates folder from the other apps then in here we can set a base. HTML and I can just copy everything that I had here paste it and save great so let's then create the view open up views. pi and just say def index POS in the request parameter you might want to call this front page or whatever you want index is very suitable for this purpose return render request pass in the template we want to use which is core index.html and save this doesn't exist yet so maybe I should just create it before I continue index.html front page and here I want the content of this main so I can copy these three lines paste it there and then I want this template to use the base. HTML template as well but I will come back to that right now I just want to create a new file called urls.py inside this app because it's much better to have a separate URL file for each of the apps in a project that makes much more sense and it's more clean this way and to be able to use this I need to import something from D Jango so from Jango do uh URLs import path this is to generate a path to this specific View and then I want to import all of the views so from do import views and then we can set up the URL patterns so here I just pass in one by saying PA and when the URL is empty I want to use views. index and we can give this the name of index as well so it's very great or good to have index for the front page but what if we had index in a different app as well we can separate this by setting something called the app name to core so now we have a very simple name space for this URL that we can separate the different uh apps from each other so last thing I need to do now before we can can test this is to open up urls.py just remove this comment and import a new function called include from Jango as well then we need to import these URLs here PA so when the URL is empty we want to go into this list of URL patterns and see if any of them matches so include core. URLs and now we are ready to test so python managed by uran server okay I get a warning here because we haven't run migrations yet but don't worry we will come back now I can open up this in the browser and you will say welcome to pisara nice problem now is that this comes from the index. HTML file so how can I get this code code inside this I can extend like that extends core base. HTML and save if I go back now refresh I will get the menu the main and the footer but this code is gone and to get this code inside here I need to create a code block so oops block content and block you can call this whatever you want it's just that content makes sense because this is where you put the content of a page fix invitation and block and save refresh and there we have the front page in Jango nice okay so I can go to the to-do list again set this to done before I continue I just want to say thanks to all of my patrons if you do want to support me you will find a link in the description below next create the about page let's begin with the view for this so core view.py def about request that we return and render a template core slab. HT ML and save so now we need to tell the url's file to use this so when the URL is about Slash we want to use views. about and give this the name of about as well so if I go back to the browser now and go to slash about you see that I get the template does not exist which is okay because we haven't created it yet let's do that now but opening up I go into the core create a new file called about. HTML and then I can go find the template down here and copy these lines everything inside this main tag paste it still this will not work because here we also need to extends corp. HTML and we need to use the block oops block content here fix the indentation and and block and save so if I refresh now the error is gone and we can see the about page so now I just want to make these two clickable so that we can actually navigate so if I go back here we want to use a built-in function called URL that comes from Jango and to point to the url's file and to this specific view we want to use this name and this app name so URL then we pass in core colon about and the same thing goes for this one create h a hrf paste in core colon Index close close it after there and Save refresh so now should be able to click whoops okay I had one too many there and there should be percentage and close it properly go back and refresh I can click this now and I can click this now perfect so then I can go to the through list again and set this to done and save so now we can start working a little bit more with d Jango and specifically I want to create a customized user database model because I want to be able to use email as the username instead of the typical uh typical username so to create to I want to create a new app so just stop the web server say python men Pi start app account and then we need to tell Jango about this not about file but the settings file of course and here you can call this not about no account there you don't have to do this alphabetically it's just that I like to do it that way so let's set up the database model for the user I want to import a few new things here import uu ID because I like to use uu IDs for the ID or primary keys and then I need to import a few more things from jango.com tribor models import abstract base user and permissions mix in and user manager because I want to either override these or extend them okay I don't think I need to import anything more right now so first I want to create a new custom user manager usually when we get things in Jango we say for example user doobs do old then the user manager is this object and I want to override this because I want to do some changes to the database model so that we can use email and that we can have a name field instead of first name and last name and similar so let's create a new clause and name this custom user manager PA in user manager because we're going to use this clause and then we want to create a new method called create user POS in self name email and password and also extra Fields if there are any and then we can say if not email so we can do a very simple validation here that we erase value error and then give this a little information that will show in the console you do so you do not pro sorry you did not provide an valid email address so then we can have some simple validation here for the email and then we can normalize this and set the password and a little bit like that so email equals self. normalize email this function is then built into the user manager and will remove spacings and a little bit things like that we just pass in the email from the parameters here user equals self. model email equals email name equals name and pass in the extra Fields like that and then when the user now is created we can set the password so user. set password this is also a function built in to the user manager that we are just extending like that and then user. save using equals self. DB so we are telling it how to use the database for saving like that and then we can return the user as well so when you use this function you get the user you created in return now we need one more method here def create user this is then the method that we're going to use in for example the terminal when we create super users pass s name equals none so we default these values email equals none and password equals none and the extra fields and then here we want to set the is Staff default defaults and is super user to default fals so extra Fields do is sorry set default is Staff because we don't want regular users to be able to log in to the admin interface and similar fults and extra fields. set default is super user also default this to fs and then we return and then we use this method as well so return self. create user put in name email password password and the extra Fields like that oops external fields and to be able to create a super user in the um in the terminal we need to create a method for this So Def create super user oops don't to use that create super user POS itself name equals none email equals none password equals none and the extra Fields extra Fields like that and then here we can just make a copy of these lines because here we actually want to set this default to true this one should be Default true and then we just reuse this method up here so save there should be no errors because server isn't running or anything but now we can create the actual user model which we are going to use so below this class create a new class class user and we pass in abstract base user because we want to use some that functionality and also the permission mix in we want one field for the ID so ID equals models do uu ID field pass in primary key equals true because this is the PK or the primary key set default to be uid do uuid4 and editable equals fult because we want don't want to make it possible to addit this in the admin interface and similar the email can just be a models. email field unique set this true because you don't want to have more than one user per email address and then the name can be uh models. CH field uh max length for this can be set to 255 and blank equals true and null equals true so that in case you don't want to have this filled out by the user and now set is active which is a b field model oops models. buen field that is default to true because when you sign up we want you to be active and then it's super user this can also just default to false this is in case we create a user uh in a view where we don't use this functionality and is um sta equals models. buen field as well default this to false great so maybe I also want to know when the user joined so date joined equals models. date time field and we can say uh Auto now add equals true so then this will just be filled in automatically and last login model. dat time field so it can know when the user re U most recently used his account blank equals true and null equals true in case you create an account and don't log in this will not be filled out and then to use this user manager we just created we can say objects equals custom oops custom user manager and then we can specify which uh username field to use so username field equals email and email field that is this one so email and and required Fields equals uh use a list F the name because if not the super user and similar will not be able to be created nice so then we should have this model and before I run the migrate and similar I want to go into settings and just tell Jango that we're going to use this specific model for the user so do that is say o user model equals account. user so this is then the app name and this is the model name so if I save now I should be able to go here and say python meure P make migrations okay type object user has no attribute user field use name field um okay that is weird Okay sorry this should be in tles like this maybe it will work then yes so now it says create model user and I python measured by my great so now if i r LS you should have the database there perfect okay so then I can go to oops to the to-do list set this to done and now I want to make it possible to sign up so to do that we can create a new view inside this account app def sign up Plus in the request parameter and then I want to use some builtin functionality from Jango I think but before I go down that route I can just say return render POS in the request parameter and set the template to be accountsign up. HTML and save and then I also want a separate URLs file for this app so urls.py from Jango do URLs import po from. import views set app name to be account and then we create the URL patterns Po and when this is sign up we want to use views. sign up I set the name to be sign up so then this will be able to go to this by saying account colon sign up so if I open up base. HTML there we can activate this button by saying URL account colon sign up so I will get an error now if I go back and refresh um okay the error is that I haven't run the server again refresh and then account is not a registered name space okay so if I open up URLs P inside the pisara main then we need to include it here first so part when this is empty include and then account. URLs save refresh and then should to click this and then I get that this not created that's okay but anyway if the URLs is now sign up it will first check if this is matching no is this matching no but it will go into the URLs there check all of the URLs there and then it will go down there where it will find this URL not that one but the one we just created this one okay so let's create the template create the folder template create a folder in there account and then the template sign up to HTML extend the core base. HTML file block content close this and block and then we open up sign up the HTML and this template folder that we created in the beginning of this video copy everything that's inside this main tag and paste it save it refresh okay that did not work why not it is in the correct folder maybe I need to stop and start sometimes yes that is what I had to do and that also reminds me that I need a name field here as well so I can copy this have the name at the top name input type text refresh and then we have all of the four fields that we're going to need so this form will not work right now it will not work before we include the csrf token first of all for security and now we need to set up the method to be post oops and where we should post this form to so action can be dot which is the page that we are on so then I can go back to vi. P not that one let me just close a few of these files so it's easier to follow here there should be the correct one and then here I can check if the form has been submitted by saying if request. method equals post then print post else print just show the form if I go back here now refresh go to the terminal just show the form but if I click sign up go back here you can see post so that mean I can get this information in the back end but before I get it I need to set the name for the different fields so this should be name name and then name email and name pass oops pass word password one and we can have password two name password two so if I go back here now then in here I can say print request. post so we can see the information that has been posted Here sign up okay go here now you can see here that we got this CSR csrf middleware token but nothing of the other fields so let me just do a hard refresh try again oops sign up go back here and now we can see that we got the name the email and the passwords nice so that means that now I can create the the user based on this information let me just go back here now so if I refresh it won't be sending in again so then we can get the name bying name equals request. post. getet name default this to empty we want the email request. post. get emailed and password one oops request. post. get password one default is to empty copy and replace we can just do that if name and email and password one and password two so we know that we have all of the information that we need pause else print something went wrong so I'm not going to do that that part right now at least but now we should have all of this information so we can create the user we just want to import the model we have created so from do models import user and we can say user equals user. create user so now we point to this function where we need to post in the name the email and the password so then I can just name email and password one print user created colon user and then we can redirect the user to the login page which doesn't exist yet but we can redirect him there anyway so return redirect redirect slash login get a warning here because this isn't Define but we can import it as a shortcut from D Jango from Django shortcut import render but also redirect so let's try it now name Stein email code with Stein at Gmail and then a password let's choose a very safe one sign up type object user has no attribute create user sorry do objects of course I need to point to that one if I refresh now the form will be resubmitted and then I was redirected there which means that it was probably working nice so next step then is to make it Bible to log in so let's begin with the view def log in POS in the request parameter return render request PA in account SL login. HTML and then we can create the URL po login slash views. login and the name should also be login so now we can activate this in the base. HTML just so that is working that was the wrong base has to be this one in the core app URL account colon login save and then if I refresh not there but there then I get that the template does not exist okay so make a copy of the sign up file paste it and save it as login. HTML then we can REM remove the repeat password rename the first one to just password rename the title of the button to log in we want the email but we do not want the name and the title of the page can also be renamed to log in and save and refresh nice if I try to do anything here now it will um submit to this page but we haven't done anything in the back end so then we can do do the same thing here if request. method is post then we need to get the email by doing this we want to get the password by doing this and now we just need to rename this and we can say if email and password pause so then how can we authenticate manually a user in Jango Let's Ask Google how to manually authenticate a Jango user use authenticate Okay blah blah blah okay let's go to stack over flow always so many good answers so that's how you authenticate it but I also think you need to log him in when you authenticate and log in a Chango user maybe just go to here again there you can see so this is how you log him in after he is authenticate but I didn't tell you what I usually always authenticate and then log in because you can't use this before okay so let's do the authenticate just need to know how to import this so guess we can get that from the Jango documentation import authenticate copy this go back here paste it at the top so this is off alphabetically user equals authenticate that we use the function we just created here we need to pass in username I think I can pass in email now which should point this one the password is also password maybe this needed to be username but we can test this print user user save let's refresh and see what I have submitted user none but what if I use the the user I created log in then you can see that it is actually a user nice so then we can log him in as well or maybe we should try to not do that and see if it is working so print request. user and print request. user is authentic IND at that maybe it actually is working this way whoops refresh again continue go back here Anonymous user yes because I haven't been logged in okay but what if I need to import the log in how to log in user that is the same name space to import from just paste it at the end there and then to log him in you do this check that the user actually exist okay we can pause in the request parameter just so that is done if user then we use the login indent this and we can try again and when that is done we can redirect the user to the front page return redirect slash so if I now refresh hopefully I will be redirected nope login takes one positional argument but two were given [Music] okay let's copy this Chango see what I have done wrong okay yes of course because this will try to use this here and not this one so I can say s or view or or log in instead so it's redirected as something else refresh and now I was redirected to the front page and here I can say that this is the user and that I am authenticated perfect I can just remove this and save so now we have sign up and we have log in per nice so now we are ready to start working with the projects so for this we need a new app so python mentioned by start app project and then we need to tell Jango about this so in the list here just append project then we can create the database model for this so if I just find Project models.py then I know that I want to connect this to the user we have just created so from account. Models import user then we a class project maybe we should use you ID here as well so I can copy the ID field there pass in models. model like that and then at the top here just import uu ID and a project should have a name so mods dot do Char field set the max length to be 255 this shouldn't have to to be uh filled out we can't add the blank and null we want a simple description models do uh text field this should be not required so blank equals true and null equals true and then we want to know who created this so created by equals Smalls do forine key pass in the user object here set the related name to be project so it's very easy to find all of the projects connected to a specific user if we delete a user we can also delete all of the projects that this user has so then we just say models. Cascade so we can also set up the string representation here self so that it looks better for example in the admin area and similar so return self. name and save so let's update the database by make migrations and migrate and run the server again so now that I'm authenticated I do not want to show these two buttons I want to have a link to the projects page instead so let's open up base. HTML do that first then we can here say if request oops request. user is orated then we want to show that if not we show these two buttons because then the user needs to get or be authenticated and if then I can make a copy of the sign up button we don't have a URL for this yet so it can just be like that but replace the title with Pro projects and refresh so now we have this instead nice so let's create the view for the projects list def project uh Po in the request parameter return render request parameter and then the template name which will be project SL project. HTML and save here I also want URLs file so URL P from jango.com no from Jango URLs import Po from do import views and set up the app name to be project and then the URL patterns which is a list part and when this is empty I want to use views. projects name projects comma so I use empty here because I want inside the main URLs to have part and when every URL that begins with project or similar will go into this one instead oops include project. URLs and Save so then I think I can activate this button URL project which is the name of the app and then project which is the view or the URL name at least refresh click and then I'm sent here I'm telling me that the template does not exist so that will be the next project sorry next task templates project and then the template itself project. HTML I can open up the other projects file sorry the list. HTML copy everything inside domain close paste it and then we need to extend the base template here as well so extends core base HTML block content fix the indentation and block save refresh maybe I need to start top and start again yes so now we have that page as well but these are not these are not not not not not not um Dynamic so we can remove all except one and then we add the four Loop pair so four project in Project fix the indentation and close the end for Loop we can show the correct name project. name and then the description project. description like that now this is empty because we don't have any project so that will then be the next task to do actually before I go to the next task which is make it possible to create projects we can fix it here first so from models models import project then we can say uh project equals project. or Che do uh filter we created by equals request. user and to go to this view you have to be authenticated and to make that uh happen we can just add The Decorator here called login required just need to import this from Jango do. do uh decorators import login required and we need to pass this into the front end so projects or projects and save still empty though because we haven't added anything but that is the next task so to- do list set this to done then we can continue setting things make it possible to create a project okay so let's begin with a simple view for this so here we also want to make the user be authenticated so login required excuse me then def uh create or add project pass in the request parameter if request. method is post just pause this for now and then return around request PA in the template which should be here project SL add. HTML save copy this name go no you don't need to copy it add it here add slash views. add project name add so I can just use add because we have this app name here anyway so it's easy to just say project colon ad so I don't need to worry about using this for the to-do lists and the tasks as well so then we can activate this button here URL project colon add save refresh click it and I get template does not exist okay so this template will be a mix between the list page and and the authentication forms so anyways just add. HTML then I can copy this paste it and say add project and block save refresh then we have it here so then here I want to make possible to fill in a name and the description for this project so if I just open up for for example sign up then we can make a copy of the form just take the whole form and then modify it instead can take away one of this replace this with name input type text name is also name so that I can access it in the form sorry in the back end this has to be a text field so text area name description close it um rename the label to description and the button can say submit instead so if I save now refresh this is white we need to change the color so we can just remove the CLA like that that is better there is some padding there I don't want nice [Music] um what else okay I need to add the csrf token and save so now we be able to use this but we just need to accept the data here so name equals request. post. getet name a default this to empty in case there is something wrong with the submission and we don't want to accept this and then the description request. post. getet description say if name if name else pause or print not valid then you have to do something here which is not going to be handled right now then I can say project equals project do objects. create pass in the name should be name description is description and created by equals request. user and when that is done we can redirect the user back to the project list or directly to a project um I think we can just do to the project list for now so return redirect slash projects then I get the warning here so import this up there and I don't need to assign this to a variable so I can just do it like this so let's try this first not fist first project this is the description oops oops oops oops submit okay you can see here there is something wrong because this wasn't supposed to be added there um I think I forgot to add because I copied the wrong templates so this is a method post and action can be the page we are on just do a hard refresh uh first project and then simple description submit and then I redirected here and now you can see the project is actually listed out here nice so now we are able to create project list out project which means that I can head back to my to-do list and set this to done next step the project detail page so in Project open up views um I want to have this here so we want to log in read lead required def project posn request and the PK because here we need to get the URL parameter for the primary key so that we can get a specific project so project equals then I want to use the same thing as a pair because I only want to get um project that your user has created and then do getet PK equals PK which comes from the URL then I can just copy this rename to project rename to project rename to project and save so this is going quickly let's create your edit here as well Po and when this includes something called a uu ID so we are expecting a uu ID here called PK and this name PK is the same that we put in here so you can call it whatever you want but this makes sense then views. uh project name project and save so how can you go to this now maybe you should be able to click the whole thing so if I just open up projects. HTML create a l link around all of this ah hrf URL project column project and then here we need to pass in the ID for this project so just project. ID close this one and paste this there and save so now we have an anchor tag around the whole thing so if I click this now I was redirected to this URL and I get the information that the template is not does not exist okay so let's copy this again save it as project. HTML here we can show the title or the name of the project project. name we don't want to add the project here this should be for the to-do list so add to-do list and for to-do list in to-do lists we want to show this to-do list name and to-do list. description and we want to have the detail page there but we don't have that for now so this can just be empty if I refresh now I will see the name of the project I can add to-do lists soon at least and then down here I want to list out all of the to-do lists but at least this is the the detail page for now so then I can set this to done and then I want to make it possible to edit a project so can copy the top here I want this below here addit project request primary key and we want to get the project from the database just so that we have it and then we get it this information from the front end if name then we can say project. name equals name project. description equals description and project. save and then we can redirect the user back to the projects list again like that and last but not least we want to say you can actually copy these three lines and paste it there edit and save so that is the whole view for editing a project let's edit here copy paste and then just append edit at the end edit project and edit actually this can just be called edit and this can just be called add and we can do rename here edit so it's little bit cleaner there save and since that is the name of the templates as well so then um I want this edit button on the project page I think that in the detail page we created at the beginning we actually had this button there so paste and then I can activate it here URL project colon edit and pass in project. ID and save so refresh now H edit add um Okay add can be done Emerald like that so I I click edit I should be sent here I get the warning that it doesn't exist this will be very similar to the ad so we can copy paste save it as edit. HTML edit project and then this needs a value um project. name and the same with this one it should go in there and not the value attribute project. description description save let's refresh and then we can see see here addited submit there you see that is actually saved as well and now we can addit projects nice so we can set this to done um Next Step then make it possible to delete a project let me just add one more blah blah blah so now I want to make it possible to delete this if I go in here I want to activate and fix this button we can fix the button first so we go in the wrong direction or the order project colon delete and pass in project. ID here as well okay can fix the URL as well so we're going in the total opposite direction delete and delete see this is white because we haven't created this yet if I go in here again now can copy these lines paste it say delete now just a project do delete and then we want to return us back to the list of projects and save so refresh click delete and then I was redirected back here and the project is deleted nice so then I can set this to nice okay so now we have projects as well for this project management system so I want to repeat almost everything that I did here just for the to-do lists so let's begin by creating the app python men P start app to do list go to settings and tell Jango about this to do list save and then we create the dat database model for this as well oops so we can begin by importing the database model from account. Models import user we import the user model and from project project models import project because I want the link between the to-do list and the project and then close to-do list models do model you want to import uu ID so we don't go away from that and then just to copy this so we want ID and name description we can actually just copy all of this because the models will be very very similar um this should just be R to do to do lists and say so we could add more here later and similar if we wanted to do that just need a link between here the project and this so project equals models. forine key um POS in the project database model set a related name to too lists and then uh on delete models. Cascade so if you delete a project we also delete all of it too lists okay so make migrations migrate oops migrate run server okay that was that so um actually think we should do this so that I have the list page first um or actually the to-do list um okay now um as they say in the region um I want the list of to-dos to-do lists to be listed out here of course so I can actually go here again and do this we want make it to create a to-do list so let's begin with the uh view for this um we want the user to be authenticated so from Jango do. do uh decorators import login required and uh we want to import the model we just created so from Models import to do list def add request think you also need um an ID here so project ID and then return render render request then template name which will be to do list SL add. HTML and save for now then we can create the URLs file so urls.py import here from from Jango do URLs import PA from do import views set app name to be too list URL patterns Po and when this is ADD then I want to use views do add set the name to be add so then the URL for this will be to-do list colon add um we also need to do some other magic here um in the main URLs file here we can say PA projects and we also want to expect here uh uu ID called primary key so every time the URL is this if it's not matched in here then it will go in here and try to find the ad right for now at list and then to do list. URLs save hopefully that should be okay now so if I find the project template we can activate this add to-do list button URL to-do list colon add then we pass in the project. ID and say and refresh and click okay had got an unexpected keyword argument primary key yes of course um this was supposed to be project ID refresh and now I got here to the correct place it's just that the template is missing we can copy this from here copy everything create a new folder template create a new folder again to do list and then in there add. HTML paste save don't save change the title first to do list save refresh stop start refresh okay so now we have this here then I just need to handle this in the back end so go back to here then I can get the project first from the server just need to add login required here before I forget it project equals project object filter uh created by equals request. user get where primary key on the model is Project ID then I get the warning here because we haven't imported this so from project. Models import project and then we can send this to the front end in case we need to use it there project project and then we can say if request. method is post then we know that the form has been submitted name equals request. post. get name so we just do the exact same thing here as on the project so I need to you need to change this if you want different fields and similar for the to-do list than the projects Etc description if name then we can create a new to-do list to-do list equals to-do list and we point to this model imported objects. create the project should be pointing to this one which we get from the database the name is name description is description and created by is request. user just like it did there don't need to assign this now we just want to redirect this back to this project page so return redirect um projects slash and then the ID of this project I want to format this here and then we can pass in Project ID we can just take this directly from the URL remember this SL at the end import redirect and save so now this should work I think no errors right first to do list to to list to do list submit okay so there was no errors WE Post instead to the correct page it looks like but why is there no to-do lists on the project page um okay project here we have not pulled this from the database yet but since we have the project we can just say project too lists. all so then this point to the model in here and to this field here so if I now refresh I get an error because we can't use parentheses here so just all there so now we have a to-do list for the project as well perfect so I can set this to done next step then make it possible to go to the detail page of a to-do list so then I can say at login required def to do list request project ID because we need to get this as well and then to do list ID which can just be PK which makes more sense and we can get project and we can get a to-do list from the database to list. objects dog PK equals PK and since we can also make sure that the filter filter project equals project so that we only get to-do lists belonging to this specific Project Return render request template name to do list SL to do list HTML so we just follow the same structure as on projects pass in project in case we want to use it in the template to-do list too list and save so let's add this here can add it at the bottom part um the other part of the URL is already in here so I have not that one let me close that one this main URLs so here we get the project uu ID but we also want the other uu ID for the to list here so U ID colum PK I want to use view. too list name is to list so then we can activate this here URL to-do list col to-do list project. ID but also the to-do list. ID save refresh I can click this bent there and then it's telling me again that the template is does not exist so copy everything here go down create a new template to do list. HTML to do list um can just empty out this for now so I want to edit and delete button but this should say add task and then here I can say for task in to do list. tasks. all doesn't exist yet but it will soon here we can set to do list no sorry task. name and task. description so it will look exactly the same so if I refresh now you can see this same page here and yes that is the uh detail page for now actually maybe we should show the description here somewhere maybe below there so P Todo list. description but let's test to see that it actually exist so if to do list. description then we want to render this paragraph and if and we want some space below this paragraph as well so class mb-6 and this should also be on the detail page of a project as well of course but rename this to project. description and project. description save refresh so projects go in here you'll see the description go in here you'll see the to-do list and the descript ion for this perfect done now I want to make it possible to add it a to the list so we can begin with the template copy paste save it as edit. HTML in the same folder as ADD and TOD do list addit to do list we want a value here so value is to do list dot name and down there to list Dot description save and then we can fix the URL so copy pend edit at the end edit and edit and save then it's the view for this um so I can copy this here go the bottom here edit here want a project ID the primary key for the studio list rename this to edit and save so then we can activate the button for this which is this one um URL to do list colon edit um project. ID and to do list. ID save refresh click edit and then I'm sent here first to-do list nice and then I just need to handle the submission here in the back end so I can get this like that and then I can say to do list. name equals name Todo list do description equals description D list. save and then we can redirect this back to the project page or the to-do list page I think we should set us to the to-do list so to-do list. ID slash or I can just say PK so we get it from directly from the URL we can try this edited submit edited perfect next task set this then I want to make a to delete delete a to-do list so let's create the view copy paste rename the view to delete then we can just say to-do list. delete and return redirect us back to slash project and then the project ID projector ID slash and I we just need to set F there so we format it string then we can fix the URL copy replace replace and replace and then we delete now we just need to activate the button this one URL to do list colon delete project. ID to do list. ID and save refresh delete and then I was sent back to the project the to list is gone so it was working okay so now we have two to-do lists there and everything seems to be working done okay so now we need to do the same thing again for the tasks so the tasks at least are going to have one more field to the database model because we want to get track of the status of a task but we can begin by creating the app so start app task and then we no we don't want to run the server but we can go into settings. p and add task there may be there to keep this alphabetically and I can make a copy of this to-do list model because some of the fields are going to be same so open up task model p and paste it there here I also want to import to do list models import to do list rename the class to task so I want the ID project name description created by uh this can Bren to tasks tasks and I also want um reader reference to the to-do list models. forine key to-do list related name should be tasks and on delete model. cascate okay so that was the database no we want one more field here uh we can actually just use a simple buen for now is done equals models do uh Bin field default this to false and save so then we can run the make migrations and the migrate script and run server so the task we are going to do first is to make to create a task so let's copy this template and go into here creative templates folder create the task folder and then the add template add task name description um in the add template there it doesn't make sense to have the checkbox for is done so we can just leave this for now and we can start by importing the login decorator from Jango do contrib do. models import login log oops decorators login required and then we use it at login required def add pass in request parameter we want the project ID we want the to-do list ID and not the primary key of course like that and then um we can just return and render the template for now request um toask add. HTML and save and then create a new URLs again us pi and from chango URLs import part from do import views app name should be Tusk and then URL patterns part and when this is ADD then we say we want to use view. add the name is also add again so I have I open up the URLs in the pisara folder then we can say part and this is Project slash uu ID colon projector ID slash uu ID colon Todo list ID then we want to go in there again so then we say include uh to do sorry task. urls and save okay so then we can go to the to-do list detail page and just activate the button so open up to-do list. HTML and activate this URL to-do list no sorry task colon add and here we want to pass in the project. ID and the to-do list. ID so we can go to the browser now go into a to-do list try to click the add task and then I'm sent here again so then we have the template we had the view then we just need to handle the creating of the task itself so if I just go to view.py in the task app then I can get the project and the Todo list just like we did down here so copy these two and it's going say saying PK there is it to-do list ID then see I get a warning on these two so I need to import them so from Pro project. Models oops from project models import project and from to-do list. models import to-do list and from Models import task so then we can create the task if everything is here so if request. method equals post then we can say name equals request dot post. get name like that get the description the same way like that and then we can create the task task equals task. object. create set the project to be the project we got from the database and the to-do list should be the to-do list and the name is the name and description is description and created by equals request. user and here as well I don't need to assign it sorry about that then I can redirect this back to the to-do list page so return redirect slash project SL project uncore ID SL too listor ID slash POS in F there and import the redirect like that save and we can test first task submit and then I'm on the to-do list but there are no project sorry there are no tasks um so go back here again to-do list. tasks. all h okay I have an error here how you just there I think that will be more correct maybe I need to run the make M Creations again migrate then run the server go back and refresh and then we have the first task there so that means that now we can create tasks nice so then it's the detailed page addit task and delete task before we head on to uploads and notes nice okay so now that we are able to create task we should also be able to visit a task detail page so we can begin by creating the view for this so I just do it in the same uh view file as the create or ADD so we can begin with the login decorator so that we know that the user has to be authenticated and F detail request um here we want the project ID and the to-do list ID so can just copy this paste it like that but here we also want the primary key for the task okay so now that we have the project and we have to to-do list we can also get task so task equals task. objects. filter so we want to make sure that the project is the project we are on and that we are on the correct to-do list so filter to-do list equals to-do list do get so we just get this specific one where primary key equals primary key and then we can return and render this so return oops return render request passing task SL detail. HTML or maybe we should call it task now let's say detail and let's pass in the task itself task so then can set this task to no sorry save this file and import it to the URLs so part where we have primary key which is a uu ID called primary key then we want to use views. detail name equals detail and save so then I can activate this here so if I just go to Tod list. HTML then we can use this link here URL task colon detail and pass in in the uh project ID so to do list. project. ID and to do list. ID and the task. ID so close and save go back and refresh try to click it so now we get the template does not exist which is perfect because that means that everything up until now is working so let's copy everything in the to-do list. HTML find the task app and create a new file detail. HTML and paste it so the title up here should of course be task. name and if there is a description we can show that and right now we can just set this default to be empty because I want to use some of that and we can remove this and save so let's refresh so now we have the title the description and buttons so I want have one that marks this as done I want to activate this and this but at least I think I can go here now no setting it as done can be a part of this task actually so um then we can say if request. get. getet is done default is empty equals uh true or yes then we can set this task to done let me just say task dot is done equals true I think this is what I call that file is done yes to. Save Maybe we should also show this status somewhere below here so that we can say p and then a strong class uh font bold status and then task. status save see if that works no there is nothing um is done of course false um maybe we should do like this if is done then we print out uh done else then the status will be to do close and if save and refresh status is to do but I want to now make this click a ball so the page we are on and then just is done equals yes so then this will be pulled in here and if the value of is done is yes then we set this to done and save and then we return here again so we can change the title there Mark as done refresh so then status is done and if the status is done then we don't need to show this button anymore so that we can just do it like this and if save and refresh if task is done sorry if not task is done of course like that nice so then we have the possibility to do that as well so then I can set this to done then I want to make it possible to edit a task so again we can go to the view sry view that pi and we can copy all of this and paste it below here just say edit now we get this like we used to do and I can copy this line to see if the form has been submitted and if it has so if name that we say task. name equals name and task. description equals description so we don't have to check if this is filled out because then we just reset it to be empty and then to save and now we want to return you back to the task so I can copy this and paste it there so we had the project ID the to-do list ID now we can just post in the primary key as well so we will be sent back directly to the task um if the form has not been submitted then we can say return render request pass in task SL addit HTML and we pass in the task as well so task task and save so I can add it to the URLs PA in edit there replace and replace and then we can activate the edit button URL and then it's task colon edit and then we pass in task. Pro _ ID task. Todo list doore ID so this is by the way how we can access the ID directly without um doing a query in the database and task. ID and I can say task. ID because we're already using values from here so this is already pulled from the database so save and refresh click edit now we get the template exist does not exist again but let's make a copy of the add copy paste save as edit. HTML edit task save changes and then we need to pass in the value so value equals um task. name and in the description no sorry the description is passed in here so task do description and save so refresh now we have it here let's try changed just to see if it works yes first task changed perfect so then I can set this task to done and then I just want to make it possible to delete tasks so again I can copy these lines go down here paste it and say delete and when we have the task we can just say task. delete and then we return us back to not the task page but the to-do list page and save import it and then we just replace replace and replace and in the detail page we can activate this here URL task call on delete task. project ID task. too list ID and task ID and save so let's try it out Delete then I will sent back to the to-do list there are no tasks task blah blah blah so now we have a task there again and we know that the deleting is working perfect okay so now we need okay so now it's time to make it possible to upload files and connect them to a project so let me just close everything here and open up models.py inside the project uh project uh folder and then we can create a new model here class uh we can call this project file model. model so we want an ID field we also want a name field and then the file so we can just call this attachment since file is often used in python as similar so I don't want to override or crash with them so models do file field and I we need to specify where we want to upload this to so upload to equals and then the name of a folder for example project files and this will be put inside the main folder of the project unless we specify it and that is something I want to do so in settings. pi you can scroll down so we can find uh the static URL set up the media URL and always like to use just media like this and then we want to set the media root equals and then we can say um base there which is the project folder slash and then just pass in media so now Jango we create a folder called media in the root of our project and inside there this project files folder will be created and the attachments will be uploaded into this folder so we can use this string representation here as well so then we can update the database so just stop here python measured by make migrations and python measured by migrate okay so I can run the server and then I want to make it possible to add this so to do that inside this project folder I can begin with the view then at the bottom here you can say login required def um upload file request and the primary key for the project then we can get this project like that just so that we have it and then we can show the template now just so that we get to the next step and now we can upload file. HTML and yes we can pause in the project in case we need it like that and close it like that save and we need to import this into the URLs file so part U ID PK for the project and then upload file views do um upload file name upload file and save so then on the project detail page we can add one more button here we can say um project colon upload file and then here upload file and I need to set the button so we can call this for slate I think that is a gray color refresh no let's go into a project like that then we have the upload file and if I click it I will get the template does not exist error so let's create that copy this actually just need this create a new file and save it as upload file. HTML upload file to now we can say project. name just so you know which project we actually uploading to and block great and then maybe we should add some quotes around here and let to make it easy and uh use built-in functionality for Jango we're going to use a model form for this so in the project folder we create a new file called forms. Pi now we can uh import the model form from Jango so from Jango do forms import model form and we need to import the uh file attachment so from do models import project file and then we create the form itself so class project file form pass in model form now we specify of class mattera so that we can connect this to this model so model equals project file and which fields we want to use so we want to have the name and also the attachment I and this will be created automatically of course but I have noticed that I have no connections between these two so let's add that before I do anything more project equals models Dot um forine key up to the project and set the related name oops related name to files and on delete mods. Cascade so if we delete the project we Al delete all of the files so let's save for now and run to make migrations again oops okay I don't have a default on this but I don't have anything in the database yet so we can just say one and one and then mate so run the server nice okay so the project will be added automatically or manually afterwards so we don't want it in the assist right now these are the only two required Fields so let's go back here and import the form we just created from do forms import upload uh project file form scroll down and find the view form equals project file form send this to the front end so we can render it there form and then I can go back here again and then inside the upload file you can say form method is post action should be the page we are on and then we need to set the ank type to multiart form data if not files will not be submitted to the back end and then the csrf token and then we can render the form very easy by just saying form dosp so we get it as paragraphs and then it's just simple button we can copy that from here for example go back and save it like that save so if I refresh now I'll see the name field here and then I can choose files to upload nice okay so then I just need to handle the submission here in the back end so to check this I can just say if request. method is post then I would initialize the form Again by saying form oops form equals project file form and pass in request. poost so we get the name and request. files and then Jango will handle everything there for us so you can just check if the form is valid and if it is then we can say um attach sorry project file equals form. saave commit equals false because we don't want to send this to the database because if we do not it will crash because we haven't specified which project to save this for so we need to say say project file. project equals then the project up here and then just project file do save so now it will be saved in the database and if it's not a post request we initialize the form like this and if this is saved we want to redirect us back to the project so return redirect and then we can say F so if format this project slash and then the PK and close it like that so now we should be able to test this template test the front page submit okay so nothing is showing here but that's okay because we haven't done anything but that's okay because we haven't done anything to actually show them but we can check in the project folder if it is there so in Visual Studio code I can scroll here I can see a media folder project files and front page. HTML perfect that means that uploading is now working and I can set this to done and then I want to list out the files here on the project page so I want to specify that this is to do lists so if I open up project. HTML and I can change this to an H3 just to make things as correctly as possible H2 class empty D6 and we can say text to XL to do lists refresh nice and then below here we can have the same it files files refresh and now we have there and then I just want to list out similar boxes like this so I can cop this and then for um project file in project. files all I think that was what we called it in mully yes files so we want to use this related name to get them close that one and say and four and then in here I can copy this just replace it a little bit of this so here we can say download file and say project file. name remove the anchor tag there and there and save so if I refresh now you'll see that here we have the template test and then I want to make this clickable so I can download the file so let's change this to Anchor tag instead and then I think here I can say project file dot um attachment do URL and Target blank because we don't want this to open open in the same file in the same tab so if I click this now I'll be sent to a new tab you can see here that this is correct but since we are on a development server uh this is not working so we need to do something inside um the URLs file so open up urls.py in the pisara folder so this is then the main URLs and then we need to import one thing sorry two things from D Jango from Jango contrib do um not or from Jango docon import settings and I keep forgetting what I need to specify this so Chango URLs um media I think think that is correct so we already set these two in there so let's copy this paste it there from jango.com url. static import static so this just to configure a URL copy this and append it to the url's pattern so first we just set the URL and then we point to where on our server this is so if I now go here where I go to 404 and refresh I will now see this template perfect so that means that now listing files is possible so we can set this to done and then the next step is to make it possible to delete files so if I then just go to view. P then we can copy these three lines paste it at the bottom here say delete file and then this should be renamed to project ID but that will crash with the URL so let's just add um file ID instead then we can say project file equals project file or project. files. get primary key is file ID so I we just use this project to get all of the files and specifically the one with primary key is the one we get from the URL now I can say project file. delete and then redirect this back to the project page and save so then we just need to import it into here replace with delete file um now let's just say delete but want to prepend here a uu ID called file ID so I think this will be the cleanest way to do this if not we had to change project ID and then primary key yes let's do that that makes a little bit more sense so project ID and PK replace this with PK and replace this one with project ID so we get the project and then the file based on the PK so I think that makes more sense now so delete file and then delete file so here where we have this download file we can also have a delete button delete and here we want to use the URLs right or URL um project colon delete file pass in project. ID and the project is available as you can see up here and then project file. ID and close now we can remove this and save so refresh add the download button and then the delete button can add a little Dash sorry a pipe to uh separate them a little bit now we can try to delete this does not exist okay so what is missing we have both the project and the file so why is that not working project ID primary key for the f file maybe I need to say just let me see the error again project file matching query does not exist H the print project. files. all just to see that there are something connected to this so I refresh there can see that the query set is empty if I go back okay so now it's gone because the deleting were um okay so when did it work let's try this again primary key primary key okay so it was the refresh sorry the redirector didn't work they should specify project ID instead so save and then we can try again upload file name just give it something random to test submit then we have this here again I can try to delete it and then I'm back here and the file is gone perfect so now this is also working and save so then we can start working on notes for projects so just like we have uploaded files for projects I want to make it possible to create notes for simple documenting things adding descriptions to things and similar so we can just keep this in the same app as the project as well so I just want to close a little bit things here like that so let's find models. p and create the model for this so class project note mods do model then I can copy these three paste and then a body I think it makes more sense to call this body than the description because it's the body of the note and not the description of what the note actually is but it's still a text field so let's copy this and we can copy this string representation and reame this to notes and save so then we can update the database make migrations and migrate so we can run server again and then you can create the view for this so we just want to add a comment here files and then below here we can have notes and then we have the login decorator and then F create note PA in request and then the project ID yes project ID so that makes more sense and I think also up here we should rename this to project ID and do it in URLs so let's just do it so it's done project ID because primary key can be mistaken that you think it's connected to the file so project ID and project ID and this can be saved go to URLs and rename it there as well so now all the PKS here are connected to the project project ID here is connected to the file instead so that's a little bit cleaner and then we get project from the database and then we can just show a form or show a template for now return uh render request pass in Project slash and then add note. HTML pass in Project we are on project and save so if you want to do we could use forms for this as well which might be this smartest thing to do um in when you think about security but since this is just a personal project that I'm going to use I'm not going to do that um so then we can import this to the URLs so just like we have upload file we can copy and paste and rename upload file to add underscore note add note and add note I think I call this create note but let's call it add note instead save and then on the project detail page we need one more button and actually I think I should just copy this from there and paste it down here with this so it's connected to there instead so if I refresh now I have the upload button there just need some spacing on there mt-6 refresh and then we have the same with the notes below so let me just copy these two and then below this for Loop and this div paste it and say notes refresh and then we can replace this here with a create or add note add note and there should be add note and the project ID is like that refresh and if I click it I will get the new template does not exist error perfect so let's go back and create that one we can copy add. HTML paste everything and just save it as addore note. HTML replace the title with add note then we have name but we we also want the body instead of the description and body save save I refresh now we have the note and we the body um maybe we should make this a little larger we can say row 20 so that it's a little bit better for something like this then we just need to handle um submitting this form so here I can say if request. method equals post then we get the name say name equals request. post. getet name default is to empty copy and replace then say body instead and if name and body because here we want both of them to be filled out then we can create a new note first you just want to import this model so project note and then I can say project note. object. create and here we want to specify the project the name and the body so project equals project as we have up here the name is name and the body equals body so then this when this is done we can redirect this back to project page so if you just do it like this and save refresh first note add something to the body scroll down and submit then I have it like that so I don't know if it did work but since I was redirected I guess it did work so I can set this task to done and then I want to list out all of the notes on the project page as well so let me just copy this entire div that we have up here with the files and then no actually let's copy this one instead since here is the description and similar instead of the download button so paste it like that and say for note in project. note do all and this should show the note. name and we can show the beginning of the body so note do body and pipe this into um how to limit this Chango limit sorry template limit jars so there should be a built-in filter for this limit truncate words um truncate truncate truncate chars let's use that and then we want uh for example 50 letters at most so we don't have this detailed page yet so we can save it like this go back and re fresh there now we the first note nice with a short description perfect so now we have the notes list next up then is the detail page for the note so we copy this here again paste it as note detail and then primary key and then we get the note note equals project. notes. getet where primary key is primary key which we get from the URL then we can return the template like that note detail pass in the project and also the note and save so if you now import this to URLs and I can copy this and then here I can say um U ID colon note not note ID but PK and then uh note detail and the name also note detail so save then we can activate this button here URL project colon note underscore detail project. ID and note. ID let's see if this works click and yes it does work we just get a new template does not exist error so then I can copy this create a new file save it as notore detail. HTML close the end block and say note name and and show the body here instead so note do body and save so if refresh we get the note title and then the body perfect so that means that now I can set this task to done oops and then I just want to make it possible to edit the note so here we can say note edit note edit like that notore edit and save import here and then we say edit problem now is that this is very similar to the URLs for the files so here we can prepend notes and notes just so they are separated from each other maybe also they should have files and this can also be files slash upload file or just upload and files slash sorry notes SL add and now Jango will fix this for us I don't have to do anything else because now um can see here this was added automatically from Jango because we are using this URL fun function here okay so let's continue with the editing if I just go to Project detail here and then I can make a copy of these two [Music] buttons paste we don't have a delete page yet but we have the edit page so uh notore Edit Pro in the project ID and the note do ID so if I go into that whoops note edit not correct soorry this was supposed to be notore edit and use the view note edit of course like that so now refresh again and then I get the new template does not exist it's okay just copy the add note content paste and save it as notore edit. HTML edit note and then we need to pass in the value here value note. name and here note. body and button can say save changes instead and save refresh that we have it there so I just need to handle when the form has been submitted and I can copy these lines because I want this very simple validation here as well then we can say note. name equals name note. body equals body and not do save and then we can return us to the project page I think save so just refresh changed and save and then if I scroll down this hopefully says changed yes so now we have the possibility to addit notes as well then it's just a matter of making it possible to delete them so copy these lines and say note delete then note. delete return and redirect this back to project page save then we just need a URLs and we are done sorry we need to fix the button as well but yes note delete note delete save and then we need to fix this button so just copy this paste it and say notore delete so if I go into this now click delete was redirected back here and the note is gone perfect so now the task is done as well okay so now we are going to head over to deployment and we're going to deploy this to Acorn so to do that you need a GitHub account and when you have a GitHub account which is totally free you can create a new account on Acorn doio as well okay so let's go to the browser and just close a few of these tabs so I want the project running here so let's go to a corn. iio and then if you're interested in reading about them you can find a lot of information here what they offer and similar and if I go to the pricing page agage you can see that for personal project it's free and what it includes and that after 2 hours it will be stopped and deleted and you have to start all over again but this is just for testing um you also have a Pro Plan which costs $10 but since we're in a beta you can request a free access here and you will have that until they go live which I think will be in March or April of 2024 okay so let's sign in so login sign in with GitHub then I need to sign into my GitHub account okay here's just some old project so just to delete this yes so now it's gone so according to my to-do list the first thing to do is to set up something called the requirements file and this oops should be located in the main uh folder pisara so let's create requirements.txt and this should say what D Jango version we are using Jango equals 5.0 so two uh equals like that so now that we have this we know that when we deploy this that only this version of D Jango will be installed and nothing else also need some called environs which is environment variables version for this 73.1 and now we need a MySQL client so that you can use a mySQL database instead of sql3 2.2.0 and save so we don't need anything more so let's just set this to done and then I need to create something called a acorn file and this should be here where we have the templates folder and the EnV folder and the pisar folder let's create it here Acorn file with no endings and then this has the same type of um syntax as normal Docker file has so it should be familiar if you know a little bit of Docker so it specify a name which can be pisara project oops pisara project management system and we can have a description the desk for the project blow blah blah and then we set of uh object arguments or arcs and pass in Jango DB name so what database name should be used we can just say pisara DB P be like that so there and then we need to specify which Services we are going to use so Services colon DB hold on new object like that which image of the database we're going to use so g h r c sorry C doio and it's not meant that you're are going to remember all of this if you want you can go into the Aon resources inside the documentation and you find everything here so how to get started how to install this and similar so you can also to find this information that I'm filling out inside the documentation so acorio SL Maria TB which is very similar to mySQL it's just a different this row colon v101.5 D1 and then which Services arguments we're going to use here we want to pass in the database name so service r works new object and then in here we specify DB Name colon ARS so I just point up to this list DB sorry Chango DB name so the same name is here that we have up here I think I should have a comma there actually and then we want to specify which containers to use and the containers is what we are used to deploy this project and to run Jango in a python environment so containers colon web so this is then the name of the service and this is the name of the container build and actually I don't think I need this comma there sorry so build context do/ pisar so that's just the name of the project pisara and we also need specify the docker file we are going to use so that is the next step so then we specify do/ p and this name here has to match this folder name which is the project folder Docker file and we're going to create this very soon and then below the build we specify which ports that are going to be used so ports colon publish public publish 8,000 colon 8,000 HTTP and if R.D so if it is a Dev environment create a new like this there's colon app colon dot SLP which is also this name this name and the name of this folder and then here we specify the EnV environment variables to use Maria dbor user so then we specify at service. DB so let's talk to this one do secrets. admin. username let's copy this rename this to Maria dbor root password so this values just comes automatically from up here so you don't have to think about it right now admin. password Maria DB which host for this service so then it's service. db. address Maria DB Port so which port to use so that's service. db. port. 3306 and last but not least we need to specify the database name so D database so this will then point to service. db. dat. DB name and this is what we get from here which is got from there again so I think I can set this toor I can save this now go to the to-do list set this to done next I need to set up the docker file so then the docker file is what's uh setting up there environment and similar on this Acorn image so inside the pisar folder we create a file called Docker file and this Docker file is the one we are pointing to here and then we specify which syntax we are going to use so syntax equals Docker SL Docker file 1.4 um and which uh PL form we're going to use from do slash sorry slash D Das plat form equals build platform python Colon 3.10 D Alpine s sorry s Builder expose 8,000 so that exposing the port and 8,000 work there/ app and this D here is the one we are pointing to here and then in here soorry below here say run AP APK APK update so that we're updating software on this image here Run apk add so we just need to install a few things so here we can say p k kg config and GCC so there a little bit of compiler and similar muscle DD bash and Maria TB Dev so and don't worry if you don't have to go around and remember all of this because when you have done it one time you can just copy and replace and then here say copy requirements.txt so just copy this file into the folder called app the work directory and then run pip 3 install dasr requirements.txt so then we tell this image to install everything from this file no cache there you might not need this but it's just to make sure that everything is downloaded correctly and then copy dot SL app so remember this space that means that we copy everything from here into that folder called app and then CMD B- C so now we want to run python here I can actually CMD python three manage.py run server and then the IP address 8,000 and save so I think that was it for there we will see you very soon if it is working done um I need to add one more task there configure uh settings.py so I need to do a few small small tweaks here for example a pair in the allowed hosts since we are um using this uh IP address and similar we need to specify which uh hosts that are allowed so we just set the star there so all hosts are available or allowed to use this here and we need to specify a little change on the database so can just add a comment around this so we have it for later if you want to work locally copy and replace sorry paste below here and then the engine that we want to use is Jango db. backend. MySQL then the name of the database is os. get EnV and pass in Maria Maria DB underscore database and this variable is something that we get from there so now these are a little bit more secure than default way that Chango deploys you have to get a warning because OS is not defined so we can import it here at the top import OS and scroll down and here we reset the name we also need to specify the user so Maria DB user oops user and the password that we want to use password Maria DB password and the host Maria DB host and then the Port Port oops Port Maria DB port and all these fives are the one that we specified here which comes automatically from here and everything is just work magically here with Acorn um did you install my SQL client no but I don't want to use this locally so you can just stop this for now and then we can deploy this to Acorn very easy by say Acorn Dev dot no it did not work because I haven't installed Acorn yet so let's go to the documentation CLI installation you can install it using home brew or curl or scoop if you have uh windows or you can do it manually if you want to do that um I think I just want to use Curl that's easy to do so just paste this my password for my Mac User so now this should download a simple client that I can use here in my terminal and if I now just say Acorn Dev dot um no configuration has been provided try setting kubernetes master environment variable all I think this is because I need to log in so shell completion don't need that and upgrade um okay so how can I log in getting started so install and then Acorn login yes okay Acorn login then I'm reader directed here Acorn is logged in already so I'll probably just be sent here you can close this window and now log into Acorn IO as stet succeeded perfect s set is then my name on GitHub so my real name so let's try to run this again Acorn Dev dot could not open Acorn file okay unless I'm in the fail sorry as directory as the docker file and requirements so go up one try to run one more time Acorn Dev dot which is the folder that I'm in so now this will start up and hopefully work so this is very typical Docker things creating a new container make sure everything is running and similar so now it's running the install as you saw in the docker file now this is setting up it's pushing copying to the app folder trying to run things so now the name is set to solitary Moon pending so it think it's waiting it's not ready yet not ready that can be because I have done something wrong no it looks like it continued initializing database so now it's setting up the database temporary started so a lot of things is happening here now but it's still not ready so I think if I go here now into the acorn you can see here the pro pisar project management is appear here so the database looks like it is running for 1.9 hours more here I can see statistics if I wanted to do that can see some information about the database similar and same thing if I open up this container which is the Django project you can see here name of the docker file a little bit of the project the environmental variables that has been set so it's still just waiting maybe I have done something wrong somewhere because this usually goes very quick container web not the red okay let me see if there are anything temporary server stopped process done ready for startup so I should actually be able to click this but I get the 404 because it is not running let me just TR stopping it using control C and running again okay so it's still not working I have to go over the code for these files to see that I have written everything correctly so I see up here there is something wrong please remember to set password blah blah blah I think it's because I just used the default password but as you can see up here I couldn't connect to the MySQL server so I just want to see that I wrote everything correctly inside the settings file as well okay so I have a problem with the password I think and when I see in my settings file I said Maria DB password but I think it was supposed to be Maria DB root password so let's replace save and then this is automatically updating perfect so now it says that end point is there so I can click this you see this URL and then I'm at the login page or the front page so let's try to sign up here's there verification request aborted so I get it does not match any trusted Origins so I think this is something that comes from new Jango things because we are using SSL and https now then I need to set this here so I need to set the csrf trusted Origins so let's go back to settings. Pi and up here I can just set it like this again I think so now this is automatically update thing the value thatting must start with a scheme usually HP but found okay um okay so maybe I just need to copy this address go back replace and save so now it's updating again so refresh continue that did probably not work now let's try one more time sign up okay did the URL change no maybe I just need to take away that one refresh and try now it's loading table P does not exist okay so the problem now is that the database hasn't been initialized so we need to create a database script that can run the make migrations and migrate on the server so inside this file here sorry inside that folder I can see db- script. um s H to make it the bash script okay so first you just say that this is a bash script and we sleep for 10 seconds just to make sure that everything is finished and we can run this in the background now we just say Python 3 man P migrate we don't need to make migrations because all of this should already been created so now you just need to tell the acorn file to run this when um sorry the docker file to run this here so here is just do slash db- script.sh and then so when this is finished it will go to this one and this needs to be runable so if I just go to the terminal stop everything here and then I need to make that runable so CD Bor then I have it here so chod plus X do/ DB script like that and then we can try to deploy again so now we can see here that this is actually running and that we get the to-do list and similar so let's go back and refresh continue and now I was directed to the login page so let's try to log in with the user I just created and by the way this URL should be able to be visited as long as it is running here this one so as long as this is running this will also be running and people can visit it and test it from other places around the world so it looks like everything here is working nice and that was it for this tutorial I hope you liked it and if you did please H like below remember to create a free account at Acorn and test this out for yourself if you have any questions about today's call feel free to leave a comment below and I will answer as soon as I can see you in the next video

Channel: Code With Stein

Views: 20,080

Keywords: code with stein, django, learn django, django tutorial, django deploy, django tailwind, django todo, django project

Id: m3nYd_IFZuU

Length: 179min 49sec (10789 seconds)

Published: Tue Jan 02 2024