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

index.php

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
<html>
<head>
	<title>5 Star Rating System In PHP, MySql & jQuery</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<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>
		<div id="result"></div>
	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script type="text/javascript" src="main.js"></script>
</body>
</html>

style.css

body{
	background: #eee;
}
.container{
	background: white;
	border: 1px solid #ccc;
	border-radius: 5px;
	height: 100%;
	padding: 40px;
}
.star{
	color: #ccc;
	cursor: pointer;
	transition: all 0.2s linear;
}
.star-checked{
	color: gold;
}
#result{
	display: none;
}
b.r{
	color: red;
}
b.g{
	color: green;
}

main.js

  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
$(document).ready(function(){
	/*STAR RATING*/

	$('.star').on("mouseover",function(){
		//get the id of star
		var star_id = $(this).attr('id');
		switch (star_id){
			case "star-1":
				$("#star-1").addClass('star-checked');
				break;
			case "star-2":
				$("#star-1").addClass('star-checked');
				$("#star-2").addClass('star-checked');
				break;
			case "star-3":
				$("#star-1").addClass('star-checked');
				$("#star-2").addClass('star-checked');
				$("#star-3").addClass('star-checked');
				break;
			case "star-4":
				$("#star-1").addClass('star-checked');
				$("#star-2").addClass('star-checked');
				$("#star-3").addClass('star-checked');
				$("#star-4").addClass('star-checked');
				break;
			case "star-5":
				$("#star-1").addClass('star-checked');
				$("#star-2").addClass('star-checked');
				$("#star-3").addClass('star-checked');
				$("#star-4").addClass('star-checked');
				$("#star-5").addClass('star-checked');
				break;
		}
	}).mouseout(function(){
		//remove the star checked class when mouseout
		$('.star').removeClass('star-checked');
	});

	
	$('.star').click(function(){
		//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
		
		$.ajax({
			url: "store_rating.php",
			type: "POST",
			data: {star:star_index,product_id:product_id},
			beforeSend: function(){
				star_container.hide(); //hide the star container
				result_div.show().html("Loading..."); //show the result div and display a loadin message
			},
			success: function(data){
				result_div.html(data);
			}
		});
	});

});

store_rating.php

  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/

<?php
	if(isset($_POST&#91;'star'&#93;)){	
		$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>";
			exit();
		}

		// STORE THE RATING INTO DATABASE

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

Live Demo

3 thoughts on “Star Rating System In PHP, MySql & jQuery

Leave a Reply

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