Like dislike rating system
Web developers and programmers usually use like dislike button in web sites or in web apps now it is very easy to use facebook or youtube or a simple like dislike button using php which will tell you how many total likes on website and how many like and dislike.
Facebook like dislike requirement :
To implement like dislike button in your website you need basically four files.* A database file (sql) : to store like dislike counting.
* A html file which will display your page button or the footer where you want to display buttons.
* A php file that will update or insert if somebody like dislike your page.
* A css file you may ignore this file or you can customize this according to your need.
here i am taking database name as "likeanddislike"
Create a like dislike rating system table in your mysql :
CREATE TABLE `rating_system` (
`total_no_of_votes` int(11) NOT NULL,
`vote_likes` int(11) NOT NULL,
`vote_dislike` int(11) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
INSERT INTO `rating_system` (`total_no_of_votes`, `vote_likes`, `vote_dislike`) VALUES
(0, 0, 0);
Create your Html file :
Create your html file for displaying like dislike button In this file we will first include jquery cdn than and write ajax code for sending and fetching the like dislike count.Now create a link to external css or design this file according to your need i am displaying here button for demo purpose only.Here is the html file (vote_rating_system.html)
<html>
<head>
<link rel="stylesheet" type="text/css" href="vote_rating_style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
function like_insertion()
{
$.ajax({
type: 'post',
url: 'collect_rating.php',
data: {
post_liked:"like"
},
success: function (response) {
$('#total_votes').slideDown()
{
$('#total_votes').html(response);
}
}
});
}
function dislike_insertion()
{
$.ajax({
type: 'post',
url: 'collect_rating.php',
data: {
post_dislike:"dislike"
},
success: function (response) {
$('#total_votes').slideDown()
{
$('#total_votes').html(response);
}
}
});
}
</script>
</head>
<body>
<h1>Like and Dislike Rating System Using Php,jQuery,Ajax</h1>
<input type="image" src="like.png" onclick="like_insertion();" id="like_button">
<input type="image" src="dislike.png" onclick="dislike_insertion();" id="dislike_button">
<div id="total_votes"></div>
</body>
</html>
Create php file (collect_rating.php) :
This file will insert like dislike data into the mysql table and retrun the result to html ajax module which will display all the likes and dsilikes on the page
<?php
if(isset($_POST['post_liked']))
{
$host ="localhost";
$username ="root";
$password ="";
$databasename ="likeanddislike";
$Connect = mysqli_connect($host,$username,$password);
mysqli_select_db($Connect,$databasename);
mysqli_query($Connect,"update rating_system set
total_no_of_votes=total_no_of_votes+1,vote_likes=vote_likes+1");
$select = mysqli_query($Connect,"SELECT * FROM rating_system");
while($row=mysqli_fetch_array($select,1))
{
$total_no_votes=$row['total_no_of_votes'];
$liked=$row['vote_likes'];
$disliked=$row['vote_dislike'];
echo "<p id='total_rating'>Total Ratings ( ".$total_no_votes." )</p>";
echo "<p id='total_like'><img src='like.png'>".$liked."</p><div id='like_bar'></div>";
echo "<p id='total_dislike'><img src='dislike.png'>".$disliked."
</p><div id='dislike_bar'></div>";
exit();
}
}
if(isset($_POST['post_dislike']))
{
$host = "localhost";
$username = "root";
$password = "";
$databasename = "likeanddislike";
$connect=mysqli_connect($host,$username,$password);
mysqli_select_db($connect,$databasename);
mysqli_query($connect,"update rating_system set
total_no_of_votes=total_no_of_votes+1,vote_dislike=vote_dislike+1");
$select = mysqli_query($connect,"SELECT * FROM rating_system");
while($row=mysqli_fetch_array($select,1))
{
$total_no_votes=$row['total_no_of_votes'];
$liked=$row['vote_likes'];
$disliked=$row['vote_dislike'];
echo "<p id='total_rating'>Total Ratings ( ".$total_no_votes." )</p>";
echo "<p id='total_like'><img src='like.png'>".$liked."</p><div id='like_bar'></div>";
echo "<p id='total_dislike'><img src='dislike.png'>".$disliked."
</p><div id='dislike_bar'></div>";
exit();
}
}
?>
Like dislike rating Css :
This file contains the code for designing of your page you can further custmize the css code according to your need here is code for ( vote_rating_style.css ) file
body
{
background-color:#000;
font-family:helvetica;
margin:0px auto;
padding:0px;
width:995px;
}
h1
{
color:#f9fd0d;
text-align:center;
margin-top:15%;
font-size:35px;
}
#like_button
{
margin-left:40%;
width:40px;
height:40px;
border-radius:100%;
padding:10px;
background-color:white;
}
#dislike_button
{
margin-left:50px;
width:40px;
height:40px;
border-radius:100%;
padding:10px;
background-color:white;
}
#total_rating{
color: white;
font-size: 30px;
text-align: center;
}
#total_like{
color: white;
font-size: 22px;
margin-left:44%;
}
#total_dislike{
color: white;
font-size: 22px;
margin-left:44%;
}
 |
| OUTPUT OF CODE |
Nyc
ReplyDeleteNice like dislike system
ReplyDelete