Build a Todo App with Django | Django CRUD Tutorial | Django Project for Beginners

hi everyone welcome back again so in this video I'm going to show you how to build a to-do application understand so the main aim of this video is to show you how to implement crude functionalities crude stands for create retrieve update and delete understand so you're going to use a to-do app so I'm going to use a to-do app to show you how crude operations work you understand so right now I want to right now I'm going to show you what the create stands for creat the C stands for create so I'm going to say I'm going to add a new to-do item could just say l to code L to code in understand L to code and once I click on ADD it gets added over here I could decide to I could I could decide to update this title click on this icon and just say learn JavaScript instead once I click on ADD it has been updated I I could I could decide to delete any any any one of them I could just say delete can see it's gone in a stand so could just come over here and say delete if I cancel it takes me back to the page once I click on delete you can see it's going ICI to add more item to update the item so in this video I'm going to show you how to implement a too application like this further Ado we're getting started right now right away I'm going to so right now okay I'm going to go down to my document directory documents so if you don't so if you don't have a virtual environment you have to create one so this is how I create my so I'm going to show you how I create my own virtual environment I'll say peep for first of all I'm going to install the rapper I'm going to say peep install virtual EMV virtual EMV rapper I win i h enter so we're going to wait for that to run so right now it says requirements already satisfi that's because I already have it installed so this you must make sure you have this wrapper installed you only have to install it once in understand so right now I'm going to just come over and say make MK make virtual EMV I'm going to give my virtual environment in name I'm going to call it to do EMV that's my V environment so you can create yours understand so to do EMV that's my so right now my V has been created it has been created and also activated in stand so right need to install jungle inside of it I'm going to say peep make sure make sure you have a virtual environment like this right now it has been created and also activated at the same time through this command called make virtu make virtual AMV then the name of your virtual environment you get so I'm going to come over and say people install jungle enter okay guys already have we already have jungle installed in the virtual environment you understand so don't worry your virtual environment is in the root directory of your computer that's why is being stored you understand go down to your local dis then the user called my user is called Clinton just open it open it can see there a folder called EMV so this EMV folder is the folder that holds all your virtual environment understand so if if you create a virtual environment isn't this method I used your always stored in the user directory of your computer understand so I just show you where it is right now I'm going toate a jungle project right now I'm going to I me just say okay I going to call this I'm going to say jungle mean I'll say start project and I'll call this new too new I have several Todo applications on this pieces I want to separate the names I'm going to say new to do understand so I'm going I'm going to wait for it to get created right now so it has been created now I'm going to go I'm right I'm going to Simply go into this directory called new I'm going to say CD newor too so I'm there now so I'm going to create an app going to call this app P I'm going to call this app to do app going to say python manage as spy start app going to call it to do app enter so that has been done by just put in so if I right now right now I want to check the content of the to-do of the new to-do app to say di can see I have to-do app there man manage spy understand so I'm going to Simply open this folder on vs code using the command code do to open on vs code instead enter that's it so right now it's opened on vs code I need to make this bigger okay okay now I'm going to put my terminal new terminal new terminal there so click on this drop down on the over here click on the drop down select command prompt okay already have our vir environment picks for us that's fine okay now right now I'm going to right now I want to set up our templates understand I'm going to be a bit fast but don't worry I'm going to make sure I cover everything that every important steps in this videos you get so okay so over here our template for so I'm going to this an app called too app I need to register this app in our jungle project now over here just come over here to do app right go down to your install apps in your set pii put to the app there stand okay that's fine next thing now I'm going to set up a view me let me I'm going to set up two views Run for the one of the view is going to be responsible for Co this is gone let just open this okay I'm going I'm going to I'm going to set up two views now one for the own page and one for the delet page understand we are going to have three views actually one for the own page one for the updat SC and one for the delete scene you understand so we going to have three page three views now so I'm going to I'm going to I'm going to set up this views right away so the first view going to say tax list so this view is responsible for listing up all the tax we have understand all this VI is responsible for now simply on render I going to it return a template so I'm going to call this STX list HTML and we're going to have our context later so this are basic stuff for now so same for my delit page just call this task delet for now Just Surrender stuff I'm just going to render some things that's why I'm doing these things let me just say tax delet of HTML and the last one is the updating to be have the same enter okay task updat and going to okay this going to be this tax update is going to happen on this on the it's going to happen on the index page this page you see here it's going to happen on so it's going to be the same template so right now I'm going to create these three templates we have in let's go create them right the way I'm going to create two template not three so new folder make sure it's done inside of your to-do app I'm going to call it template enter so in this folder now I'm going to create two files one is called task list. HTML is called task delets HTML okay that's fine so right now I'm going to copy the I also need my base templates so I'm going to copy from so to make things faster B HTML I'm going to show you guys the source code so don't worry about anything so I just come over here let me just get my base template I guess know what base template is this so This base template presents so I'm right now this base template represent the parent template that other template will in form I move that for now so this best template means so it's simply present the so right now this background you see here is the base this background you can see cuz this background is on all the pages and if I come over here I have the same background understand so on the on the edit page on the updating page have the same background so this background is what we have a base template and some other CDN links we have there okay this is my base template now so can see have the blog content the end blog so right now I'm going to also get my tax list. HTML so take is over here okay so CR a c so I'll paste it here and I'll clear out the rubbish I'll clear out some things that are not supposed to be there so let me just remove some stuff I not needed and I'll explain what was going on so you can see this page is in everything so right now this is a tax l. h HML so this particular code is here is what it's is simply representing this white div this old white box both the upper and the lower one how all this tax list this tax list of HTML is doing so right now remove the for Loop okay now simply I'm not making any mistake Okay contr C paste it okay so we have this now so this part template is in from our base templates can why we have this extend we check closely the extend is there you can see we are extending from the base template so I'm going to do the same for our delete page just get the code from here to make things fast we I share the sod to you guys so paste it here same is happening here I remove this URL for now we don't need it csrf token we going to come back to all this things later so right now this is our delete page this page you see here what's happening okay this page you see here that's what we have here and this page is O everything from the base template so we have our templates set now so right now let's go and configure what was it called the URLs for this this view these views need to have a URL pattern to get to them so I'm going to create a new file inside of to-do app that file is going to be called URLs Pi let me I'm going to SLI to the right so I'll say from jangle URLs import part now say from the current folder we are in import View and they have my URL patterns URL patterns should be yeah going to say part so for the index page we're going to say views doxk list and the name is going to be equal to taxk list tax I list okay let me just look for the for the delete page now I'm going to just simply put some something there I'm going to say delete this this I'm going to use a better URL mapping for that later let just say views dot I even know the name what was the name of the view again tax delete taxk delete and I'll say the name should be just say delete task okay that's fine so now we need to go and let jle know about this URL SP cuz this file did not come in jangle I have to create I have to create it myself so we need to let jangle know about this file so go down to your project share pii this is open okay I make sure you have include imported and from here I just see parts and I'll just come over here it's going to be an empty part for now and I'm going to say include now say to do app. URLs okay that's fine okay and lastly for our static files for our CSS if I go let's let's see how things are so I'm going to open a new currently this is this is currently this is rning this is currently running on Port 8,000 so I'm going to run this new one on Port 8 1,1 understand so we going to say python M SP run server right for I forget that so let's see currently our server is up and running so I'm going to open this right away hold on your control key it says tax HTML does not exist there's a problem now so so you can't find this templat so let's see what we've done wrong tax L tax list. HTML does not exist where could be the where's the problem coming from let's find where the source of the issue is uh line six v p this should not restart render tax le. HTML taxor list d spell I can't find my mistake oh it's my mistake so this should be called templates not templates so that should name it put put the X put an X there that was my mistake templates why the error was there refresh this page Le server it's not detecting anything make sure L's on the server again come on run run run okay it's back enter okay it says tax updates not found okay that's because we have some we have a wrong URL in our templates so I go back to this remember I'm copying I copied from the previous code so we have okay something like this is not supposed let me just put to do item here to do okay this is cly this Q does not exist so let's remove it that why it's complaining don't I'm going to create a new one everything is going to work fine let just put to the it sure is happening my server not picking up the changes sorry on server again okay let's run refresh the server I still complain about something else ly 50 sorry for the this guy is still there with this sorry for the mistakes so let's for sa to run again hope this Arrow disappears for good okay you can see now we have our stuff there oh let's go add our CSS you check Clos in the base. HTML I already have my CSS linked it's linked there but the file does not exist yet this is CSS link already so now we to we also have to Lo static on top and if using this static tag make sure you have static loaded on top so now I'm going to create my CSS inside inside of this to do app I'm going to create a fer called Static and the folder I'm going toate another folder called CSS and again I'm going to create a file called style. CSS so I name it wrongly is we called CSS and of this file I'm going to Simply paste let me copy the St from here CR e contr c bring it down here now paste it to the browser just add reload control F5 enter it's not responding start of cxs it's out to respond B HTML let's make sure nothing is being spelled wrongly that could that could be one of the major caes definitely should work now ouch still not working let's Jo the server again come up come up okay I just can you just come here and try this hold on control and click can now it's working so these are dummy datas they both dummy so let's see our let me just be sure that my let me be sure there is no wrong URL here let me just change it to go to school so just make sure that we have this template set up so then I can focus on the main deal so we have this templates now refresh go down to/ delete enter okay perfect we both set so now it's time for us to start writing the main code now our our temp are working fine so it's time for to start building the stuff so we right now okay I think we our template now so going the models you get so the Modi so now here's my's my structure now the mod is called txk and we have four Fields there title completed created we have created out and updated Arts understand so as for as for the time field the first one is called created Created arts and it's a date time field I can see we have Auto now add equal true that's to say that whenever we create a new to-do item it's going to record the time it was created you understand so after the updated that whenever you try to update a given to-do it's going to record the time it was updated understand so this so This Auto Now simply helps to all the time it to do was actually updated why this first one you see here the time so actually the first time it was created it's going to record the time going to record the time the to do was created first understand so that that's our differences you get so we have that let's make migrations okay now time to migr so once migration is done we're going to create a super user okay give you us name I'm going to call my C I'm going to skip the email put a password you remember for your admin and then just say [Music] yes once you've done that run server again remember we currently running on Port 801 that's because our other application is on Port 8,000 so I think we are good so once you've done the migration and the rest so make sure go to your admin.py inside of your too app of the app go down there and register this model in I'm going to say from do models import so make sure you subscribe make sure you subscribe so in the next video I'm going to show you how to build this stud app using jangu and HTM X so going to be super sliek understand currently so now don't worry just make sure subscribe so you don't so you don't miss the next video so I want to say P task and I'm going to say admin sites. register I'm going to say taxk so now that's fine let's run server again okay okay on server it'sit the Subscribe button if you're getting some value hit the Subscribe button okay I said it should be ad me not I say Ad me it's not no admin that be called admin instead so rning the game so we going to create some to-dos on the jungle admin so over here let go down to slash admin don't waste my time my network is quite slow my internet connection is quite poor so right now just add some too items from your own end add some too item I'm going to Simply pause a video and add some to-do items on my hand okay currently I already added three items I'm going to Simply P out I'm going to Simply bring out this items on the front end to your vi. p uh I need to make this video not too long that's my aim now so I'm going to be a bit fast fuse P okay I'm going to say from Models import task and just here I'll say taask right now I'm TR to fetch out all the tax in our data Bas going to say tax object do all okay and I'm going to pass I'm going to pass into our dictionary say understand so that it SC down to my template the template is called tax list you can see over here we only need one of these guys now so we going is a followup to iterate around the orders okay let me just remove one of it okay I think let me remove the one on cre is fine go now come here and say for task in task now just copy this guy C paste here that's fine go down to your browser I think here okay go down to the index the index page you can see we have three items there that's fine over here just make sure you have tax title ta title so to list that enter perfect so right now we we've been able to list at our task so right now to work on creating txk from this form and start from here I want to make sure I can create my tax from this form so right now I'm going to go down to my I'm going to go down to my code now I'm going to create a new file called [Music] forms.py forms Pi enter and there I me just say from Jungle import forms and I'm going to Simply import my model to see from Models import task and just here think that's it for now I'm going to come down say class say tax form now say forms do model form now say Class Matter and our mod is going to point down to task and the feed I want to Simply render out the feed I want to Simply show on the form is um where is this stuff again um sorry is the title field just this field simple okay I will come over and say field should be equal to title okay so now over here seei now simply import the form so I'm going to say from. form s import task [Music] form so right now remember this form is still on the index page so I'm going to we're going to continue working on the index view stand so just here I'll say form should be equal to txk form that's that so right now this is right now right now this is an empty form so by time you click on this button that means the form is already fued so I'm going to going to listen for a post request so clicking so see if request do method is equal equal to post I me just say form should be equal to tax form and right now it's going to have the data that was passed into the form so we're going to say request or post this is the data that was entered into the form I'm going to say if the form is valid if form is valid Simply Save say form Dove and once the form is saved now I want to Simply redirect to the same index page I'm going to say redirect and I'll come over here Al I'm trying to get the name of the URL we redirecting to that's let me just sorry for a hold up name hey sorry for the delay so I simply to tax L inting to tax L get txk list that's the index page and right now let's put our form into the template make sure you pass your form into the context the form should be into the context don't worry I'm going to give you I'm going to give you guys the source code so this this is our form here okay go down to your tax list. HTML so we have the form over this is our form this is the form here so right now we are getting form from the back end you understand so I'll just come here and say form tile to the browser let's see what it looks like what's happening out Rel load the form is meant to be ugly but it's not the form is looking good what is happening okay that's because I already styled the form sorry sorry okay the form sorry Okay the reason why you seeing that the form the form is not the form is meant to be looking ugly but right now the form is looking fine right that's because this is right that because this is an inage field and in my CSS I already have a style for the input this is can see the input here and it has been styled let's assume there was no style for input on your CS let's assume there was no style for input or let's assume your form is let's assume right now this is our form right here where is it okay this is our form here let's assume in was not styled like this can see remember you can have several input on your page but let's assume you give this particular let's assume you give this particular few specific a different class name so let's assume you did that so you you meant to come here now to start yeah I'm going to I'm going to say my input so I'm me to come over here now and start give this add some styles for your for this form you have right you have to add a Styles in your CSS right I'm going to copy this Styles the reason why the form is looking good is because it is an input field and inut on this already and currently on our CSS there is already styles for our inut why the form is looking good but let's assume there was no in sty on your CSS you're required to give your form a Class A Class name a class you me to St that class I'm going to show you how you're going to apply this class now so now go to your forms P just come here you're going to pick the FI called title going to say forms do character field I'm going to say widgets should be equal to forms text input okay once you done that now I'm going to see just com say attributes should be equal to a dictionary I'm going to say class and that class is me to point down to this class you start for your form I'm going to just call my my input I'm also going to give my form a placeholder Place holder just come here and say enter to do okay the browser refresh you can see now we have our enter to do pleas has been added now you can see so right now before we can add sorry our icons have disappeared my internet is quite poor sorry for that we fix that later okay so right now before you can before the before you can add new to those make sure your form is on a post method and make sure you have csrf to added to it and we good to go now so let's go and add some todos okay I'll just come here and say ride the bike ride the bike add ouch okay we direct was not def finded okay that's from our view py we have use it here return oh it's return redirect return redirect make sure you have redirect imported on top the browser refresh enter oh sorry it's added multiple times let's add one more thing just see watch this is say have na have nap add can see just added have La that's fine so next want to do now is for to update a given to-do item so right now let's work on the updates know to do in stand so okay okay over here so now tax update right I'm going to it a primary key so we're going to get H to do we going to get H to do item by primary key so I want to say task should be equal to task. object. get ID equal to PK and then we're going to have our form again remember form should be equal to tax form ready have that after we've done this again I'm going to say instance I'm trying to refer to the to-do I want to update so the instance is going to be taask understand so after that I'm going to check if the I'm going to check for a post request if request do method it's equal equal to post now say form should be equal to taxk form I'll say instance equal to PK one small and then request do Post once we've done this now I'm going to Simply check if the form is valid e form do is valid we're going to save the form and they're going to return direct to the index page I'm going just copy this and paste here okay so this now we're not done we see going to this going to see happen on the on the index page understand so I'm going to me pass my form here okay done that now it's going to see up on the index page remember so once you've done this requ post to make any mistake instance should be equal to tax rather than not speak um post um what was the problem this line so cently we are seeing this red line I think request post comes first okay yeah I think it's gone fine so right now what we doing here we doing two things remember I weing we weing to implement a crude operation so we've done the create up here so right now doing both retrieve and update on this function instead retrieving and updating we because over retrieving a set to do and right here we trying to update that to do understand so right I'm going to go and change my URL understand so this is My URL I'm going to say task slash I'm going to just put in the PK we have this PK here going say in PK and then I'll say delete okay sorry edit or updates so I'll call this views. taxk updat and then I'll change the name value to txk updates hope this is recording okay that's fine so done that now down to your right now you need to go and add this URL on the pen icon on the detail on the index page so now let's go and add the URL on the pen icon that's on tax list this is the pen icon here there is it so just come here and say I think it's called tax or bit isuse it here [Music] URL txk of beats and passing the remember we have this PK here that PK is coming from our let's say tax ID pass it over [Music] here okay the browser refresh so now click on the pen icon perfect going to say go shopping click on ADD can see that Beed we just say wash the car if I click on ADD has been updated so we able to work on the cree on the create retrieve and updating so right now we just retrieved so if I just change this understand and click here now we've updated right now let's on theet given to do so right now let's on up the given Todo item okay down to your we going to have a similar view just like the updating the to-do it's going to be quite similar so tax delet I'm going have the PK here I'm going to get it to do by your PK I'm going to just simply copy this contr c i paste it here and I'm going to pass this guy into the context I'm going to listen for a post request I'm going to say if request that's method is equal equal to post so what do we do delet I'm going to simply delete it to do understand I'm going to just come here and say txk do delete okay delete right now let's go with our URL now say parts we say task going to pass the PK I say SL delete I say views do STX delete that's not the function now say name should be equal to taxk deletes okay so right now I'm going to pass this guy to the index page this URL tax delete this this is the delete button here okay tax deletes and I'm going to also pass in the ID going say tax do ID in St so think that is it and also on the delete page so let's see what we have so far I refresh this page click on the delete icon okay this is still dummy so on Del on the delete page right now here are you remember we have this where's p p remember we already have this tax in our context so this might page now I'll come here and say this should be tax. title it should not be D me [Music] again T title now and for for and for this delete button we have here this is it is inside of a form that's because that because want to able to like want to be able to like listen for a submit event so I'm going to put method of posts csrf token once we've done this now what's the next thing we are good to go and for this cancel button I want to make sure it direct back to the index page that should be txk list just here URL okay think we are good refresh go back click on was the car cancel okay let's click on let's let's move one of these guys click on delete oh there a problem so I think we needed to redirect once the once the Del has been done that was a mistake redirecting ni return redir to the own page copy this now paste that there okay fast don't waste my time okay click on this read ride a bik let's delete it again let's delete it click on delete can see it's gone have a up delete Okay so we've come to the end of this video I'm been able to build a simple too application in understand so able to implement the crude operations which are the creates retrieve update and delete in understand so if if you gain some value from this video please subscribe to the channel subscribe like the video and don't forget in next in the next video we going to build this same to do app peing jangu and HTM X it's going to be super super Sleek there won't be any form of page reload or page refresh everything everything going to happen so fast you understand so subscribe so you don't have to miss out on the next video so stay blessed and bye-bye

Channel: Code With Clinton

Views: 3,871

Keywords: todoapp with django, django todoapp, django crud, crud operations, django projects for beginners, django

Id: QyqnHvEh2wM

Length: 45min 20sec (2720 seconds)

Published: Mon Nov 13 2023