like and dislike button code in php

php, JavaScript, jQuery, Mysql, Mysqli Leave a comment

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 

<?php include('server.php'); ?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Like and Dislike system</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <div class="articles-wrapper">
   <?php foreach ($articles as $article): ?>
   	<div class="article">
      <?php echo $article['text']; ?>
      <div class="article-info">
	    <!-- if user likes article, style button differently -->
      	<i <?php if (userLiked($article['id'])): ?>
      		  class="fa fa-thumbs-up like-btn"
      	  <?php else: ?>
      		  class="fa fa-thumbs-o-up like-btn"
      	  <?php endif ?>
      	  data-id="<?php echo $article['id'] ?>"></i>
      	<span class="likes"><?php echo getLikes($article['id']); ?></span>
      	
      	    

	    <!-- if user dislikes article, style button differently -->
      	<i 
      	  <?php if (userDisliked($article['id'])): ?>
      		  class="fa fa-thumbs-down dislike-btn"
      	  <?php else: ?>
      		  class="fa fa-thumbs-o-down dislike-btn"
      	  <?php endif ?>
      	  data-id="<?php echo $article['id'] ?>"></i>
      	<span class="dislikes"><?php echo getDislikes($article['id']); ?></span>
      </div>
   	</div>
   <?php endforeach ?>
  </div>
  <script src="scripts.js"></script>
</body>
</html>

server.php 

<?php 
// connect to Your Live database
$conn = mysqli_connect('localhost', 'root', '[email protected]#$dfkjdkf', 'dislike_like');

// lets assume a user is logged in with id $visitor_id
$visitor_id = 2;

if (!$conn) {
  die("Error connecting to database: " . mysqli_connect_error($conn));
  exit();
}

// if user clicks like or dislike button
if (isset($_POST['action'])) {
  $article_id = $_POST['article_id'];
  $action = $_POST['action'];
  switch ($action) {
  	case 'like':
         $sql="INSERT INTO review_details (visitor_id, article_id, review_action) 
         	   VALUES ($visitor_id, $article_id, 'like') 
         	   ON DUPLICATE KEY UPDATE review_action='like'";
         break;
  	case 'dislike':
          $sql="INSERT INTO review_details (visitor_id, article_id, review_action) 
               VALUES ($visitor_id, $article_id, 'dislike') 
         	   ON DUPLICATE KEY UPDATE review_action='dislike'";
         break;
  	case 'unlike':
	      $sql="DELETE FROM review_details WHERE visitor_id=$visitor_id AND article_id=$article_id";
	      break;
  	case 'undislike':
      	  $sql="DELETE FROM review_details WHERE visitor_id=$visitor_id AND article_id=$article_id";
      break;
  	default:
  		break;
  }

  // run query to effect changes in the database ...
  mysqli_query($conn, $sql);
  echo getRating($article_id);
  exit(0);
}

// Get total number of likes for a particular article
function getLikes($id)
{
  global $conn;
  $sql = "SELECT COUNT(*) FROM review_details 
  		  WHERE article_id = $id AND review_action='like'";
  $rs = mysqli_query($conn, $sql);
  $result = mysqli_fetch_array($rs);
  return $result[0];
}

// Get total number of dislikes for a particular article
function getDislikes($id)
{
  global $conn;
  $sql = "SELECT COUNT(*) FROM review_details 
  		  WHERE article_id = $id AND review_action='dislike'";
  $rs = mysqli_query($conn, $sql);
  $result = mysqli_fetch_array($rs);
  return $result[0];
}

// Get total number of likes and dislikes for a particular article
function getRating($id)
{
  global $conn;
  $review = array();
  $likes_query = "SELECT COUNT(*) FROM review_details WHERE article_id = $id AND review_action='like'";
  $dislikes_query = "SELECT COUNT(*) FROM review_details 
		  			WHERE article_id = $id AND review_action='dislike'";
  $likes_rs = mysqli_query($conn, $likes_query);
  $dislikes_rs = mysqli_query($conn, $dislikes_query);
  $likes = mysqli_fetch_array($likes_rs);
  $dislikes = mysqli_fetch_array($dislikes_rs);
  $review = [
  	'likes' => $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.

Related posts:

  1. Like Dislike system with PHP and MySQL
  2. Laravel 5.6 Like Dislike rating system with jQuery, Ajax and PHP
  3. How to send email in php? | php code to send email on button click
  4. Rregistration and login form in php and mysql with validation code free download
  5. how to delete data from database in php using button?
  6. how to implement custom captcha code in php Script?
  7. Pagination in PHP and MySQLi Source Code
  8. html code to send email on button click
Also Read This ๐Ÿ‘‰   PHP Laravel 5.7 Image Upload with Validation Tutorial Example