Simple star rating system using PHP, jQuery and Ajax

In this tutorial, you will learn how to rate the listed products using PHP, jQuery, and Ajax. Today, the star rating system is mostly used in eCommerce to rate products, services, organisations, articles, etc. It helps the seller to improve their service based on the star rating provided by the customers. It also helps other customers choose the right products.

In this article, we have listed some products for rating. For this, we have created a MySQL table and inserted some products with ratings into the database. You can use the records if you already have them otherwise, you can create it manually or copy and paste the following queries into your database.

CREATE TABLE IF NOT EXISTS `product_rating` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `product` varchar(100) DEFAULT NULL,
  `rating` int(11) NOT NULL,
  PRIMARY KEY (`id`)
);

INSERT INTO `product_rating` (`id`, `product`, `rating`) VALUES
(1, 'Product 1', 3),
(2, 'Product 2', 4),
(3, 'Product 3', 4),
(4, 'Product 4', 1);

Simple star rating system using PHP, jQuery and Ajax

In this article, we have created two PHP files : 'rating.php' and 'index.php'.

The 'rating.php' file contains code for the database connection. Here, we have created a class 'Rating' using PHP and written the PHP MySQLi database connection code in the constructor. The select() and update() functions are used to select the data and for updating the product rating respectively. The update function dynamically updates the product rating using Ajax. At the top of this PHP file, we get the 'functionName' value in GET which is provided by the 'index.php' file. If it is 'update', it dynamically calls the update() function and updates the product rating.

Make sure to replace the host, username, password, and database with your database credentials and database name.

rating.php

<?php
$functionName = $_GET['functionName'];
if($functionName == "update") {
$getFunc = new Rating();
echo $getFunc->update($_GET['proid'], $_GET['rating']);
} 

class Rating {
// Database credentials
private $host     = 'localhost';
private $username = 'root';
private $password = '';
private $database = 'demo';
public  $db;

public function __construct(){
if(!isset($this->db)){
	// Connect to the database    
	try {
	$this->db = new mysqli($this->host, $this->username, $this->password, $this->database);
	}catch (Exception $e){
	$error = $e->getMessage();
	echo $error;
	}
}
}
public function select(){
$select = "SELECT * FROM `product_rating` ";
$result = mysqli_query($this->db ,$select);
return mysqli_fetch_all($result);
}
public function update($id, $rating) {
$update = "UPDATE `product_rating` SET rating = '$rating' WHERE id = '$id' ";
$result = mysqli_query($this->db ,$update);
if($result) { 
	return 'Data Updated Successfully';
}
} 
}
?>

The 'index.php' is the main file that we will call in the browser. In this file, the product list with their ratings are arranged in an HTML table. This data is fetched by the select() function. That's why we have included the 'rating.php' file and instantiated the 'Rating' class.

To dynamically update the product ratings, we have written the Ajax code in the ratestar() function. So if the user clicks on the rating star, a javascript function ratestar() will be called, and it dynamically updates the current product's rating on the database.

index.php

<!DOCTYPE html>
<html>
<head>
<title>Simple star rating system using PHP, jQuery and Ajax</title>
<style type="text/css">
	.star_rated { color: gold; }
	.star {text-shadow: 0 0 1px #F48F0A; cursor: pointer;  }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
function ratestar($id, $rate){
	$.ajax({
		type: 'GET',
		url: 'rating.php',
		data: 'functionName=update&productid='+$id+'&rating='+$rate,
		success: function(data) { 
			location.reload();
		}
	});
}
</script>
</head>
<body>
<?php
	include 'rating.php';
	$db = new Rating();
	$data = $db->select();
?>
<table>
<thead>
<th>Product</th>
<th>Rating</th>
</thead>
<?php
foreach($data as $pro) {
?>
<tr>
	<td><?php echo $pro[1]; ?></td>
	<td>
    <div class="star">
	<?php
	for($i = 1; $i <= 5; $i++) {
	if($i <= $pro[2]) {
	?>
	<span class="star_rated" onclick="ratestar(<?php echo $pro[0]; ?>, <?php echo $i; ?>)">&#x2605;</span>
	<?php }  else {  ?>
	<span onclick="ratestar(<?php echo $pro[0]; ?>, <?php echo $i; ?>)">&#x2605;</span>
	<?php  }
	}
	?>
	</div>
	</td>
</tr>
<?php
}
?>
</table>        
</body>
</html>

JavaScript window location
Remove duplicates from array Javascript
Django Pagination with Ajax and jQuery
jQuery Ajax serialize form data example
Bootstrap modal popup example on page load
How to prevent CSRF attack in PHP
PHP contact form send email SMTP
Dynamic pagination in PHP
PHP cache data in memory
PHP Connection and File Handling on FTP Server
Sending form data to an email using PHP
Recover forgot password using PHP and MySQL
JavaScript display PDF in the browser using Ajax call
How to Retrieve Emails from Gmail using PHP IMAP
How to store Emoji character in MySQL using PHP
How to display PDF file in PHP from database
jQuery loop over JSON result after AJAX Success