jQuery Rating Script

For KenoBarNight I just added a simple rating system mocking that of YouTube and others; a simple "I Like It" or "I Don't Like It". Use whatever verbage you'd like, that is what this script does. The user clicks one of the buttons, and the script POSTs the data to a PHP script which saves a MySQL entry so we can do some math later and find a rating. Usually I'd show the jQuery script first, but this time I'm detailing the PHP callback script.

<?php 
//You'll need a MySQL conn
require('mysql.php');

//You need to make sure that a rating AND item ID were sent to the script
if(isset($_POST['rate'])  && isset($_POST['id'])) {

//Declare 'em
$rating = $_POST['rate'];
$bar_id = $_POST['id'];
$ip_addr = $_SERVER['REMOTE_ADDR'];

//Check if the IP address has all ready voted, deny if he or she has.
$check_result = mysql_query('SELECT id FROM ratings WHERE item_id = "'.$bar_id.'" AND ip_addr = "'.$ip_addr.'"');
if(!mysql_num_rows($check_result)){

//All clear, insert into MySQL, if insert fails, don't echo; if insert succeed echo true
$sql = mysql_query('INSERT INTO ratings SET item_id = "'.$bar_id.'", ip_addr = "'.$ip_addr.'", weight = "'.$rating.'"');
if(!$sql) {
//echo 'false';
} else {
echo 'true';
}
} else{
//echo 'false';
}
}
?>

This will insert a new row into our 'ratings' table which can be used to calculate an items rating. You could, if you wanted, just make 'rating' a new field on your MySQL table and have each button click +1 or -1 the value, but there is no way to prevent abuse from a specific IP address. Now for the front-end mix of PHP and jQuery to get your rating system up.

<span class="thanks" style="display:none">Thanks for rating!</span>
<a class="awesome">Awesome</a>
<a class="sucks">Not For Me.</a>

These are the two buttons. Put them where ever, do what you need just be sure to place the following jQuery script anywhere after.

<?php 
//This script assumes you have pulled the item data from the MySQL and the data is a var called row which is an array

$ip_addr = $_SERVER['REMOTE_ADDR'];
$check_result = mysql_query('SELECT id FROM ratings WHERE item_id = "'.$row['id'].'" AND ip_addr = "'.$ip_addr.'"');
if(mysql_num_rows($check_result) > 0){?>

<script>
$('.thanks').show();
$('.awesome').hide();
$('.sucks').hide();
</script>

<?php } ?>
<script>
$('.awesome').click( function() {

$.post("rate_callback.php", {rate: 1, item: "<?php echo $row['id'] ?>"}, function(data){
if(data.length >0) {
$('.thanks').show();
$('.awesome').hide();
$('.sucks').hide();
} else {
//Well they rated all ready so don't do anything, they shouldn't even have gotten this far.
}
});

});

$('.sucks').click( function() {
$('.thanks').show();
$('.awesome').hide();
$('.sucks').hide();

});

</script>

And that's it! The script checks to see if the user's IP address has rated the item before, if it has jQuery hides the rate buttons and shows the "Thanks" message. I originally built this within a while() statement, if anyone needs the script modified or needs to know how I did it, just drop a comment.

I'm available for one-on-one consulting calls – click here to book a meeting with me 🗓️

Want more? Sign up for my weekly newsletter