To Do App | Django 3.0

alright guys so in this video we're gonna build a to-do app using django 3.0 this project is designed to quickly get you set up and started with a django app and familiar with basic create update and delete functionality so I do have a full jingle crash course series so I'm not gonna spend a whole lot of time covering each topic this is more of a quick star and build along so if you're starting with Django you should already have Python installed and if you don't already have django installed you can do a quick pip install django and this should give you the latest version of django and if you're here because of the new django update 2 3.0 we could upgrade our django version by doing pip install - - upgrade then django equals equals and we're currently on 3.0 if you're on a higher version from the time this video comes out just specify your version number what we're gonna do 3.0 and that should go ahead and run all the installs I already have it so it might take a minute if you're doing the upgrade as far as the Django updates go I took some time to read the documentation and actually compared a 2.2 and a 3.0 project side-by-side and didn't notice any changes that a beginner should be particularly concerned about other than the fact that Django no longer supports Python 3.5 or lower so make sure you have the latest version of Python or at least 3.6 or higher so all the other stuff like Django async and filter expressions I would just recommend that you you just read the documentation when you're at that point but I know a lot of beginners aren't there yet so I'm not gonna spend time covering that before we launch our first project files we want to make sure we're in the directory of where we want those files to actually be I'm gonna have mine in the desktop and from here because I have Django installed already I can run a command that will give us us boilerplate files so from here I'm gonna do Django - admin start project and we're gonna give our project a name so I'm gonna call mine to do and now in my desktop because I ran the command from there I can now see these basic files or this folder that Django just set up for us with our configuration ready to be set up so I'll go ahead and actually open that folder up in sublime text so my text editor here and we'll go to desktop and I need to find the right file path okay so here are my files and these are the default files that I have and I actually go over these in my jingle crash course so I won't go into too much detail here but all the configuration will happen within settings key Y and I'll go ahead and turn on our server so make sure we're in that project file so go ahead and CD in there and I have it here somewhere okay so right here and I'm gonna do to do okay so we're now in the project folders and once we're in here we can turn on our server so I'm gonna do Python manage py run server and from here we can see that our server is running on port 8000 so what I like to do is you can go ahead and paste this in into the browser or just type that in but what I like to do is actually save it here into these tabs here so that way I don't have to type it in each time so if you're seeing this it means that your app was successfully set up and you're seeing the default page that Django house built for us I'm now gonna actually set up our database and create a user so we can do forward slash admin and see the Django admin panel let's go back to the command prompt and actually turn off that server and to do that we're gonna do control C and sometimes you need to do that twice to actually turn it off and we'll migrate our first database so to do that we'll do Python manage py migrate and that's gonna run our first migration and by default Django uses SQL Lite so we're gonna get a set up with that normally you don't want to use something like Postgres or MySQL but we'll stick with this so this migration just created our default tables so our user tables and all the other default settings that Django wants us to have and now we're going to create our first users so now that that's ready we'll do a Python manage py create super user and that's all one word and give our user a name set up your email and as you type the password it won't type but it'll it will be being added there so go ahead and just do that twice and let's turn on our server and login to the admin panel and run server ok so now that we have that we can do forward slash admin and go ahead and type in your username and password I already have mine by default so I'll just hit login and this is our admin panel here's our user we have that set up so we can go ahead and start actually configuring things so I'm gonna launch our app now and that's where all of our database tables are gonna sit and all the URL routing along with the views and all the other Django functionality so I'm gonna turn off that server again and run Python manage dot py start app I'm gonna name my app tasks so I want it to be a little bit different from 2d I don't want to get confused there and that set up my basic app with the models file of views there and now in my settings dot py file I just need to go ahead and let Django know about that app so whatever you called your app just go ahead and add that in to install apps here and now we can set up our URL routing so in our app and views I want to first set up our view function that will just return an HTTP response and we'll call it index and we'll just do a request and we'll just return an HTTP response so I need to make an import for that and it's going to be from Django HTTP import HTTP response and now we can return it here and we'll just say hello world okay so now we need to set up our URL route and I'll split this up and we need to create a URLs py file so URLs dot py and in here we need to run a few imports so from Django url's import path and let's set up a URL pattern so URL patterns and that'll just be a list and we want to let our first path call that index view right here so just call this function and that'll be when we call the home page and we'll also import view so we can actually access this so from root import views and now we can say views dot index and that'll just trigger this HTTP response but before we could actually see this we need to go back to our base URL stop py file and actually let it know about this one so I'll move this here and let's add include and this will just let us include that file so we'll create another URL path and set that as a base URL path and do include and we'll do our app name so tasks dot URLs and this should set up that response so let's turn on our server and see if we get this back Python managed py run server ok something went wrong from Django HTTP import HTML response Iran okay that should do it and make sure that's correct and that should now return that value so if we go back to our base URL perfect so we're getting back this HTTP response now let's actually build out a template so we can render something and then we'll set up our database so in our app tasks right here we're gonna create a file called templates and this is just the way jingle wants us to store it and within templates we need to create another file with the name of our app so ours is called tasks and in here we can create our templates so I'll call mine list dot HTML and let's just out poops I don't know what I clicked there but we'll just do an h3 response or tag and we'll just say to do and now within our views we can actually change this from just an HTTP response to return an actual template so this render function right here is what we're gonna use and this takes a few parameters right now we'll just do two and we'll do render it takes in the request and the template and to get the template we specify the file path of tasks /list dot HTML so that should return back a template now okay everything's working good there and now I can set up our database so before we start adding more URL paths here we're gonna go to models DUP UI and create our first item and I'm gonna call this we're gonna create a model called task so we'll do class tasks and we'll just import or include models or and here it from a models model and the name of the task or I'll just say title and maybe we'll add some descriptions to it later but for now we'll just do models dot character field so char field and we'll set the max length to 200 for now and we'll just do a status of complete or not so this will just be a true or false value and this will just be a boolean field so models dot boolean and I'm going a little slower it's kind of hard for me to think and type at the same time so boolean field default will start will start with that value of being false so it's not gonna be complete ok and the last thing we'll do is set a created date so created is going to be models dot date/time field we just want to know when each item was created so we want this to auto add so it's gonna be Auto underscore now underscore ad and we're gonna set that to true so every time an item is created we don't have to set this value it's just gonna be created by default and we'll just set the string value underscore stir and two underscores there and we'll pass itself and just return self dot title okay so we need to might migrate our database now or we need to run a migration I spell default wrong there so let's turn that off and let's do Python manage py make migrations and that's just gonna prep the database and now we can actually migrate it so it's gonna add those tables in so it's gonna add the model of tasks as a database table and now we can just do Python manage py migrate okay so that's in there and I can go ahead and just add a few tasks here to in the admin panel just to see how everything looks and make sure it's running run server and in Adam and py so if I have this if I go to the admin panel here for slash admin and I won't see that table yet so I need to register this and that's gonna be done in admin dot P Y so from here we'll just import models from models import and we just want to import all of them so we'll just do star and well do admin dot sight register and we want to register the task model and now we can see it so I'll just go ahead and add two quick tasks and I'll just say pick up milk and let's say do toriel okay so both of those are considered incomplete tasks and now what I'm gonna do is actually render these out in the template so in our view we can actually go ahead and import those so I'm gonna import all the models and I'll just do from models import and we'll import everything and go ahead and just make a query for those so we'll do tasks and we'll just do tasks dot objects dot all and we want to grab everything and I'm gonna make a contacts dictionary here so we can throw everything directly in here and pass it into our render function so that'll be an empty dictionary and we'll just pass these in and context gonna be added as a third parameter to render now so we'll throw that out and in our template now we can go ahead and render these out so I'll just do let's create a for loop here and go ahead and just output these so we'll do start the for loop so for tasks in tasks and we'll just end it really quick and then we'll actually create something a placeholder for it and four okay so we want each task to be in its own div and we'll just pass in the task as a paragraph tag so just as some text and we'll just do tasks okay so it's in our template we've passed it into our views and let's see that output here okay perfect so we have our two tasks let's go ahead and actually create a form where we can add a few and we'll build a form in right here so we can just like in our demo we can add it in directly here and then we'll actually be able to click these edit and delete buttons there's a few ways I can go about the create and update functionality and I know some people like the built in class-based views I personally don't like those they're very easy to work with but when things get more complicated or when a beginner needs to understand how things work it's too easy just to make it work but not understand it so if that's your preference that's fine I prefer to use something called model forms so in our app here we're gonna create a file called forms py so forms dot py and what these are are basically a form representation of a model so we have this model task and when we specify which model we're gonna replicate it's going to create all the form fields for us and it's very easy to import it into our template so I'll go ahead and run a few imports here from Django import forms and from Django forms import model form so it'll make sense once I build it out but I'll just start by building out a class based form and we'll do from models import and I'm just gonna go ahead and import all of them and to create a to create a model form it's just a class and I like to use a method of naming it whatever my model name is and just ending it with form so we're gonna hear from forms dot model form and now we're gonna do class Mehta and we need to give it a minimal of two values and the first one is going to be which model are we trying to create a form for and the model is tasks and what fields are we gonna allow in that form and for now I just want to allow all of them so fields and this is just gonna be a string value underscore underscore all underscore underscore so now that I have the form I can just import it into my view and from my view import it into my template and actually render it so from forms import and we'll just do all of them again and I called my form tasks form so in here we're gonna do oops can click out of that form equal equals to task form and a function there and we'll just pass it in right here into our template so form now in our template we are gonna first set up HTML form and we can do you can do these template tags here and just pass it in and I'll just set up an input field and the type is going to be submit and it doesn't build out these by default so we still need to add in items like this and the value will be create task and in our template now when we refresh it we passed in that form so we didn't have to manually add in this input field in this check box all we had to do was create that submit button and that created a form for us because I just passed in form it gives us this check box too but I only want this check box to show up when we're actually editing an item so in here just like our demo here I don't I only want one field so to do this all I need to do is actually access this and specify the field that I want to access and that's just going to be form da tasks and that's just going to give us this oh sorry not task but title that's what we called it so formed on title and now we should only see that one field so let's actually have this form create something so in our template we are first going to have to set the method of post or sorry yeah we're going to set the method to post and the action is going to be to the base URL path so it's going to whatever we submit this form to and when we submit it it's going to send us back to this view so what we're going to say is if request dot method is equal to post we want to actually create something so we're gonna do a form and we'll use the same task form here and this time we're gonna pass in the post method request stop post and that value is now going to be passed in the form and then we are gonna save that for them so first we're gonna say if form dot is underscore valid form dot save and that will actually save it to the database and if that's valid we want to actually I want to go back one if it's a if the request method is post we actually want to return and we want to return the same exact template so we want to actually go back to this view except where we want to come back as a get method now so we'll just do return and we're gonna pass in from Django shortcuts redirect and we'll do return redirect and we'll just send it back to that same URL path so let's go ahead and refresh that and say we'll just say one okay I forgot to add a CRF token here see our SF underscore tok and that's what we need to do so in here we just need to let Django know that we are able to take this so CSRF underscore token and this just adds some security to it and now if I try doing that again it should create that task and I don't know what that's happening oh I need to pass it in with a different template tag it needs to be percent signs here and let's try that one more time okay so if I just do one two okay perfect so what's happening is it's submitting it to the same exact view as a post method then the post method goes ahead and fit all's that into the form saves it and redirects us back to the same template so now let's go ahead and actually add some edit functionality so we'll build out a new template so we can actually go to a single item and change its value from complete or just remove it so I'll just go ahead and make a template for that and I'm gonna call my template update underscore task dot HTML and let's just add some items to that template build it out a little bit and we'll say update or update task okay so I'll throw in a form here it'll be an empty form for now but we'll actually throw in a form through our view so we'll just set up the input first and the type will be submit and the name will be update item or update task so we'll do that and this this view is gonna be a little bit more dynamic than the one above so this is gonna be update tasks and we'll throw in the request to it and with the request we're actually gonna throw in a dynamic URL path so we're actually gonna throw in the primary key in the URL so we'll throw it in as a primary key and we can name this whatever we want but that's just a method I like to use so let's just go ahead and return a template see what we have and then we'll build everything else out so requests and tasks forward slash update underscore task dot HTML okay so in this view let's actually grab the item now so I just want to show you how this works the item is gonna be so task and let's give me tasks objects die get and the ID we're gonna grab the ID from the URL pattern so that's gonna be thrown in there so that's how we're actually able to retrieve an object and let's go ahead and build out that URL pattern so it'll be path and let's just write out that pattern update task forward slash and this is how we make it dynamic so we can do int and just pass in an integer but I like the string value just because it works with numbers and and letters there so I call the PK here so that's why we call it PK right here so we can name it whatever we want so let's go ahead and just finish it up with a view and I'm actually going to make these more dynamic for the for the Jenga way so the URL path is we're not gonna have to do a hard-coded paths we're actually just going to give it a name and we'll call it this way so the homepage we'll call it list and this one will just say name is going to equal to update underscore task so I want to view this page from my list here so with this dynamic name that's actually how we're gonna call the URL pattern so we called it update task right here so I'm just gonna copy that and in my list I'm actually gonna throw in a link here and so a close that out and we're gonna say update and then the link is gonna be href and we're gonna use these template tags the two percent signs we're gonna say URL single quotes update task so that's that name we just made and we're gonna throw in the ID so in order to pass it in right here we're just gonna do task da ID and that should create a link to that pattern so if I go to my list now and we'll close this out if I go to the list and look at this URL pattern it just created that link so if I click on let's say update milk we're gonna see one go into that URL pattern if I do do tutorial we're gonna see three so let's actually pass in a form now and I actually currently don't have that input field yet so with that item that we just retrieved we're actually going to make a form but that form is gonna have the instance of the object we got so form is going to be task form and in task form we're gonna do instance is going to equal to the task so if we just passed in a form it'll give us a blank form but because the instance is of this object so they obviously has to be of the same model it'll prefilled that form for us so let's just go ahead and pass that into the context now and we'll throw it into the render function so form and form and we'll just paste this into this render method and now in our template we can actually pass in that token and the form so we'll first do the token so see s RF underscore token oops and now let's just go and throw in the form here so double curly braces and keep making this happen right here so we'll just do form so now when I go here if I actually click on one of these links we should see the form prefilled so there we go pick up milk and do tutorials so it's actually pre fill in that form and we're able to mark that as complete or incomplete so let's actually process that so when we hit submit here something actually happens we're able to update that so first we'll throw in a post method into the form so method is going to be post and the action is it's going to be just this URL that we currently have so we're actually gonna leave that blank so we want it sent back to that same URL so we're currently on that URL and it's gonna send it right back to it so just like we did in the index we're gonna process that so in here let's do if request dot method is equal to post let's grab that form so I'll just grab this instance and we'll do the same thing so we'll pass in the request right here and we need to still throw in the instance so if I just leave a request out post like we did right here it'll actually create a new item even though it has the the old items a instance so it'll create a new item so we need to say we're throwing in this new data but we're still updating the instance of this item so we'll just go ahead and save this now and we're gonna do if form dot is underscore valid form does save and we're actually gonna redirect it back to the home page so we're gonna redirect it there and let's just test this out so pick up milk and we'll just do you updated and submit and we just marked it as complete and to there's gonna be three now and we'll just make a note and there we go so it updates those that actually goes and processes that saves the item and sends us back so to close this out all we need to do is add a delete button and we just need to style this and make it look good before the user deletes an item I like to give them the option to confirm their action so what I'm gonna do is actually make a template and when they click delete instead of believing the item directly we're gonna ask them a quick question and give them the option to confirm it or cancel so just do a paragraph tag here and I wrote out my question so we're gonna say are you sure you want to delete well instead of just saying are you sure you want to delete just has a blank question like that we want to throw in the item so they can see maybe if they selected the wrong item they can confirm it and notice that it was a wrong one that they selected so we're gonna pass in the item so it'll actually say it so the task itself will be confirmed and for this what we're going to do is the first thing we're gonna do is give them an option to go back so we're gonna say cancel and this link is just gonna point to the home page so if they cancel it'll just reroute them back and they can continue doing what they were doing and the home page we called lists so the first option is to send them back so let's create a template for this and see what it looks like and it's gonna be similar to the update method where we actually have to pass in a dynamic URL here or a primary key so we'll just do delete tasks and this will take in a request and then the primary key and we'll just return that template and the actual item with it so render request and the template was just delete so tasks for / delete dot HTML and now in our URL we're gonna do again the same thing for as we did for update so I'll actually just copy and paste this and we'll just do delete and pass in this template or this view okay so delete we passing the ID the views right and let's actually pass in because in the template we're actually looking for that item that's gonna give us an error if we don't pass it in right now so we'll just do item is gonna equal two task objects get and then that ID that we passed in so primary key from here and we'll render that out so I called it item here so that's how we have to pass it into the view so we'll just do item and that's gonna be this item that we just got and we'll throw in context and we'll actually link it out in the list so in our list we're gonna create one more link here and that'll be the second one in and it'll just be delete so okay so now we should be we should actually be able to click on that and it probably should change the name to delete right here okay so delete are you sure you want to delete pick up milk updated and we can cancel and are you sure you want to I hope that was updated this says are you sure you want to delete one so we're able to confirm it and actually see what we're deleting so let's go ahead and build out that confirm process and then we'll finish up the styling so let's go to our template or our actual yeah this template right here so to do this we want to send a post method and I'm actually not sure how to sent post methods with a link or if you can so not going to spend time doing that we'll just build it out as a form so we'll prep it with a CSRF token c s RF underscore token and the method is gonna be post because we're gonna send it back to this view right here so method is going to equal to post and the action again we can because we're sending it to the same URL the action this can be left blank and normally if you're deleting this and trying to send it to another function or another URL you actually just passed that in here but for here all right do is filled an input it's not actually gonna be a form so we'll just say submit and the value is gonna be confirmed and we won't style this page that's gonna look a little ugly but it's gonna do the job confirm okay so we're gonna send the action back so let's just make sure we have it and we'll fix that right there no it's right here okay so when we click confirm it's gonna send a post method back to this view so we're gonna do if requests method dot post again but we don't need a former anything like that so we're gonna do item dot delete and then we'll redirect it back to the home page so back to that list and we'll clean that up okay so do we want to delete one so let's actually start with our list let's delete three actually so delete confirm and three is no longer there we'll delete one and perfect so now we're deleting our items so before I style the page I actually want to cross off these items if they're complete so this one is complete and this one is not complete so we don't always want to delete the items we just may want to cross them off the list like a real to-do list because you still might want to see that there so let's just write a conditional with our template tag and we'll say if task dot complete and we're just gonna reference this complete attribute is equal to true and because it's boolean we don't need to put in quotes here so if it's true we want to go ahead and cross this out so to cross it out we're gonna use the strike tag here so the strike HTML tag and we'll say if it's complete strike it out and if it's not so else go ahead and just add it and we'll just use a span tag instead of a paragraph tag now and we'll just throw on the so if it's good cross if it's not don't and we just need to close off this if statement so now we need to do and if and if I go to my template that should cross out the complete items so there we go pick up milk is complete and do tutorial is incomplete still so it's not crossed out so that's it as far as the crud functionality and the functionality of the app itself if you want to stay and watch the styling part of this I'm gonna make it look like we'd had in that demo so go ahead and stick around for that and I'll start off by removing this to-do title here and paste it in some CSS that I've already wrote out and bootstraps so I just hit control V right there and paste it in my CSS so we have this bootstrap CDN and that just helps us with styling we're able to write classes and style our buttons and divs and everything else and in my CSS we just set the background to the body we styled our inputs change up some button colors and created that call them so all of our code is centered and styled each item row so if I save this and my HTML is now down here if I save this this is what we have so far and we're gonna make this better by adding the classes and divs so let's start by first creating that center item for the actual to-do list so to do that I'm going to close in everything in a div and we'll call this div center column and here's the CSS for that right here so we set the width to 600 and we Center it so let's just close that off and make an indentation here so we can see that and every time I make a change I'll just jump back and show you what's happening so that just centered everything and we styled our input fields there so now let's update the buttons so each button we're going to use bootstrap for these so we're gonna use the bootstrap BTN and then BTN - and I want to use the color of info info just gives us a blue button and we're gonna style these buttons - so we're gonna copy and paste this into these two and I want the button here to be BTN - SM so it gives us a small button and this one I'm gonna have as info - so I still want that blue and this one I'm gonna have as the red button that bootstrap gives us but I wanted to keep the styling but change the color to yellow so if i refresh this we're gonna see our button colors change okay so we have a yellow and blue button and I forgot to put the small attribute in there so for this one we're gonna do BTN - SM and now let's actually style the actual to-do list so in this for loop we're gonna wear around it we're gonna make another div and we'll close it off right here and we'll call this actually all I don't need to indent that that's already indented so we'll do class it's gonna equal to - do - list and the CSS for that is right here just about a point to it you know I'm not sure where that is so let's refresh it and see what happens I don't think we actually use that so I'm just gonna leave that there but it's irrelevant so we'll just leave it I don't think it does anything but just to not break anything for this tutorial leave it now for each row I want to I created a div already around every single item so we loop and create multiple days I just need to create this class and this is gonna be the class of item - row so the background will just be set to purple and we'll create some drop shadows here so here's the CSS and if i refresh that there we go so it's styled pretty good the last thing I need to do is add in that placeholder so here's our demo we just want to say add new task now that's not gonna be CSS and I do cover this or I probably will cover this in my crash course I haven't gotten to it yet but we wanna in our form because we're not outputting a normal HTML we can just add that placeholder tag so informs up he why we're gonna paste in or I'm just gonna go and pay something in here we can actually customize certain feels this way so we have the task field and we just added this widget that grabs that form field and sets the text input to add new tasks so assess the placeholder value and again this isn't a forms tutorial so I won't cover it here but that should do it oh I called it task I need to call it title that's what we call their model field so if I do this that should now have our placeholder and it looks exactly like our demo so perfect so if you enjoy this tutorial if you found it helpful make sure you're subscribed to my channel I am gonna be putting a lot of videos out on Django javascript in just a ton more content I'm getting started here so follow along if you found this helpful and thank you for your support

Channel: Dennis Ivy

Views: 227,069

Keywords: Programming, Software Developer, Dennis Ivy, Dennis Ivanov, Django, To Do App, Django 3.0, Django CRUD, Django Framework, Python web development

Id: 4RWFvXDUmjo

Length: 41min 13sec (2473 seconds)

Published: Sun Dec 08 2019