like and dislike button code in php

Today, We want to share with you like and dislike button code in php.In this post we will show you How To Toggle Likes and Dislikes?, hear for like and unlike system using php and mysql database we will give you demo and example for implement.In this post, we will learn about PHP Toggle Like Dislike Rating System using jQuery Ajax with an example.

How to code like and dislike button using php, jquery, mysql?

Table 1: articles

CREATE TABLE `articles` (
  `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
  `text` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Table 2: review_details

CREATE TABLE `review_details` (
  `visitor_id` int(11) NOT NULL,
  `article_id` int(11) NOT NULL,
  `review_action` varchar(30) NOT NULL,
   CONSTRAINT UC_review_details UNIQUE (visitor_id, article_id)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Insert articles

INSERT INTO `articles` (`id`, `text`) VALUES
(1, 'how to add calendar in html form'),
(2, 'html code to send email on button click'),
(3, 'how to get json data in php from url'),
(4, 'how to give space in html');

PHP Code For Likes & Dislikes system with PHP and MySQLi

index.php

  
  
  
  
  


  

   
   	

      
      

	    
      	
      		  class="fa fa-thumbs-up like-btn"
      	  
      		  class="fa fa-thumbs-o-up like-btn"
      	  
      	  data-id="">
      	
      	
      	    

	    
      	
      		  class="fa fa-thumbs-down dislike-btn"
      	  
      		  class="fa fa-thumbs-o-down dislike-btn"
      	  
      	  data-id="">
      	
      
   	
   
  
  

server.php

 $likes[0],
  	'dislikes' => $dislikes[0]
  ];
  return json_encode($review);
}

// Check if user already likes article or not
function userLiked($article_id)
{
  global $conn;
  global $visitor_id;
  $sql = "SELECT * FROM review_details WHERE visitor_id=$visitor_id 
  		  AND article_id=$article_id AND review_action='like'";
  $result = mysqli_query($conn, $sql);
  if (mysqli_num_rows($result) > 0) {
  	return true;
  }else{
  	return false;
  }
}

// Check if user already dislikes article or not
function userDisliked($article_id)
{
  global $conn;
  global $visitor_id;
  $sql = "SELECT * FROM review_details WHERE visitor_id=$visitor_id 
  		  AND article_id=$article_id AND review_action='dislike'";
  $result = mysqli_query($conn, $sql);
  if (mysqli_num_rows($result) > 0) {
  	return true;
  }else{
  	return false;
  }
}

$sql = "SELECT * FROM articles";
$result = mysqli_query($conn, $sql);
// fetch all articles from database
// return them as an associative array called $articles
$articles = mysqli_fetch_all($result, MYSQLI_ASSOC);

main.css

.articles-wrapper {
  width: 50%;
  margin: 20px auto;
  border: 1px solid #eee;
}
.article {
  width: 90%;
  margin: 20px auto;
  padding: 10px 5px 0px 5px;
  border: 1px solid green;
}
.article-info {
  margin: 10px auto 0px;
  padding: 5px;
}
.fa {
  font-size: 1.2em;
}
.fa-thumbs-down, .fa-thumbs-o-down {
  transform:rotateY(180deg);
}
.logged_in_user {
  padding: 10px 30px 0px;
}
i {
  color: blue;
}

scripts.js

$(document).ready(function(){

// if the user clicks on the like button ...
$('.like-btn').on('click', function(){
  var article_id = $(this).data('id');
  $clicked_btn = $(this);
  if ($clicked_btn.hasClass('fa-thumbs-o-up')) {
  	action = 'like';
  } else if($clicked_btn.hasClass('fa-thumbs-up')){
  	action = 'unlike';
  }
  $.ajax({
  	url: 'index.php',
  	type: 'article',
  	data: {
  		'action': action,
  		'article_id': article_id
  	},
  	success: function(data){
  		res = JSON.parse(data);
  		if (action == "like") {
  			$clicked_btn.removeClass('fa-thumbs-o-up');
  			$clicked_btn.addClass('fa-thumbs-up');
  		} else if(action == "unlike") {
  			$clicked_btn.removeClass('fa-thumbs-up');
  			$clicked_btn.addClass('fa-thumbs-o-up');
  		}
  		// display the number of likes and dislikes
  		$clicked_btn.siblings('span.likes').text(res.likes);
  		$clicked_btn.siblings('span.dislikes').text(res.dislikes);

  		// change button styling of the other button if user is reacting the second time to article
  		$clicked_btn.siblings('i.fa-thumbs-down').removeClass('fa-thumbs-down').addClass('fa-thumbs-o-down');
  	}
  });		

});

// if the user clicks on the dislike button ...
$('.dislike-btn').on('click', function(){
  var article_id = $(this).data('id');
  $clicked_btn = $(this);
  if ($clicked_btn.hasClass('fa-thumbs-o-down')) {
  	action = 'dislike';
  } else if($clicked_btn.hasClass('fa-thumbs-down')){
  	action = 'undislike';
  }
  $.ajax({
  	url: 'index.php',
  	type: 'article',
  	data: {
  		'action': action,
  		'article_id': article_id
  	},
  	success: function(data){
  		res = JSON.parse(data);
  		if (action == "dislike") {
  			$clicked_btn.removeClass('fa-thumbs-o-down');
  			$clicked_btn.addClass('fa-thumbs-down');
  		} else if(action == "undislike") {
  			$clicked_btn.removeClass('fa-thumbs-down');
  			$clicked_btn.addClass('fa-thumbs-o-down');
  		}
  		// display the number of likes and dislikes
  		$clicked_btn.siblings('span.likes').text(res.likes);
  		$clicked_btn.siblings('span.dislikes').text(res.dislikes);
  		
  		// change button styling of the other button if user is reacting the second time to article
  		$clicked_btn.siblings('i.fa-thumbs-up').removeClass('fa-thumbs-up').addClass('fa-thumbs-o-up');
  	}
  });	

});

});

I hope you get an idea about Toggle Button In Php.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.