How to Create Review and Rating Page in PHP

How to Create a Review and Rating Page in PHP with the Help of Ajax

In this post, you can discover How to make an item or administration survey and star rating framework with PHP and Mysql utilizing Ajax jQuery. By utilizing the Review and Rating Module, a client of your site will impart their insight and encounters which are identified with your item or administration.

An audit and Rating System is a vital component for getting your client’s input in regard to your item or administration. With the assistance of an audit and star rating framework, your client can rate your item or administration by choosing a star and composing a survey about your item and administration with the assistance of this survey and star rating specialist organization or item dealer can improve their item or administrations. On the other hand on the purchaser side, in light of the fact that with the assistance of item or administration rating and survey, purchasers can choose a quality item or administration dependent on the rating and audit given by different clients.

We can undoubtedly foster our own Rating and Review System with a Mysql data set utilizing PHP with Ajax and jQuery. In the event that you need to execute Review and Star Rating framework for your item or administration then this instructional exercise will assist you with building an audit and 5-star rating framework utilizing PHP with Ajax jQuery and Mysql Database.

In this instructional exercise, we will fabricate a Review and 5-star rating framework for a single item to show the usefulness and UI of the Review and Rating System. Beneath you can discover the component of this PHP Dynamic Review and Rating System with Ajax jQuery.

View the Average Star Rating in Number and on the Star symbol.
View Total Number of Reviews.
View the Total Number of Reviews in 1 to 5 Star with the Animated advancement bar
Submit Review and Rating utilizing Bootstrap 4 Modal
Submit Review and Rating without Refreshing of site page utilizing Ajax jQuery.
Get Review and Rating Data from Database and Display on a Web page in Review and Rating design utilizing Ajax with PHP script.
On the Front-end side, we have used Ajax, jQuery, and Bootstrap 4 library and at Back-end we have used PHP content and Mysql Database to construct this Review and Rating System.

Set Up Database Table

To construct any powerful framework we need an information base and under the data set, we need a table. So first need to make data set, so here we have effectively made testing for this instructional exercise and under this information base for making an audit table, we need to run the following .sql script to make review_table in Mysql Database.

