Tuesday, April 12, 2011

Star rating with MooStarRating

I'm not lying if I say javascript gives life to lifeless webpages. Javascript libraris make it easier for the developers to develop JavaScript-based applications especially with AJAX. Mootools is such a javascript framework. moostarrating is a mootools plugin which creates a javascript/ajax based attractive star rating system.

Following example shows you how to use moostarrating system and how to save the rating in a database using an Ajax call.

First download mootools core using this link.

Download the moostarrating plugin using this link. This page describes how to use the plugin but I thought it might be useful for all of you if I put here everything from the scratch.

I have deployed this example in a local environment, I recommend you to use xampp.

After installing xampp in windows, inside Apache Documents directory (C:\xampp\htdocs), create a new folder with a name you want, here I will use the name as "starRate". Extract the moostarrating plugin archive inside "starRate", also mootools core javascript should be placed inside "starRate".

Create a html file called star.html and save it inside "starRate". You can customize the default options and even functions in moostarrating.js the way you want.

star.html

<html>

<script src="mootools-core-1.3.1-full-compat.js"></script> 
 <script src="lorenzos-MooStarRating-422072a/Source/moostarrating.js"></script> 
 <script>   
  
  // When the DOM is ready....
  window.addEvent("domready",function() {
  
  MooStarRatingImages.defaultImageFolder = 'http://localhost/req/lorenzos-MooStarRating-422072a/Graphics/'; //Default images folder definition. You will use your own
   
   // Create our instance
   // Advanced options
   var advancedRating = new MooStarRating({
    form: 'ratingsForm', //Form name 
    radios: 'rating', //Radios name
    half: false, //if you need half star rating just make this true
    imageEmpty: 'star_boxed_empty.png', //Default images are in definition. You will use your own
    imageFull:  'star_boxed_full.png',
    imageHover: 'star_boxed_hover.png', 
    width: 17, 
    tip: 'Rate <i>[VALUE] / 7.0</i>', //Mouse rollover tip
    tipTarget: $('htmlTip'), //Tip element
    tipTargetType: 'html', //Tip type is HTML 
    
    // Send ajax request to server to save rating using "rating.php"
    onClick: function(value) {
          
     var requestHTMLData = new Request({
     url: 'rating.php',
     data: {rating: value}
     });
     requestHTMLData.send();
     }
     });  
   
   
  });
  
 </script> 
 <!-- radios have a default value, 2 -->
 <form name="ratingsForm">
    <label>Select The Number of Stars</label>
    <input type="radio" name="rating" value="1.0" checked="checked"> 
    
    <input type="radio" name="rating" value="2.0">
   
    <input type="radio" name="rating" value="3.0">
   
    <input type="radio" name="rating" value="4.0">
    
    <input type="radio" name="rating" value="5.0">
   
    <input type="radio" name="rating" value="6.0">
    
    <input type="radio" name="rating" value="7.0">
         
 <span id="htmlTip"></span>
</form>

</html>


In this example I use a php file to save the rating in a database. Create a database "rate_db", with a table "rate" with one column, you can use xampp phpmyadmin panel to create databases.

Create a php file called rate.php and save it inside "starRate" folder.

rate.php

<?php
$con = mysql_connect("localhost","root","");
if (!$con){
  die('Could not connect: ' . mysql_error());
}
mysql_select_db("rate_db", $con);

$dataSent = $_POST['rating'];

mysql_query("INSERT INTO rate VALUES('$dataSent')");

mysql_close($con);
?>



Start xampp control panel. Open up your favorite browser and place the following in address bar.

http://localhost/starRate/star.html



Now you'll be able to experience the usage of a fully functional star rating system.