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, star rating system is mostly used in eCommerce to rate the products, service rating, organization rating, article rating, etc.
In this article, we have listed some products for rating. For this, we have created a mysql table and inserted some products with rating in database. You can use the records if you already have, otherwise you can create it manually or copy and paste the following queries in 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);
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 update the product rating respectively. The update function dynamically calls to update 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' then, 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 on the browser. In this file, the product list with their ratings are arranged in HTML table. These data are fetched by the select() function. That's why, we have included the 'rating.php' file and instantiate the 'Rating' class
To dynamically update the product ratings, we have written the Ajax code in 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; ?>)">★</span>
<?php } else { ?>
<span onclick="ratestar(<?php echo $pro[0]; ?>, <?php echo $i; ?>)">★</span>
<?php }
}
?>
</div>
</td>
</tr>
<?php
}
?>
</table>
</body>
</html>
Driving route directions from source to destination
Calculate the distance between two locations
