Writing an AJAX-based Visual Rating System with PHP

by Marco Tabini — Page 1 of 5

Click to rate:
3,370 votes / avg. rating 57.35%

AJAX and PHP give developers the perfect platform for creating interactive tools that allow users to perform non-critical tasks without having to reload a page. In this article, Marco Tabini illustrates how you can create a cool-looking rating system for virtually any web page with nothing more than a handful of PHP, a touch of Javascript and a couple of images.

A rating system is a great tool for any website. It serves two important purposes: first, it gives your users a way to interact with your pages—and interactivity is an important aspect of any website these days. Second, it provides you with a valuable feedback tool that you can use to gauge viewer interest in individual areas of your site. In other words... everybody wins!

You can download the code for this article here.

AJAX as the Perfect Tool

There are a number of reasons why AJAX is perfect for creating a rating system:

It's not a mission-critical system, so you don't need to worry about visitors being unable to use it because their browser is not AJAX-ready
Immediate feedback to the user is not only beneficial, but also desired—there is no advantage to having to refresh an entire page just because the user has cast his or her vote
AJAX allows you to provide a very intuitive interface that doesn't require the use of forms—therefore, there is never any wasted page real estate, since the same visual controls are used to cast a vote and to display the current rating.

The Concept

We want our rating system to be visual—providing the user with a means of both determining the average rating of a web page and casting his or her own vote using the mouse. The easiest way to do so is to create an image that visually represents the rating like the one shown here on the top-right; a user can click on this image to indicate his or her own vote—the further right he or she clicks, the higher the vote. Our image “happens” to be 100 pixels wide—perfect for a percentual rating; however, this is just as arbitrary as any other rating system, and you could decide to make yours completely different.

One of the most important aspects of AJAX-powered websites is the fact that you must provide the user with feedback every step of the way. In our case, we want the user to be able to click on the image to cast his or her vote; when this happens, we will transparently send a request to our web server, which, however, will not be immediately visible to the user, since his or her browser will not provide any kind of visual feedback (although some browsers may, we should assume that all will). To solve this problem, we will display a little “Saving...” box at the top of the screen—just like GMail does when you send an e-mail—and pop up a dialogue box when the voting process is complete.

CONTINUED >

Tags: ajax, json, php, bb, rating system, stars, vote, dffdffdf, sandeep, fantastic

Add tag(s) (comma separated):

[Tags beta] — [Add New] — [Help]

Tags Help

Tags are keywords associated with a web page that help classifying information. You can find a good explanation here.

To add one or more tags to this page, simply enter them below (separate them with a comma) and hit enter or click on the "Go" button.

New Comment

This form allows you to type in a new comment. Keep in mind the following:

The system accepts input in plain text format. Newlines will be converted to the HTML equivalent, and the system will try to catch most URLs and make them clickable.
Your e-mail address will never be displayed. We will use it only to notify you when new comments are posted to this page.
As a rule, we do not delete comments unless they are offensive, racist, spam or otherwise inappropriate.
Bold fields are required

Your Name:
Your e-mail:
Type this number:
Subject:
Comment:

Comments

New Comment

Re: Writing an AJAX-based Visual Rating System with PHP (#128)

By Chauncey Thorn on 2006-06-13 12:14:32

Archive ajax-rating-system.zip is broken.