Developer Guidance
Developer Guidance

Tag: how to store ratings in database

Categories
Codeigniter Jquery Laravel Php Wordpress

How To Create Star Rating System Using PHP, MySQL, Ajax & jQuery

Star Rating System using php

Star Rating System or jquery rating system help to get the feedback of customers about the product and service.By Star Rating System using php user or customer can rate the product by selecting the star, this will help the owner or service provider to improve their services as per the customer feedback.

The jquery rating system provide the range between 1 to 5 stars. The five star rating help the other customer to buy the service or product. This is commonly used in eCommerce or product based website.

In this tutorial, we will show you how to build a rating system in php

First make rating design as shown below named as index.php.

five Star Rating System using php

index.php

index.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{{urvanov-syntax-highlighter-internal:0}}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Rating System</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
{{urvanov-syntax-highlighter-internal:1}}
{{urvanov-syntax-highlighter-internal:2}}
</head>
<body>
<div align="center" style="background: blue; padding: 50px;color:white;">
<i class="fa fa-star fa-2x" data-index="0"></i>
<i class="fa fa-star fa-2x" data-index="1"></i>
<i class="fa fa-star fa-2x" data-index="2"></i>
<i class="fa fa-star fa-2x" data-index="3"></i>
<i class="fa fa-star fa-2x" data-index="4"></i>
<br><br>
{{urvanov-syntax-highlighter-internal:3}}
</div>
 
</body>
</html>

Rating.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
var ratedIndex = -1, uID = 0;
 
$(document).ready(function () {
resetStarColors();
 
if (localStorage.getItem('ratedIndex') != null) {
setStars(parseInt(localStorage.getItem('ratedIndex')));
uID = localStorage.getItem('uID');
}
 
$('.fa-star').on('click', function () {
   ratedIndex = parseInt($(this).data('index'));
   localStorage.setItem('ratedIndex', ratedIndex);
   saveToTheDB();
});
 
$('.fa-star').mouseover(function () {
resetStarColors();
var currentIndex = parseInt($(this).data('index'));
setStars(currentIndex);
});
 
$('.fa-star').mouseleave(function () {
resetStarColors();
 
if (ratedIndex != -1)
setStars(ratedIndex);
});
});
 
function saveToTheDB() {
$.ajax({
   url: "index.php",
   method: "POST",
   dataType: 'json',
   data: {
   save: 1,
   uID: uID,
   ratedIndex: ratedIndex
   }, success: function (r) {
uID = r.id;
localStorage.setItem('uID', uID);
   }
});
}
 
function setStars(max) {
for (var i=0; i <= max; i++)
$('.fa-star:eq('+i+')').css('color', 'yellow');
}
 
function resetStarColors() {
$('.fa-star').css('color', 'white');
}

Now we create the database. Database base name is ratingsystems and table name is stars

ratingsystems.sql

1
2
3
4
CREATE TABLE `stars` (
  `id` int(11) NOT NULL,
  `rateIndex` tinyint(4) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Config.php

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$conn = new mysqli('localhost', 'root', '', 'ratingsystems');
 
if (isset($_POST['save'])) {
$uID = $conn->real_escape_string($_POST['uID']);
$ratedIndex = $conn->real_escape_string($_POST['ratedIndex']);
$ratedIndex++;
 
if (!$uID) {
$conn->query("INSERT INTO stars (rateIndex) VALUES ('$ratedIndex')");
$sql = $conn->query("SELECT id FROM stars ORDER BY id DESC LIMIT 1");
$uData = $sql->fetch_assoc();
$uID = $uData['id'];
} else
$conn->query("UPDATE stars SET rateIndex='$ratedIndex' WHERE id='$uID'");
 
exit(json_encode(array('id' => $uID)));
}
 
$sql = $conn->query("SELECT id FROM stars");
$numR = $sql->num_rows;
 
$sql = $conn->query("SELECT SUM(rateIndex) AS total FROM stars");
$rData = $sql->fetch_array();
$total = $rData['total'];
 
$avg = $total / $numR;

Conclusion: Developer Guidance Help to create Star Rating System.