– — Database: `testing` – – ——————————————————– – — Table structure for table `review_table` – CREATE TABLE `review_table` ( `review_id` int(11) NOT NULL, `user_name` varchar(200) NOT NULL, `user_rating` int(1) NOT NULL, `user_review` text NOT NULL, `datetime` int(11) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; – — Dumping data for table `review_table` – INSERT INTO `review_table` (`review_id`, `user_name`, `user_rating`, `user_review`, `datetime`) VALUES (6, ‘John Smith’, 4, ‘Nice Product, Value for money’, 1621935691), (7, ‘Peter Parker’, 5, ‘Nice Product with Good Feature.’, 1621939888), (8, ‘Donna Hubber’, 1, ‘Worst Product, lost my money.’, 1621940010); – — Indexes for dumped tables – – — Indexes for table `review_table` – ALTER TABLE `review_table` ADD PRIMARY KEY (`review_id`); – — AUTO_INCREMENT for dumped tables – – — AUTO_INCREMENT for table `review_table` – ALTER TABLE `review_table` MODIFY `review_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=9;

Review and Rating System Index Page

To construct and Dynamic Review and Rating System, we need to initially make a format for show Star Ratings and Review information on the website page. So in index.php, we need to initially make HTML code for show and Review and Rating content with Submit Rating and Review Data to the Server.

So here is the HTML code part, to show Rating information in the Star symbol we have used the Font Awesome library and for Submit Review and Rating information, we have used Bootstrap 4 modular discourse box. Beneath you can discover HTML source code for making designs to show Rating and Review information on the site page.

index.php

<!DOCTYPE HTML> <head> </head> <div> <h1>Review & Rating System in PHP</h1> <div> <div>Sample Product</div> <div> <div> <div> <h1> 0.0 / 5 </h1> <div> </div> <h3>0 Review</h3> </div> <div> <div> <div>5 </div> <div>(0)</div> <div> <div role=”progressbar” aria-valuenow=”0″ aria-valuemin=”0″ aria-valuemax=”100″></div> </div> </div> <div> <div>4 </div> <div>(0)</div> <div> <div role=”progressbar” aria-valuenow=”0″ aria-valuemin=”0″ aria-valuemax=”100″></div> </div> </div> <div> <div>3 </div> <div>(0)</div> <div> <div role=”progressbar” aria-valuenow=”0″ aria-valuemin=”0″ aria-valuemax=”100″></div> </div> </div> <div> <div>2 </div> <div>(0)</div> <div> <div role=”progressbar” aria-valuenow=”0″ aria-valuemin=”0″ aria-valuemax=”100″></div> </div> </div> <div> <div>1 </div> <div>(0)</div> <div> <div role=”progressbar” aria-valuenow=”0″ aria-valuemin=”0″ aria-valuemax=”100″></div> </div> </div> </div> <div> <h3>Write Review Here</h3> <button type=”button” name=”add_review”>Review</button> </div> </div> </div> </div> <div></div> </div>

When we have made this HTML code, next we need to compose jQuery to quicken the star symbol when we have mouse over or mouse leave from star symbol. So underneath jquery, you can discover how to quicken the star symbol.

In this jQuery code, we have made one rating_data variable. Under this variable, we will store client star rating information when a client has clicked on quite a few star symbols.

Next for submitting Review and Rating information utilizing Bootstrap modular, we have to use Ajax demand, so when the client clicks on submit button after filling the survey field, then, at that point star rating and audit information will be shipped off the PHP worker script utilizing Ajax solicitation and this solicitation will likewise be got a reaction from worker moreover.

Insert or Sve Review and Rating System Data

When a client has clicked on submit button then, that point rating and review information will be shipped off the PHP script. So in the PHP script first we need to make an information base association. So beneath the code, you can find which it will make the Mysql information base association.

submit.php

Subsequent to making an information base association, then, at that point it will check $_POST[“rating_data”] variable worth has been set or not. On the off chance that this variable worth is set, it will store survey and rating information in a basic cluster on the grounds that here we will utilize the PHP PDO class for embedding information into the data set. Furthermore, next, we have to compose embed questions and execute inquiries for embed survey and rating information into the Mysql data set and send reactions to Ajax demand too.

$connect = new PDO(“mysql:host=localhost;dbname=testing”, “root”, “”); if(isset($_POST[“rating_data”])) { $data = array( ‘:user_name’ => $_POST[“user_name”], ‘:user_rating’ => $_POST[“rating_data”], ‘:user_review’ => $_POST[“user_review”], ‘:datetime’ => time() ); $query = “ INSERT INTO review_table (user_name, user_rating, user_review, datetime) VALUES (:user_name, :user_rating, :user_review, :datetime) “; $statement = $connect->prepare($query); $statement->execute($data); echo “Your Review & Rating Successfully Submitted”; }

Get Review and Rating Data From Database

Here we have to make a dynamic Review and Rating System in PHP and Review and Rating information has been stored under the data set. So whenever information has been stored in the data set. Then, at that point, we need to bring from the information base and show it on the site page. So here we have used Ajax jQuery to bring information from the data set.

For Fetch information, we will make work that will send Ajax solicitation to PHP script, and at the worker side, php content will get information from a data set and return back information to Ajax demand in JSON design. So whenever information has been gotten from workers in JSON design then by utilizing jQuery code it will show on the website page.

It will show both Star Ratings and Review information on the page. Underneath you can discover jQuery content and PHP script code to bring information from a data set and show it on a website page without invigorate of page.

index.php

$(‘#save_review’).click(function(){ var user_name = $(‘#user_name’).val(); var user_review = $(‘#user_review’).val(); if(user_name == ” || user_review == ”) { alert(“Please Fill Both Field”); return false; } else { $.ajax({ url:”submit_rating.php”, method:”POST”, data:{rating_data:rating_data, user_name:user_name, user_review:user_review}, success:function(data) { $(‘#review_modal’).modal(‘hide’); load_rating_data(); alert(data); } }) } }); load_rating_data(); function load_rating_data() { $.ajax({ url:”submit_rating.php”, method:”POST”, data:{action:’load_data’}, dataType:”JSON”, success:function(data) { $(‘#average_rating’).text(data.average_rating); $(‘#total_review’).text(data.total_review); var count_star = 0; $(‘.main_star’).each(function(){ count_star++; if(Math.ceil(data.average_rating) >= count_star) { $(this).addClass(‘text-warning’); $(this).addClass(‘star-light’); } }); $(‘#total_five_star_review’).text(data.five_star_review); $(‘#total_four_star_review’).text(data.four_star_review); $(‘#total_three_star_review’).text(data.three_star_review); $(‘#total_two_star_review’).text(data.two_star_review); $(‘#total_one_star_review’).text(data.one_star_review); $(‘#five_star_progress’).css(‘width’, (data.five_star_review/data.total_review) * 100 + ‘%’); $(‘#four_star_progress’).css(‘width’, (data.four_star_review/data.total_review) * 100 + ‘%’); $(‘#three_star_progress’).css(‘width’, (data.three_star_review/data.total_review) * 100 + ‘%’); $(‘#two_star_progress’).css(‘width’, (data.two_star_review/data.total_review) * 100 + ‘%’); $(‘#one_star_progress’).css(‘width’, (data.one_star_review/data.total_review) * 100 + ‘%’); if(data.review_data.length > 0) { var html = ”; for(var count = 0; count < data.review_data.length; count++) { html += ‘ <div>’; html += ‘ <div> <div> <h3>’+data.review_data[count].user_name.charAt(0)+'</h3> </div> </div> ’; html += ‘ <div>’; html += ‘ <div>’; html += ‘ <div>’+data.review_data[count].user_name+'</div> ’; html += ‘ <div>’; for(var star = 1; star <= 5; star++) { var class_name = ”; if(data.review_data[count].rating >= star) { class_name = ‘text-warning’; } else { class_name = ‘star-light’; } html += ‘’; } html += ‘ ’; html += data.review_data[count].user_review; html += ‘</div> ’; html += ‘ <div>On ‘+data.review_data[count].datetime+'</div> ’; html += ‘</div> ’; html += ‘</div> ’; html += ‘</div> ’; } $(‘#review_content’).html(html); } } }) }

submit_rating.php

if(isset($_POST[“action”])) { $average_rating = 0; $total_review = 0; $five_star_review = 0; $four_star_review = 0; $three_star_review = 0; $two_star_review = 0; $one_star_review = 0; $total_user_rating = 0; $review_content = array(); $query = “ SELECT * FROM review_table ORDER BY review_id DESC “; $result = $connect->query($query, PDO::FETCH_ASSOC); foreach($result as $row) { $review_content[] = array( ‘user_name’ => $row[“user_name”], ‘user_review’ => $row[“user_review”], ‘rating’ => $row[“user_rating”], ‘datetime’ => date(‘l jS, F Y h:i:s A’, $row[“datetime”]) ); if($row[“user_rating”] == ‘5’) { $five_star_review++; } if($row[“user_rating”] == ‘4’) { $four_star_review++; } if($row[“user_rating”] == ‘3’) { $three_star_review++; } if($row[“user_rating”] == ‘2’) { $two_star_review++; } if($row[“user_rating”] == ‘1’) { $one_star_review++; } $total_review++; $total_user_rating = $total_user_rating + $row[“user_rating”]; } $average_rating = $total_user_rating / $total_review; $output = array( ‘average_rating’ => number_format($average_rating, 1), ‘total_review’ => $total_review, ‘five_star_review’ => $five_star_review, ‘four_star_review’ => $four_star_review, ‘three_star_review’ => $three_star_review, ‘two_star_review’ => $two_star_review, ‘one_star_review’ => $one_star_review, ‘review_data’ => $review_content ); echo json_encode($output); }

How to Create a Review and Rating Page in PHP with the Help of Ajax

Leave a Comment Cancel reply