Making a To-Do App with Django | Web Development Tutorial | Build a Startup #3

hi everyone in this video I'm gonna show you how I made a to-do app with Django and the reason I wanted to you know start with a simple app like a to-do app it's just because I think it's a good way to learn a new piece of technology so let's get started by you know first showing you the final result I got okay here's what I have as you can see that UI is super simple we have the header that says my to-do app and then we have a list of to-do items for example get a haircut learn Django and what's crazy which agents and if you want to add a to-do item here you can just click here and then you know type in your to-do item for example let's say to do or new to-do item and click Add and then it gets added right here if you want to mark some to-do items as done you can just click this one delete to delete these items and that's basically all we have now I'm going to show you how I made this really simple web app but let me just quickly recap the setup process first just in case you haven't seen the first two videos in the series so first we used pip3 to install pip m and then we use spit m to install jungle 2.1 and we did that in this folder called edit dojo and of course that's just the name of our project and after that we typed pip m shell to go into the virtual environment and then used this command right here to create a new jungle project after you go through all of that you should be able to just type in python manage pi run server to make sure everything worked so just copy and paste this URL in your browser you should be able to see either this or a for for error like this one actually either one is okay for now you're gonna see one or the other depending on you know your progress in this project okay so whichever one you see here let's get started with our to-do app by creating a new app so to do that create a new tab in your terminal app or a new window in your terminal app and then go into the virtual environment by tapping in pip M sell and then create a new app with Python - the pie starts up and let's call this app to do after you run this command if you run LS you should be able to see this new directory to do and then to install this app to do in this jungle project just go to your text editor open settings stop PI within edit dollar project within edit dojo find installed apps that's right here and then add to do at the end of this list okay next let's create a view for this app so go to a 2d folder and then open views up pi and here right this first from django HTTP import HTTP response and then you can create your view here by writing def to the view we quests : return HTTP response and let's just say hello this is 2d view and then let's connect this to a specific URL by going to URL stop i within a dojo project and import the view that we just created by writing from to diffuse import to the view and then in your l patterns right path to do slash and then to do view if you go back to your browser and then type in the root URL slash to do you should now see this hello this is to the view so this is exactly the same as what we did in the last video for our hello world project okay so right now what we're doing is we're using a view to show a text or a string but that's not very useful is it you know we want to be able to show more complex information and that's where the concept of templates comes in so templates are basically sort of like a combination of HTML and python and you can use templates to show more complex information and you see an example of that in a minute okay so to demonstrate how you can use template let me just create a template here to do the first create a new folder within our root directory edit dojo by typing in mkdir templates and then go into your text editor find the folder that users created templates and then create a new file here we're gonna call this file to do dot HTML and this is gonna be our first template we're gonna keep it really simple for now so within this file just write h 1 this is the to do page and then close h 1 and in this video I'm just gonna assume that you're already familiar with HTML s and once you save this file go back to the 2d folder and then find visit up pi again and here instead of using this simple text to create an HTTP response to send back to the browser we can use that template to create an HTTP response as well and that's going to be more convenient as you'll see later so to do that instead of using this function HTTP response we're gonna use this function instead render so make sure you have this line to import this function render and then into the view write return render requests and then to do dot HTML okay so once you have this if you go back to the browser you should see the content of to do dot HTML right well actually not quite you should actually get this error template does not exist and that's just because a jungle by default doesn't know that it should look for you know templates in this directory templates so we need to tell Django about that and we can do that by going into settings top pie within a dojo project and then in this file find this one templates and then find this section ders so this is going to be the directories Django is going to look for for templates so here just right Oeste path dot join bass der comma templates and this is just concatenating the base directory of this project with this folder templates and once you have that save this file and then go back to your browser and refresh this page you should see this this is the to do page and if you remember this is the content of 2d HTML now to make this you know page more like a to-do list let's add a list we can do that by going into to the HTML and by writing this so here I created a new UL tag and then within that I created to Li tags with these strengths or text temporary to-do item a and temporary to the item B once you save this file and go back to the browser you should be able to see something like this the header waist the list okay after that the next step is going to be to create something called a model models are basically jungle's way of interacting your database and just a quick note here that we're gonna be using SQLite here and to use SQLite you don't have to do anything here because Django you know sets up SQLite by default and here we're gonna create a model representing each to-do item to do that go back to your text editor and then go to the 2d folder and find model pi and here just write class to the item models the model and then content equals models dot text field so this creates a special type of class called to the item and this represents each to-do item in our database and we're going to be able to use this class to interact with the data in our database right now this class only has one attribute can't call the content but it could have you know multiple attributes for example content to represent the content of each item which is gonna be text we could have let's say date created to represent when this item was created and maybe author to represent who created this item but for now let's keep it simple and only have content here okay once you have this in models up PI and once you save this file you're actually not done yet because you still need to tell jungle to make changes to our database so that our database essentially knows about this class we can do that in terminal or shell to do that first write this Python manage that PI make migrations and this creates something called a migration file and once we execute this file we're going to be able to migrate our database to a new state and a migration is basically a term that's used for changing the configurations of our database so this is basically going to tell the database that we have this new model called to-do item to execute it just right manage the PI migrate and then you'll see that at the last slide here applying to the 0 0 0 1 initial that's the migration file that we created and you see a bunch of you know other migrations before that but you can you know just ignore them because they're basically a default migrations from Django and once you run these two commands Python manage the PI Mike make migrations and Python manage the PI migrate you are now ready to start interacting with this model to do that going to our Python shell by typing in Python managed by shell and once you're in this show you need to import our class or our model with from to do the models import to the item and then if you just write to-do item here you see this and this just says you know this is a class that's called to do model start to the item and then to interact with the database you can write for example to the to the item dot objects dot R and this shows all the to-do item objects that exist in our database but none exists right now so you should see something like this this just says it's empty so how can we create to the item objects Python objects and say them save them into our database let me show you here so to create a to-do item object you can write to-do item content equals let's call this permanent to-do item sorry I misspelled permanent permanent to the item a let's just use a single quotes here and this object has been created so if you write a you should see something like this it's a to-do item object but here actually it's not being saved to the database yet to do that you need to write a dot save and this way this object a has been saved to our database let's do the same thing for two more objects okay so here I created two more objects B and C which have the contents permanent to the item B and permanent to the item C and I saved them into the database and I'm calling this permanent because they're gonna be in the database permanently so at this point if you use this command that we saw earlier again you should see something like this you see three objects and this one this one and this one what if we wanted to retrieve one specific object from this set well you can do that by first storing the results of this query into a variable let's say all to do items and then if you write all to do items square bracket 0 this is going to retrieve the first object in this query set so write that and press Enter you should see this but you know it's kind of hard to see which one we are referring to right so to find that you can just do all to the items square bracket 0 dot content to show the content of this particular object and this is permanent to-do item a let's do the same thing for the two other items so if we do square brackets 1 dot content you should see this and if you do to that content you should see this permanent to-do item C okay and what if we wanted to delete one of these objects from our database for example at this one permanent to-do item C or all to the items square brackets - well tilde you can use the delete function just like that after running that if you run you know this command again you should only see these two objects because one of them has been deleted now you know in the results of this command to do items or objects that all you see these write to-do item to-do item object parentheses one but what's this number well it's the unique ID for each object that jungle automatically creates for each object so if you retrieve you know the first object right here by writing this one that we used earlier all to the item square bracket zero you can retrieve attributes from it just like that for example the content attribute but another attribute that Django automatically creates for this object is ID it's one as you can see right here using this ID actually there's a way to retrieve a specific object from our database using an ID so if you wanna for example retrieve the to-do item object with the ID one you can write to do item dot objects dot get ID equals one and this is actually gonna create a query to access this particular object in our database and the result is this and then if you store this result and let's say temp for temporary and then if you type temp dot content you see that it's permanent to do item a now I think watching you know just this video is potentially confusing you know just looking at these commands so it's really best to you know create try creating a bunch of objects yourself and try saving them and you know try deleting some of them and you know try to get a feel of how this whole thing works anyway in my particular environment we have two objects in our database stored their IDs are one and two but their contents are permanent to do item a and permanent to do item B okay and what if we wanted to show all of those items you know these two items in our website well to do that we need to go back to the view stop pie file that we were editing earlier it's view stop pie within that 2d folder in this file first at this line from the models import to-do item and just in case you're not familiar with the syntax dot models just means that we want to import you know this function to do this class to the item from this file model stop PI within the same folder as this well visit up PI and then once you import that in the view function we're gonna say once we get this requests then first retrieve all the to-do items from our database to do that of course we can write to the item the objects that are and then we're going to store the result of that query into this variable called all to-do items and then we want to be able to pass this information pass this list of to-do items into the render function you can do that by adding a third argument to this function and that third argument is gonna be this as you can see this is a dictionary whose key is the string or items and value is all to-do items this is basically saying we want to pass this information all to-do items into the render function we're gonna call that all items and here's another way to think about it conceptually we're passing you know this information all to-do items into our template to do the HTML so that the template has visibility over that information and then when we refer to that item or you know this list of items we're gonna use this name that we gave ourselves all items okay once you have that we want to be able to show the list of to-do items in our template so go to the template file to do the HTML in the template folder and then let's comment out the list we had earlier and then create a new list year create ul tag and then within this ul tag write this so here I wrote curly brackets percentage for to-do item in all items so like we saw earlier all items is what we are using here to refer to the list of items that we retrieved earlier from our database so we're essentially running a type of for loop here but in a special way so here we're saying you know for each to-do item in all items create this tag at this Li tag and the content of this tag is gonna be this to-do item content and note that we are using double curly brackets here and then the for loop here so this way we should be able to show what we saw earlier in our terminal per min to the RMA and permanent to the item B so let's see if it works go back to your browser and then go to the URL that we saw earlier and refresh it okay it worked it says permanent to-do item a and permanent to do to the item B okay the next step is to add a form for adding a new to-do item right over here to do that go back to to the HTML and then add this okay so as you can see I added a bunch of stuff here let me try and explain it carefully first of all I added a new form a new form tag here and then this form tag is gonna go to this URL and the root URL slash ad to do slash so this is basically gonna send an HTTP request to this URL and then there are two major types of HTTP requests get and post but when we want to you know create something in our database we need to use post here and not get and this tag right here is what we need to add in jungle for just for security purposes and then in the form tag we have two input tags the first one is the texts type because we need to type in text to specify you know what we want to put into our new to-do item and we're calling this item we're calling this input content and then the next input tag the type of this one is gonna be submit this is gonna be the submit button and then it's gonna have the add value because it's gonna have you know the text that says add on the button so just to clarify this a little bit more when the user submits this form that you're gonna see you later the users browser sends a post request to this URL the root URL slash add to this slash with the data inside this form and you know this particular data has only one attribute here content that's gonna be texts so let's see how this form actually looks on our browser by going back to the browser or saving the file go back to the browser and then refresh the browser you should see something like this and actually you know you are able to submit it already but when you're submitted you're just gonna get an error because you know jungle doesn't know how to deal with this particular request so let's go back let's go to view stop pie to handle that so this is again Vista pie within a 2d folder so to handle that post we're gonna create a new view here we're gonna call it add to do so just like before take requests as the input and then what we want to do here is we want to create a new to-do item object and then we want to save it and once you save that object we want to redirect the browser to the original URL that the user came from and that's gonna be slash to do slash so let's do it 1.1 first we need to retrieve the content from the post request the user sent us we can do that with this requests that posts square brackets contents so this says in the post requests that we received find the attribute that has the name content so we can save this in a new variable let's call it C and then using this we can create a new item let's call it a new item and then we can create it with to-do item content equals C like we saw earlier actually since this is pretty short you know these two statements we can combine them just like that and after that save this item with new item save and then the last step is you know redirect the browser 2/2 2/1 do this with returned HTTP response redirect parenthesis / to the slash and actually we don't have this function imported in this particular file yet so do that with this from Django the HTTP import HTTP response and HTTP response redirect actually we're not using HTTP response functional here so let's just delete that and then we have just this and after creating this view we need to map the URL this post request will be sent to this view let's do that in our URL stub pie file so in your patterns create a new path so we're gonna map add to do to the add to do function and also import the add to the function here actually since we're you know sort of repeating ourselves I think we can just combine these two statements to just this let's see if it works so you know make sure you save all the files go back to the browser refresh the page oops I think I made a mistake somewhere let's see if we can find that mistake so what I would do in this situation is I would just go back to the terminal and you know find a tab that's running the server and you know find the relevant part of this error you know there's a lot of stuff here but I think it's this one from Django the HTTP import HTTP response redirect cannot import name this from Django HTTP so maybe I you know I spelled it wrong or something let me just copy this and then you know just cool it okay so just looking at you know this part of the Google result page you can see that I probably a miss type this somewhere oh yeah instead of writing HTTP response redirect I wrote HTTP response redirect let's fix that and see if that fixes everything go back to you know the editor go to view stop I think and then fix that and then fix this part too okay hopefully that's gonna work let's see refresh the to do page and then okay that's that's working and then try adding a new item here that's it let's say new item see click add and it's working new item has me added that's add new item again Urd and you you item ah all right it's all working okay once that's working the next step after this actually the final step is to add the delete button for each to-do item and this is actually going to be kind of similar to this ad form you see why in a second so go back to our editor and then go to to do the HTML let's just you know sort of use this as a template for our delete form so in this you know for loop we're creating the Li tags within this Li tag this form and then we don't need the text input because we only need to say delete you know it's gonna have a single button here so change the add value to delete and then change the action or that URL that this request is going to be sent to to delete to do and jungle will need to know which item that we want to delete we can tell Django about that by writing this so delete to do slash to do item dot ID and again this is in double square brackets so this part is going to be replaced with this particular to-do items ID so for example if this to-do items ID is one this request is gonna be sent to slash delete to do slash one and then I think I should add a slash at the end to the method is still gonna be posts we're still gonna have this CRF token for security purposes and then the input type is the same submit and the value is going to be delete so let's first see how this looks by saving this file going back to the same page refreshing the page and this is pretty ugly let's fix that by fixing the style of this form so what I would do here is I would add a you know break line here just to make it easier to look and then I would add a style eCos display:inline so just to make sure that style echoes display column inline semicolon and this should fix the style issue go back to the page refresh yeah it's much better now and if I click this you know it's gonna give us an error again because jungle doesn't know how to handle this particular URL yet for example delete to do this last one okay let's fix that by first going to URL stop I within any dojo project so add a new pass here after add to do we're gonna call this delete to do for the URL and here what we want to say is we want to say if we get a delete to this slash one you know send that information to the delete to the function that we're gonna create later and then if we get to send that to the Lee - - - we can do that with this syntax in colon to do ID and then close this so this says look for an integer after delete to do slash and then give that name give that integer a name and that name is going to be to do ID and then we're gonna send that information to the delete to do view or the delete to the function that we're gonna create later we're gonna create it in view stop PI and to do so we're gonna import it here - so once you have that go to views that PI and then create a new function here and that's gonna be called of course delete to do and here let's go back to URL stop by for a second like we saw earlier we had you know delete to do slash an integer which we called to do ID and actually we can use this name to do ID in our function we have access to this integer as one of the arguments in the delay to the function essentially so once you have that the first step is to select or retrieve the 2d item object with this ID to do ID we can do that with to-do item dot objects dark get ID equals to do ID and then let's save this item in a variable called let's say item to delete and since we want to delete that will just write item to delete that delete parenthesis and after that just redirect the browser to the original URL slash to do slash okay so if I typed everything correctly this time you know everything should work fine so let's see if it works go back to the browser of course and they refresh let's click this delete button okay it looks like it's working it's deleting these items and then I can add more items more sorry more and then even more and delete any of these items pretty neat right so obviously you know this to-do app has a lot of problems for example you know it doesn't have any sense of users so all the users share the you know single to-do app which is kind of stupid and also there is no error handling here and actually when you add an item or when you delete an item it refreshes you know the whole page which is you know kind of wasteful so you know obviously there are a lot of problems but I think I wanted to you know start with this project because I wanted to give you sort of an idea of how to you know start working with Django and I wanted to give you sort of an overview of how junk works okay and that's pretty much all I wanted to show in this video in the next video I'm thinking of implementing you know the signing with Twitter function but we'll see and if you're looking for you know extra resources for jungle I recommend to one is you know something I already mentioned in my previous videos it's called jungle for beginners it's a book that recommend it's at CS no soda io / DJ you can also find the free sample chapters at Django for beginners calm and then another piece of resource that I highly recommend you know which is a little bit more advanced I would say is the official and Django tutorial on poles you can just look for it by I think just by searching for Django tutorial maybe poles you can see you know I'm not good at spelling here but Google knows and then just click this link and you know it's really good it's actually um kind of slow and it goes through a lot of stuff but I like how you know they break down things you know to smaller components as opposed to actually this book Django for beginners but I think the best way to learn something you know not just jungle but any technology is to use you know a combination of multiple resources like my videos and maybe this book and maybe this tutorial so that's how I would you know go about learning Django and you know another thing I wanted to mention is first of all actually two things I want to mention first of all if you get stuck you know at any point in this video you know if you try to follow it you should go to siesta io / edit to join our slack channel to ask each other questions I think if you ask you no questions in the comment section you might get an answer but you know it's much more likely to get an answer if you ask questions on the slack Channel and the second thing I wanted to mention is that this video is actually part of a series of videos I recently started where I try to you know actually start an actual startup you can find you know the whole playlist at CS da da da io / start or in the description below in case you're curious anyway thank you guys always for watching my videos and I'll see you guys in the next one

Channel: CS Dojo

Views: 273,719

Rating: 4.9274721 out of 5

Keywords: django todo app, django todo list app, to-do list app, django to-do, python todo app, python to-do app tutorial, django todo app tutorial, django todo-app tutorial, edit dojo, cs dojo, build a startup, startup, entrepreneurship, javascript, html, css

Id: ovql0Ui3n_I

Length: 35min 46sec (2146 seconds)

Published: Fri Nov 02 2018