Add product review and rating with jquery ajax | Django Tutorials | Django eCommerce Website

hi guys welcome to code artisan lab this is our 31st video for django e-commerce website and in this video we will create the ad form section add product review section uh in this in the product detail page okay so in this video we will mainly perform we will create model for the product review we will create for the uh we will create form for the product review we will submit the data with jquery ajax okay and then we will do all we will also do this uh little thing that we will remove the rupees and replace with dollar because we are using the paypal so these four things we are going to implement in this video so let's start to do this so first of all our first step is to create the model so we will open our project go to the main app and open the models dot py file and here i will wrap this text and i will create the model product review okay and class will be product review and this will be model start model okay and then after that so here we will create the four fields the first field will be user that who is submitting the review so this will be a foreign key relationship so i will copy this and replace the user and similarly we will do this for product that which for which product user is submitting the review so here we will add the product foreign key and the next will be review text okay so user can add the review text so this will be text field model start text field and the next thing is review rating okay so rating will be uh the range of the rating is one two five so what here we will do we will create the model start care field and in this we will add choices so the choices will be rating and here we will create the rating and this will be a tuple so here we will create this one comma this will be a text this is text this is value and here we will create the similar four five times two three four five five four three two okay fine now here we are adding the rating and we need to define the max field also so max field equal to 150 okay now let's create the migration so i will stop the server i will create manage dot py make migrations migration spelling is wrong migrations okay okay so now manage dot p y migrate this is some warning i will solve this but not now but i will solve this soon so this is the migrations so p y manage dot p y migrate okay so migration has been applied now let's go to the admins dot py file admin dot py file and here we will get the product review product review i will also wrap it okay so here product review uh but the easy method is you can also from dot uh you can import the all uh you can import the all models and you can define models dot banner models dot category so that that will be easy okay so this is the also uh this is also good method but this is not very sufficient for the if you have lots of models okay so i will prefer to use the star from dot import models okay so here we will add we will create we will copy this and here we will add and this we will add product review so this is the add product review and here we will copy this okay and this will be product review this will be product review admin so what fields we have user product review text so user product review text and review rating okay so these are the fields okay now let's restart the server again run server and we will open the admin panel here we will open the admin panel okay so we have applied the django jet so this is you can see that the login is just modified and now we are going to use here we will go main and here you can see product reviews so when we click on this the model is here we have here we have a rating is one two five okay so we have implemented we have applied our first step okay now we will create the form and show the uh create our form and show in the product detail page so let's go to the program page and here we will open the product detail section so this will be our product detail section okay so this is the profit transaction now we will go to the rating so where is the rating so here review 4.5 now in the h3 i will add anchor class okay and add review and i will add with the help of bootstrap classes i will add button button warning button sm so this will be create a button and i will i will move it right so here i will add float right okay this is looking nice now what we will do okay actually we need this button don't need this anchor actually so button this will be button and we will add this type equal to button okay now we will uh what we will do when we when user click on this then we will show the model in that model we will show the form for submitting the review so i will open the get bootstrap website okay and i will go to because we are using bootstrap 4 so i will go to the documentation and in the documentation i will go to four and here we will get the model okay so model is searching yeah so this is the model so here from here i will copy this thing because i want to launch the model with the help of button so i will copy this thing and after the button i will paste it okay so i will name it product review and similarly i will do this for here product review end okay and how we can treat how we can show the model so the main thing is so if you add this data toggle and data target then the in this data target you will define the id of the model and this is the toggle method with the help of we can click on the button then that will show the model okay so we just need these two so i will copy this and add in the add in the button and the id will be product product review product review and the id same will be go here okay now we will go to the section and when we click on this this will show the model now our next work is to show the form in this model so for showing the form we need to create the form okay so our next step is to create the uh review add form so i will uh i will use the django model form functionality so i will open the forms dot py file and here i will import the model so from dot models import product review okay and here we will create the model a form product we can say simply review add form okay so this will be review ad form class let's say review add and in this we will add forms dot forms dot model form okay now in this we need to define the class meta so i will copy this and here we will define the class meta and the model will be product review and fields are we just need to define two fields review text and what will be review text and review rating okay so review text and review rating and all the things we will add dynamically okay so when we submit this model we will get the product we will get the product id and we will get the current logged in user okay also we need to hide this button if user is not logged in so let's first first create this form then we will hide that button so here we have created this form now we will import this form in the views dot py file so i will go to the views dot py file and i will go to product details section so here we will go to the so where is the product detail let's see detail so here is the product return section and here i will get the review form okay and we need to get this form so from there here review rating not review rating i will copy this and i will paste it here and in the detail section in the details section i will get the form here and i will pass the form here okay so we are fine now so this is the form and we will go to the product at the list p detail page and here we will add form and we will show the form as a table format so i will define the table table table border and pr and in this tr we will define the button and button is submit okay and this will be submit and here we will define the form here we will define the form dot as table okay okay uh we will define the class button button primary okay let's see the form refresh this page okay it's saying something that unknown field address mo something is different models dot py file okay we need to restart the server okay so server is started refresh this page click on this so you can see the form but it is messed up so why it is messed up because we have not closed the h3 so we have to close this okay so we have closed the h3 now we will again review the form so here you can see that okay so we don't need these two buttons we just need to move this submit here so what we will do we will define the td define dd here and define call span 2 and we will define the button here and we will remove the footer refresh this page add review form okay this is fine now so now our next step is okay firstly uh we have created this form now uh we will also mod if we need to also modify the title so modify this title add product let's say add product review okay so this is add product review now we just need to submit this data with the jquery ajax and before submitting this data we need to hide this button if user is not logged in so how we can do that we just need to here what we need to do that we will okay so from this button we are working this so i will add here if user dot is authenticated okay if user dot is authenticated then we will hide this form so from where this is coming and if okay let's refresh this so user is currently logged in because we have logged in as an admin let's log out this from the out button and let's go to the home let's go to this the page and here you can see that we don't have any uh button we don't have any ad review button we can also hide this model this model and we will write this okay now we are safe to add the review form with the help of uh with the user with the logged in user okay now we need to submit the data so first of all we will add this form form method equal to post okay and here we will add form here and here we need to define the csrf token okay so here we have added the form and we have defined the things and now we need to add this form via jquery ajax okay so when we click on this form let's login first login admin okay let's go to the product detail page okay so when we when we submit this this will uh submit the data without reloading the page and model will close okay and we can see the data here okay so now we will submit this data submit this form data with the help of jquery ajax in our database so what we will do first of all we will create the here we will create the action and the action will be url and then we will create save or you can say yes save review okay and in the correspondence we will create the url for this here we will create path and save review and here we will i will copy this and i will add save review okay and then we will add the name save review here okay so now what we what we need to do we need to create a views okay we need to create we will open the views.py file and here we will add view so save review okay so because we are submitting this data so we need to uh we will uh use this method for for the post so here we will add save review and in this we will define request and here we will get the product id okay and we will return the json from this method so i will copy this json and i will paste it here okay and in the data t we will return the value so let's say data we will return true as a boolean boolean true okay so we need to also define the url here here so this will be end and pid okay so what we need to do in the product detail page here we will define data dot id what is data dot id okay and we need to we we also need the user name we also need the user instance so we will get that but before that we need to save this data with the help uh send this data with the help of jquery ajax to that method that we have created uh currently in this method so what we will do here we will submit this form with the help of id i will define the id add form and this is submit okay and now we will add the data here so this is my running jquery jx and in this i will add and document dot ready okay and before this i will add product review save and here we will add end and here we will add add form dot submit so when we submit this then we will add the data so after submitting this we will get the data we will run the ajax actually so dollar dot ajax and here we will pass the data so data will be download this dot serialize okay so this will pass all the data in the form and then the method will be download this dot attribute action okay and what we need to do data method and data type so this will be json okay and then after this i will add the success function and from the success function we will return response i will console this or you can say we will simply [Music] okay we will return the response and in the product detail page we will add here i add here a class ajax response and in this ex response we will check if response dot data dot of if response dot boolean equal equal to true okay then we will add the message in the agex response dot you can say html data has been has been added okay so after submitting this form one thing more so this is submit button when you click on this this will reload the page it will go to this section but we need to we don't want to reload the page so we will here add the e dot prevent default so this will before this will prevent the default action okay okay so now what we will do refresh the page and we will go to review and we will add some data and go to console and this submit okay we need actually we need to add this after the edges okay so where is the form for method is everything is alright okay let's verify the form also that in the form we are getting the id so here you can see that in the save review too and everything is working okay so here from this i'll open this and submit this so it is submit this it is not clicking actually so when we click on this it is it should save the data it should go to the it should go to that action because we have not added this id in this form okay these little things that i forgot okay now so let's again test this so i will go to here and i will i will add the rating submit this data and it is saying nothing id is safe and some we are submitting the data and custom.js this dot submit dot e dot default prevent uh we are saving this data hx is working so why not it is running okay so let's try this again and three and console and submit okay so this form was not submitting because we are we were doing wrong here the method is we are passing the action in the method so this will be method okay and in the action so the action is will be url and here we will define the action okay so data method url okay now here we have already defined the add form and uh everything is fine now so let's refresh this page and add here and get the this thing and we will add to summit so here you can see that we have a boolean true okay so if we go to the views dot py file we are returning the boolean true now we need to create this data in the we need to insert this data in the database so what and we also need to after inserting here you can see that i have also added the ajax response and if response is true we have added this data has been added okay so this is showing now so but we need to add here the reset button and when we click on the reset this will reset the form but we will trigger this after the boolean we will return the boolean tool so here i will add the button button reset input type reset and the value will be reset here okay and we will trigger this so i will add the id reset so copy this and in the boolean true i will trigger this trigger and it will automatically click the when we when it will return the boolean rule so now in the view we need to add this data so first of all we need to we we need the product instance so i will get the product instance from the product dot objects dot get primary key equal to p id and i'm or user is already exist in the request so user so product and user and we need to insert this data so i hope i am fetching the models so here we need to get the product review model sorry we need to add comma product review okay and in this we will go to here and we will get this data so review equal to product review dot objects dot create okay and in this we will pass user equal to user and product equal to product okay and in this we will we need to pass this is the form product text here the product text equal to request dot post product text and after that we need the product rating so product rating this name is default when we have created the form so jungkook add the name default the model name okay so i'm getting the so this data i'm getting from the form and this is my uh table uh field okay so user product review text and review rating okay now yes we will save this data and we will fetch this data in the admin so i will copy this i will show this data in the admin so i will copy this and here i will need to i need the product review so product review model i will copy this model and i will add it here i will add it here okay we need user model review text so review text this will be user this will be product and in from the model we need the rating so we need the rating okay so uh before showing the rating we also uh remember this thing you can't show the directly the choice data but we but here so we will create the get review rating we need to return this data via method so return self dot review rating and we will call this method in the admin here okay so we have added this now we will restart the server self dot okay fine so it is running now let's go to the review section page i have already logged in the admin let's go to the admin review click here and here and submit so data has been reset and here you can see data has been added let's go to the review section product review and here you can see the reviews i have already added the review uh before so it is showing all the things so get review settings all and all the things okay so this is the so we have learned that how we can how we can create the jungle model how we can create the form from the django model and we have submitted the data with the help of jquery ajax okay and i am going to upload this whole code on github so you can download that and if and in the next video we will fetch all the data in the in this list here you can in this list and we will also face this average uh in the next video we will do the uh things in the next video and uh yeah so if you like this channel and enjoying this series then please like share and subscribe and uh press the bell icon and thank you so much thank you so much for watching this video

Channel: Code Artisan Lab

Views: 674

Keywords: Django 3 tutorials, Django tutorial for beginners, Django Python, Learn Django with Example, Learn Django with creating app, Django Project, Learn Django From Scratch, python django, django ecommerce admin, django ecommerce project, django ecommerce website, learn django with ecommerce project, fetch product from database, django ecommerce tutorial, product review rating in django, add rating in django ecommerce, add review with star rating in django ecommerce

Id: 7tyMyLCjKVg

Length: 30min 24sec (1824 seconds)

Published: Mon Jun 28 2021