YouTube Style Rating/Voting System using jQuery, Ajax and PHP. Ever Best Tutorial !

Written By: Zeeshan Rasool | Posted In: AJAX, JQuery, PHP, Web Development

Today I have created Youtube style rating system which is also called thumbs up/down rating. It is 99% identical to original youtube rating system. I have tried my best to give you a stylish and same youtube look rating system. I have implement IP address checks so that a single user can rate once. It looks very awesome please try it and give your feed backs.

Database Structure

CREATE TABLE IF NOT EXISTS `youtube_ip` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `userip` varchar(100) NOT NULL,
  PRIMARY KEY (`id`)
) 
CREATE TABLE IF NOT EXISTS `youtube_rating` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `liked` int(11) NOT NULL,
  `dislike` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) 
INSERT INTO `youtube_rating` (`id`, `liked`, `dislike`) VALUES
(1, 0, 0);

jquery code that is used:

 $(document).ready(function() {
	$('.like_button').mouseenter(function(e) {
		$('.tooltip').show();
		$('.ilikethis').fadeIn(200);
	}).mouseleave(function(e) {
		$('.ilikethis').fadeOut(200);
		$('.tooltip').hide();
	});
	$('.dislike_button').mouseenter(function(e) {
		$('.tooltip2').show();
		$('.idislikethis').fadeIn(200);
	}).mouseleave(function(e) {
	   $('.tooltip2').hide();
		$('.idislikethis').fadeOut(200);
	});
	
	$('.totalstatsbutton').livequery("mouseenter", function(e){
		$('.greenBar').css("background-color","#AADA37");
		 $('.redbar').css("background-color","#CF362F");
		$('.tooltip3').show();
		$('.totalstats').fadeIn(200);
	}).livequery("mouseleave", function(e){
		$('.tooltip3').hide();
		$('.greenBar').css("background-color","#DDDDDD");
		$('.redbar').css("background-color","#DDDDDD");
		$('.totalstats').fadeOut(200);
	});
});

$(document).ready(function(){	
	//$('#voting_result').fadeOut();
	$('button').click(function(){
		var a = $(this).attr("id");
		
		$.post("voting.php?value="+a, {
		}, function(response){
			$('#voting_result').fadeIn();
			$('#voting_result').html($(response).fadeIn('slow'));
			// now update box bar			
			$.post("update_box.php", {
			}, function(update){
				$('#update_count').html(unescape(update));				
			});
			////////////
			// now update tooltip count			
			$.post("update_tooltip.php", {
			}, function(updates){
				$('.tooltip3').html(unescape(updates));				
			});
			////////////
		});
	});	
});

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

Zeeshan Rasool is the founder and editor of this blog. Beside this, he is an experienced PHP web developer and freelancer. He loves to create best and interactive web apps. You can follow him at twitter @99_Points and facebook OR drop an email at 99points.info@gmail.com

75 to “YouTube Style Rating/Voting System using jQuery, Ajax and PHP. Ever Best Tutorial !”

tester November 14, 2011 at 7:53 am
wow! another wow!
tommy November 15, 2011 at 6:49 am
I have this problem , pleace if you can give me advice
Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in C:\xampp\htdocs\tube\update_box.php on line 5

Warning: Division by zero in C:\xampp\htdocs\tube\update_box.php on line 14

Warning: Division by zero in C:\xampp\htdocs\tube\update_box.php on line 16

Warning: mysql_num_rows() expects parameter 1 to be resource, boolean given in C:\xampp\htdocs\tube\voting.php on line 19

Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in C:\xampp\htdocs\tube\voting.php on line 48

Warning: Division by zero in C:\xampp\htdocs\tube\voting.php on line 57

Warning: Division by zero in C:\xampp\htdocs\tube\voting.php on line 59
Kevin November 15, 2011 at 12:04 pm
Great capturing system here, thanks for taking the time to build this out and share it with so many! The DB that I downloaded wasn’t matching up correctly though. I had to break out the ip to it’s own table, when I imported your sql dumped file it merged the ip into the rating table vs. generating it’s own table.
Below is the final table structure after making the necessary modifications if anyone would like to grab from here:

– phpMyAdmin SQL Dump
– version 3.4.7.1
– http://www.phpmyadmin.net
–
– Host: localhost
– Generation Time: Nov 15, 2011 at 05:01 AM
– Server version: 5.1.59
– PHP Version: 5.2.9

SET SQL_MODE=”NO_AUTO_VALUE_ON_ZERO”;
SET time_zone = “+00:00″;

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

