Logo Background RSS

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

     
      
      
     
     

    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

    $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.