jQuery Tutorial : Simple ajax star rating with php
by ronggur on May 30, 2009
I made this simple ajax star rating for my latest poject. And now i want to share it to you. Let’s start it 
.
Step 1 : CSS Star Rater
First thing is the star rater. I got this cool ‘css star rater’ from http://www.komodomedia.com/ . I assumed that we already understood how to use it, so we will not talk too much about this ‘css star rater’.
Step 2 : Create MySQL table
Next is create table (using MySQL) to store the data. You can copy the script below
CREATE TABLE IF NOT EXISTS `vote` ( `counter` int(8) NOT NULL default '0', `value` int(8) NOT NULL default '0' ) ENGINE=MyISAM DEFAULT CHARSET=latin1;
Step 3 : PHP
After finished create table, then we can start create some php code to handle input, update and retrieve data from the database, here is the code. I added some important comment in it
<?php
// connect to database
$dbh=mysql_connect ("localhost", "username", "password") or die ('Cant connect to the database');
mysql_select_db ("rating",$dbh);
if($_GET['do']=='rate'){
// do rate
rate();
}else if($_GET['do']=='getrate'){
// get rating
getRating();
}
// function to retrieve
function getRating(){
$sql= "select * from vote";
$result=@mysql_query($sql);
$rs=@mysql_fetch_array($result);
// set width of star
$rating = (@round($rs[value] / $rs[counter],1)) * 20;
echo $rating;
}
// function to insert rating
function rate(){
$text = strip_tags($_GET['rating']);
$update = "update vote set counter = counter + 1, value = value + ".$_GET['rating']."";
$result = @mysql_query($update);
if(@mysql_affected_rows() == 0){
$insert = "insert into vote (counter,value) values ('1','".$_GET['rating']."')";
$result = @mysql_query($insert);
}
}
?>
Step 4 : JavaScript
Next thing is javascript code. Below is the code, you can put this code between <head> tag or put it in separated javascript file.
<script type="text/javascript">
$(document).ready(function() {
// get current rating
getRating();
// get rating function
function getRating(){
$.ajax({
type: "GET",
url: "update.php",
data: "do=getrate",
cache: false,
async: false,
success: function(result) {
// apply star rating to element
$("#current-rating").css({ width: "" + result + "%" });
},
error: function(result) {
alert("some error occured, please try again later");
}
});
}
// link handler
$('#ratelinks li a').click(function(){
$.ajax({
type: "GET",
url: "update.php",
data: "rating="+$(this).text()+"&amp;do=rate",
cache: false,
async: false,
success: function(result) {
// remove #ratelinks element to prevent another rate
$("#ratelinks").remove();
// get rating after click
getRating();
},
error: function(result) {
alert("some error occured, please try again later");
}
});
});
});
</script>
Don’t forget to link the jquery library into your document
<script src="rating/jquery.min.js" type="text/javascript"></script>
Step 5 : Put it all together
Put your css, javascript in one html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery Tutorial : Simple ajax star rating</title>
<meta name="Keywords" content="Star rating, jQuery, ajax">
<meta name="Description" content="jQuery Tutorial : Simple ajax star rating">
<meta http-equiv="Content-Language" content="en">
<meta name="robots" content="index,follow">
<style>
body{
font:12px Arial, Helvetica, sans-serif;
padding:40px;
}
</style>
<script src="rating/jquery.min.js" type="text/javascript"></script>
<script src="rating/starrating.js" type="text/javascript"></script>
<link href="rating/starrating.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<h2>Star Rater</h2>
<ul class='star-rating'>
<li class="current-rating" id="current-rating"><!-- will show current rating --></li>
<span id="ratelinks">
<li><a href="javascript:void(0)" title="1 star out of 5" class="one-star">1</a></li>
<li><a href="javascript:void(0)" title="2 stars out of 5" class="two-stars">2</a></li>
<li><a href="javascript:void(0)" title="3 stars out of 5" class="three-stars">3</a></li>
<li><a href="javascript:void(0)" title="4 stars out of 5" class="four-stars">4</a></li>
<li><a href="javascript:void(0)" title="5 stars out of 5" class="five-stars">5</a></li>
</span>
</ul>
</body>
</html>
That’s it! . You can add some modification like notification, or loader while processing.
- Download zip file jQuery Tutorial : Simple ajax star rating with php (5817)
This article inspired by http://www.yvoschaap.com/
You can give me some coffee if you want to :D
Pingback: jQuery Tutorial : Simple ajax star rating with php | Ronggur …
Pingback: jQuery Tutorial : Simple ajax star rating with php | pc-aras
Pingback: jQuery Tutorial : Simple ajax star rating with php | MySandbox
Pingback: 4 x 5 Star Rating Tutorial With jQuery In The Hot Seat « jQuery Fun - Having fun & making plugins