Django + Ajax Full Tutorial Course

hey what's up guys welcome to this video so this video is a jungle ajax tutorial so it's like a full tutorial where you're gonna go from zero knowledge to building your jungle projects with ajax so we're gonna be talking about two different ways to implement this in your project so the first thing we're gonna be looking into is listing live data in real time now what i mean is as you can see on this page we have this list of data so if i come here and add a new data or a new object to my database without reloading this page it's automatically going to reflect here so it's a real time data and the second one we're going to be looking at is submitting a form in jungle without paid refresh so using ajax we're going to submit a form without refreshing that page now this video is going to be a very good one and you're going to gain a lot from it so let me show you the first thing we're going to build so you can see i have list of this data right here these names right here and this is connected to this model so right here you can see we have one two three four five six one two three four five six now if i add a new profile and i just say um zest two and i say test2rg.com so and i say i am test2 so now when i save you can see that automatically test2 is added here without refreshing this page without touching this tab it's automatically added here so this data is real time it's fetching everything for us in real time so that's the first thing we're going to be building so guys the second thing we're going to be looking into in this tutorial is how to submit a form in django without paid refresh using ajax so i have this form connected to this model let me refresh so you can see i have this particular amount of objects in this model so if i come right here and i just input a name and i say tests name and then right here so i just hit test at g dot com and i can just say i am a test as the bio now if i hit submit you'll see that this page doesn't refresh but it gives me as a lot that new profile created successfully if i come to my database and refresh now you should see that i have a new object with those data that i just import that i just submitted so this is the second thing we're going to be building in this video so i hope you guys really enjoyed this jungle ajax tutorial um having that said let's dive straight into the first part so guys let me just quickly show you what i've done in this project so basically what i just did was to create a new project a new django project and i named it test approach and then in my models of p wi-fi i created a new model named profile and it has three attributes which are named email and bio so i registered this profile model in my admin interface so i can add this and view my model and then right here i just created a new view which is index and then this index just basically renders this index.html page right here so it is in this and there's a html page that we're going to be getting the latest or the live data of everything we have in this model in this profile model so let's get straight into it so the first thing we need to do is to just come into urls.py file and then let's create a new url so i want to create path let's say get users now let's name this get profiles yes so i can just copy this views dot get profiles and then let me name it to get profiles also so now we have this new url which is get profile so this is the url that is going to be like that we're going to send a get request to and then it's going to basically send it back a json response with all the details of that profile model you're going to understand what i mean in a second so let's continue so right here as you can see i put views dot get profiles but as of now we don't have any function like these so let's go ahead and create that so we're just gonna do create a new function use get profile and then for sure requests yeah and then what we just want to do now is to first of all make sure that we have that model we are dealing with want to have it imported so right here you can see from delta models import profile so i already have this profile model right here imported in my views.python so i can then manipulate this and then change it to a json response so what i just want to do now is to say proof something like this equals to profile dot objects [Music] that's all so i think i can name these profiles so profiles equals to profile.object.org so what this is doing is that it is getting a list of all the objects which we have in this profile model so all the data that is registered in there and then what i just want to do when i have this is to return a json response to our front end or to anything that is asking for this particular data but before i can use that json before i can try to change the json response i need to import something from jungle called json response so django have this built-in function which allows you to let's say render your view or this particular function as a json response so i'm just gonna do from django.http import json response like this and then once we have this done it's easy what we just need to do is to say return let's make sure we have that indented return json response which are curly braces and then we're just gonna do profiles should be a list of profiles [Music] dot values and then we add this lack of function so now this is all we just need in the back end part so as you can see what we're just doing is we're accessing this profile model or the object there and we're storing it in this variable called profiles and then while returning a json response and right here should be profiles so right only json response with a variable name of profiles and then it's just a list of these profiles dot values so it's getting the value of everything from here so we can just save this right here now let me come into our index.html so right here as you can see we're not really dealing with the design we don't really want to like pass that or anything what we just want is for our backend for what we want to do to be working so we can just have a simple h1 and it can say lists of live data like this and then now we can have a ul which is a list so now in this list i wanted to just list let's say the names so right here you can see that in this profile we have a name attribute so we just only wanted to list all the names we have in this profile model so for now i'm going to leave this blank so i'm going to use ajax as i said in the beginning of this video everything we're dealing with yes ajax so ul and i'm just going to give you like an id so let me give it like an idea of display here let's say display data so something like this so this is the id and then before we can get started with using ajax we need to make sure that we have jquery imported so to use jquery or ajax you just need this script right here so you can just copy the script and just put it in your code so we need that line of code in our html just so that we can be able to use ajax if you don't have that it won't work so now all we just need to do is to go to script so we're creating a new script a new javascript to be precise and then now we're just gonna do like a new function so we can say the dollar sign as always document [Music] that's ready [Music] and then let's have a function [Music] so right now we got this so let's just put our semicolon again with js so now what we just want to do first of all let's set an interval so this interval is saying how what is the time gap in which you should be requesting for this particular data so see every one second is every two seconds every three seconds so that's why it can get data live because it's requesting for that particular data every second basically so if the data is changed it requests for a new one and then it's as it really updated changes so if that makes sense but let's continue you're going to see the end product of what we are building so let's set interval let's say function [Music] so now let's set it to like a thousand so right here we can just put the semicolon so right here in this function let's use ajax so let's say dollar sign dot ajax and then what we just want to do is to start like this so first of all we put our semicolon again and then we say type so i want to send a request using the get method so you know there is get and post so for these we want to use the get message so now get to this url the url i want to send it to is [Music] the so let's just say url and then we're sending it to the get profiles url so right here in this url this url right here so let's come back and we know that that url is the one linked to this gets profile function which is getting all the data so once we send that it should return a response so now that we are sending uh requesting for all these there's about success function so if it's successful that means if it successfully gets that data let's have a function and then we'll say response and then i just say console dot log it's just print out the response [Music] and then as we are getting if it's successful we also want to know if there was an error even error or code so we also have a function for our error so we'll say function response and then if there is an error what we just want to say we just want to alert and then we can just say error getting data or an error code so now let's save this now that we save this let's come into our browser and hit refresh so this should be up and running in yeah so you can see it says list of live data but obviously it's not showing us those data we need but first of all let's open our developer tools so right here we should see it getting the data in real time so let's see if we come to console right here so yeah as you can see right here in our code we said if it's successful it's a console.log response that means it should show us what is doing the response it should show us what it got from the back end so right here you can see it's getting all the data in real time if i open just one of it you can see um right here you can see that it gets four data from the backend so tom team area and jasper so let me quickly go to our models right here you see that i already have those four so let me it's open and then once i open this you're going to see those four data right here so you can see we have four the first one is tomato.com i am a nice guy you can see that that's the same thing he got here tom tomajimmy.com i am a nice guy so you can see that is getting all this uh data in real time so now let me show you what's pretty cool about this so if i come here profiles and i delete the last one let's say i delete this delete and i hit go so you can see now we have three come here i don't refresh this page but you can see now that it's getting just three objects now it's ready it's in real time any update made right here automatically is affected by the response it's getting right here so now if we're showing all this to our user in the front end whatever is going on on the back end anything updated is what is going to be here that's what is going to make it live so if there's a new data inputted or there's a new data added it's going to reflect here so you can see now we have three we don't have the last one again let me open that quickly when they have tom team and aaron we don't have the last one so now that we know we are getting all this let's just basically show it here that should be the easiest part i think so right here where we have our success function let's just comment that out so instead of doing console.log what we can also do is to display so let's say dollar sign and then we're saying hashtag display now what we are doing is we are getting this this ul tag this list tag using its id so its id is display data so let's come here this should be display data not just display so display data dot empty so what this dot empty does is that first of all make it empty before we do anything so after that we're gonna use a for loop and we're gonna say four in response dot profiles so for all the keys in response.profiles what we just want to do here to save a temp just like a new variable should be equals to and now what we want to do is to just have a new list tag so in here if you know html you know our list tags work so we have the url then inside the url we have the list so we're just looping through these but we want to have it as a list tag so we're going to write a whole new list tag right here so let's just close that list tag and then right here we need to put a double quote and then we just use the addition sign and then we say response response dot profiles key [Music] like this dot name so we're just getting only the name so right here this should totally work so we have this um this line and then what we just need to do is to just append it to this tag yeah so right here we're just gonna do the dollar sign again and then hashtag displaydata dot append so now we want to append it we want to append this temp variable to it temp and then dealing with javascript we add our semicolon so this should work finally now let's go ahead and test our data so let's come here and hit refresh um okay you can see it's not showing let's open up our developer tools [Music] okay so we got an error right here so we have a syntax error right here so it says um at this display display data dot append temp right here there is an error okay invalid yeah so i think it's because of the id in which we gave it so we can just remove data basically and just put only display that should also work same thing so we just do this so let's save it i don't think we should have that error we should get in that error again so let's go back and hit refresh [Music] um we still got that error so some messages have been so in line 25 okay so right here this is where the arrow is occurring so obviously we need to fix something right here so we got these here and then we got this function closing here good and then we got that function closing there everything should be correct and then right here so we don't need this first of all we do not need that and then the dollar sign display so the reason why we have of this error in the first place is just because we didn't add this or double quotes so we could see have used um right here we could have used display iphone data so we can use that if we want but i don't think we need it so let's just make sure we get this fixed so that's why we're having that error as you can see everything is gone now let's hit refresh good now you can see right here that we have tom team and henry everything is here but we have to test it if it's real time before we test it let's make this quite bigger so we can do that here and let's say an h2 should be fine and then let's close the h2 right here so let's hit refresh and then yeah so that's good our data is showing up and then let me put these if i can drag it out yeah right here um this should be this good nope come here so now i want to add a new one yeah so this just to show you that as i hit save it's automatically going to add to the list right here so let me say test user i'll say tests user g.com i am a test user so now let me save right here and then i hit save you can see without even touching this page it is automatically added to the list now that's how powerful ajax is those are useful these two can be when building any project so you can basically integrate these into any project you are building it's a very great tool so i hope you understood what we did in this part and yeah if you did yeah just test it out implement it in your project it's going to be a great one and yeah thank you for watching this session so guys now that i have shown you how to show your data live in real time on your front end now let me show you how to submit a form using ajax without refreshing that page so you know the traditional way of submitting a form is that you set an action in your form tag and then once the submit button is uh has been hit or once you hit the submit button it's gonna take all those data to another page and then perform a specific task but it just can change the way that is so with ajax once we hit submit the page is not going to refresh you are not going to be taken to another page and that form is going to be submitted to the database now that sounds pretty fun right so let's get straight into it so we might still use a similar code to this but first of all let's remove all of these we don't need this again and let's just say submit form something like that and then let's have a new form and then with an input first of all with a label or something like this it's a p tag and we'll say name and then an input type text you gotta have a name name should be name and then an id of name also so we got all this we can just copy paste it let's make sure we got the br tag the next one is email and the last one is bio so let's just make those changes so first of all the type is an email name email id email bio and then id bio so after this we just add last input and the type is the submit button um let me just type it so right here submit so we have all this but before we can you know use this in our ajax or whatever i want to do let's give it some attributes so an id of post form [Music] and then let's also give it a method of posts like this so this should be fine so before we come back here let's first of all go into our urls and then we're gonna have a new url and then let's name this one create [Music] just change these [Music] so one name indeed is create i'll make sure to have a comma and then in our views we also need to have a new function named create so let's have it down here so if create requests um requests [Music] and then now let's just from this form right here everything which has been inputted in this form we want to get it here so what we just want to do is in this function we're going to say if the requests that method [Music] is equals to posts that means if there is a form being submitted in a post method all we just want to do is to get everything that has been submitted so we have the name which is going to be requests dot posts and then name and then we also want to do the same thing for the email which should be email and then want to do the same thing for the bio we should be bio like this so now that we have all these what we just need to do is to say new [Music] new profile should be equals to profile profile and then let's give it these attributes so want to say profile in which name is equals to name and then email is equals to email and then bio is equals to bio so let's come to our modules and make sure that these fields are correct name email and bio which is the same here so now that we have given you this attribute all we just need to do is to say new profile dot save so this is basically going to save this into our profile data so dot save i will give it this and now let's return an http response but first need to import that so http response and then we will return this time we are not returning it as a json so we just return a simple http response and then let's just do something like create a successfully new profile created successfully [Music] created successfully yeah so we have all these right here we can actually test this with normally so let's just let me come here okay so from the last part so yeah it says an error of code because you know we've changed the stuff and everything so let's just refresh this page so now you can see we have a submit button so let's just say a name or just anything that's weird and we can just say a g dot com and then by you i am hey so now once we submit it says follow three forbidding okay so right now because we don't have our csi of token let's come here and let's just input that so we have our csrf underscore token save that we refresh and let's say a name arg.com i say i um a good and we hit submit so now you see every it just come back to this page it's reloaded but we come here and it's refresh okay that didn't work as you can see it didn't register in this profile which is not supposed to be so if we come back here and we pop up in our tummy now right here so as you can see this uh javascript code is still functioning so let's just comment that out we might still refer to that later so that's why i didn't remove it but right here we come to our views.py okay so the reason why that didn't work the first place because we didn't set an action so normally i'm not supposed to set an action but i just want to show you what is going to happen first of all so action to [Music] create create great create so in index we set an action to create so now let's come here and try that again it should work it should totally work now and a name and then i am a so like this and then hit submit so it says new profile created successfully as you can see but you can see it takes me to another page but if i come here i need to refresh yeah we got a new profile object a name aig.com i am a so that's the traditional way of submitting a form we hit submit it take us to a new url called create now we don't want this we want to automate that i want to make that more modern if that's the right word so let's hit refresh and let's come here and remove this action and then this csrf token so we're going to use ajax right now but right here we don't need to set an interval first of all let's remove these of this commenting so right here we don't need to set an interval what we just want to do is say document dot on submit and then that's what we're going to put so we'll say dot on then right here we'll say submit put that there put a comma put another one and then we use the hash tag post form [Music] so to get to that particular form and then we put a comma and then that's where we have the function right here and then here we want to say e so now i can remove all these we don't need these at all we don't need that to be in any function we don't need these yeah so we don't need so yeah so if you understood what we did here i just changed that and i put document that's on i basically use this new function so now as you can see this is still getting data but what we want to do nice to submit a data so first of all the first thing we're going to do is to prevent this page from reloading anytime we hit this submit button so to do that we're just going to say e like this we say it does prevent default so this is going to prevent the page from reloading so when we eat that submit button you ain't gonna take it to no page ain't gonna reload so right here we want to use a post method just to be safe then the url we're taking it to is create so we're taking it to the create url and then the data we are passing so the data is now let's balance well and write this up so the color braces and then we want to take the name and then we're taking it with the dollar sign this brackets hashtag name i'll make sure we have this right here so hashtag name and then dot val which is short form of value so we got that and then let's copy paste and also copy paste so right here what we just need to do is to change this to email so email and then email that file and we change this to bio and then bio bio dot val so right here we need to put comma to avoid that error and then the only thing we just need to add now is to input our cs rf token because we are using a post method so do input and then square brackets name equals to csrf so before these actually we are meant to add like something like this a name so it should be csrf middle we're talking yeah then now put out this here so then from here which is the name equals csrf let me do we're talking the same thing which is going on and then we just close that square brackets closely right here this shouldn't be here good so this is the way it should look like and then we're just gonna put this right here and we're gonna say dot val dot val which is the short form of value so we put a comma just to be saved and then yeah so right here in the success so while successfully taking this to this create url and right here in the sources function we are not doing all these we don't want to do these and i don't think we need this error function first of all let's remove these and then in the sources function just also remove all of these good so right now what we can just do is that this function let's say data so what this data stands for is the response so you can see why returning an http response so this is basically seen as data in the javascript in the front end so whatever is in here which is new profile created successfully is this data so first of all let's test out our code let's hit refresh let's just put some dummy stops right there actually and then rubbish and hit submit okay as you can see nothing happens but i'm very sure that if i open my inspect 2 right here it says face to load these right here we can see that there is a problem so it says value error that's great didn't return an http response it returned none so it didn't return a response first of all let's come here and make see so as you can see the code didn't work it didn't um it didn't return a response so let's sum it again to see so right here you can see there's a problem with it posting to this create so there's a problem with the create here okay so let's see if we come back to our code let's see where the program is coming from so right here is taking it to the create slash create same thing so it's taking it to slash create and it's getting all these values yeah so if you're submitting all the value you should return an http response yeah so this is what yeah it's correct actually this is what it's supposed to be here so let's make sure suppose we got all of these yeah yeah so everything is complete i get yeah then it's returning this so right here in the index.html let's come back to this it's submit so we got this error here which we need to resolve so right here four three four bidding so yeah good right here we can see that is a problem with the ajax we did using the ajax from the beginning okay okay okay okay so let's come back to our page and then in the success let's just have an alert an alert function saying with the data like this let's have an alert function of the data yeah so right here we can put a semicolon we don't need this and then so first of all let's make sure that this is indented well so it's like this paste everything now let's go check this out again [Music] yeah back to our page and then let's hit submit first of all i can see that it still has problems sending accessing this create so obviously the problem is from discrete so everything else is now working perfectly but except for create so we're gonna come back here no not this yeah then urls right here in create the path name is create the name is create and then the views is create so in our index.html right here let's slash create be the problem but here encode anything is possible so okay everything is loading well and we submit so still gives us that error which is very weird let's open it up oh so csrf value referred so the main problem that i've been giving us since was from the csrf token so if we come back here that simply means that something is wrong with this csrf token right here so we say csrf middleware yeah talking lgbt dollar then inputs name should be equals to csrf middleware token and we basically close this the value yeah so the csrf token is correct but the problem is that we ain't added here [Music] so we just gotta do the csrf underscore token yeah and then we give it the percentage sign yeah i guess i guess so let's save this and now let's see we shouldn't have any problem again now let's give it some rubbish in there and then again and then now let's hit submit boom it says new profile creator successfully great and now if we first of all check here new priya okay now we come here and hit refresh you can see we have a new data there so everything we imported here we basically saved here without us having to refresh this page now i can do this multiple amount of times click ok it submit again click ok so now as you can see if i come back here everything was created successfully so this is a very good i'll give it a thumbs up it's a very good way to you know implement into your project as i said in the first part so the things we learned in this video the first one was getting live data the second one is submitting a form without reloading the page now you can implement these two and build like a project you can build like a to-do list where a user is gonna submit a form something like this but you know more fashioned and more organized uh to do list let's say user is gonna write what it wants to do let's say go for a run and then it's gonna hit submit and the page doesn't have to reload and then it's automatically submitted to the back end and you can also use the live data to make sure that the it's getting the data live so immediately a user inputs a new to do let's say go to the gym it automatically shows in the list of to do if it gets what i'm talking about in that project so you can implement this ajax into your project it's a very good picture now i guess we've come to the end of this video i really hope you enjoyed everything we did in this jungle ejects tutorial it's very fun you can try it out now um thank you for coming away with me through the errors through the code and everything if you stick to this part yeah that's good um having that said thank you so much for watching and i guess i'll see you in the next one [Music]

Channel: Code With Tomi

Views: 6,309

Keywords: django, ajax, django ajax, ajax tutorial, ajax full tutorial, django tutorial, django ajax tutorial, django ajax full tutorial, codewithtomi, code with tomi

Id: h1fKWxs7A2c

Length: 46min 40sec (2800 seconds)

Published: Fri Apr 02 2021