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

hello friends this is second part of user rating with review system tutorial in php script with mysql database using ajax jury and in this part we will learn how to fetch review data from database and display on web page using ajax curry in previous part we have seen how to create layout of display users star rating with display of average rating total rating and different star wise rating in progress bar and then after we have submit review and rating data using bootstrap model and store in my sql database now here we will fetch user review and rating data from database and display on web page without refresh of web page for these things we have go to dot index.php file and here we have go to jquery code part and here we have make load rating data function under this function we have start write ajax request for fetch data from database so in ajax first option we have write url which has been set to submit rating.php so it will send ajax request to this url in second option we have write method and here we have use post so it will use post method for send data to server in third option we have write data in this option we have to define data which we want sent to server so here we have define action variable with load data as value in third option we have write data type and here we have right json so this ajax request will receive data in json format lastly we have write success callback function this function will be called if ajax request completed successfully and it will receive data from server in json format under this function we will write code after we have completed write php code in submit rating dot php for this we have open submit rating dot php file and here we have right if statement and under condition we have right is set function and under this we have write dollar post action variable so if this variable value is set then it will execute if block of code below this star 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 jquery code same way we have create dollar total review variable is equal to 0 value for store total 5 star review data we have create dollar five star review variable is equal to zero same way for store total four star review data we have create dollar four star review variable is equal to zero for store total three star review data here we have create dollar three start review variable is equal to zero below this we have create dollar two star review variable is equal to zero under this variable we will store total two star review data and for store total one star review data here we have create dollar one star review variable is equal to zero now for store total user rating data here we have create dollar total user rating variable is equal to zero and lastly for store all user review content data here we have create dollar review content variable is equal to array so here we have create all local variable now we have write dollar query variable is equal to select star from review table order by review id in descending order so this query will fetch all data from review table for execute above query and get query execution result we have write dollar result variable is equal to dollar connect variable with query method with two argument in first argument we have write dollar query variable and in second argument we have write do class with fetch assoke method so this code will execute above query and return query execution result in array format now we want to fetch data from this dollar result variable so here we have write dollar result variable as dollar row variable under this loop we have write dollar review content variable is equal to array under this array first key we have write user name and in value we have write dollar row user name variable in second key we have write user review and in value we have write dollar row user review variable in third key we have write rating and in value we have write dollar row user rating variable and in last key we have write date time and in value we have write date function with date format and dollar row date time variable so this way we have store data in dollar review content variable after this we have right if statement and under condition we have write dollar row user rating variable value is equal to 5. if this condition true then it will execute if block of code and under this we have increment dollar five star review variable value by one below this we have again write if statement and under condition we have write dollar row user rating variable value is equal to 4. if this condition true then it will execute if block of code and under this we have increment dollar 4 star review variable value by 1. now we have again write if statement and under condition we have write dollar row user rating variable value is equal to three if this condition true then it will execute if block of code and under this we have increment dollar three star review variable value by one below this we have write if statement and under condition we have write dollar row user rating variable value is equal to 2. if this condition true then it will execute if block of code and under this block we have increment dollar two star review variable value by one after this we have write if statement and under condition we have write dollar row user rating variable value is equal to one if this condition true then it will execute if block of code and under this block we have increment dollar one star review variable value by one next we want to count total review so for this we have increment dollar total review variable value increment by one so create star we have write italic tag with class is equal to font awesome star icon class with starlight class submit star class now we want to calculate average rating so for this we have write dollar average rating variable is equal to dollar total user rating variable value divided by value of dollar total review variable now we want to store all data in array variable so we can send to ajax request so for this here we have create one dollar output variable is equal to array in first key we have right average rating and in value we have write dollar average rating variable value in second key we have write total review and in value we have write dollar total review variable value in third key we have write 5 star review and in value we have write dollar 5 star review variable value in 4th key we have write 4 star review and in value we have write dollar 4 star review variable value in fifth key we have right three star review and in value we have write dollar three star review variable value in sixth key we have write two star review and in value we have write dollar two star review variable value in seventh key we have write one star review and in value we have write dollar one star review variable value and last key we have write review data and in value we have write dollar review content variable so this way we have store all data in array variable now we want send this data to ajax request so here we have write echo statement with json encode function and under this function we have write dollar output variable so it will send data to ajax request in json format now we have go to index.php file and go to ajax request success function so here we have right dollar with span tag id average rating with text method and data under this we have write data dot average rating variable so it will display average rating on web page now here we have called this function so on every right of code we can check output in browser friends here we have refreshed this web page so after refresh of web page here we can see that four has been display out of 5 as average rating on web page now for display total rating here we have write dollar with span 10 id total review with text method and under this we have write data dot total review variable here first we have refresh of we page here we can see that total one review has been displayed on web page now we want to display average rating on star icon so for this here we have defined count star variable is equal to zero after this we have write dollar with star icon class main star with each method so it will check content of this all class field under this we have increment count star variable value by 1 so on every loop it will increment this variable value by 1. below this we have write if statement and under condition we have write math dot seal function and under this we have write data dot average rating value is greater than or equal to value of dollar count star variable value if this condition true then it will execute if block of code and under this first we have write dollar this with at class method and under this we have write text warning so it will at this class into this star icon tag and below this we have write dollar this with remove class method and under this we have write starlight so it will remove this class from this this star icon tag so this code will change star icon color so here first we have refreshed this page and after refresh of page here we can see that 4 star icon has been display in yellow color because this average star rating so this way we can display star rating in star icon on web page now we want to display different star wise total rating and also display rating in progress but also so for display total number of five star review so for this here we have right dollar with span tag id total 5 star review with text method and under this we have write data dot 5 star review variable so it will display total number of 5 star review same way we want to display total number of 4 star review so for this here we have write dollar with span 10 id total 4 star review with text method and under this we have write data dot 4 star review variable so it will display total number of 4 star review next we want to display total number of 3 star review so for this here we have write dollar with span 10 id total 3 star review with text method and under this we have write data dot 3 star review variable so it will display total number of three star review now we want to display total number of two star review so for this here we have write dollar with span tech id total two star review with text method and under this we have write data dot 2 star review variable so it will display total number of 2 star review and then after we want to display total number of one star review so for this here we have write dollar with span tag id total one star review with text method and under this we have write data dot one star review variable so it will display total number of one star review after this we want to display total number of review in different star wise now we want to display rating in progress bar so for first we want to display total 5 star review data in 5 star progress bar so here we have write dollar with progress bar id 5 star progress with css method with two argument in first argument we have write with and in second argument we have write data dot five star review variable value divided by data dot total review variable value into hundred so it will calculate percentage which we have assigned to with property which will fill progress bar next we want to display total 4 star review data in 4 star progress bar so here we have write dollar with progress by id for star progress with css method with two argument in first argument we have write with property and in second argument we have write data dot 4 star review variable value divided by data dot total review variable value into 100 so it will calculate percentage which we will assign to width property which will fill progress bar same way we want to display total 3 star review data in 3 star progress bar so here we have write dollar with progress by id 3 star progress with css method with two argument in first argument we have write with and in second argument we have write data dot three star review variable value divided by data dot total review variable value into hundred so it will calculate percentage which we have assigned to with property which will fill progress bar after this we want to display total 2 star review data in 2 star progress bar so here we have write dollar with progress bar id 2 star progress with css method with 2 argument so in first argument we have write with property and in second argument we have write data dot 2 star review variable value divided by data dot total review variable value into 100 so it will calculate percentage which we have assigned to with property which will fill progress bar and lastly we want to display total one star review data in one star progress bar so here we have write dollar with progress bar id one star progress with css method with two argument in first argument we have write with and in second argument we have write data dot one star review variable value divided by data dot total review variable value into hundred so it will calculate percentage which we have assigned to with property which will fill progress bar so here first we have refresh web page and after refresh of page here we can see that four star progress bar has been filled with hundred percentage and here it display one review this is because here we have submit only one user rating with review now we want to display user review data on web page so here if we have right if statement and under condition we have write data dot review data dot length variable value is greater than zero if this condition true then it will execute if block of code and under this block we have defined html variable with blank value below this we have write for loop and under condition we have write count variable value is equal to zero count variable value is less than the value of data dot review data dot length and count variable value increment by 1. under this loop we have right html variable and under this we have opened html code like division tag with class is equal to row and margin bottom three and here we have also closed this class between this we have right html variable and here we have opened html code like division tag with class is equal to column small one between this we have create division tag with class is equal to rounded circle background danger text white padding top 2 and padding bottom to class and between this we have write data dot review data with count index dot user name variable dot chat at function with 0 so it will display user name first character under rounded circle now we again we have write html variable and under this we have append html code like division tag with column small 11 class between this we have again write html variable and under this we have opened html code like division tag with class is equal to card and between this card class we have again write html variable and under this we have append html code like division tag with class is equal to card header variable and between this we want to display user name so here we have write data dot review data with count index dot user name so it will display user name in card header after this we have write html variable and under this variable we have append html code like division tag with class is equal to card body class now under this card body class we want to first display user submitted star rating in star icon so for this here we have right for loop and under condition we have write star variable value is equal to 1 star variable value is less than equal to 5 and star variable value increment by 1. under this loop we have write class name variable is equal to blank value below this we have write if statement and under condition we have write data dot review data with count index dot rating variable value is greater than or equal to value of star variable if this condition true then it will execute if block of code and under this we have write class name variable is equal to text warning class but suppose above condition falls then it will execute else block of code and under this we have write class name variable is equal to starlight class now for display star rating in star icon here we have write html variable and under this we have append html code like italic tag with class is equal to font awesome star icon class and dynamic value of class name variable so it will display user submitted star rating next we want to display content of user submitted review so here we have write html variable and under this we have open data like data dot review data with count index dot user review variable value so it will display content of user submitted review at the footer of card we want to display date and time of review submission so here we have write html variable and under this we have opened html code like division tag with class is equal to card footer class and text write class between this we have write data dot review data with count index dot date time variable value so it will display date and time of review submissions so here we have store all data in html variable now we want to display in division tag with id is equal to review content tag so here we have write dollar with division id review content dot html method and under this we have write html variable so it will display user review content on web page now when user has submitted review then we want to display updated review data on web page so here we have called this load rating data function so when user has submitted review then it will call this function and it will display updated review data on web page so here our code is ready now we have check output in browser friends first we have refresh web page and after refresh of page here on header side we can see star rating data and below this we can see user review data now we have again submit user rating and review and check live output so here we have click on submit review button so after click on button here we can see that model has pop up on web page so first we have set our star rating so here we have give 5 star rating by click on fifth star and then after we have write peter perker in user name and in user review we have typed nice product with good feature after this we have click on submit button after submit of review data here success message has been pop up on web page and after this here on web page average rating has been changed to 4.5 and below this it has display 2 rating with 5 star has been filled with yellow color after right side now we can see that 5 star and 4 star progress bar has been filled with 50 percentage because in both star there is only one rating and lastly at below we can see last submitted review data has been displayed first and under review data we can see user name first character has been display as user image and then after we can see user name submitted star rating and user submitted review content has been displayed on web page so in this part we have fetch review data from database and display on web page by using ajax jury with php script and make nice module like user review with star rating for our online ecommerce website project lastly if you have any query or inputs regarding this tutorial you can ask your query in comment box if you have like 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 you

Channel: Webslesson

Views: 4,279

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, 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, star rating system with jquery ajax and php, jquery, ajax, php, mysql, review, rating, system

Id: y3E6QW5LtFQ

Length: 30min 12sec (1812 seconds)

Published: Thu May 27 2021