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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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)); }); //////////// }); }); }); |
2 thoughts on “YouTube Style Rating/Voting System using jQuery, Ajax and PHP. Ever Best Tutorial !”
Comments are closed.