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.