Saturday, April 7, 2012

five star rating using ajax ,jquery and php

0
Simple Ajax,jquery and php ratings with no duplicate rating checking through ip adress

Step 1. db table:

CREATE TABLE `rating` (
`counter` int(8) NOT NULL default '0',
`value` int(8) NOT NULL default '0',
`ip_address` longtext NOT NULL,
`data_id` int(11) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

Step 2. Javascript:

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
// JavaScript Document
 $(document).ready(function() {
  // get current rating
  Rating();
  // get rating function
  function Rating(){
   $.ajax({
    type: "GET",
    url: "update.php",
    data: "do=getrate&id=1",
    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(e){
   e.preventDefault();

   $.ajax({
    type: "GET",
    url: "update.php",
    data: "rating="+$(this).text()+"&do=rate&id=1",
    cache: false,
    async: false,
    success: function(result) {
     
     Rating();
     
     $("#response").html(result);
     $("#response").css("color", "#FF0000");
     
     
     
    },
    error: function(result) {
     alert("some error occured, please try again later");
    }
   });
   
  });
 });
</script>

Step 3. css:


 <style>
.star-rating, .star-rating a:hover, .star-rating a:active, .star-rating .current-rating {
    background: url("star.gif") repeat-x scroll left -1000px transparent;
}
.star-rating {
    background-position: left top;
    height: 25px;
    list-style: none outside none;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    width: 125px;
}
.star-rating li {
    display: inline;
}
.star-rating a, .star-rating .current-rating {
    border: medium none;
    height: 25px;
    left: 0;
    line-height: 25px;
    outline: medium none;
    overflow: hidden;
    position: absolute;
    text-indent: -1000em;
    top: 0;
}
.star-rating a:hover, .star-rating a:active {
    background-position: left bottom;
}
.star-rating a.one-star {
    width: 20%;
    z-index: 6;
}
.star-rating a.two-stars {
    width: 40%;
    z-index: 5;
}
.star-rating a.three-stars {
    width: 60%;
    z-index: 4;
}
.star-rating a.four-stars {
    width: 80%;
    z-index: 3;
}
.star-rating a.five-stars {
    width: 100%;
    z-index: 2;
}
.star-rating .current-rating {
    background-position: left center;
    z-index: 1;
}
</style> 



Step 4. html:


<div class="rating">
     
   <ul class="star-rating">
  <li id="current-rating" class="current-rating" style="width: 80%;"><!-- will show current rating --></li>
  <span id="ratelinks">
  <li><a class="one-star" title="1 star out of 5" href="javascript:void(0)">1</a></li>
  <li><a class="two-stars" title="2 stars out of 5" href="javascript:void(0)">2</a></li>
  <li><a class="three-stars" title="3 stars out of 5" href="javascript:void(0)">3</a></li>
  <li><a class="four-stars" title="4 stars out of 5" href="javascript:void(0)">4</a></li>
  <li><a class="five-stars" title="5 stars out of 5" href="javascript:void(0)">5</a></li>
   
  </span>
 
</ul>
    <span id="response"></span></div>


Step 5. php:


<?php

$ip = $_SERVER['REMOTE_ADDR'];
$data_id=(int)$_GET['id'];
if($_GET['do']=='rate'){

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

// function to retrieve
function getRating($ip,$data_id){
 $sql= "select * from rating where  data_id='$data_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($ip,$data_id){
 $sql= "select * from rating where ip_address LIKE '%".$ip."%' and data_id='$data_id' ";
 $result=@mysql_query($sql);
 //mysql_num_rows($result);
 $slect=mysql_fetch_assoc(mysql_query("select * from rating where data_id='$data_id' "));
 //$rs=@mysql_fetch_array($slect);
    $checkIP = unserialize($slect['ip_address']);
 // if it is an array i.e. already has entries the push in another value
if((is_array($checkIP)) ? array_push($checkIP,$ip) : $checkIP=array($ip));
$insertip=serialize($checkIP);

 if(mysql_num_rows($result)=='0'){
 $text = strip_tags($_GET['rating']);
 
 $update = "update rating set counter = counter + 1, value = value + ".(int)$_GET['rating']." ,ip_address='$insertip' where data_id='$data_id'";

 $result = @mysql_query($update); 
 //echo SUCCESSFULLY_RATED;
 if($result){
 echo 'Successfuly rated';
 //rate($ip,$data_id);
 }
 if(@mysql_affected_rows() == 0){
 $insert = "insert into rating (counter,value,data_id,ip_address) values ('1','".(int)$_GET['rating']."' ,'$data_id','$insertip')";
  $result = @mysql_query($insert); 
  
 }
 }
 else{
 
 echo 'already rated';
 
 }
}

?>

Step 6. image(download):



No comments :

Post a Comment