Ajax PHP and MySQL Rating Script
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.
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
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
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);
and prevents the execution of the rest of the code during that iteration. Read the rating value
Now 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)
else if(rating == 0.5)
rating = 0;
Please 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.
used as a reference about what framework is superior since not every framework follows the same route and has the same objectives. Before jumping
to conclusion, you should read more sources and also hear every site. There are good reasons for dojo not having the $ operator and some interesting
points can be found here (in the comments). When you need to decide which framework to chose, base your decision on your specific task and the
framework you're most comfortable with. The PHP backend source
About the Author
I am Asif Khalyani. I am software Engineer. PHP and ajax free script download site phpasks. User can download ajax rating script