Ajax Rating Script – Php & Mysql
Tweet
Introduction
Frequent visitors of ajax enabled websites, like ajaxian, have all witnessed them already: ajax rating widgets. They are flashy, animated, you can use them to rate the content (usually without refreshing the page) and if you could, you’d present them to your parents and marry them. Compared to the classic rating system, as on IMDb, they incite people to click them, reducing the effective
rating process to only one click.In this tutorial, I want to show you how to create the JavaScript framework to display the animated rating widget and how to connect it to your server backend by using some of the most common Ajax frameworks out there. I clearly separate the page creation from the JavaScript functions and the rating backend, to allow the script to be as flexible as possible and to be easy integrable into your existing website.
This tutorial is not meant to present you with a finished script (even though you could simply copy&paste the end result into your website and make it work without any problems), but rather to explain the design and implementation process that would enable you to create your own widgets if you’d need to. Getting started with the HTML markup
What It Is
This is a
rating bar script done with PHP and mySQL that allows users to rate things like can be done all web 2.0-like with no page refresh. It is a major improvement on the previous version because it is now unobtrusive, meaning that if Javascript is off it will still work (although the page will refresh). You can also set the number of rating units you want to use (i.e. 4 stars, 5 stars, or 10 stars) on a rater to rater basis (see samples below or read the docs). A few other changes were made as well see the docs for details. Note that this script isnt tied to any specific system (such as WordPress), so you should be able to adapt it to your situation without too much trouble. What are you waiting for? Check the Ajax Rating demos.It is most important that there are no line breaks in this code, as this will complicate the DOM tree unnecessarily. If you are uncertain about what I just said, please read the W3Schools HTML DOM Tutorial for further reference, since we are going to access the DOM directly from within our
JavaScript.As you can see, the div container is pretty easy to generate in the server-side scripting language, requiring most of the time only one line:
printf(“%s”, ratingId, rating);
The “continue” keyword in our
JavaScript code, just like in most other programming languages, continues with the next iteration of the loop and prevents the execution of the rest of the code during that iteration. Read the rating valueNow that we have all the
rating containers, we can start by reading the rating value written as text inside the div container. To read that value, we access the first child node of the div container, which is a TextNode, and access its nodeValue, which returns the text CDATA in case of text nodes. This is done by the following line:var rating = ratings[i].firstChild.nodeValue;
There is no graceful way to recover from that error, so I simply decided to continue with the next
rating container and prevent that error from happening within the server backend.Now, we need to loop over the number of stars that are displayed and check what the image graphic will be that is displayed on the star. Using the HTML DOM function createElement(), we initialize a new image and progressively add the respective values to that element. Of course, the first thing we are interested in is the displayed image: we could either test the rating against the current iteration value or we could decrement the rating value during each iteration and test against 1, 0.5 and 0. I decided to decrement the rating during each iteration, which presents me with three simple cases to test: if the rating is greater than or equal than 1, the star is “on”, if the rating is exactly 0.5, the star is “half” otherwise, the star is “off”. This results in the following code:
for (var j = 0; j < NUMBER_OF_STARS; j++)
{
var star = document.createElement('img');
if (
rating >= 1)
{
star.setAttribute('src', './images/stars/rating_on.gif');
rating--;
}
else if(
rating == 0.5)
{
star.setAttribute('src', './images/stars/rating_half.gif');
rating = 0;
}
else
{
star.setAttribute('src', './images/stars/rating_off.gif');
}
ratings[i].appendChild(star);
}Conclusion
Our current
JavaScript allows us to transform specially marked div containers into animated rating widgets that we can use in specialized Ajax frameworks to link to our server backend. The HTML markup is completely separated from the JavaScript code, which will leave the user with a not very stylish but still visual display of the current rating in case JavaScript is disabled. I’ve put together a ZIP file with the current result, containing an HTML file, a CSS file, the JavaScript file and the images. Connect the widget to the server with different frameworksPlease make sure to delete the “window.onload=init_rating;” line in the “script.js” file if you downloaded the .zip file, since we’re using the specialized framework onload event.
The examples below are only an illustration of how this given task is achievable with a variety of different
No comments yet.