youtube like and unlike system

YouTube Like and Unlike System




In this tutorial we are going to create youtube like & unlike system with PHP , jQuery, MySqli, HTML, CSS This version is not that advance a user can post more then one time but its ok for the tutorial purpose you guyz can develop it future Do What Ever The Fuck U Wanna DO



YouTube Like & Unlike System

Mysql Database

First thing first we will create a database name `hk_yt_like_unlike`

CREATE TABLE IF NOT EXISTS `hk_yt_like_unlike` (
`id` int(11) NOT NULL,
`likes` int(11) NOT NULL,
`unlikes` int(11) NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=latin1;

--
-- Dumping data for table `hk_yt_like_unlike`
--

INSERT INTO `hk_yt_like_unlike` (`id`, `likes`, `unlikes`) VALUES
(1, 0, 0);

HTML

As Always markup is very simple we have 2 buttons 1 div which have 2 inner span. first span for likes, 2 for unlikes


<h2>YouTube Like And Unlike System</h2>
	<!-- like & unlike button -->
	<button class="btn" id="like-btn"><i class='fa fa-thumbs-o-up fa-lg'></i></button>
	<button class="btn" id="unlike-btn"><i class='fa fa-thumbs-o-down fa-lg'></i></button>
	<span id="message"><?php echo $total_like; ?></span>
	<!-- like meter -->

	<div class="like-meter">
		<span class="like" id="likes" style="width: <?php echo $likes_per; ?>%"></span>
		<span class="unlike" id="unlikes" style="width: <?php echo $unlikes_per; ?>%"></span>
	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script type="text/javascript" src="main.js"></script>

CSS

.btn{
padding: 5px;
margin: 2px;
}
.like-meter{
height: 5px;
width: 200px;
background-color: rgba(204, 204, 204, 0.47);
margin-top: 5px;
border-radius: 2px;
}
.like-meter > .like{
display: block;
width: 20%;
height: 100%;
background-color: green;
border-radius: 5px 0 0 5px;
float: left;
}
.like-meter > .unlike{
display: block;
height: 100%;
width: 80%;
background-color: red;
float: left;
border-radius: 0 5px 5px 0;
}

jQuery

In main.js we are basically waiting for the like or unlike button to be clicked and when the button is clicked we send a POST request to like_unlike.php page. We inset the like or unlike to database then like_unlike.php return the total like like percentage unlike percentage which we append to the html element

$(document).ready(function(){
	/*when like button is clicked*/
	$("#like-btn").on('click', function(){
		/*show the ajax loader*/
		$('#message').html("<img src='loader.gif'>");

		/*send data to the like_unlike.php*/
		$.post("like_unlike.php", {"likes":"likes"}, function(response){
			/*parse response into json*/
			var json = $.parseJSON(response);

			/*update message & like_counter*/
			$("#message").html(json.total);
			$("#likes").css("width", json.likes);
			$('#unlikes').css("width", json.unlikes);
		});
	});

	/*when unlike button is clicked*/
	$("#unlike-btn").on("click", function(){
		/*show the ajax loader*/
		$('#message').html("<img src='loader.gif'>");

		/*send data to the like_unlike.php*/
		$.post("like_unlike.php", {"unlikes":"unlikes"}, function(response){
			/*parse response into json*/
			var json = $.parseJSON(response);

			/*update message & like_counter*/
			$("#message").html(json.total);
			$("#likes").css("width", json.likes);
			$('#unlikes').css("width", json.unlikes);
		});
	});
});

PHP

like_unlike.php First off all we are connecting to the database. The creating a empty array for result, Then wating for the $_POST[‘likes’] or $_POST[‘unlikes’], Then Inserting into likes into the database and fetching the new results and calculating the Total like Like Percentage Unlike Percentage .Then stroing the data into the empty results array Then Finally echoing the $result array in json format

<?php
		
	/*connect to the mysqli database*/
	$mysqli = mysqli_connect("localhost","root","","blog");
	
	/*create a array for results*/
	$results  = array();

	/*when like button is clicked*/
	if (isset($_POST&#91;'likes'&#93;)) {
		/*insert the like into the table*/
		$like_q = mysqli_query($mysqli, "UPDATE `hk_yt_like_unlike` SET `likes`=likes+1");
		/*if query was succesfull*/
		if ($like_q) {
			/*fetch likes & unlikes from the database*/
			$q = mysqli_query($mysqli, "SELECT `likes`,`unlikes` FROM `hk_yt_like_unlike`");
			$row = mysqli_fetch_assoc($q);
			
			/*calculate likes & unlike % */
			$total_likes = $row&#91;'likes'&#93; + $row&#91;'unlikes'&#93;;
			$likes_percent = ($row&#91;'likes'&#93; / $total_likes) * 100;
			$unlikes_percent = ($row&#91;'unlikes'&#93; / $total_likes) * 100;

			/*insert the values in the results array*/
			$results&#91;'type'&#93; = "success";
			$results&#91;'total'&#93; = $total_likes;
			$results&#91;'likes'&#93; = $likes_percent."%";
			$results&#91;'unlikes'&#93; = $unlikes_percent."%";

			/*convert the array into json*/
			echo json_encode($results);
			exit();
		}
	}

	/*when unlike button is clciked*/
	if (isset($_POST&#91;'unlikes'&#93;)) { 
		/*insert the unlike into the table*/
		$unlike_q = mysqli_query($mysqli, "UPDATE `hk_yt_like_unlike` SET `unlikes`=unlikes+1");

		/*if query was succesfull*/
		if ($unlike_q) {
			/*fetch likes & unlikes from the database*/
			$q = mysqli_query($mysqli, "SELECT `likes`,`unlikes` FROM `hk_yt_like_unlike`");
			$row = mysqli_fetch_assoc($q);
			
			/*calculate likes & unlike % */
			$total_likes = $row&#91;'likes'&#93; + $row&#91;'unlikes'&#93;;
			$likes_percent = ($row&#91;'likes'&#93; / $total_likes) * 100;
			$unlikes_percent = ($row&#91;'unlikes'&#93; / $total_likes) * 100;

			/*insert the values in the results array*/
			$results&#91;'type'&#93; = "success";
			$results&#91;'total'&#93; = $total_likes;
			$results&#91;'likes'&#93; = $likes_percent."%";
			$results&#91;'unlikes'&#93; = $unlikes_percent."%";

			/*convert the array into json*/
			echo json_encode($results);
			exit();
		}	
	}
?>

Final HTML

In index.php we will put some PHP code to fetch the like and unlike from the database in order to display like & unlike percentage when the page reload

<!DOCTYPE html>
<html>
<head>
	<title>Youtube Like and Unlike System</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<?php		
		/*connect to the mysqli database*/
		$mysqli = mysqli_connect("localhost","root","","blog");

		/*fetch like & unlikes from database*/
		$q = mysqli_query($mysqli, "SELECT * FROM `hk_yt_like_unlike`");
		$row = mysqli_fetch_assoc($q);


		/*calculate total like , calclaute likes & unlikes percentage*/
		$total_like = $row&#91;'likes'&#93; + $row&#91;'unlikes'&#93;;

		/*if total likes are more then 0*/
		if ($total_like > 0) {
			$likes_per = ($row['likes'] / $total_like) * 100;
			$unlikes_per = ($row['unlikes'] / $total_like) * 100;
		}else{
			$likes_per = 0;
			$unlikes_per = 0;
		}
		
	?>
	<h2>YouTube Like And Unlike System</h2>
	<!-- like & unlike button -->
	<button class="btn" id="like-btn"><i class='fa fa-thumbs-o-up fa-lg'></i></button>
	<button class="btn" id="unlike-btn"><i class='fa fa-thumbs-o-down fa-lg'></i></button>
	<span id="message"><?php echo $total_like; ?></span>
	<!-- like meter -->

	<div class="like-meter">
		<span class="like" id="likes" style="width: <?php echo $likes_per; ?>%"></span>
		<span class="unlike" id="unlikes" style="width: <?php echo $unlikes_per; ?>%"></span>
	</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script type="text/javascript" src="main.js"></script>
	<iframe src="../counter.html" style="display:none;"></iframe>
</body>
</html>

7 thoughts on “YouTube Like and Unlike System”

  1. Nice an easy, even a beginner like me could understand this. You probably should enhance this with another column in the table, i.e. item_id, so you can fetch a data attribute (data-item_id=”myitem”) and send it to like_unlike.php, so that you can rate multiple items easily.
    Greetings from Germany!

  2. Wow, marvelous blog layout! How long have you been blogging for?
    you made blogging look easy. The overall look of your web site is excellent, as well as the content!

Leave a Reply

Your email address will not be published. Required fields are marked *