Web DevelopmentjQuery And Javascript TutorialsPHP Tutorials

Like button and Dislike button using jQuery, HTML and PHP

In this web development tutorial, you will learn how to develop a like button and dislike button using jQuery, HTML and PHP. You can also create a single button for like/dislike and even use two separate button’s for each functionality. Before developing you must download jQuery Library or use CDN files.

Steps to create Like button and Dislike button

Like button and dislike button

In this tutorial I am using XAMPP and then created folder with name “like” inside htdocs folder. You can change and edit code according to your requirement.

Create a file index.php inside your root directory and then follow the steps below

Creating HTML Buttons

<button id="like">Like</button>
<button id="dislike">Dislike</button>

Copy and paste above code in your file that you create then save it. I have assign id to both like and dislike button.

Adding jQuery Library

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

Add above script tag below HTML buttons and then save your file again.

Creating Like Functionality using jQuery and PHP

<script> 
$("#like").click(function(e){
	if($(this).hasClass("liked")){ 
		$(this).removeClass("liked");
		$.post("index.php",{"postid": 1, "userid": "Any User id" , "like": 0},function(data){
			if(data == "1")
			{
				alert("Like Remove");
			} else {
				alert("Some Error while removing like");
			}
		});
	} else {
		$(this).addClass("liked");
		$.post("index.php",{"postid": 1, "userid": "Any User id" , "like": 1},function(data){
			if(data == "1")
			{
				alert("Like Added");
			} else {
				alert("Some Error while adding like");
			}
		});
	}
});
</script>

Add above code below jQuery library and then save your file. In above code, we use click event for triggering like button. When user click like button, it first check if button has class “liked” or not. If button has class “liked” then function will first remove “liked” class from button then post userid, postid and like parameter with value 0. When parameter’s are post then in callback if response is equal to 1 then it shows success message otherwise error will show. User like will remove.

If button does not have “liked” class then function first add class “liked” in button. After that function will post  userid, postid and like parameter with value 1. When parameter’s are post then in callback if response is equal to 1 then it shows success message otherwise error will show. User like added.

Add and remove like from database using PHP

<?php
//For Like Button
if(isset($_POST['like']))
{
	$like = $_POST['like'];
	
	//Removing Like
	if($like == 0)
	{
		//Delete Like Mysql Query will be here if error then  echo 0 otherwise echo 1;
		echo 1;
	} else {
                //Removing DisLike Mysql Query
		//Adding Like Mysql Query will be here if error then  echo 0 otherwise echo 1;
		echo 1;
	}
	die();
	
} ?>

Copy and Paste above code before button tags. When you click button then for remove like from database, function post parameter like which is set to 0. So, in php first we check if like parameter is post then check like value. If value is equal to 0 then we echo 1, here add your delete query for removing like. Similarly if value is equal to 1 then first it will check if any dislike insert in database and then remove dislike and add like.

Whole above PHP and jQuery code is for like button. If you need only single like button then do not follow below steps.

Creating Dislike functionality using jQuery and PHP

Dislike functionality is all similar to like button only you need to change parameter name “like”  to “dislike” and click event id. Copy and Paste Below code after like button jQuery function as shown below

<script> 
$("#like").click(function(e){
	if($(this).hasClass("liked")){ 
		
		$.post("index.php",{"postid": 1, "userid": "Any User id" , "like": 0},function(data){
			if(data == "1")
			{
				alert("Like Remove");
			} else {
				alert("Some Error while removing like");
			}
		});
	} else {
		$(this).addClass("liked");
		$.post("index.php",{"postid": 1, "userid": "Any User id" , "like": 1},function(data){
			if(data == "1")
			{
				alert("Like Added");
			} else {
				alert("Some Error while adding like");
			}
		});
	}
});

//For Like Button
$("#dislike").click(function(e){
	if($(this).hasClass("disliked")){
		//If already liked then removing like if click on same button
		
		$.post("index.php",{"postid": 1, "userid": "Any User id" , 'dislike': 0},function(data){
			if(data == "1")
			{
				alert("DisLike Remove");
			} else {
				alert("Some Error while removing dislike");
			}
		});
	} else {
		$(this).addClass("disliked");
		$.post("index.php",{"postid": 1, "userid": "Any User id" , "dislike": 1},function(data){
			if(data == "1")
			{
				alert("DisLike Added");
			} else {
				alert("Some Error while adding dislike");
			}
		});
	}
});

</script>

Similarly for php copy and paste below code after like button php as shown below

<?php
//For Like Button
if(isset($_POST['like']))
{
	$like = $_POST['like'];
	
	//Removing Like
	if($like == 0)
	{
		//Delete Like Mysql Query will be here if error then  echo 0 otherwise echo 1;
		echo 1;
	} else {
                //Removing DisLike Mysql Query
		//Adding Like Mysql Query will be here if error then  echo 0 otherwise echo 1;
		echo 1;
	}
	die();
	
}

if(isset($_POST['dislike']))
{
	$dislike = $_POST['dislike'];
	
	//Removing Like
	if($dislike == 0)
	{
               
		//Delete DisLike Mysql Query will be here if error then  echo 0 otherwise echo 1;
		echo 1;
	} else {
		//Removing Like Mysql Query
                //Adding DisLike Mysql Query will be here if error then  echo 0 otherwise echo 1;
		echo 1;
	}
	die();
	
}
?>

Database Table Structure

We will use one table for both like and dislike values. Columns in database are as shown below

  1. Id (Auto Increment Unique Id)
  2. UserId (User Id for providing unique likes and dislikes)
  3. Post Id
  4. Like
  5. Dislike

When user click like button then Insert query will work and save userid, postid, like and dislike also. In first insert query like will be 1 and dislike will be 0. When you want to remove like then delete whole row.

If user has dislike first and then click on like button then again delete whole row and insert again. For dislike insert query dislike will be 1 and like will be 0.

For any type question and queries Download my official app or comment down below

Download My App.

 

Show More

Anil Mehra

I am Anil Mehra, a passionate, workaholic and a Full Stack Tech Savvy Programmer with true north towards growth. I have worked on 256 live projects in MNC. I am expertise in the field of Programming, Server Management, SEO, Blogging and SMO...

Related Articles

One Comment

  1. Hi Anil.

    Interesting tutorial thanks,. I am a novice…trying to create a website that let’s Beach Uses look at information about beaches in various towns. A separate section allows Beach Workers to keep track of available parking spaces so that Beach Users can know if parking is available before they head there. I have all the beaches in a MySQL database which includes a default number of spaces for each beach (not fully populated yet, but the towns Dennis and Eastham have data). I am trying to figure out how to get the default number which is currently echo’d in PHP into a JS variable which I can then send back to the database as Available Parking Spaces after the Beach Worker add or deletes cars from the parking lot. I am sending the town and beach info to the PHP page as part of the URL to do my query (set as session variables). The query works and I can echo back the data in a form but cannot for the life of me figure out how to get that info over to JS… thanks for any advice.

Leave a Reply

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

Back to top button
Close