jQuery Star Rating + AJAX + PHP

This article will show you how to create a simple star rating functionality using jQuery.

All values will be stored in our $_SESSION variables. I have set the limit of number of votes to 20. In our demo, when you have reached the total number votes, just clear your cookies in order to use the demo again.

Here is the Demo: jQuery Star Rating

HTML head

In our<head> part, we will include our jQuery file.

{code type=”javascript”}
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
{/code}

HTML body

Our html body will display the average of votes, total number of votes, the 5 stars used in rating and a response text.

Line 3: “#star-avg” will hold the average of all the votes
Line 4: “#star-total” will hold the total number of votes sent
Line 7-21: These are the rating stars assigned with different IDs. By default, their class is set to display grey stars.
Line 23: “#star-msg” will hold the response text from our remote file

{code type=”html”}
<div class=”star-rating-wrap”>
<p>
Average: <span id=”star-avg”>0</span>,
Total Ratings: <span id=”star-total”>0</span>
</p>
<div class=”star-rating”>
<a href=”#”>
<span id=”star1″ class=”star-grey” title=”1″>&nbsp;</span>
</a>
<a href=”#” >
<span id=”star2″ class=”star-grey” title=”2″>&nbsp;</span>
</a>
<a href=”#” >
<span id=”star3″ class=”star-grey” title=”3″>&nbsp;</span>
</a>
<a href=”#” >
<span id=”star4″ class=”star-grey” title=”4″>&nbsp;</span>
</a>
<a href=”#” >
<span id=”star5″ class=”star-grey” title=”5″>&nbsp;</span>
</a>
</div>
<p id=”star-msg”>&nbsp;</p>
</div>
{/code}

jQuery Script

This is our jQuery script and should be place within the <body> tag.

Line 3: “default_star_value” will hold the average value of votes
Line 5: We need to catch the mouse over event. On mouse over, we need to get the value of the star that is placed inside the title attribute of the span and pass it the showRedStar() function.
Line 7: On mouse out, we will call the hideRedStar() function to hide the red stars
Line 9: When user click a star, this should be counted as a vote.
Line 10: Clear the response text area
Line 12: Get the value of selected star
Line 14: We will send an AJAX request to our remote file
Line 15: Remote file
Line 17: This would be our submitted value
Line 18-20: Display the response text
Line 22: Update the default_star_value with the latest average total
Line 26: Set response type as JSON
Line 30: On mouse out of our rating stars, highlight the average star votes
Line 35: showRedStar() function highlights the stars in red
Line 43: hideRedStar() function removeds the red stars

{code type=”javascript”}
<script type=”text/javascript”>
$(document).ready(function(){
var default_star_value = 0;

$(“a span”).mouseover(function(){
showRedStar($(this).attr(‘title’))
}).mouseout(function(){
hideRedStar()
}).click(function(){
$(“#star-msg”).html(“”);

var selected_star = $(this).attr(‘title’);

$.post(
“demo/jquery-star-rating-response.php”,
{ star: selected_star },
function(data){
$(“#star-avg”).html(data.average);
$(“#star-total”).html(data.total);
$(“#star-msg”).html(data.message);

default_star_value = data.average

showRedStar(default_star_value)
},
“json”
);
});

$(“a”).mouseout(function(){
showRedStar(default_star_value)
});
});

function showRedStar(star_number){
hideRedStar();

for(star_ctr = 1; star_ctr <= star_number; star_ctr++){
$(“#star” + star_ctr).removeClass(‘star-grey’).addClass(‘star-red’);
}
}

function hideRedStar(){
for(star_ctr = 5; star_ctr >=1; star_ctr–){
$(“#star” + star_ctr).removeClass(‘star-red’).addClass(‘star-grey’);
}
}
</script>
{/code}

PHP

In our remote file, we will process the vote using PHP. For this demo, instead of saving the votes in a database, we will store our values in a $_SESSION array.

Line 01: start our session
Line 03: Store the list of valid star vote values in an array
Line 05: Set the default total number of votes to “0
Line 06: Set the default average to “0”
Line 08: Check if we have reached the total limit of 20 votes
Line 09: If limit is not yet reached, check if the submitted value is in our list
Line 10: If valid value is submitted, push our submitted value to our array holder of votes
Line 11: Set message that the vote has been counted
Line 14: If the submitted value is not valid, set message that it is invalid
Line 18: If the limit has been reached, set message that says we have reached the total limit of votes
Line 21: Check if we stored votes in our session
Line 22: If there our votes stored, get the average of our votes. We use the ceil() function to round of the average to the nearest ones. So, if the average is 4.98, the returned value would be 5
Line 23: Count the total number of votes
Line 26: Display our result in JSON format

{code type=”php”}
session_start();

$starValuesArr = array(1, 2, 3, 4, 5);

$responseArr[‘total’] = 0;
$responseArr[‘average’] = 0;

if (count($_SESSION[‘rating’]) < 20){
if (in_array($_POST[‘star’], $starValuesArr)){
$_SESSION[‘rating’][] = $_POST[‘star’];
$responseArr[‘message’] = ‘Thank you for the rating!’;
}
else{
$responseArr[‘message’] = ‘Invalid vote value’;
}
}
else{
$responseArr[‘message’] = ‘You have reached the limit of 20 votes. <br/>Try to clearing your cookies to be able to vote again.’;
}

if (count($_SESSION[‘rating’]) > 0){
$responseArr[‘average’] = ceil(array_sum($_SESSION[‘rating’]) / count($_SESSION[‘rating’]));
$responseArr[‘total’] = count($_SESSION[‘rating’]);
}

echo json_encode($responseArr)
{/code}

Line 3: “#star-avg” will hold the average of all the votes
Line 4: “#star-total” will hold the total number of votes sent
Line 7-21: These are the rating stars assigned with different IDs. By default, their class is set to display grey stars.
Line 23: “#star-msg” will hold the response text from our remote file

Recommended Posts