–
– Database: `govector_masherpoll`
–

– ——————————————————–

–
– Table structure for table `youtube_ip`
–

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

– ——————————————————–

–
– Table structure for table `youtube_rating`
–

DROP TABLE IF EXISTS `youtube_rating`;
CREATE TABLE IF NOT EXISTS `youtube_rating` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`liked` int(11) NOT NULL DEFAULT ’0′,
`dislike` int(11) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

–
– Dumping data for table `youtube_rating`
–

INSERT INTO `youtube_rating` (`id`, `liked`, `dislike`) VALUES
(1, 0, 0);

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

You had the echos reversed for the like and dislike as it should be likes, dislikes. Now it works perfectly, thanks again for a great tool you’ve built here!
ZeeShaN November 16, 2011 at 7:26 am
Welcome Kevin and thanks for sharing DB It would be help full for the users.
ZeeShaN November 16, 2011 at 7:29 am
Tommy, you must have empty record which you are diving. Try to inspect it step by step there must be empty data coming through….
coder December 23, 2011 at 7:08 pm
any advise on using this for multiple pages.. im having a tough time getting it too work
ZeeShaN December 24, 2011 at 7:51 am
You can use some sort of flag id with the rating. Such as If you want to add this rating on a video then in table create a new field vid_id which will store that video ID so that you can differentiate which rating is for which video. For pages you can save pageID so that you can get specific pages rating.
Bryn Nicholas January 4, 2012 at 10:56 pm
Many MANY thanks for this. This is simply a fantastic system. Big thanks to Kevin there for fixing up the SQL. I’ve fiddled around with this for a few days and it is working SWEET!
Kristina January 11, 2012 at 8:52 am
I’ve been looking everywhere so thank you so much for this! I am new phpmyadmin and such and I think I installed everything right but when I test it out nothing shows. Am I missing something?
a February 10, 2012 at 11:34 pm
The downloaded version has wierd positioning issues in ie 9 with the dislike button hanging below, works greats with every other browser. How to fix this issue?
Ahmed February 20, 2012 at 2:33 pm
Man I have same Problem How Can i Fixed ?
Muhammad Haseeb February 23, 2012 at 11:03 am
Thank You So much bro…. for such a wounderfull article
ZeeShaN February 23, 2012 at 5:09 pm
Thanks to all again
MM February 25, 2012 at 7:12 pm
Hi there, I’m working with your code and noticed that you reference “$.post(“rating.php?show=1″,”

In the downloaded RAR, there is no rating.php page. Should this be blank?
MM February 25, 2012 at 7:28 pm
Figured it out The rating.php isn’t necessary for functionality, but is optional if you’d like to run a ratings system on various pages/content. Thanks again!
ZeeShaN February 25, 2012 at 7:42 pm
Okay Thanks MM
zegmo March 6, 2012 at 1:56 pm
hey how to fix this Warning: mysql_fetch_array(): supplied argument is not a valid MySQL result resource in /home/a1558163/public_html/like/update_box.php on line 5

Warning: Division by zero in /home/a1558163/public_html/like/update_box.php on line 14
rg March 8, 2012 at 4:34 pm
when is his will be a WordPress plugin?
raymond April 6, 2012 at 3:39 pm
You c’ant use this script with a video site,why
you work so hard as you can do the same with
a snippet php and a text file
polas April 12, 2012 at 7:04 am
well you need a hack code to hack ie9 from scratch

Here how you can fix it.
example: position:relative top: -10px\9;
This is hack for ie9 browser.
Just add \9 in the end of string
Tien Nguyen June 20, 2012 at 1:42 am
“single user can rate once”? You are using $userip = $_SERVER['REMOTE_ADDR']; that can only get the proxy ip, not client ip what come after a proxy. So if my friend (who has same local network with me) voted, so I can not vote.

And how to apply this for multi urls?
45 Ajax with jQuery Tutorials July 6, 2012 at 3:38 am
[...] View Tutorial [...]
Josh August 15, 2012 at 10:51 pm
Can you please tell how to setup the database, I get database error
Kelvin October 27, 2012 at 4:39 pm
why my like cannot increase?
Chris November 2, 2012 at 12:17 am
Do NOT try and use google hosted jquery versions 8.0 and up. Firefox and IE will not work and it drove me crazy for days. Finally I used an older version of jquery and everything works beautiful cross browser. Hopefully this saves someone else the trouble I went through…