star rating system

Star Rating System In PHP, MySql & jQuery

Are you working on a eCommerce or a Social networking Project most likely you need a rating system . In this post we will make a 5 star rating system in php MySqli and jQuery. In this star rating system we will use Font Awesome for Star Icon.

Star Rating System In PHP, MySql & jQuery
Project Structure

Star Rating System


in index,php we will have the markup of our star rating system

  1. On line 9 we are using a Hidden Input in which we can store unique product_id(if you are working on eCommerce) so that all the rating will be exclusive
	<title>5 Star Rating System In PHP, MySql & jQuery</title>
	<link rel="stylesheet" href="" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
	<link rel="stylesheet" href="">
	<link rel="stylesheet" type="text/css" href="style.css">
	<input type="hidden" value="HERE COME THE PRODUCT ID" id="product_id">
	<div class="container">
		<h1>Star Rating System</h1>
		<div id="star-container">
			<i class="fa fa-star fa-3x star" id="star-1"></i>
			<i class="fa fa-star fa-3x star" id="star-2"></i>
			<i class="fa fa-star fa-3x star" id="star-3"></i>
			<i class="fa fa-star fa-3x star" id="star-4"></i>
			<i class="fa fa-star fa-3x star" id="star-5"></i>
		<div id="result"></div>
	<script src=""></script>
	<script type="text/javascript" src="main.js"></script>


	background: #eee;
	background: white;
	border: 1px solid #ccc;
	border-radius: 5px;
	height: 100%;
	padding: 40px;
	color: #ccc;
	cursor: pointer;
	transition: all 0.2s linear;
	color: gold;
	display: none;
	color: red;
	color: green;


  1. On line 4 we have a function to make star golden when ever mouse are on the stars and as soon as the some leave we make stars grey(Back to Normal)
  2. On line 40 we are waiting for star to be clicked as soon as user click the star we store star Id in star_index variable and we send product_id & star_index to store_rating.php for processing and storing in the database

		//get the id of star
		var star_id = $(this).attr('id');
		switch (star_id){
			case "star-1":
			case "star-2":
			case "star-3":
			case "star-4":
			case "star-5":
		//remove the star checked class when mouseout

		//get the stars index from it id
		var star_index = $(this).attr("id").split("-")[1],
			product_id = $("#product_id").val(), //store the product id in variable
			star_container = $(this).parent(), //get the parent container of the stars
			result_div = $("#result"); //result div
			url: "store_rating.php",
			type: "POST",
			data: {star:star_index,product_id:product_id},
			beforeSend: function(){
				star_container.hide(); //hide the star container"Loading..."); //show the result div and display a loadin message
			success: function(data){



  1. On line 8 we are checking. Star Id is valid or not. If not we will show the message

In this post we are not storing the rating to the database. You guyz are intelligent enough to do that/

		$star = htmlentities($_POST&#91;'star'&#93;);
		//valid star id array
		$valid_star = array('1','2','3','4','5');

		//show a error message if some hacker (Noobs) try to change the star id
		if(!in_array($star, $valid_star)){
			echo "<b class='r'>Fuck You. It's Your Dads Website.</b>";


		// Display the result
		echo "<b class='g'>Thanks! You rated this product {$star} Stars.</b>";

Live Demo

10 thoughts to “Star Rating System In PHP, MySql & jQuery”

  1. Dear Friend,
    I want to pass that $star value in to another php page. How can I do that? session variable is giving old value. Any idea?

  2. hi
    i have a code
    jQuery(function($){$(‘.star-rating’).change(function(){$.ajax({url:s.ajax_url,type:”post”,data:{action:”star_rating”,post_id:s.post_id,vote:$(this).val(),},success:function(response){$(“.star-rating .message”).text(response.vot_emessage);

    Where should I put response.vot_emessage؟! and how?!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.