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]


5 Star Rating System In PHP, MySql & jQuery

Star Rating System









[/html]

style.css

[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;
}
[/css]

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

[javascript]
$(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);
}
});
});

});
[/javascript]

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]
Fuck You. It’s Your Dads Website.“;
exit();
}

// STORE THE RATING INTO DATABASE

// Display the result
echo “Thanks! You rated this product {$star} Stars.“;
}
?>
[/php]

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 *