Build a Todo app with Django and React #1 - Django and React for Beginners.

hi everyone sonu's video I'm going to show you how to build a to-do application using Django and reacts GS instance I'm going to show you how this to do application works again so right I've come over here and updated giving to do I could update it I could just say blend python so we're trying to change the entrance updated giving to do so click on this ad it has been updated in a sense so I can decide to delete I could just come over here and let's play PS5 I could leave this one it has been deleted instead could add more to do I could add more tax I could just say go to okay let's say go to school or okay I said go to school and then click on ADD it has been added instead so I could even Mark a to-do application as completed I could just say these are this this has been completed I could come here and say this has been completed instead so I could even filter this to-do application I could filter them by click here these are filter now if I click on completed I'm going to have only the completed to those instead just click there you can see only have the completed to those on the page so I'm going to show you how to build a to-do application using Django and react it's easy so if you're a beginner if if you need to Jungle or even if you need to react yes don't worry if this tutorial is going to guide you on how to build a to-do application using Django for the back end and react for the front end understand so without further Ado we're getting started right now so in this episode we are going to work on building the restful API using Django in the stand so let's get let's we're going to start that right now again so here's my my vs code my text editor so over you have a simple Django project understands you can see see it's still new you can see we are seeing the we are seeing the Django landing page we create a new project it's in Django instead so currently we still have a fresh Django project and our app is called sudo app and our jungle project is called to do drf in a sense so first of all we're going to go and rest our app inside this settings.bifer you get so just come down here I'm going to add this app inside you're going to add this app called to-do app into the installed apps it's necessary you do this don't forget this just click here and then let's add it seriously what's it called again to do app okay I need speed my computer okay to do app so it's done so once it's done already you need to install some packages for Django rest framework instead so just scroll down to the bottom of your page let me remove all this so Ctrl C I want to break it the sound so just break the server so you need to install the Django restaurant package you're going to say peep install I'm gonna say jungle arrests framework so I think that's people installed jungle rest if you're not I think I spelled something I think I spelled it wrongly so make sure it's jungle rest framework one word instead so enter so you're gonna install the jungle as well package for us give you some time to install so right now it's done installing the package so I can go downstairs we have we can go back to our sensing your pie fives go back come back use settings of Wi-Fi just up here we need to add a package called the rest framework so rest underscore framework so yes so this is once you've done this I think we are done over here so we're going to go down to our models of Pi fi so we're going to create a model let's go to to do model right now second let me just say class I'm gonna say let's say class to do and then we need some models dots model so we are going to have like four Fields here I'm going to call the first one task I'm gonna say again it's gonna be character field models as character field and again we're going to give you the max length of let's say Max length so let's just say 100 for now 100 is even too much just leave it like that so I'm going to call the next two is going to be called completed it's going to be a Boolean feeling instead models of Boolean few Boolean field extension does not have a default value of false instead so okay well that's done I'm gonna add some more Fields I'm going to add the created we are going to add the time this to do was created that's necessary again so gonna be equal to models that date field organize a date field and then I don't just say Auto underscore now add should be equal to true that means whenever these to do is being created it gets the time it's just created instead whenever we continue to do the time which was created is being is picked as the created time in a stand so let's come out here again we're going to add the updated and we're going to set this to modems a date field models.theid feed I'm gonna just see auto underscore now should be equal to true so what this does is I'll never be whenever we update whenever we updated whenever you update the given to do whenever we update that to do we get the time how to do what's updated instead so that's your thing so created means whenever we create a new to do but your blessings will never be update whenever we like update it and already existing to do we use this whenever I creating a new to do this is what we use instead just know that so I cannot just click on the string function so the string function and then just to be the same so we'll contact yourself so let me just say return software task return solve the task so that's it now so we've done this now so the next thing for students we want to go and see realize this model into civilize it right let's do that right away so right now we're going to put a new file in in your in your to-do app we're going to call this five civilizer.power instead so let's create this file now according to serializers.pi see we are Elijah's dot Pi so that's it once has been done so let's realize this app I'm going to let me just put my screen okay so we have to see what else was by far yes I'm gonna just say from rest frame we're going to do some important now see from rest framework rest underscore framework that was wrong okay it's going to import civilizers let's say Imports serializers so that's it now once we've done this now it's also important to do model you understand so let's say from let's say from dots models we're gonna import to do again so important to do and once that's done let's then put it as realized our class I'm gonna say class I'm gonna say to do civilizer to those serializer and we are going to Simply inhabit from civilizer.model civilizers instead just like whatever just like we have for the model form it's just the same way it's civilizers by this our civilizers also work in a stand so I'm gonna assume just say some serializers dot model serializer and says so Syria Eliza so that's it now so I'm going to also the classmates up so we have this meta class here the model is called to do is there and the feeds won't surrender are just three Fields let me just show three fields in the stand so I'm gonna call someone will be at least seven or I'll be ID the ID after the ID what do we have next we have the completed we have the ID we have the task and then what else am I making a mess completed so my keyboard is kind of acting weird today completed so that's the three fields we need now so once you've done this now we need to go let's you know remember we've not made migrations here but we can leave that for now so I've used it while I go down to your views it's not right now let's create a view for a to-do application instead okay maybe you might be wondering why do we just have three Fields here why we have up to five of them remember ID is always there by default right the ID is always here by default so we have five views instead so my point why do we just have three fields yeah what we have we still have two extra few like created and updated so what is this is here like we are only we only want to use the ID the tax and the completed fields of any place from our to-do application we didn't use this created feed and updated field you can see these are to do application this is how it looks like so remember we are now using these two Fields called created and updated we're not using them or just we just added them here just for adding just for just for the normal Convention of creating a to-do model we just added it there but right here since you're not going to use it on the app itself we have no there's no need for us to include these two fields in this serializer hope you understand so that's why it's not the striker let's go to our views so I've used let's create our view so let's start right away I'm going to say to do underscore list the second of the requests parameter there so that's the request there so that's just normally you do your stuff you write your normal function your normal Django function in a sense so this time around what am I going to do now we are going to Simply list out all our to-do's in the stand so we're gonna just come here let's import you're going to say from those models into import to do and stand so come over here we just say to those should be equal to to do.object.org do that object dot all and then we're going to we're going to create a new variable called civilizers see we are Liza should be equal to this so I'm going to go and import this to do civilizer from this file from our students of the five file let's import this class secondly just come over here and say from Dot serializers second meters Imports to do civilizers just before you come and just say should do civilizer and then we are going to add this to those inside of it it's going to say to those and they're going to say many equal to true because remember we can have a lot of to-do's so many should be equal to true so that's it now and right now in socks so it's on a response understand return response okay so now we're going to response that is going to be simply civilizer dot beta so so now I'm going to import this response just come over here just say from rest framework rest underscore framework dot response you need to import response so same guys so once we've done this now I think it should be fine so right now we're going to also import a decorator does not give us that rest framework Loop we need to impose the computer in a sense so we're gonna look the character is called API underscore view so is it so right now is it here just say from rest framework from us underscore framework decorators you need to import API underscore View so also done that now just add that on top of your functions so see apps at API underscore View but they're not just put in so you're going to sports we are going to be supporting to to http methods here on this particular view I don't know what they get and the post remember they get it to just fetch our to-do's they get is meant to fetch all your all your to-do's why the post enables you to create new to-do's so in this function I'm going to support to some method the gets better not actually the post method you understand so can you just may just say gets here and then posts you get so thousand posts so now that's it now everything is fine yeah so before I proceed so what's next thing now so this is our gets request this one gets method over here so I just come over here and say if requests that's the method and it's equal equal to what is happening it's equal equal to get so let's just indent this it's nice that gets requests here so this enables us to get all the to-do's understand our database to get this to those and then we have to serialize it over here and they have to return the response which is this severe lies data instead so now we're going to listen for the Post request so now let's just say at least if we are sure to check if we are on a post request now see because the method is required to post what should we do so now we are working on right now okay try it now want to create to-do's understand remember this one is episode this one is also fetch the giving it to those we already have this helps to fetch out to those why is second method helps to create new to-do's instead so how do you go about it I'm going to create a variable called serializer equal to do civilizer you understand and once you've done this now we're going to say data should be equal to request dot data instead so this data we are trying to create this is what we are trying to pass you understand these are data we are trying to create right you get so we're trying to write numbers trying to be serialize our visa to create a new to do right here right here at this serializing why over here we are serializing understand so on this line here you want for the get request on the 13th line we are civilizing our data to come out in Json form you understand why on this line 17 to create a new to do we have to serialize the data to create a new to do remember that's how it's done instance right here I'm going to just say each civilizer you will see if it is valid you're going to check if it is valid we're going to see if that is valid dot is underscore valid and once it is saved we just created a new to do and it sounds as a safe but still has been creating instance we're going to return a response I'm gonna just say return response modences civilizer the data and Diamond sucks so we've done a instruction written an HTTP message in the stand so so right now let's return a message and HTTP message instead of this video says status so just inside the parenthesis and say status should be equal to status dot http underscore 201 7 and underscore created instead so once we create a new two the once we turn this H3 message that says okay we just created a new to do Windows 10 so we need to import this status is necessary let's import it let's say from rest framework so from rest framework let's underscore framework I'm going to import status necessary so I think that's that so what let's assume let's assume this is not valid so it's going to happen means we turn an error message right if this is not valid you need an error message because right now we have to check for the validity if it is valid we are going to assume it's safe and then return this message but which is not valid when you just written an error message instead so just come here and say with son let's see if it's on I don't know why return the response and then we say civilizers those arrows arrows right and then you can just say status should be equal to status dots http underscore 400 underscore bad requests bad underscore request instead so that is it right now I made a mistake these are all in cups not small these are in cups two two one underscore Creed said instead is also in cups understand so sorry for that underscore request and then this is called arrows so that is it now so once you've done this now you need to create a URL let's go to a URL for this view so let's go find come over here let's create a new file called url.pify urls it was pie five so it was fine now let's say from Django dots URLs since Imports parts and then from in simple diffuse mode you're gonna see from dots I'm gonna say Imports views and then last we're gonna say URL patterns should be equal to you're going to see parts for our Force you are let me just simply just say to this and then let's say views dots to do underscore least so that's it since we're special in scores let's go and start this app this year.by in the project 0.55 so let's do that right away so just go over here and just say we're going to import include and then just at the bottom here just come over here and see parts and then say to the app dots URLs so that's it so let's make migrations remember we've done my question about data you know we've known my data this model yet let's do the migrations now I'm gonna say python manage your spy make migrations so right now let's show you I'm trying to make migrations right away right now where's my grid so say by someone just buy my grades so it's gonna migrated data right away okay it's my great thing so there's this upside it's almost done right now let's create a super user I'm going to say python spy create super user so right here I'm going to call this Spicer cleanse so the password is a simple password so so okay so I've been creating a legend server again so sofa is up and I suffer is about to come up again source is up I'm good as the browser okay our server is up again to the browser now so go down to slash admin so admin is coming up what's happening fast so let's login and then the password so login okay interesting I need to go and studies to do in the models Wi-Fi this to do model let's go and start this right away these are windows 55 so just come over here just say from Dutch models import to do I just here I'm gonna say admin the sites dot register and just let me just saying to do okay perfect now what's next step to the browser refresh this page foreign God pray to God so click on Save so right now we have four to those now so to the browser so let's go down to this remember we have remember now we have our urls and let me make this smaller okay now remember we have our view these reviews now remember this is a URL so now that's going to slash to do so let's see what it looks like over here so let's see one sir seven slash to Do's enter so let's say it looks like so you can see right now you can see if I Want To Do List you can see we have the you can see how they read the book go to school learn to code and start say right now we also have at least down here we could also create our own certificate you need to do application you could put a new to-do from this form at the bottom remember if you remember the views from our views of Wi-Fi from the views here remember we have to support the get and the posts instead so right now if I move this post now to the browser knife I go down to my refresh this page this form disappears so refresh let's see oh I think our server is not our server is still running okay it's almost done so the browser fresh you can see the form is gone you can see so that's why also remember just let's put it back there so that's it again so it's done so with this form we can update a given to do in a stand so let's do that right away so in this form we can create a need to do not or be it's not upbeat but we can create a new to do with this form so right now let's create a new to-do we just copy any of these objects copy it Ctrl C because the form here we paste it there we just come over here I move the ID the ID is going to be also generated instead so you can actually remove this completed equal first because it's going to be on default the it's going to always be false on defaults we have from our models we set us to force okay right now I'm going to just put the taxi I'm going to just say Lane react so let's just say Lane jungle there's a line jungle when you're working with jungle there's a link jungle and then click on post boom is done you can see now we have we have a new to do it's called Lane jungle inside this page right now you can see now we have learn jungle there okay so the ID is six instead so that's how we're able to like Fetch and post data minister so the next thing also can also come retrieving a single to do an Oxo or didn't need to do and lastly once actually they're giving to do so let's check on that right away let's go right now sleep browser now so right here on this same view just go down let's call this to do I'm going to create this we're going to call this I'm gonna say so to do detail I'm gonna say let's go to do underscore detail I'm going to call I'm going to erase from okay sorry twice there so your request is necessary all right okay and last once you also copy this decorator control C paste here but this time around I'm gonna have to get we're going to have gets puts and deletes you could also add patch so let's add patch here I will explain what patch does and then let's add the leads okay your sofa here once you get what to do servers Imports what was it called this so let's import get for for get objects or fall for here should be equal to get object or four four for just a bit to do and I'm gonna put in the PK here I'm gonna get I'm gonna get it to do by its id id equal to PK and I was also done that also next thing the next thing for us to do now is that means to see realizes to doing the serialize it right so right now I'm going to just come over here and say serializer should be equal to to do serializer to do serializer so just now to do civilizer and then we're going to pass into do as the instance understand and then we're gonna assume just say data should be cut to requests dots data because of data so that's it all I've done is already next thing to save instead so just come here and say easy realizer dot is valid save so I must have done this already The Next Step we're going to just simply and they're written a response we don't necessarily return its own response then says serializer.data serializer dot beta so if everything it gives an error if there's a problem and we are going to return an error message yes we're going to return this response up here so see if everything goes well we have to we have we are going to update the to do we are going to update it and then return this error and return this civilizer message instead maybe there's an error we are going to skip this if block and then complete this error message we have over here instead so that's it but right now I was working on the put request on the post request sign talk on the get required I forgot I skipped the get request and then still working on the put request so right now I'm gonna let's right now just up here I just see if requests translated is equal equal to oops so just simply you have to just push this in so this is the put request so let's go I'm going to work on the get request right now so I'm going to explain maybe one what's different between a post request and also a patch request a put requests simply replaces an entire object while the patch requires apps to update a specific field in an object in a stable kind of now what we have here is a patch request because we are simply updating a given we are simply updating the tax field instead this video via the tax field and what you are updating this tax feed again so but okay don't worry it's fine we're going to test both of them but for now let's leave it at sports so let's open the get request now let's just say if requests that's method is equal equal to get so what do we do we have to just say to do it should be equal so I'm gonna simply just okay we already have to do RPA okay we're gonna let me just say civilizer should be equal to to do serializer and they just have to just pass in to do instead so and they were actually done a response that says return response should be serialized out of data so that is it so now this is what they get request is for the puts request we get to assuming just returning the civilizer we are simply we're gonna right now in English equation simply we don't need a specific to do based on what we have here well over here we are simply going to update a specific to do that because check those leave you have to pass in the ink stands we are trying to update so let's work on the delete operator let's let's work on the deletes now so this is going to be L if so I'm going to work another and if now I'm gonna say if requests that's method it is a delete request all the way though is let me just say to do T delete remember we have to do on top up here to do the delete and the return only we are going to Simply turn a response yes copy this CTR C age down there and then we're gonna say status should be equal to statues [Music] dot http 204 underscore no contents so that's it so obviously what we need to go do now is put on say UI and then you come here and let me just say parts they will do to this for slash to this for Slash let us just say Inc then PK and they also done that let's say views dots to do underscore detail so that is it draza is serial name so she's done to the browser let's see since our browser so how it's enthusier so far yeah I just create an email say one two seven you see to do's and then let's pass in an ID let me just call this idea of one I just putting one there and then enter okay let's use that name right make us able to like get a specific to do so I could update this to do I could update it I would just come here and just copy we could delete we can update so just come here okay if I proceed to updating the given to do I want to explain something I want to explain something right now from our function we have to get to this this is the get request over here and this is responsible for what we have up here understand I need the right here we have the post requests this over here this is responsible for what we have for the form we have here and lastly we have we have this delete boxing over here and this is responsible because of what we have here this delete method we have here that's why you can see I just explaining since you can see that's why they have those items on this page on this page yes right now let's updates copy what you see your species now we could just say this we just say read a jungle book read a jungle book I mean just click on put it's going to update this now let's click on the puts button so you can see it has been updated it's now with the Jungle Book okay instead so right now we can only use the push method because that's what we specify in our view function we didn't use the patch so let's continue to patch now and then come over here refresh don't waste my time it's loading okay it's all done just copy again and then paste here we just change this to really react book read a react book click on patch you can see it's done it gets so you can see you're using patch this time that's because I changed this to patch you could come back here and put here puts and make sure you use the put button once you do that instead remember the patch is the patch helps to update a specific field in the objects why the puts method F to replace an entire object just note their differences so that's it now because over we could also come here so let's come over I want to I want to delete a given to do list something I'm just come over here and just say let's let's go to school come over here come out here I'm on holidays I don't go to school now so enter so click on delete is going to be gone now the leads now it's gone so for no content go back to the page now the best confirm that so right now we've been able to delete go to school right now in the eyes are one three four five six can see go to school is gone that's perfect so that's it now you have been able to now write the name of this video I restful API for how to do application so in the next episode I'm going to show you how to use react.js to consume these apis instead so if you enjoyed the video If you learned something please subscribe to my channel cool with Clinton like the video and share with your friends and don't worry I'm going to provide the source code to you guys so you guys can try stuff by yourself so see in the next episode so stay blessed and bye bye

Channel: Code With Clinton

Views: 7,389

Keywords: Todo app with django, todo app with react, todo app with django and react, django and react tutorial for beginners, build a rest API with Django, django rest framework for beginners

Id: uGiTxjN1k9M

Length: 36min 55sec (2215 seconds)

Published: Mon May 22 2023