Youtube Style Like And Dislike Rating System Using jQuery,Ajax And PHP.

Friday, Apr 7, 2017

Tags:- jQuery Ajax PHP


Youtube is the worlds biggest video sharing website and they have cool and stylish rating system so that user can like or dislike videos which is pretty usefull for such kind of content sharing website.In this tutorial we will create a like and dislike rating system like Youtube not exactly but kind of using jQuery,Ajax and PHP.You may also like star rating system using PHP.


See Demo
Youtube Style Rating System


To create a Youtube Style Rating System it takes only Four steps:-

  1. Create a database Table to store the Ratings
  2. Make a HTML file and define markup and script for Rating System
  3. Make a PHP file to store the ratings for Rating System
  4. Make a CSS file and define styling for Rating System


Step 1.Create a database Table to store the Ratings

We have to create a database table named rating having three columns total_votes,likes,dislike

CREATE TABLE `ratings` (
 `total_votes` int(11) NOT NULL,
 `likes` int(11) NOT NULL,
 `dislike` int(11) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1


Step 2.Make a HTML file and define markup and script for Rating System

We make a HTML file and save it with a name ratings.html

<html>
<head>
  <link rel="stylesheet" type="text/css" href="rating_style.css">
  <script type="text/javascript">
  
    function insert_like()
    {
	  $.ajax({
	    type: 'post',
	    url: 'store_rating.php',
	    data: {
	      post_like:"like"
	    },
	    success: function (response) {
 	      $('#totalvotes').slideDown()
	      {			
	        $('#totalvotes').html(response);
	      }
	    }
	    });
    }

    function insert_like()
    {
	  $.ajax({
	    type: 'post',
	    url: 'store_rating.php',
	    data: {
	      post_dislike:"dislike"
	    },
	    success: function (response) {
 	      $('#totalvotes').slideDown()
	      {			
	        $('#totalvotes').html(response);
	      }
	    }
	    });
    }
</script>
  
</head>

<body>
  <h1>Youtube Style Like and Dislike Rating System Using jQuery,Ajax and PHP</h1>

  <input type="image" src="like.png" onclick="insert_like();" id="like_button">
  <input type="image" src="dislike.png" onclick="insert_dislike();" id="dislike_button">
  <div id="totalvotes"></div>

</body>
</html>

In this step we made two buttons one is for Like and another is for Dislike to insert like and dislike in database.We made two functions one is insert_like() function which insert like into database and then get total likes and dislikes from database and display them and the second one is insert_dislike() function which does the same work as above.Both functions use ajax request to send and get the data from store_rating.php file.You may also like live voting system using ajax.



Step 3.Make a PHP file to store the ratings for Rating System

We make a PHP file named store_rating.php

<?php
if(isset($_POST['post_like']))
{
  $host="localhost";
  $username="root";
  $password="";
  $databasename="sample";

  $connect=mysql_connect($host,$username,$password);
  $db=mysql_select_db($databasename);

  $update = mysql_query("update ratings set total_votes=total_votes+1,likes=likes+1");
  $select = mysql_query("SELECT * FROM ratings");
  while($row=mysql_fetch_array($select))
  {
	$total_votes=$row['total_votes'];
	$likes=$row['likes'];
	$dislike=$row['dislike'];

    echo "<p id='total_rating'>Total Ratings ( ".$total_votes." )</p>";
    echo "<p id='total_like'><img src='like.png'>".$likes."</p><div id='like_bar'></div>";
    echo "<p id='total_dislike'><img src='dislike.png'>".$dislike."</p><div id='dislike_bar'></div>";
    exit();
  }
}


if(isset($_POST['post_dislike']))
{
  $host="localhost";
  $username="root";
  $password="";
  $databasename="sample";

  $connect=mysql_connect($host,$username,$password);
  $db=mysql_select_db($databasename);

  $update = mysql_query("update ratings set total_votes=total_votes+1,dislike=dislike+1");
  $select = mysql_query("SELECT * FROM ratings");
  while($row=mysql_fetch_array($select))
  {
  	$total_votes=$row['total_votes'];
	$likes=$row['likes'];
	$dislike=$row['dislike'];

    echo "<p id='total_rating'>Total Ratings ( ".$total_votes." )</p>";
    echo "<p id='total_like'><img src='like.png'>".$likes."</p><div id='like_bar'></div>";
    echo "<p id='total_dislike'><img src='dislike.png'>".$dislike."</p><div id='dislike_bar'></div>";
    exit();
  }
}
?>

In this step we made two isset methods if the user clicks on like button the ajax request send and get the data from first method and if user clicks on dislike button then the second method store and return data to ajax request.You can view our add captcha system on form using PHP tutorial to prevent from spamming and bots.



Step 4.Make a CSS file and define styling for Rating System

We make a CSS file and save it with name rating_style.css.

body
{
  background-color:#4B610B;
  font-family:helvetica;
  margin:0px auto;
  padding:0px;
  width:995px;
}
h1
{
  color:white;
  text-align:center;
  margin-top:100px;
  font-size:35px;
}
#like_button
{
  margin-left:300px;
  width:40px;
  height:40px;
  border-radius:100%;
  padding:10px;
  background-color:white;
}
#dislike_button
{
  margin-left:50px;
  width:40px;
  height:40px;
  border-radius:100%;
  padding:10px;
  background-color:white;
}
#totalvotes
{
  float:left;
  background-color:white;
  padding:20px;
  margin-left:300px;
  margin-top:10px;
  width:500px;
  box-shadow:0px 0px 10px 0px #122A0A;
  display:none;
}
#totalvotes p
{
  margin:0px;
  padding:0px;
}
#totalvotes #total_rating
{
  font-weight:bold;
  margin:0px;
}
#totalvotes img
{
  width:20px;
  height:20px;
  margin-right:5px;
}
#totalvotes #total_like
{
  float:left;
  margin-top:20px;
}
#totalvotes #like_bar
{
  float:left;
  width:200px;
  height:20px;
  background-color:green;
  margin-left:20px;
  margin-top:25px;
}
#totalvotes #total_dislike
{
  clear:both;
  float:left;
  margin-top:20px;
}
#totalvotes #dislike_bar
{
  float:left;
  width:70px;
  height:20px;
  background-color:red;
  margin-left:28px;
  margin-top:25px;
}

Thats all, this is how to create a Youtube Style Like and Dislike Rating System Using jQuery,Ajax and PHP.You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email