Jul

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

ZeeShaN

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

Many Thanks ! to all of the readers of 99Poin...

How can We verify Captcha with Ajax in Codeig...

Ajax Stylish Captcha and Contact Form using J...

Create Simple Rounded News Scroller using Moo...

Send Email from your Gmail account Using Code...

By HackingEthics

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.

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

Yousuf Salim July 9, 2010 at 4:14 am
Thank you for this nice tutorial, Its 100% same as youtube, thanks again…:)
(:PETER:) July 9, 2010 at 4:22 am
I was searching over internet for a best rating system which would help me to create awesome stuff, here I got this… thanks 99points
Nicolis July 9, 2010 at 5:52 am
oopes.. Its awesome, but how can I use it in my ASP.net website
Ali Qurban July 9, 2010 at 7:23 am
very nice, good work
Mohsin July 9, 2010 at 7:25 am
good work, little tricky
Shyle Hood July 9, 2010 at 7:26 am
working fine I like toolip, We can make it little changed to youtube. Good work Zeeshan
ZeeShaN July 9, 2010 at 7:27 am
Thanks to all my friends !
SamiUllah July 9, 2010 at 1:57 pm
Hi, thank you zeeshan this is a really nice piece of work, I like your blog. its design and there are many good tutorials.
Ajay Shiwasani July 9, 2010 at 2:04 pm
thank you zeeshan ….. great tutorial ………..
shashi July 9, 2010 at 2:07 pm
its amazing… I like it… It solved my problem
100+ Stunning Articles for Designers and Developers | tripwire magazine July 12, 2010 at 12:58 pm
[...] YouTube Style Rating/Voting System using jQuery, Ajax and PHP. Ever Best Tutorial ! [...]
georgi July 15, 2010 at 7:28 am
Great article, I will write an integration for VLD Personals on it and post the link here
ZeeShaN July 15, 2010 at 8:49 am
@georgi thanks,
Best Tutorials for Web Development » Blog Archive » Collective: YouTube Style Rating/Voting System using jQuery, Ajax and PHP July 21, 2010 at 12:02 am
[...] http://www.99points.info/2010/07/youtube-style-ratingvoting-system-using-jquery-ajax-and-php-ever-be... [...]
Omer Rosenbaum July 22, 2010 at 6:17 am
Hi
I created the DB and files on a local server and get only the header “Youtube Style Rating/Voting System using jQuery Ajax and PHP. Ever BEST Tutorial” without the rating box or any other thing.
Where is the problem?
ZeeShaN July 22, 2010 at 7:46 am
Hi, did you got any error? check source code in browser by right clicking and check is there any php error. Also I have included header footer so comment these two lines in index.php
dan August 2, 2010 at 6:30 pm
Thank you ZeeShaN. I looking all over the internet youtube thumbs up, and finaly this is what I need. I download now and try to learn and recreate new one. Thank you again for sharing with us, it’s very helpfull.
ZeeShaN August 2, 2010 at 7:04 pm
you welcome dan,
tony August 3, 2010 at 6:29 am
Thank you very much for your great work, but i have a problem.
The downloaded script is different from this one here. I have installed it but i get many errors with :
Warning: Division by zero and Warning: mysql_fetch_array(): supplied argument is not a valid MySQL…
The database you write here is not like the sql file that i have downloaded.
Can you help me please?
Thanks you!
ZeeShaN August 3, 2010 at 6:46 am
Hi tony, thanks and welcome. I have uploaded all data and it should be work fine because if there are any change in db then It is also updated in source files according to db. So I dont think this should be produce any error. How ever, Insert a fake record in db so that It shows first rating. Currently the db is empty there fore may be its giving error. Good Luck !
tony August 3, 2010 at 5:33 pm
Oh man, Thank you so much for your fast reply. Now it’s working like a charm and I like it more than the other in 9lessons.info. This is complete and more sexy .
But i still asking if no trouble for you. how can I integrate this script with a site with many pages?
I’m using a video site and want to give for every article and page the own rating.
Example where I should change the Id value!! In the database of the site I have already a Id table and the code to show it is $row[id]
Thank you again,
Best regards!
ZeeShaN August 3, 2010 at 5:49 pm
thanks tony, I always try to come out with some perfect type of tutorials. I just want all of my readers to share this blog as you can and help me out to make this effort successful. About your question: you need to attach article id with every rating. And get and insert records against that id. Good luck
tony August 4, 2010 at 3:09 am
hi ZeeShaN, where can i change the value of the Id in the youtube_rating table? Always show the same result forall the pages(id=1)
Hopefully you can help me because i want to include some code in the single plage(wordpress) and then automatically all the articles show the according rating system per id!
Thank you!
Regards!
Lars August 4, 2010 at 11:01 pm
Hi ZeeShaN,

