Django and React Tutorial // 2 - Handing Post Requests

welcome to part two of the series for a simple introduction to Django and react in the last video I showed you how you could set up Django and react to create a simple application that uses an API more specifically the Django rest framework which provides that for us and then react as the front-end and so thank you to everybody who commented on the video and just in general asked questions about it so in this video just I decided to expand a little bit more on it if you haven't watched the last video then please do so the link is in the description of this video and at the end of the video I gave you a challenge which was to create the create API view and the update API view so at the moment all we have is a list API view and a retrieve API view meaning you can only list out the articles and list the detail or view the detail of an article a specific article so in this one we're going to expand on that and add the create view and the update for you and so let's get started with that so here I am on github at the just Django account and I've gone to the DJ react repository and here if you click on clone or download you can see the link to this repository here and just copy that and Here I am inside Visual Studio code and here I'm just going to open up a terminal and I'm going to make a directory which we'll just call DJ react I'm going to change into that directory and initiate it as a git repository if you don't have get installed you could also just download this as a zip folder and then get started from that what I'm going to do is I'm going to say git remote add origin and I'm going to paste that link there and then I'm going to say get pull origin master so this will pull that repository into this directory and now if we list everything out we can see we have the readme the backend the front end and this thumbnail and so now I'm going to remove the git repository because we have all the files so I'm going to say RM dash RF dot git and now if I were to say change directory into dot get this work if there was if this actually was a good repository and you can see it says here no such file or directory so that means we removed the repository so now we've got all our files and we're ready to get started so inside here I'm going to navigate into the backend and I'm going to create a virtual environment so that we can install our dependencies and it's just clear everything here so we've got our env I'm going to activate that with sauce env button activate and then I will say put install - our requirements dot txt so that will install Django the Django rest framework and all the other requirements for the backend and with that installed you'll want to open up another terminal on your machine I've just got one here open and I'm going to navigate into the front-end inside our application and go into GUI and if we listen to everything in there then we have the readme the package.json file so that's basically the equivalent of our requirements so what I'm going to do is I'm going to say npm install and that will install react and all the other packages that we need for the front-end great so let's just clear this out and then we could run NPM start so this will start the front-end and then this will open up another tab which should have our localhost let's just see if we need to do this manually localhost there and there we go we just don't have any dancer because our back-end isn't running it so let's go inside here I'll just clear this out and we're going to change into source and then run Python manage the pie run server so now we've got the backend that is running and that's just now just increase the settings there maybe just one heart great so now if we refresh our application now we can see that the data is coming through and so now I'm just going to close the github tab and I'm going to open the Django rest framework website in another tab here and I'm going to go to API guide this drop down and just go to the generic views and so this is what we were using in the previous video to handle our API so we were using the list API view and we were using the retrieve API be so it's quite important to understand that what it says here literally defines what this type of view is so a list API view is used for read-only endpoints to represent a collection of model instances so that then then it tells us provides a get method handler that means you can't post here so you can't create a form that's going to post to the list API view it's not going to work because this is a list view it's only provides a get method if you want to post to the API you need to make sure that you're using a method that handles post requests so for example this to create API view provides a get and a post method handlers that means that you could post to the list create API view all you would have to do is import that change the list view to this one and then you could post to it there you go but so we're gonna just handle things a little bit differently so yeah if we go to back-end and our source and go to articles API and then views you can see we have the article list view and the article detail view now let's actually just make sure that our vyas code is in the right place so if we oh man let's make sure that we put it in our project there we go so now we get rid of those errors and so you can see we have the article list to you the article detail view and I'm actually just going to copy this view the entire view and just paste it and this is going to be the article create view so if we want just purely a create view they let's look in the API documentation we go to create API view and this provides a post method handout so only this method yet so I'm going to paste that there and I'm going to import this slightly differently just like that so now we have the article create view we especially specify everything the same as the other views here and notice that we are repeating ourselves by doing this so we will fix this make it a lot clean in the end but now we'll need to register the article create view inside our URLs so we will also then just import everything a little bit better here and we're going to specify the article create view in another path so I'm just going to paste that there and instead of primary key it it's going to be create with a slash and I'm actually going to put that above the primary key just so we don't get any errors on that and we need to specify the create view as that view that must handle it so we have the server that's running so that's actually see if we go to the admin of our back-end and we just log in so that we can see everything up let's make sure we get that right and let's go to API then you can see we have these two articles at the moment and if I go to API slash create now you can see we get a different view that's being displayed here it says article create and it's it's already giving us this area here it says method get' is not allowed and that's because i by pressing into here this is by default I get requests so that's why it's giving us that error but if we were to post something here it gives us this HTML form or we could just use the raw data and put our values inside this json dictionary over here and so that's just for example test this out and post and then we see we get a new ID which is 3 so that that means well if you took a look at the other ones we had 1 and 2 so now we have 3 and we've got a new entry in the list so the article create view works and it was simply just by adding another view that is exactly the same of the other ones except it's special it's specifying the create API view that must handle it so with that logic we can do the same for the next two views which will be the update view and the delete view so that's just the best one update view and delete view and if we go to the generic views we can see here we have destroy API view so we'll get that and then we can get the update API view and then we'll just specify the updates API view inside the article update view and the destroy API view and the article detail to meet view everything remains the same so we're basically these five classes are exactly the same the only difference is that the API view is different that handles it so now we'll copy the article update view and delete view and we'll just bring those into the URLs and then I'm going to take the primary key path and I'm gonna add a comma at the ending and just paste it two more times so the update view needs to take in an instance and as well as the detail view because you have to specify the instance of that view so we'll put slash update and put a slash on the end of that and then we'll put slash delete just like that so meaning if I go to one slash update then it will take us to the update view and if I specify one / delete then it will take us to the delete view so let's check this out let's see if the service working is so let's go to the list view and let's specify slash one and now you can see that it's got the article detail its playing the detail view there and let's go to slash update and now we get a form here but it's again it's saying detail method get' is not allowed because we were getting this view and we get this form so let's update this let's say for example change this like that and then we say put notice that put means we update something so we click put and now we can see that the ID of one has changed that's got the titles change this and the content is for example so let's let's do this again it's just change this again put and then you can see a changes they again so the update view is working and if we just put delete then it takes us to the studied view then there's a red button here to delete it again it tells us the method get' was not allowed so we first delete and are you sure yes I'm sure go to the article list and we only have number two and number three so number one was to meet it great so this is basically our API views or all our API views setup but because we're repeating ourselves horribly there's got to be a better way that we can achieve this and there is so if we go to the documentation you can click on API guide and go to view sets now our view set essentially takes all of this and composite into one view set so set of views that achieves the same thing so let's see how this works so if you go to just look at the example here all they're doing is importing view sets from rest framework and then you can specify the method on a class but if we just scroll down a little bit here then it says yeah it gives us this example of a Rooter so basically you register a Rooter to a certain URL path you specify the view set and then you can specify this base name as an extra parameter as well and then you specify your URL patterns so remember in our URLs we would specify your patterns as a list of paths this time what you do is you set equal to the the routine URLs so essentially Django rest framework is doing all of this behind the scenes so you don't need to specify all of that so let's just take that right there and let's just paste it here at the bottom so this would be the view set so let's grab this view set the user view set and let's go into views now go all the way to the bottom and I'm going to comment all of this and we won't even need any of that as well and all we'll need is the import so let's just see we'll need that import there so from rest framework import view sets and then we'll make this the article view set which inherits from the model view set so we can get rid of that comment there and let me specify the serialize a class the same way that we always have its the article serializer and then the query set is the article objects dot all making sure we import all of that and let's actually take all of those comments there and we'll put them at the bottom and it'll just move this around so I'll keep them there so that you can see how much cleaner this is and I'll move the arrest framework import to the top and there we go so just notice how much cleaner that is nine lines of code that achieves all of that which is quite insane obviously this is because we are we're specifying all the views that you normally would and that's what this Model View said does if you wanted to customize a little bit more than maybe you wouldn't use a view set you would still use the generic views so it's up to you but call this purpose it's much better so we've got that it's going to URL stop I and again I'm going to take I'm going to take that and actually we'll take all of this just taste it and comment that out and now we need to save from articles dot API dot views import the article view set and then that article view set is the view set that we've registered in the router and we'll set the path to API and the base name we'll set as articles and then again we're just setting your L patents equal to the route URLs and that seemed to be it so the server is still working let's test this out let's go to API and it's showing us this area for /a BR / API so let's go to our settings URLs and let's just get rid of up sorry not that let's keep that there in the URL of our API we'll set that just to an empty string so now if we refresh this and there we go so our API path is still working and we see that we get the list of them and notice now how we have a post all this create form that's displaying on the article list and that wasn't showing before before we had to go to an article / create to see this but now it's on that on this list view which is set up for us so let's go to the detailed view of one of these just to show as well so we go to / one and now you can see that you have the update view the delete view and the retrieve you all in one so meaning what we don't have we don't have the ID of one anymore but if you go to two then you can see that it pre-populates the form we have the delete option we have to get option and the put option so it's basically combined all the different generic views into one type of view that handles all of those and for this tutorial or for the wall for this purpose this is very nice very clean and very simple to work with so we'll actually end the backend tutorial here this is all we needed to do to set up the create view the update for you and the delete view and now you've also seen how you can do it with a view set so let's exit out of the back end and I'm going to move the dot vs code back inside the back end folder and we'll just close all of that and now we'll go into the front end making sure that this is still running we have that still running and so now we if we actually check our front-end just to make sure that it's still working it is so it's still pulling all that data and so now what we want to do is we want to handle all of those views that we've just created in the backend but now in the front end now the way that we're going to handle the front-end views is similar to how it looks here in our back-end of the API so for instance the retrieve API view is merged with the delete view and the update to you so that's what we're going to try and achieve here is by putting a form on the retrieve view that we can update the instance with and then the option to delete it as well and then for the list view we'll try and add a form onto the list view to add more articles as well so obviously you can do this in different ways but this is the way we're going to handle it so that it's similar to the way that it's been displayed right here now immediately the first thing we're going to do is we're going to create a form that we can use to handle the actual creating or updating so let's go to the end d framework and just look for a form component so I'll just click on getting started and if we check you on the left hand side and look for form there we go now we'll check a bunch of these examples and there's actually quite a lot here but a lot of this we won't really need so let's just keep going and we'll most likely just want something like this that has these input place hold something very basic just all it needs to have is just a title and a content field so let's get the code there and I'm going to just copy all of that and we're going to go into the source folder components and we'll create a new file which we'll call the form of jeaious just paste everything and let's get rid of the react dumb part there and if we go to the top we're going to need to import react from react and straight off of this we're not going to need any of this form layout stuff so I'm gonna remove the constructor I'm going to remove the handle form change layout I'm gonna remove this and actually I'm just gonna get the render method there I'll remove the layout there and remove those props remove the radio group remove the props remove the props and remove those props there as well and this looks more or less what we want but let's just change the name here to custom form and then at the bottom will just say export default custom form and let's actually just clean it a little bit so that it's all in one line so this form item okay we don't need that for my item we've got the label for field a which will change to title and then the placeholder will be the title here will change this label to be content will change the placeholder to be into some content something like that and there we go so that's more this what we want we don't need a radio import at the top and so that seems fine now the cuss form component is what's going to be used as the form on the create view and the form on the update view so what we need to do is we need to handle when that form is submitted and because we're using it on more than one view we'll need to specify when we are going to post something and when we're going to put something so to update something so immediately let's just grab this custom form and we'll go into the containers we'll go to the list API view or article list view and let's import actual importantly below the articles so import custom form from components / form and in this custom form I'm just going to place below the articles and I'm gonna give it an h2 here and just say create article and I'm just gonna put some space so put a break statement here and then just paste the custom form component just like this now we're returning multiple elements so we'll need to wrap this in a DOS so we're only returning one element and there we go that's see if this seems to be running so let's go to the app and if we refresh now we can see we have this formula so create an article title content if you submit nothing happens though so but if we do type that automatic two-way binding is already handled for us so that's quite nice so now to actually handle the submitting we need to go to this button type and need to specify the HTML let's actually make sure that write HTML type and set that equal to submit so this type is the styling and then HTML type is this meaning that it is a submit type of button so that's quite important like now if we were to test this art just refresh this and if we click Submit then okay so nothing's nothing's happening still but this will help in the long run so let's actually just handle the submit now so we'll just go and define a method this needs to be on a custom form though I'm actually just gonna tab everything in a little bit there we go so here I'm going to specify the handle form submit method so we'll say handle form submit and this is going to take an event and it's going to perform some kind of function and then we can take the method and we will specify the on submit property of the form to be the start handle form submit now to get the values that are coming through in these inputs we first need to give them names so we'll specify the name of the first one to be title and I'm just going to copy that and add the second name to be content so this is very important because we need the name of an input so that we can get it when the form is being submitted and the way we will do that as well say the constant title equals to the event target elements and then we put the name of the element that we want to get so for example title and we say dot value we have to paste this you can get the content the same way by specifying content as the name of the input that you want to get and let's just say console.log title content and we need to we need to say event dot prevent default so that the form does not submit and the page doesn't reload and so now if we just refresh us to make sure and I'm just going to inspect here and go to the console so we can see it being logged out so let's say test and all that submit and then you can see it come through every go so you see test and all of that so that is the title there's content that's coming through on the form so inform is working now let's see if we can add the form to the detail view so if I go to a detail view this is all that's being rendered out at the moment now let's add the option here to update the this actual instance as well so if we go back into the article detail compare container then we'll basically want to do the same thing that we did right here so we'll take the custom form input and just paste that there and then the custom form I'm going to add at the bottom here after the card and just say custom form and then wrap this all in a dope and there we go so now we refresh this now we get this form and we can test it out as well and just submit and then it's still being locked out so the component itself works we're using the form twice and all we're doing is taking that form and importing it into the different views that we that we have the article list view and the detail view now when we click the submit button what is actually going to happen we wanted to post or we wanted to put now we'll need to specify on this component when it needs to post and when it needs to put because they're completely different things and each view only handles one of those methods so we can't just post to a put API view it's not going to work so let's go into the form component and what I'm going to do is I'm going to say that the handle form submit takes in another parameter which is the request type or you could say request method whatever you want and this request type is either going to be post like that or it's going to be put so that's what's going to be inputted or used as one of the values or this request type parameter so inside the handle form submit I'm actually going to remove the console log and I'm going to call a switch sake statement and that is going to be on the request type and we're going to put two cases the first one is for post and then we'll do some stuff there and then the second case is for put and then we'll do some stuff there as well now we're going to use Axios to handle the requests so that's import access get the top tell us their imports Axios from Axios and there we go now if it's a post request then we want to we want access to post so we would say Axios post and then we need to put the URL so that would be to our local host and port 8000 slash api and there we go and then the second parameter would just be the doctor that would being they were posting through so this would be the title and that would be the title that we grabbed here this constant title and then the content is the content that we just grabbed from the event target yeah so these two parameters or these two values the title my content are then being posted in this Axios post request and then we could just say then that the response console or blog response and then just catch the arrows or say cabs era and say console dot error that error there you go and I'm going to copy that entire Axios request and post it will paste it for the put view here or the put method and instead of post it's going to be put axial put and now we don't we aren't put to this URL because the put method needs then needs an instance to actually post too so that means that this would have to be slash one two three whatever the ID is of the article that we're viewing right now so I'm going to just add this dynamically and I'm gonna change that to tell the sign I'm not told about the slightly weird inverted comedy and inside there I'm going to put article ID which means this somehow needs to be handled or actually placed inside our method so we're gonna add this as another parameter and say article ID now if it's a post request then the article ID doesn't exist that's fine you just put null if it's a put request then the article ID is coming through and the request type would be put so then it would grab that article ID that's being submitted in the form now the title is the same the content is the same because it's grabbing the the values from the form the same way and I'm gonna leave the vain and catchy as well and so now I'll just add a slash on the end of this URL so that this is the end of it's there and that is that that is our handle form submit all it's doing is checking that the request type is either post or put and then depending on which one is being handled then it would either post or put and so with that we can then go down here to the form and instead of calling the this not handle form submit we now need to call this as an anonymous function so I'm going to say with this event so this this syntax here means call this as an anonymous function and it's going to call this to handle form submit and it takes in the event and it takes in the request type and the article ID so I'm actually just going to just open this over multiple lines so it takes the event and then we need to somehow we need to pass in the request type and we need to pass in the article ID now the way that we're going to do that is we're going to use the props of this component so I'm going to save this table props type and this dot props dot article ID so basically this means that when we specify this custom form component we need to specify the request type and the article ID as two of the props values so for example on the article list view here we are specifying the custom form component and then we could come here and say request type equals two and because this is on the article ListView this would be post and then the article ID would equal to not so there's no article ID although you could enter one because it's it's first going to check the request type so it doesn't actually matter what the article ID is but because we don't have an article ID we'll make it null and then the same thing for the detail view we come here with specify a request type and set that equal to put and then specify the article ID equal to something and this is actually the same thing here this article ID so I'm just going to copy that statement there the star prop stop match parameters article ID now the last little touch that I'm going to add is just to display the value here the submit texture we're going to output this dynamically as well so we'll get rid of that and we're going to make it a property on the form as well so we'll say this dot props dot button text and button text will define on the component here and we'll set it equal to what this will be create because we're on the create form and then here this would be update that's let's see if everything is working it's failing it's saying error is not defining form so let's just go up here and this is going to be all actually let's make this error to be more specific and if we check that it says it was still not to find and that's coming from over there so error and that should be all good now so let's just check that this is working okay so it is displaying the form stall we're getting this little area here which is saying expected a default case and expected a break statement so to fix the break statement I'm just going to add a return in front of the Axios so that should fix that part there and then the expected a default case I'm not going to handle a default case because they well they should only be one of the two so I'm just going to leave it like that and so let's go to the home view and let's try test this out so let's say testing front end or yeah if I say create now it says yeah post 403 is for such forbidden and so this is an error that's coming from our back-end and that's because we are not we don't have the permission to post here and so this is more of an authentication issue so the reason for this is because if we go into the backend source DJ react settings and go all the way to the bottom we have your default permission classes and it's any arrests frame without permissions dot Django model permissions or anonymous read-only so this means that you have to be authenticated or you only get read-only and right now we are not authenticated with the server so that means that we only get the read-only permission and hence we can't post to the server well what I'm going to do is I'm going to comment that out and I'm going to add a different permission here obviously this is not something that you would want to do but just to make it work for the time being then that's what we'll do handling with indication is a completely different thing which we'll probably hand show in a future video so if we go to the documentation here and if we go to permissions then we can read up a whole bunch of stuff on permissions and so if we go all the way down it says you're setting the permission policy so for example is authenticated would mean you have to be authenticated and then this is the one we're going to use for now which is rest framework top permissions that allow any so that means well allow any requests so I'm gonna actually use that over here and so let's go back to our application let's just refresh this and let's say let's actually check our API here so we still only have these two and I'm going to say testing again click create and then you can see here we get this data and it says ideas for content and the title and if we go into our API key here on the server now we can see we have this new so it's working we are posting from our front end and it's creating an entry on our back end but it's not updating the display here and that's because we are currently preventing the default event from occurring and so if we just remove this then it's going to execute all of this and then the server will refresh because that's what happens when you have a form that's submitted so in this case we we actually do want the server or do want the page to reload we're not housing any state that's that valuable so it's okay if the page reloads but what you could also do is you could just store all the articles in the state which we are in the article list view and then just add it to the state and when they do happen to reload the page then the state would go back to zero but because it's reloading the page or within call the component did mark method and get all those articles anyway so that's also something you could do if you really don't want the page to reload but for this purpose it's fine so let's just test this again to see it work properly so we could create the page reloads and then we get this number two here and if we click that and it says test this again and there we go refresh this and there it is so the create view is working now let's treat let's test out the update view so if I go to this detail view slash five now we want to test updating it so let's try that we'll say see if this works okay so watch this text here let's see if it works see if this works there we go so the create view and update - you are now working and we've got a fully working crud application we can create we can update we can retrieve but we just haven't sorted the delete method yet and that's not that difficult at all so this will also be on the retrieve you will just add a button here which says delete and so the simplest way to do that would basically be to actually just be repeating this form so adding another form and so the simplest way to achieve this just be to add another form component here and inside the form it's just going to have one button so I'm going to say button and it's going to have an HTML type of submit and it's going to say delete and we're just going to specify the type which is basically the styling so we'll just say danger and see if that's one of them and we're going to need this button that's imported so we'll just come in front here so button and card see if that's working now now you've got delete they are just showing there and if we if we click at the end nothing's going to happen because form isn't being handled so let's say upon submits equals to and this is just going to be the stuff handled delete and we'll just take that method a handle delete that's going to take event and it's going to basically do everything that the component did mark method does except it's going to call access delete and it's going to go to that article ID and then we don't need to set the state so that's all that that needs to achieve so if we test this out let's see if we just go and list everything and go to page two so we've only got four so if we delete this one see if this works and let's click the meet now the page is not reloading and it's not redirecting us back to the list for you so that's something that you want to think about how to handle and in terms of our state that is also something that we can see it's becoming a bit of a problem here but one of the ways that we can handle this is by using the reactive routed on package so we could just say this top pops daaad history and then side push to slash so meaning if this page reloads we click delete and it redirects us back to the ListView now that's one way that we could do this but the page isn't reloading by doing that so if we go to this item for example click delete it read navigates us back here it did delete it in the database if we refresh this there's only one left but we'd have to read it fresh the page in order to see that now you could use something like this dot force update and then that would force the page to reload but it gets a bit messy this way and so this is where I'm gonna leave this video to make you think a little bit about this you probably want to look at something called react Redux and that's something that will probably integrate into this application in some coming videos but if you enjoyed what you've seen so far and you felt like you've learned something new then please leave a comment down below and thanks for watching

Channel: JustDjango

Views: 59,338

Keywords: django, django tutorial, python django, python, Django Web Framework (Software), django project, Python, python programming, developer, programmer, learn to code, django tutorial for beginners, python 3, python 3.5, django python, python tutorial, tutorial, how to python django, web design, web development, installing django on mac, install django with virtualenv, django 2.0 tutorial, react, react tutorial, react 16 tutorial, vscode, visual studio code

Id: w-QJiQwlZzU

Length: 43min 51sec (2631 seconds)

Published: Thu Aug 09 2018