Display star rating from MySQL database with PHP. In this tutorial, you’ll learn how you can display user reviews as a 5-star rating on a product or a post that is already in the database.

Use this simple method to display star rating average with PHP from the MySQL database on product or post reviews.

Let’s say 5 people have rated 5 different rate value on one a specific product on your web site. You should be able to display the average value of all 5 different ratings as a 5 star rating.

Display star rating from database in php

You just have to follow few simple steps given below to create and display a stunning 5 star user rating from database with PHP.

  • Step 1: Create a database.
  • Step 2: Create Star Rating Table in the database and insert data.
  • Step 3: Connecting the database
  • Step 4: HTML Structure and CSS creating with the image.

Create a Database

As the 1st step, create a database with the name rating (you can use any name)

Create Star Rating Table in the database and insert data.

As the 1st step, type below code in your database SQL

CREATE TABLE `rate` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `product_id` int(10) NOT NULL,
  `rate` int(10) NOT NULL,
	PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `rate` (`id`, `product_id`, `rate`) VALUES
(1, 1, 4),
(2, 1, 3),
(3, 1, 3),
(4, 1, 3),
(5, 1, 5);

Connecting the database

Create a PHP file with the name config.php & insert the code below to establish the database connection.

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "rating";
$conn = mysqli_connect($servername, $username, $password, $dbname);	
if($conn->connect_errno){
	die('Failed to connect to MySQL Server:' .mysql_error());
	}
?>

HTML Structure and CSS

Create a PHP file with the name star-rating.php and insert following HTML, PHP and CSS.

<?php include('config.php'); ?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Home - Simple Star Rating</title>	
	<style type="text/css">		
	/* Rate Star*/		
	.result-container{
		width: 100px; height: 22px;
		background-color: #ccc;
		vertical-align:middle;
		display:inline-block;
		position: relative;
		top: -4px;
	}
	.rate-stars{
		width: 100px; height: 22px;
		background: url(img/rate-stars.png) no-repeat;
		background-size: cover;
		position: absolute;
	}
	.rate-bg{
		height: 22px;
		background-color: #ffbe10;
		position: absolute;
	}
	/* Rate Star Ends*/
	
	/* Display rate count */	
	.reviewCount, .reviewScore {font-size: 14px; color: #666666; margin-left: 5px;}
	.reviewScore {font-weight: 600;}
	/* Display rate count Ends*/		
	</style>
</head>

<body style="font-family:sans-serif; ">					
	<h1>Display Star Rating average from Mysql Database with PHP</h1>				
	<?php
	//defining Product id
	$product_id=1;
		$ratequery = "SELECT * FROM rate WHERE product_id = '$product_id' "; 
		$rateres =mysqli_query($conn, $ratequery);	
			while($data = mysqli_fetch_assoc($rateres)){
				$rate_db[] = $data;
				$sum_rates[] = $data['rate'];
			}
			if(count($rate_db)){
				$rate_times = count($rate_db);
				$sum_rates = array_sum($sum_rates);
				$rate_value = $sum_rates/$rate_times;
				$rate_bg = (($rate_value)/5)*100;
			}else{
				$rate_times = 0;
				$rate_value = 0;
				$rate_bg = 0;
			}
	?>
			<div style="margin-top: 10px">
				<div class="result-container">
				<div class="rate-bg" style="width:<?php echo $rate_bg; ?>%"></div>
				<div class="rate-stars"></div>
			</div>					

			<span class="reviewScore"><?php echo substr($rate_value,0,3); ?></span><span class="reviewCount">(<?php echo $rate_times; ?> reviews)</span>
			
		</body>
</html>

Result of this 5 star user rating script

Here is the method behind:

  • Select all ratings for the selected product or post as an array.
    (Here are the 5 values for 1st product: 4, 3, 3, 3, 5)
  • Get the sum of all values
    (4+3+3+3+5 = 18)
  • Divide that value by the number of rates to get the average rating
    (18/5 = 3.6)
  • Get the percentage of the value 3.6 to fill out the 5 stars (3.6/5)*100 = 72%
  • Create a div container to fill out all 5 stars with grey color. (width:100px; height:22px;)
  • 72% of that grey color container should be yellow. This div will be on top of the grey color 1.
  • Finally, we have to place an image with stars (stars are transparent).
  • Here is the result
Displaying 5 Star Rating from the data base with PHP

Conclusion

Hope you’ve learned how to display user star rating on a webpage from MySQL database using PHP. You can use this 5-star rating script to show the average rating on a product or a post. I have explained this tutorial very simply to understand any newbie for PHP.

If you found this post is useful, don’t forget to share and support this on your favorite social media platform.

Author

Hi! I’m Dimuthu Freelance Web Designer, Developer, Creative Graphic Designer, Digital Marketer & Successful Blogger. Hire me! if you need any support.

Write A Comment

Pin It