New Ajax Star Rating System in Tag Cloud Style using JQuery and PHP

Author: Zeeshan Rasool | Last updated on January 11th, 2013

JQuery, PHP, Tutorials, Web Design

New tutorial in Rating System series is here for you. It is a stylish and animated rating system I created many Ajax based Rating and Voting systems over 99Points.info. You can get
Youtube Style Ratings and Ajax Rating In this rating system i used tag cloud technique, where top times rated star will be show bigger than others. So when you want to give a rate to any image or post, Click on your desired star number from 1-5 and then this star will go to bigger and bigger on each click. This is an awesome and unique rating system. Hope you like. You can get facebook style comment script, facebook style extracting url data, youtube style share button, facebook style profile edit, Ajax search tutorial, Dynamic dropdown using jQuery and Ajax and many others.

Download all files to get this rating system.
[ad#ad-3]

If you Like this Tutorial and Want to get New Tutorials news by Email, Then Subscribe Here.

[ad#co-2]

Database Structure

Copy this db structure as it is and paste in your mysql window.

CREATE TABLE IF NOT EXISTS `star_rating` (
  `1_rate` int(11) DEFAULT NULL,
  `2_rate` int(11) DEFAULT NULL,
  `3_rate` int(11) DEFAULT NULL,
  `4_rate` int(11) DEFAULT NULL,
  `5_rate` int(11) DEFAULT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

--
-- Dumping data for table `star_rating`
--

INSERT INTO `star_rating` (`1_rate`, `2_rate`, `3_rate`, `4_rate`, `5_rate`) VALUES
(1, 1, 1, 1, 1);

CREATE TABLE IF NOT EXISTS `star_rating` (

`1_rate` int(11) DEFAULT NULL,

`2_rate` int(11) DEFAULT NULL,

`3_rate` int(11) DEFAULT NULL,

`4_rate` int(11) DEFAULT NULL,

`5_rate` int(11) DEFAULT NULL

) ENGINE=MyISAM DEFAULT CHARSET=latin1;

-- Dumping data for table `star_rating`

INSERT INTO `star_rating` (`1_rate`, `2_rate`, `3_rate`, `4_rate`, `5_rate`) VALUES

(1, 1, 1, 1, 1);

CREATE TABLE IF NOT EXISTS `polling_ip` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `userip` varchar(100) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

CREATE TABLE IF NOT EXISTS `polling_ip` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`userip` varchar(100) NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

JQuery Code

$(document).ready(function() {

$('.star img').livequery("click", function(e){
	
	var pid   = $(this).parent().attr("id");
	var width = $(this).width();
	
	showLoader(pid,width);
	
	$.post("voting.php?value="+pid,{
	}, function(response){
		
		$("#"+pid).html('<img src="1.png" width="'+unescape(response)+'" />');
		
		$.post("show_rating.php",{
		}, function(result){
			$(".show_rate").hide();
			$(".show_rate").html(unescape(result));
		});
	
	});
});	

$('.star img').livequery("mouseenter", function(e){
	
	var pid   = $(this).parent().attr("id");
	
	// show rating of this star in total
	hideOther();
	$(".show_rate").show();
	$("#rating_"+pid).fadeIn();
	
	var width = $(this).width();
	
	$("#"+pid).html('<img src="hover.png" width="'+width+'" />');
	
}).livequery("mouseleave", function(e){

	var pid   = $(this).parent().attr("id");
	var width = $(this).width();
	
	$(".show_rate").hide();
	$("#rating_"+pid).hide();
	
	$("#"+pid).html('<img src="1.png" width="'+width+'" />');
});

//show loading bar
function showLoader(pid,width){
	$("#"+pid).html('<img src="load.gif" width="'+width+'" />');
}

function hideOther()
{
	$("#rating_1").hide();
	$("#rating_2").hide();
	$("#rating_3").hide();
	$("#rating_4").hide();
	$("#rating_5").hide();
}
});

$(document).ready(function() {

$('.star img').livequery("click", function(e){

var pid = $(this).parent().attr("id");

var width = $(this).width();

showLoader(pid,width);

$.post("voting.php?value="+pid,{

}, function(response){

$("#"+pid).html('<img src="1.png" width="'+unescape(response)+'" />');

$.post("show_rating.php",{

}, function(result){

$(".show_rate").hide();

$(".show_rate").html(unescape(result));

});

$('.star img').livequery("mouseenter", function(e){

var pid = $(this).parent().attr("id");

// show rating of this star in total

hideOther();

$(".show_rate").show();

$("#rating_"+pid).fadeIn();

var width = $(this).width();

$("#"+pid).html('<img src="hover.png" width="'+width+'" />');

}).livequery("mouseleave", function(e){

var pid = $(this).parent().attr("id");

var width = $(this).width();

$(".show_rate").hide();

$("#rating_"+pid).hide();

$("#"+pid).html('<img src="1.png" width="'+width+'" />');

});

//show loading bar

function showLoader(pid,width){

$("#"+pid).html('<img src="load.gif" width="'+width+'" />');

}

function hideOther()

{

$("#rating_1").hide();

$("#rating_2").hide();

$("#rating_3").hide();

$("#rating_4").hide();

$("#rating_5").hide();

}

});

[ad#co-4]

CSS

.star img { 
	bottom: 0;
	cursor:pointer;
}

table td{ vertical-align:middle; height:80px; }

.show_rate{ 
	background-color:#669933;
	height:17px;
	padding:8px;
	text-align:center;
	width:40px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	display:none;
	border-radius: 10px;
	margin-top:5px;
	color:#FFFFFF;
	text-shadow: 0px -1px 0px #374683;text-shadow: 0px 1px 0px #e5e5ee;
	filter: dropshadow(color=#e5e5ee,offX=0,offY=1); 
	font-family:"Courier New", Courier, monospace; font-size:18px;
}
.show_rate span{ display:none;}

.star img {

bottom: 0;

cursor:pointer;

}

table td{ vertical-align:middle; height:80px; }

.show_rate{

background-color:#669933;

height:17px;

padding:8px;

text-align:center;

width:40px;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

display:none;

border-radius: 10px;

margin-top:5px;

color:#FFFFFF;

text-shadow: 0px -1px 0px #374683;text-shadow: 0px 1px 0px #e5e5ee;

filter: dropshadow(color=#e5e5ee,offX=0,offY=1);

font-family:"Courier New", Courier, monospace; font-size:18px;

}

.show_rate span{ display:none;}

HTML

<table border="0">
  <tr>
	<td><div class="star" id="1"><img src="1.png" alt="" width="<?php echo $rating[0]?>" /></div></td>
	<td><div class="star" id="2"><img src="1.png" alt="" width="<?php echo $rating[1]?>" /></div></td>
	<td><div class="star" id="3"><img src="1.png" alt="" width="<?php echo $rating[2]?>" /></div></td>
	<td><div class="star" id="4"><img src="1.png" alt="" width="<?php echo $rating[3]?>" /></div></td>
	<td><div class="star" id="5"><img src="1.png" alt="" width="<?php echo $rating[4]?>" /></div></td>
	<td width="100">
	
	<div class="show_rate">
		<?php include_once('show_rating.php');?>
	</div>
	
	</td>
  </tr>
</table>

<tr>

<?php include_once('show_rating.php');?>

</div>

</td>

</tr>

</table>

Downloads files to get this latest tutorial.
[ad#ad-3]

Recommended WordPress Themes Store

If you enjoyed this post, please consider leaving a comment below or subscribing to the RSS feed to have future articles delivered to your feed reader. You can also follow us on Facebook or Twitter @99Points

This awesome post has been created by 99Points editor's team. You can follow our updates on Twitter and facebook, OR drop an email at 99points.info@gmail.com

Kamil Kus

hello im trying to add db ” structure in to my mysql window.”
but im getting error after uploading to server.

“Warning: mysql_connect():

Access denied for user ‘root’@’localhost'(using password:YES) in (address on server of my dbcon.php on line 21 error

/home/k560642/publin_html/porfolio/dbcon.php”

my code in dbcon.php

any HELP PLEEEEASE
Kamil Kus

MY CODE IN dbcon.php