Aug
21

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

Author ZeeShaN    Category AJAX, JQuery, MySQL, PHP, Tutorials, Web Design     Tags , , ,

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.

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

Enter your email address:

Delivered by FeedBurner

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 `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();
}
});

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;}

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>

Downloads files to get this latest tutorial.

Add To Facebook Stumble This Digg This Add To Del.icio.us Add To Reddit Add To Yahoo Add To Twitter


Written by ZeeShaN

ZeeShaN RasooL is a web developer who loves to work in latest technologies to create more interactive dynamic and beautiful web pages.

  • Gourveich

    Awesome piece of work , having some problem on first load. over all its good ;)

    August 28 2010
    CommentsLike
    • Rishi

      Clever thinking, I like it nice idea Zeeshan :)

      August 26 2010
      CommentsLike
      • KanZonk

        okay thanks so much, I’m too tired when creating a lot of web with different views. very boring. Therefore, I want to learn to make the web with a template system. I hope you will make a tutorial for it if there is time. Thank you.

        August 21 2010
        CommentsLike
        • ZeeShaN

          @micha, thanks . Yes its little slow when we move mouse in speed. I try to fix it
          @KanZonk Thanks dude, You need to use template as we use in simple php. Its easy to load tpl files where they are in codeigniter. just make a folder with template name outside application or any where within web folder and put css and images within views. You should download pyroCMS to get an idea about templating in CI,

          August 21 2010
          CommentsLike
          • KanZonk

            Very nice.

            I want ask something, HOW to build web include template system using Codeigniter (like wordpress, just copy template folder).

            August 21 2010
            CommentsLike
            • micha

              nice ! ;) but there should be a fix for unhighlighting the stars when mouse move very quickly over the stars… in my tests the stars keep red.. seems like the mouse-out effect of jquery is buggy here i don´t know…

              August 21 2010
              CommentsLike








              Enter your Email:

              Click Here for Popular

              Who I Am

              Zeeshan Rasool

              Software Engineer - PHP
              Lahore - Pakistan

              zeeshan(@)99points.info
              Skype: zeeshan-rasool
              gTalk: zishan.rasool85

              Categories

              Tags

              99points adobe AJAX ajax pagination ajax rating ajax tutorial ajax voting system captcha Codeigniter codeigniter 2.0 codeigniter recaptcha CSS css tutorials dreamweaver cs5 Facebook facebox farmville ffmpeg flv google api hacking Joomla JQuery JQuery Gallery JQuery menus Jquery tutorial mafia war Mootools MySQL pagination Payment PHP php curl recaptcha RSS Feed SEO simplepie socail networking ssl Tutorials Twitter wall script Web XSS youtube

              Comments