The rating system is beneficial to know what the audience thinks about your product or services. Therefore, the rating helps the user to give their thought and can describe your product or service. Also, it benefits the owner to understand the disadvantages of products and know whether the product meets customer demands or not.
If you want to get customer feedback, the rating system is beneficial. With the help of the rating system, web admin can track the visitor’s like and dislike. Also, it will help the webmaster to understand the visitor’s choices and make their website more attractive to the visitors. So, most of the e-commerce websites or blogs implement the rating system to get the customer review.
You can quickly implement the rating system feature by using jQuery and PHP. In this tutorial, we explain to you how to build a simple rating system using jQuery, Ajax, PHP, and MySQL. The sample rating system takes the visitor’s like or dislikes with jQuery and Ajax. Besides, it will holds the rating data in the database using PHP and MySQL. Once it calculates the total number of likes and dislikes, then it will be visible to the visitors. After then, we will make the whole process simple, and you can implement the rating system in your project very quickly.
Use the OOP concept in PHP to make the whole script simple and easy to extend. The following feature will be implemented in the like dislike rating system using PHP.
- Get the posts data from the database and list with like and dislike button.
- Click on the like and dislike button, the like or dislike number of the particular post will be updated.
- The like and dislike number is visible beside the button.
Create Database Table
There is a need to create a table needs in the database, and two fields needed to holds the like and dislike number to store the post data. The following SQL will make a posts table with some necessary fields in the MySQL database.
CREATE TABLE `posts` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
`content` text COLLATE utf8_unicode_ci NOT NULL,
`image` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
`like_num` bigint(10) NOT NULL,
`dislike_num` bigint(10) NOT NULL,
`created` datetime NOT NULL,
`modified` datetime NOT NULL,
`status` enum('1','0') COLLATE utf8_unicode_ci NOT NULL DEFAULT '1' COMMENT '1=Active, 0=Inactive',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
SEE ALSO: Confirmation Before Closing of Tab/Browser using JavaScript
Post Class (Post.class.php)
The Post class manages all the conditions related to the database. For instance, connect to the MySQL database server, insert, update, and delete post data in the database. Specify the database host ($dbHost), username ($dbUsername), password ($dbPassword), and name ($dbName) as per your database server credentials.
__constructor()– Connect to the MySQL database.getRows()– Fetch records from the posts table and returns the post data as an array based on the specified conditions.insert()– Insert post data in the posts table.update()– Update post data in the posts table.
<?php
/*
* Post Class
* This class is used for database related (connect, insert, and update) operations
* @author Allsweb.com
* @url http://www.allsweb.com
* @license http://www.allsweb.com/license
*/
class Post{
private $dbHost = "localhost";
private $dbUsername = "root";
private $dbPassword = "root";
private $dbName = "allsweb";
private $tblName = "posts";
public function __construct(){
if(!isset($this->db)){
// Connect to the database
$conn = new mysqli($this->dbHost, $this->dbUsername, $this->dbPassword, $this->dbName);
if($conn->connect_error){
die("Failed to connect with MySQL: " . $conn->connect_error);
}else{
$this->db = $conn;
}
}
}
/*
* Returns rows from the database based on the conditions
* @param string name of the table
* @param array select, where, order_by, limit and return_type conditions
*/
public function getRows($conditions = array()){
$sql = 'SELECT ';
$sql .= array_key_exists("select",$conditions)?$conditions['select']:'*';
$sql .= ' FROM '.$this->tblName;
if(array_key_exists("where",$conditions)){
$sql .= ' WHERE ';
$i = 0;
foreach($conditions['where'] as $key => $value){
$pre = ($i > 0)?' AND ':'';
$sql .= $pre.$key." = '".$value."'";
$i++;
}
}
if(array_key_exists("order_by",$conditions)){
$sql .= ' ORDER BY '.$conditions['order_by'];
}
if(array_key_exists("start",$conditions) && array_key_exists("limit",$conditions)){
$sql .= ' LIMIT '.$conditions['start'].','.$conditions['limit'];
}elseif(!array_key_exists("start",$conditions) && array_key_exists("limit",$conditions)){
$sql .= ' LIMIT '.$conditions['limit'];
}
$result = $this->db->query($sql);
if(array_key_exists("return_type",$conditions) && $conditions['return_type'] != 'all'){
switch($conditions['return_type']){
case 'count':
$data = $result->num_rows;
break;
case 'single':
$data = $result->fetch_assoc();
break;
default:
$data = '';
}
}else{
if($result->num_rows > 0){
while($row = $result->fetch_assoc()){
$data[] = $row;
}
}
}
return !empty($data)?$data:false;
}
/*
* Insert data into the database
* @param string name of the table
* @param array the data for inserting into the table
*/
public function insert($data){
if(!empty($data) && is_array($data)){
$columns = '';
$values = '';
$i = 0;
if(!array_key_exists('created',$data)){
$data['created'] = date("Y-m-d H:i:s");
}
if(!array_key_exists('modified',$data)){
$data['modified'] = date("Y-m-d H:i:s");
}
foreach($data as $key=>$val){
$pre = ($i > 0)?', ':'';
$columns .= $pre.$key;
$values .= $pre."'".$val."'";
$i++;
}
$query = "INSERT INTO ".$this->tblName." (".$columns.") VALUES (".$values.")";
$insert = $this->db->query($query);
return $insert?$this->db->insert_id:false;
}else{
return false;
}
}
/*
* Update data into the database
* @param string name of the table
* @param array the data for updating into the table
* @param array where condition on updating data
*/
public function update($data,$conditions){
if(!empty($data) && is_array($data)){
$colvalSet = '';
$whereSql = '';
$i = 0;
if(!array_key_exists('modified',$data)){
$data['modified'] = date("Y-m-d H:i:s");
}
foreach($data as $key=>$val){
$pre = ($i > 0)?', ':'';
$colvalSet .= $pre.$key."='".$val."'";
$i++;
}
if(!empty($conditions)&& is_array($conditions)){
$whereSql .= ' WHERE ';
$i = 0;
foreach($conditions as $key => $value){
$pre = ($i > 0)?' AND ':'';
$whereSql .= $pre.$key." = '".$value."'";
$i++;
}
}
$query = "UPDATE ".$this->tblName." SET ".$colvalSet.$whereSql;
$update = $this->db->query($query);
return $update?$this->db->affected_rows:false;
}else{
return false;
}
}
}
?>
Posts with Like Dislike Rating (index.php)
In index.php file, fetch all the posts from the database and listed with like and dislike button for rating.
JavaScript Code:
This instance uses jQuery and Ajax to save rating in the database without a page refresh, so include the jQuery library.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
cwRating()
It is a custom JavaScript function that sends the post ID and rating type to the rating.php file via AJAX. Grounded on the Ajax response, show the rating number on the like or dislike counter.
<script>
/**
* cwRating() function sends a request to the server-side
* to insert like or dislike number in the database.
* On success, shows the rating number count to the specified element.
*
* Author: CodexWorld
*
* @param id - Unique ID to save like or dislike for this respective ID.
* @param type - Use 1 for like and 0 for dislike.
* @param target - The div ID where the total number of likes or dislikes will display.
*
*/
function cwRating(id,type,target){
$.ajax({
type:'POST',
url:'rating.php',
data:'id='+id+'&type='+type,
success:function(msg){
if(msg == 'err'){
alert('Some problem occured, please try again.');
}else{
$('#'+target).html(msg);
}
}
});
}
</script>
PHP & HTML Code
At first, the posts data is retrieved from the database with the help of Post class and listed with some basic details and like & dislike buttons. On clicking the rating buttons, cwRating() function is triggered and passes these parameters – post ID, rating type(1=Like, 0=Dislike), HTML element to show the counter.
<?php
// Load and initialize post class
require_once 'Post.class.php';
$post = new Post();
// Get posts data
$posts = $post->getRows();
?>
<div class="row">
<?php if(!empty($posts)){ foreach($posts as $row){ ?>
<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="<?php echo 'images/'.$row['image']; ?>" />
<div class="caption">
<h4><?php echo $row['title']; ?></h4>
<p><?php echo $row['content']; ?></p>
</div>
<div class="ratings">
<p class="pull-right"></p>
<p>
<!-- Like button -->
<span class="glyphicon glyphicon-thumbs-up" onClick="cwRating(<?php echo $row['id']; ?>, 1, 'like_count<?php echo $row['id']; ?>')"></span>
<!-- Like counter -->
<span class="counter" id="like_count<?php echo $row['id']; ?>"><?php echo $row['like_num']; ?></span>
<!-- Dislike button -->
<span class="glyphicon glyphicon-thumbs-down" onClick="cwRating(<?php echo $row['id']; ?>, 0, 'dislike_count<?php echo $row['id']; ?>')"></span>
<!-- Dislike counter -->
<span class="counter" id="dislike_count<?php echo $row['id']; ?>"><?php echo $row['dislike_num']; ?></span>
</p>
</div>
</div>
</div>
<?php } } ?>
</div>
Like/Dislike Rating Number Counter (rating.php)
The rating.php file handles the following functionality to save the rating number in the database.
- Get post ID from Ajax request using $_POST in PHP.
- Fetch post data from the database based on the post ID using getRows() method of Post class.
- Update like or dislike number based on the rating type ($_POST[‘type’]) using update() method of Post class.
- Return the like or dislike number to the success function of Ajax request.
<?php
// Load and initialize post class
require_once 'Post.class.php';
$post = new Post();
if(!empty($_POST['id'])){
// Get post data
$conditions['where'] = array(
'id' => $_POST['id']
);
$conditions['return_type'] = 'single';
$postData = $post->getRows($conditions);
// Post total likes
$postLike = $postData['like_num'];
// Post total dislikes
$postDislike = $postData['dislike_num'];
// Calculates the numbers of like or dislike
if($_POST['type'] == 1){
$like_num = ($postLike + 1);
$upData = array(
'like_num' => $like_num
);
$return_count = $like_num;
}else{
$dislike_num = ($postDislike + 1);
$upData = array(
'dislike_num' => $dislike_num
);
$return_count = $dislike_num;
}
// Update post like or dislike
$condition = array('id' => $_POST['id']);
$update = $post->update($upData, $condition);
// Return like or dislike number if update is successful, otherwise return error
echo $update?$return_count:'err';
}
?>
Styling
In the example code, You can use the Bootstrap library to style the posts list and Like/Dislike buttons. You can neglect it if you don’t want to use Bootstrap.
Attach the Bootstrap CSS and JS library.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Specify some CSS code to style the posts list and Like/Dislike buttons.
.row{ margin:20px 20px 20px 20px;}
.ratings{ font-size:25px !important;}
.thumbnail img {
width: 100%;
}
.ratings {
padding-right: 10px;
padding-left: 10px;
color: #d17581;
}
.thumbnail {
padding: 0;
}
.thumbnail .caption-full {
padding: 9px;
color: #333;
}
.glyphicon-thumbs-up:hover{ color:#008000; cursor:pointer;}
.glyphicon-thumbs-down:hover{ color: #E10000; cursor:pointer;}
.counter{ color:#333333;}
.thumbnail img{height:200px;}
SEE ALSO: Redirect non-www to www & HTTP to HTTPS using .htaccess file
Conclusion
Firstly, we have tried to make a rating system user-friendly and straightforward. Secondly, with the help of our example script, you can quickly implement a rating system in PHP with jQuery and Ajax. According to this example script, a user can rate a lot of times for the same item. At last, if you do not want the user from various times rating, you can do it in two ways. First, permit the user to vote after login. And second, track the user IP address using $_SERVER['REMOTE_ADDR'] and allow the user to vote only once.
Also, read our previous blog- Star Rating System with jQuery, Ajax, PHP, and MySQL