Displaying a star ranking system is a common requirement to implement in websites. We have explained here how can we show a group of stars for each database record and dynamically apply 5 star rating in PHP with AJAX and jQuery. You can make AJAX calls to store rating of the record in database.
Download Complete Code
5 star rating in PHP with AJAX and jQuery
The code below is part of our PHP script which fetches records from database and displays star rating as per already saved rating of each post.
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 | <?php require_once("dbmanager.php"); $db_handle = new DBManager(); $query ="SELECT * FROM posts"; $result = $db_handle->runQuery($query); ?> <div class="content"> <?php if(!empty($result)): $i=0; foreach ($result as $post): ?> <div class="post"> <h4><?php echo $post["title"]; ?></h4> <ul data-id = "<?php echo $post['id']; ?>" data-rating ="<?php echo $post["rating"]; ?>"> <?php for($i=1; $i<=5; $i++) { $selected = ""; if(!empty($post["rating"]) && $i<=$post["rating"]) { $selected = "selected"; } ?> <li class="<?php echo $selected; ?>">★</li> <?php } ?> </ul> <div><?php echo $post["description"]; ?></div> </div> <?php endforeach; ?> <?php endif; ?> </div> |
jQuery to manipulate rating
We are using very handy jQuery script to manage user action on stars and to save rating through AJAX on click. We are using jQuery’s powerful ‘data- ‘api in the handy piece of functions written in rating.js
file.
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 | $('.post li').mouseout(function(){ $(this).siblings().andSelf().removeClass('selected highlight') }).mouseover(function(){ $(this).siblings().andSelf().removeClass('selected'); $(this).prevAll().andSelf().addClass('highlight'); }) $('.post li').click(function(){ $(this).prevAll().andSelf().addClass('selected'); var parent = $(this).parent(); var oldrate = $('li.selected:last', parent).index(); parent.data('rating',(oldrate+1)) data = new Object(); data.id = parent.data('id'); data.rating = parent.data('rating') $.ajax({ url: "add_rating.php", // path of the file data: data, type: "POST", success: function(data) { alert('Your rating is accepted.'); } }); }) /* reset rating */ jQuery('.post ul').mouseout(function(){ var rating = $(this).data('rating'); if( rating > 0) { $('li:lt('+rating+')',this).addClass('selected'); } }) |
PHP MySQL star rating update via AJAX
This PHP code will be executed via an AJAX request received from browser. This code runs an update query by receiving id of post and current rating from AJAX.
1 2 3 4 5 6 7 8 | <?php if(!empty($_POST["rating"]) && !empty($_POST["id"])) { require_once("dbmanager.php"); $db_handle = new DBManager(); $query ="UPDATE posts SET rating='" . $_POST["rating"] . "' WHERE id='" . $_POST["id"] . "'"; $result = $db_handle->updateQuery($query); } ?> |
Download Complete Code for 5 star rating in PHP & MySQL
how to insert in to data base plz help
Hello,
You can download the source and there is add_rating.php file, which is updating rating of given post in database. What do you mean by insert in this case?
Hello this what exactly i needed but when i run this code so it shows an PHP error
Deprecated: mysql_connect(): The mysql extension is deprecated and will be removed in the future: use mysqli or PDO instead in C:wampwwwtestratingdbmanager.php on line 16
so can you update this code with new syntax of PHP MySql .. Plz
Hi, This is not a trivial task. I encourage you to look into dbmanager.php and replace mysql driver functions with PDO or mysqli driver function in connectDB, selectDB and rest 3 too
for example:
$conn = mysql_connect($this->host,$this->user,$this->password);
with
$conn = mysqli_connect($this->host,$this->user,$this->password);
Ref: http://www.w3schools.com/php/php_ref_mysqli.asp