Thanks for absolutely brilliant code. I am just experiencing one problem. This is that the text hovering above the “quickstat bar” is reversed. If I have ‘2 like votes’ it tells me 0 like , and 2 DISLIKE votes.. I am confused. It is like it has been reversed. Would be very grateful for help.
See here:
http://img641.imageshack.us/img641/4171/imghost.png
Thanks,
Lars
edwin August 5, 2010 at 8:21 am
once again; nice wek
ZeeShaN August 5, 2010 at 8:51 am
@edwin, Thanks
@Lars. Please check tooltip code This is revers there. The Heading is Like but variable will be dislike there. Just replace them in index.php
Lars August 5, 2010 at 10:35 am
Thanks ZeeShaN, Would it be possible for you to tell me which row # the change in index.php should be. I am not too good at this. Thanks a milion /Lars
ZeeShan August 5, 2010 at 12:49 pm
4734 dislikes, 1421 likes

Replace above with 4734 dislikes, 1421 likes TO 4734 likes, 1421 dislikes …
I hope you got it
How To Create Ajax Heart Rating System with JQuery and PHP | 99Points August 13, 2010 at 2:55 pm
[...] and voting script at 99Point.info I used animate() function of jQuery to get some stylish effect. When I create Youtube Style Ratings and Ajax Rating Many readers liked this and I thought I would give some stylish rating systems. [...]
G August 16, 2010 at 11:01 am
Hi Nice tutorial.

Just as a thought, I am always cautious about using the IP address to check for multiple user inputs as I usually have more than one IP address that I use and I also share my ip address with others.

I have one at home and one at work and I take my laptop to the local internet cafe sometimes, so that would mean 3 ip addresses at least on my computer and I also access the internet through my phone. That would mean if I really wanted to I could get at least 4 votes for something, local coffee shops and wifi hotspots mean I could easily get more.

The flip side to that is also that I share my IP address at work and at home, so that could mean that I don’t get a vote from anywhere if others have already voted using the IP address I am on.

Just thought I would highlight that, but the voting system is great.
ZeeShaN August 18, 2010 at 5:02 am
Thank G, you have pointed nice issue. Actually this time I am using IP for this voting system but If there is a site which required registration first before voting then we can do this thing easily by their email. So then we can save email address against that rating and we can check that If a user having email (example@example.com) already voted then we cant allow him to vote again.
I think Youtube is also using same thing with email or userID.

Hope it Works well

Regards
Zee
Jessy August 28, 2010 at 12:34 am
Thanks to share this code but could you tell me why I see “Warning: Division by zero in /www/…/update_box.php on line 14 & 16″ ?

Is-it because there is no recording ? but how add one ? sorry for my poor English language

For exemple I added this via phpMyAdmin:
- id: 1
- up_rated: 1
- users_ip: 123.123.123.123
- down_rated: 0

but it seems wrong…
ZeeShaN August 28, 2010 at 10:28 am
hi, Jessy, you should give down rated = 1 try that and let me know if it still give error
Jess August 30, 2010 at 5:39 pm
@ZeeShaN: Thanks for your reply… but there are always these 2 warnings / errors

May be, my php config could be the reason ?
usman August 30, 2010 at 7:11 pm
Hi Zeeshan, A very nice example. but i want you help. i want to use this rating multiple times on a single page. For example, if we have 4 or 5 articles on one page and user can rate each article individually, Please tell me how i can do this. Please make an example for this also. i assigned Ids but its not working.
Please help me..

Regards
Usman
ZeeShaN August 30, 2010 at 7:26 pm
thanks usman, for liking my work. You can do this if you just make a full try, i have no example to show you I will try to make a post on this type of thing soon but not sure when. I hope you will do it You just need to separate each rating with article ids.
Cheers