jQuery Tutorial : Simple ajax star rating with php

jQuery Tutorial : Simple ajax star rating with php (extended)

19/01/2010 - 6:32 am , {6} Comments
Posted by ronggur
Under Tutorials

Some people ask me question about how to implement my last star rating in multiple star rating, and here is the answer on how to implement it.

1. Upgrade latest table

Since you’ll need to add ‘id’ on multiple record then we need to upgrade the existing table. Here is the full sql

CREATE TABLE IF NOT EXISTS `vote` (
 `id` int(11) NOT NULL auto_increment,
 `desc` varchar(50) NOT NULL,
 `counter` int(8) NOT NULL default '0',
 `value` int(8) NOT NULL default '0',
 PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

--
-- Dumping data for table `vote`
--

INSERT INTO `vote` (`id`, `desc`, `counter`, `value`) VALUES
(1, 'star - 1', 0, 0),
(2, 'star - 2', 0,0);

2. CSS

We still can stylesheet from the previous post. No need to modify it.

3. PHP files (index.php & update.php)

There are some code changes in this files. If in previous post we just need an html file to represent the star rating, now we need php file to do it. Here is full code for index.php and some simple code explanation in it

<!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">
<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>
<?php
// include update.php
include_once 'update.php';
// get all data from tabel
$arr_star = fetchStar();
?>
<?php
// start looping datas
foreach($arr_star as $star){ ?>
<h2>Star Rater - <?php echo $star['id'];?></h2>
<ul class='star-rating' id="star-rating-<?php echo $star['id'];?>">
<?php /* getRating($id) is to generate current rating */?>
 <li id="current-rating-<?php echo $star['id'];?>" style="width:<?php echo getRating($star['id'])?>%"><!-- will show current rating --></li>
 <?php
 /* we need to generate 'id' for star rating.. this 'id' will identify which data to execute  */
 /* we will pass it in ajax later */
 ?>
 <span id="<?php echo $star['id'];?>">
 <li><a href="javascript:void(0)" title="1 star out of 5">1</a></li>
 <li><a href="javascript:void(0)" title="2 stars out of 5">2</a></li>
 <li><a href="javascript:void(0)" title="3 stars out of 5">3</a></li>
 <li><a href="javascript:void(0)" title="4 stars out of 5">4</a></li>
 <li><a href="javascript:void(0)" title="5 stars out of 5">5</a></li>
 </span>
</ul>
<?php } ?>
</body>
</html>

And this is for update.php

<?php
// connect to database
$dbh=mysql_connect ("localhost", "user", "password") or die ('Cannot connect to the database');
mysql_select_db ("database",$dbh);

if($_GET['do']=='rate'){
 // do rate and get id
 rate($_GET['id']);
}else if($_GET['do']=='getrate'){
 // get rating and get id
 getRating($_GET['id']);
}

// get data from tabel
function fetchStar(){
 $sql = "select * from `vote`";
 $result=@mysql_query($sql);
 while($rs = @mysql_fetch_array($result,MYSQL_ASSOC)){
 $arr_data[] = $rs;
 }
 return $arr_data;
}

// function to retrieve
function getRating($id){
 $sql= "select * from vote`` where id='".$id."' ";
 $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($id){
 $text = strip_tags($_GET['rating']);
 $update = "update `vote` set counter = counter + 1, value = value + ".$_GET['rating']."  where id='".$id."' ";

 $result = @mysql_query($update);
}
?>

4. Javascript

// JavaScript Document
 $(document).ready(function() {
 // get rating function
 function getRating(id){
 $.ajax({
 type: "GET",
 url: "update.php",
 data: "do=getrate&id="+id,
 cache: false,
 async: false,
 success: function(result) {
 // apply star rating to element
 $("#current-rating-"+id+"").css({ width: "" + result + "%" });
 },
 error: function(result) {
 alert("some error occured, please try again later");
 }
 });
 }

 // link handler
 $('.ratelinks li a').click(function(){
 // get the parent id
 var idStar = $(this).parent().parent().attr('id');
 $.ajax({
 type: "GET",
 url: "update.php",
 data: "rating="+$(this).text()+"&do=rate&id="+idStar,
 cache: false,
 async: false,
 success: function(result) {
 // remove #ratelinks element to prevent another rate
 $("#ratelinks").remove();
 // get rating after click
 getRating(idStar);
 },
 error: function(result) {
 alert("some error occured, please try again later");
 }
 });

 });
 });

That’s it! hope it works for you . You can add some modification like notification, or loader while processing.

- View Demo

- Download zip file jQuery Tutorial : Simple ajax star rating with php (extended) (75)

You can give me some coffee if you want to :D

[...] jQuery Tutorial : Simple ajax star rating with php | MySandbox Share and [...]

[...] is the original post: jQuery Tutorial : Simple ajax star rating with php | MySandbox Share and [...]