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
Start xampp control panel. Open up your favorite browser and place the following in address bar.
Now you'll be able to experience the usage of a fully functional 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.
No comments :
Post a Comment