Jul
8

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

Author ZeeShaN    Category AJAX, JQuery, PHP, Web Development     Tags , , ,

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

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

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.

  • Kristina

    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?

    January 11 2012
    CommentsLike
    • Bryn Nicholas

      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!

      January 04 2012
      CommentsLike
      • ZeeShaN

        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.

        December 24 2011
        CommentsLike
        • coder

          any advise on using this for multiple pages.. im having a tough time getting it too work

          December 23 2011
          CommentsLike
          • ZeeShaN

            Tommy, you must have empty record which you are diving. Try to inspect it step by step there must be empty data coming through….

            November 16 2011
            CommentsLike
            • ZeeShaN

              Welcome Kevin :) and thanks for sharing DB It would be help full for the users.

              November 16 2011
              CommentsLike
              • Kevin

                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!

                November 15 2011
                CommentsLike
                • tommy

                  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

                  November 15 2011
                  CommentsLike
                  • tester

                    wow! another wow!

                    November 14 2011
                    CommentsLike
                    • David

                      Wow looks great, really nice work, I think it need’s a little more size this stats bars or chart in my opinion, but really great work.

                      October 09 2011
                      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