Like and Dislike System with Ajax, PHP & MySQL

In our previous tutorial, we have explained how to develop Star Rating System with jQuery, PHP & MySQL. In this tutorial, we will explain how to develop Like and Dislike System with Ajax, PHP & MySQL.

Like and Dislike or Vote Up and Vote Down is a common functionality of web applications to allow users to rate content, articles, posts, messages etc. The Up and Down vote functionality is needed where articles or posts are published and allow to analysed according to user votes.

So if you’re thinking about implementing Vote Up and Vote Down functionality then you’re here at right place. In this tutorial you will learn how to implement Vote Up and vote Down functionality with Ajax, PHP and MySQL.

We will cover this tutorial in easy steps with running example to display articles and allow users to Vote Up and Vote Down.

Also, read:

Follow and Unfollow System with PHP & MySQL

So let’s implement Up and Down Vote functionality with Ajax, PHP & MySQL. The file structure of this example is following.

index.php
vote.php
vote.js
Articles.php: Class to hold method related to article.

Step1: Create MySQL Database Table

As we will create live example of Up and Down vote, so first we will create MySQL database table articles to store article details.

CREATE TABLE `articles` (
  `id` double NOT NULL,
  `userid` double DEFAULT NULL,
  `content` text,
  `date` double DEFAULT NULL,
  `vote_up` int(11) DEFAULT '0',
  `vote_down` int(11) DEFAULT '0'
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

we will also create table articles_votes to store articles vote details.

CREATE TABLE `articles_votes` (
  `id` int(11) NOT NULL,
  `article_id` double DEFAULT NULL,
  `userid` double DEFAULT NULL,
  `vote` tinyint(1) DEFAULT NULL,
  `date` double DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Step2: Display Articles with Vote Up and Down Button

In index.php file, we will display articles list with up and Down vote button. We will call method getArticles() to get articles details.

<div class="row" id="article-list">
<?php
include ('Article.php');        
$article = new Article();
$articlesData = $article->getArticles();	
foreach($articlesData as $articles) { 
?>		
	<div class="col-sm-4 col-lg-4 col-md-4 article-body">			
		<div class="article-content"><?php echo $articles['content']; ?></div>
		<div class="article-options pull-right">					
			<a class="options" data-vote-type="1" id="article_vote_up_<?php echo $articles['id']; ?>"><i class="glyphicon glyphicon-thumbs-up" data-original-title="Like this article"></i></a>			
			<span class="counter" id="vote_up_count_<?php echo $articles['id']; ?>">  <?php echo $articles['vote_up']; ?></span>   					
			<a class="options"  data-vote-type="0" id="article_vote_down_<?php echo $articles['id']; ?>"><i class="glyphicon glyphicon-thumbs-down" data-original-title="Dislike this article"></i></a>		
			<span class="counter" id="vote_down_count_<?php echo $articles['id']; ?>">  <?php echo $articles['vote_down']; ?></span>				
		</div>			
	</div>
<?php } ?>	
</div>

In class Articles.php, we will create method getArticles() to get articles details.

public function getArticles(){
	$sqlQuery = 'SELECT id, userid, content, date, vote_up, vote_down 
		FROM '.$this->articlesTable;
	return  $this->executeQuery($sqlQuery);        
}

Step3: Handle Vote Up and Down

In vote.js file, we will handle articles vote up and vote down functionality on class options click. We will make Ajax request to vote.php to update vote up or vote down details.

$(document).ready(function() {
	$(".options").on("click", function(){
		var id = $(this).attr("id");
		id = id.replace(/\D/g,'');
		var vote_type = $(this).data("vote-type"); 
		$.ajax({				
			type : 'POST',
			url  : 'vote.php',
			dataType:'json',
			data : {id:id, vote_type:vote_type},
			success : function(response){
				$("#vote_up_count_"+response.id).html("  "+response.vote_up);
				$("#vote_down_count_"+response.id).html("  "+response.vote_down);				
			}
		});
	});
});

Step4: Update Vote Up and Vote Down to MySQL Database Table

In vote.php file, we will functionality to update Vote up and Vote Down to MySQL database table articles_votes. We will call articles method updateArticleVote() to update articles vote details.

$article = new Article();
$userid = 123456;
if($_POST['id'] && $userid) {	
	$articlesVote = $article->getArticleVotes($_POST['id']);		
	$userVote = $article->getUserVotes($userid, $_POST['id']);		
	if($_POST['vote_type'] == 1) {
		if($article->isUserAlreadyVoted($userid, $_POST['id']) && !$userVote['vote']) {
			$articlesVote['vote_up'] += 1;
			$articlesVote['vote_down'] -= 1;
			$userVote['vote'] = 1;	
		} else if (!$article->isUserAlreadyVoted($userid, $_POST['id'])){
			$articlesVote['vote_up'] += 1;
			$userVote['vote'] = 1;	
		}		
	} else if($_POST['vote_type'] == 0) {
		if($article->isUserAlreadyVoted($userid, $_POST['id']) && $userVote['vote']) {
			$articlesVote['vote_up'] -= 1;
			$articlesVote['vote_down'] += 1;
			$userVote['vote'] = 0;	
		} else if(!$article->isUserAlreadyVoted($userid, $_POST['id'])) {
			$articlesVote['vote_down'] += 1;
			$userVote['vote'] = 0;				
		}		
	}	
	$articlesVoteData = array(
		'id' => $_POST['id'],
		'userid' => $userid,
		'vote_up' => $articlesVote['vote_up'],
		'vote_down' => $articlesVote['vote_down'],
		'user_vote' => $userVote['vote']	
	);	
	$articlesVoted = $article->updateArticleVote($articlesVoteData);	
	if($articlesVoted) {
		$response = array(
			'vote_up' => $articlesVote['vote_up'],
			'vote_down' => $articlesVote['vote_down'],
			'id' => $_POST['id']			
		);
		echo json_encode($response);
	}
}

In class Articles.php, we will create method updateArticleVote() to update articles vote up or down details.

public function updateArticleVote($articleVoteData) {	
	$sqlQuery = "UPDATE ".$this->articlesTable." 
		SET vote_up = '".$articleVoteData['vote_up']."' , vote_down = '".$articleVoteData['vote_down']."' 
		WHERE id = '".$articleVoteData['id']."'";
	mysqli_query($this->dbConnect, $sqlQuery);		
	$sqlVoteQuery = '';
	if($this->isUserAlreadyVoted($articleVoteData['userid'], $articleVoteData['id'])) {
		$sqlVoteQuery = "UPDATE ".$this->articlesVotesTable." 
			SET vote = '".$articleVoteData['user_vote']."' 
			WHERE article_id = '".$articleVoteData['id']."' AND userid = '".$articleVoteData['userid']."'";
	} else {
		$sqlVoteQuery = "INSERT INTO ".$this->articlesVotesTable." (id, article_id, userid, vote) 
			VALUES ('', '".$articleVoteData['id']."', '".$articleVoteData['userid']."', '".$articleVoteData['user_vote']."')";
	}
	if($sqlVoteQuery) {
		mysqli_query($this->dbConnect, $sqlVoteQuery);	
		return true;			
	}		
}

You may also like:

You can view the live demo from the Demo link and can download the source from the Download link below.
Demo Download