Posted inTechnology / jQuery / Mysql / php / Programming

Like Dislike system with PHP and MySQL

Today, We want to share with you Like Dislike system with PHP and MySQL.In this post we will show you Like and Dislike System with jQuery, PHP and MySQL, hear for Like Dislike Rating System with jQuery, Ajax and PHP we will give you demo and example for implement.In this post, we will learn about How to create Like & Unlike System in PHP MySQL and jQuery with an example.

Like Dislike system with PHP and MySQL

There are the Following The simple About Like Dislike system with PHP and MySQL Full Information With Example and source code.

As I will cover this Post with live Working example to develop Like and Unlike system using PHP and MySQL database, so the php code for likes and dislikes for this example is following below.

Step 1:

Table 1: products

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

Table 2: review_5_star_rating_information

CREATE TABLE `review_5_star_rating_information` (
  `client_id` int(11) NOT NULL,
  `product_id` int(11) NOT NULL,
  `rating_type_of_data` varchar(30) NOT NULL,
   CONSTRAINT UC_review_5_star_rating_information UNIQUE (client_id, product_id)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Step 2:

INSERT MySQL Database table Data

INSERT INTO `products` (`id`, `text`) VALUES
(1, 'Welcome To the first product'),
(2, 'Welcome To the second Ipjone'),
(3, 'Welcome To the third product'),
(4, 'Welcome To the fourth Mobile');

Step : 3

index.php





  
  Like and Dislike system - www.pakainfo.com
  
  
  


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

Step :4

main.css

.products-wrapper {
  width: 50%;
  margin: 20px auto;
  border: 1px solid #eee;
}
.product {
  width: 90%;
  margin: 20px auto;
  padding: 10px 5px 0px 5px;
  border: 1px solid green;
}
.product-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: yellow;
}

Step : 5

server.php:

 $harts[0],
  	'oppose' => $oppose[0]
  ];
  return json_encode($rating);
}

// Check if user already harts product or not
function userLiked($product_id)
{
  global $conn;
  global $client_id;
  $sql = "SELECT * FROM review_5_star_rating_information WHERE client_id=$client_id 
  		  AND product_id=$product_id AND rating_type_of_data='like'";
  $result = mysqli_query($conn, $sql);
  if (mysqli_num_rows($result) > 0) {
  	return true;
  }else{
  	return false;
  }
}

// Check if user already oppose product or not
function userDisliked($product_id)
{
  global $conn;
  global $client_id;
  $sql = "SELECT * FROM review_5_star_rating_information WHERE client_id=$client_id 
  		  AND product_id=$product_id AND rating_type_of_data='unharts'";
  $result = mysqli_query($conn, $sql);
  if (mysqli_num_rows($result) > 0) {
  	return true;
  }else{
  	return false;
  }
}

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

Step : 6

scripts.js:

$(document).ready(function(){

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

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

});

// if the user clicks on the unharts button ...
$('.unharts-btn').on('click', function(){
  var product_id = $(this).data('id');
  $like_dislike_btn = $(this);
  if ($like_dislike_btn.hasClass('fa-thumbs-o-down')) {
  	type_of_data = 'unharts';
  } else if($like_dislike_btn.hasClass('fa-thumbs-down')){
  	type_of_data = 'unoppose';
  }
  $.ajax({
  	url: 'index.php',
  	type: 'product',
  	data: {
  		'type_of_data': type_of_data,
  		'product_id': product_id
  	},
  	success: function(data){
  		res = JSON.parse(data);
  		if (type_of_data == "unharts") {
  			$like_dislike_btn.removeClass('fa-thumbs-o-down');
  			$like_dislike_btn.addClass('fa-thumbs-down');
  		} else if(type_of_data == "unoppose") {
  			$like_dislike_btn.removeClass('fa-thumbs-down');
  			$like_dislike_btn.addClass('fa-thumbs-o-down');
  		}
  		// display the number of harts and oppose
  		$like_dislike_btn.siblings('span.harts').text(res.harts);
  		$like_dislike_btn.siblings('span.oppose').text(res.oppose);
  		
  		// change button styling of the other button if user is reacting the second time to product
  		$like_dislike_btn.siblings('i.fa-thumbs-up').removeClass('fa-thumbs-up').addClass('fa-thumbs-o-up');
  	}
  });	

});

});

Web Programming Tutorials Example with Demo

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Like Dislike system with PHP and MySQL.
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.

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.

Leave a Reply

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

We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype