Review & Rating System in PHP & Mysql using Ajax - 1

hello friends in this video tutorial we will learn how can we make user rating with review system for e-commerce product or service with php script by using ajax jury and mysql database if you have visit any ecommerce site then at on product page we can see that 5 star rating with user review so based on that rating and review we have decided to buy particular product we have already published video tutorial on star rating system but in that system we have add functionality of review so user can also give review with rating under this tutorial we have used ajax with jakari so user can submit their rating with review without refresh of web page so this core module we will build under this video tutorial now let's start discussing this topic so this is our testing database and under this we have review table with 5 table column like review id user name user rating user review and date time so all rating and review data will be stored under this table this is our working directory and here we have two file like index.php and submit rating.php file so here all front end code will be right under index.php file and php script we will write under this submit rating dot php file first we have open index dot php file and under this file we have used bootstrap library curry library and font awesome library now we have moved to right html code part so here first we have create one span tag with id is equal to average rating with text like 0.0 under this tag we will display average rating value using ajax curry next we want to create star icon with gray color so here we will use font awesome icon for create star icon so here we have write italic tag with class is equal to font or some star icon class then after we have write starlight class margin write 1 class and main star class so this code will display one starring gray color icon will display on web page but we have to display 5 star so we have copied this code and paste 4 time so it will display 5 star on web page below this start we want to display total number of review so here we have write span tag with id is equal to total review so this tag value we will set using ajax jury code so friends here we can see that when page has been load in browser then on web page we can see that zero out of five number and below it we can see gray color for start and lastly we can see total zero review text on web page next we want to display one to five star wise total review in number and in progress bar so here we have create one division tag with class is equal to progress label left class under this we have create bold tag with five number and for display star icon we have write italic class with font awesome star icon class with text warning class so it will display star in yellow color for display total number of five star rating here we have create division tag with class is equal to progress label right and under this tag we have create one span tag with id is equal to total 5 star review and between this we have write 0 this tag text we will display dynamically using ajax jquery and for create progress bar here we have create on division tag with class is equal to progress under this tag we have create one another division tag with class is equal to progress bar and background warning class after this we have write role is equal to progress bar area value now is equal to 0. under this tag we have at area value minimum attribute is equal to zero area value maximum is equal to hundred and id is equal to five star progress so this code will make progress but in gray color for 5 star now for make 4 star we have copied this code and paste below it so here for 4 star we have changed this 5 number value to 4 number and then after we have changed this span tag id from total 5 star review to 4 star review next we have go to progress bar class and here we have change value of this id attribute from 5 star progress to 4 star progress now for make progress buffer 3 star so we have copy this code and paste below it so here for 3 star we have changed this 4 number value to 3 number and then after we have changed this span tag id from total 4 star review to 3 star review next we have go to progress bar class and here we have change value of this id attribute from 4 star progress to 3 star progress now for make progress but for 2 star so we have copy this code and paste below it so here for 2 star we have changed this three number value to two number and then after we have changed this span tag id from total three star review to two star review next we have go to progress by class and here we have change value of this id attribute from 3 star progress to 2 star progress and lastly for make progress buffer 1 star so we have copied this code and paste below it so here for one star we have changed this to number value to one number and then after we have changed this span tank id from total 2 star review to 1 star review next we have go to progress bar class and here we have change value of this id attribute from 2 star progress to 1 star progress so here we have make progress buffer 5 start to 1 star now we have check output in browser friends here we have refreshed this page so after refresh of web page here we can see progress buffer all star with zero number this number will be change when someone has submit review now we want to make right review button so here we have create one button tag with type is equal to button name is equal to ad review id is equal to ad review and in button text we have write review so when user has click on this button model will pop for submit user rating with review below this we have create one division tag with class is equal to margin top 5 and id is equal to review content under this tag we will load user submitted star rating and review data now for submit review and rating data here we will use bootstrap model so here we can see bootstrap model code so here first we have ad id is equal to review model then after we have go to model title class and here we have write submit review text under this modal body class we want to display 5 star for submit rating so create star we have write italic tag with class is equal to font or some star icon class with starlight class submit star class after this we have write id attribute is equal to submit star one and here we have write data rating attribute is equal to one so when we have use click on this star that means user has give one star rating so this code will make gray color 1 star but we want to make 5 star so we have copied this code and paste 5 time now for 2 number star we have change id attribute value change from submit star 1 to submit star 2 and data rating attribute value change from 1 to 2. so this process we have to do for all star still 5 numbers star after making star for rating now for submit user name data here we have create one text box with name is equal to user name id is equal to username and in placeholder attribute we have right enter your name same way for submit user review data we have write text area field with name attribute is equal to user review id is equal to user review and in placeholder attribute we have write type review here under this lastly for submit user rating and review data we have right button type is equal to button class is equal to button primary id is equal to save review and in button text we have write submit so when user has click on this button review data will be submitted so here our html code is ready now we have go to curry code part so first here we have create one rating data variable is equal to zero below this we have write dollar with button id at review with click event so when user has click on button then this code will execute under this we have write dollar with modal id review model with modal method and under this we have write show so it will pop up model on web page so friends first we have refresh web page and after refresh of web page here we can see that rights review button has been appear on web page now we have click on button so after click on this button here we can see that model has pop up on web page and under model we can see that user can submit their star rating with their user name and review data before submit review data we want to change star icon color when we have mouse over the star icon store rating data in local rating data variable so for change star i can color when mouse over the star icon so here we have write dollar with document selector with on method and under this we have right mouse enter event with star icon class submit star so when we have move mouse over the star icon then their color will be change so for this here we have write rating variable is equal to dollar this with data attribute and under this we have write rating so it will fetch data rating attribute value and store under this rating variable after this we have write for loop and under condition we have right count variable value is equal to 1 count variable value is less than the value of rating variable and count variable value increment by 1. under this loop we have write dollar with star icon id submit star with value of count variable with at class method and under this method we have write text warning so this code will change background color of star icon so friend first we have refresh page and after this we have click on button so model has pop-up in browser and here we have move mouse over the star icon so here we can see that star icon background color is change but when we have we have move mouse on other field but star i can still display yellow color but when we have leave mouse from star icon then all star icon color must be reset to gray color for this here we have create one rest background color function under this function we have right for loop and under condition we have write count variable value is equal to 1 count variable value is less than 5 and count variable value increment by 1. under this loop we have write dollar with star icon id submit star with dynamic value of count variable with at class method and under this we have write starlight class so this code will add this class into star icon code and below this we have write dollar with star icon id submit star with dynamic value of count variable with remove class method and under this method we have write text warning so this code will remove this class from star icon code now we go to mouse enter event and here we have called reset background function so it will reset background color of star icon after this here we have write dollar with document selector with on method and under this we have right mouse leave event with star icon class submit star so when mouse leave from star icon then this block of code will execute under this block we have called reset background function so it will reset background color of all star icon so friends here we have refresh web page and after refresh of web page here we have click on review button and after click on button here model has pop up in browser so in modal we have move mouse over the star icon so star icon background color has been changed and when we have leave mouse from star icon then after star color has been reset to their original color now we have proceed for submit rating and review data so here we have write dollar with document select with on method and under this we have right click event with star class submit star so when we have click on modal star icon then this block of code will execute under this we have write rating data variable is equal to dollar this with data method and under this we have write rating so it will fetch data rating attribute value from star icon and store under this rating data variable so here we have store rating data under this local variable now for submit review and rating data here we have write dollar with modal button id save review with click event so when user has click on button then this block of code will execute under this we have write user name variable is equal to dollar with text box id user name with value method so here we have store user name data under this local variable below this we have write user review variable is equal to dollar with text area field is user review with value method so here we have store review text area field value under this local variable now we have write if statement and under condition we have write user name variable value is equal to blank or user review variable value is equal to blank if this condition true that means user has not entered any field data and it will execute if block of code and here we have write alert statement with message like please fill both field so this message will be pop up in browser but suppose user has entered both field data then it will execute else block of code and here we have start write ajax request with first option url set to submit so it will send request to this url in second option we have write method and here we have write post so it will use post method for send data to server in third option we have write data and under this option we can define which data we want send to server so here we have write rating variable user name variable and user review variable lastly we have write success callback function so this function will be called if request completed successfully and it will receive data from server under this function we have write dollar with modal id review model with modal method and under this we have right hide so it will hide modal from web page and after this we have write alert and under this we have write data so it will pop up message on web page now we have go to submit rating dot php file and here we have write dollar connect variable is equal to new do class with three argument like my sql host is equal to localhost database name is equal to testing user name set to root and password set to blank value so this code will make database connection below this we have write if statement and under condition we have write is set function and under this function we have write dollar post rating data variable if this variable value is set then it will execute if block of code under this block we have write data variable is equal to array and in array first index we have write double color user name and in value we have write dollar post user name variable in array second index we have write double color user rating and in value we have write dollar post user rating data in array third index we have write double colon user review and in value we have write dollar post user review variable and in last index we have write double color date time and in value we have write time function so here we have store form data under this dollar data variable in array format below this we have write dollar query variable is equal to insert into review table with table column like user name user rating user review date time and value get from double colon user name user rating user review and date time so this query will insert data into review table after this we have write dollar statement variable is equal to dollar connect variable with prepare statement and under this we have write dollar query variable so it will make query for execution next we want to execute above query so we have write dollar statement variable with execute method and under this we have write dollar data variable so this method will execute above query and insert data into mysql table lastly we want to send response to ajax request so here we have right message like your review and rating successfully submitted so this message will be pop on web page at client side now we have check output in browser friends first we have refresh we page and after refresh of page here we can see page has been load here we can see product average star rating 0 and below it we can see total rating next here we can also see total rating of different star and lastly we can see submit review button so we have click on button after click on button here we can see model has been pop up in browser so in modal we can see five star in gray color so when we have mouse over the star then star icon color has been changed and when we have leave mouse from star icon then star icon color has been reset now suppose user want to give 4 star so we have click on 4 number star so after click on 4 number star 1 to 4 number star background color has been changed next in user name field we have right john smith and in user review field we have write nice product value for money and then after click on submit button so after click on submit button here we can see that message like your rating and review successfully submitted has been pop-up in browser now in database here in review table we can see that user review data has been stored in table so this way user rating and review data will be stored in database using ajax with jquery in next part we will learn how to fetch user rating and review data from database and display user rating and review on web page using php with ajax curry lastly if you have any query or inputs regarding this tutorial you can ask your query in comment box if you have liked this video please share with your friends or even you can also share on social media also and lastly don't forget to subscribe our channel for future video tutorial

Channel: Webslesson

Views: 8,481

Keywords: rating system, review system, php rating system, php review and rating script, php review script, php review system, review and rating code in php, review and rating, review and rating in php, review and rating system in php mysql, php project, php small project, star rating system in php, review system in php, create review system in php, review system php mysql, review system with php mysql and ajax, jquery, ajax, php, mysql, review, system, web development, 5 star rating system

Id: JmnM-K1HPFE

Length: 26min 33sec (1593 seconds)

Published: Wed May 26 2021