Five star rating system Part 1

Introduction

Everyone likes to feel that his opinion counts and often finds enjoyment expressing it to others. In that sense Internet has certainly come as a handy invention. Various forums, chat rooms, guestbooks, blogs and finally, for those with unapplied acting talents, podcasts – all for a chance to say (or type) something we feel absolutely MUST be said (or typed J).

Apparently, to encourage us exercise our freedoms more often many web sites, including DMXzone, are giving us opportunity to rate their content, products or services. With this great feature we can both send our feedback and learn from the experience of our peers on a particular item.

$2.79
- OR -

Overview

Displayed on the page the item in question would usually have a row of buttons or stars somewhere near the title. The current rating would show either directly on the buttons (in a different color) or somewhere else as progress gauge or a meter.

Based on their permissions users would either be able to just view or both view and submit their votes.

Creating a feature like that will be the topic of this short series in which we will build a PHP AJAX-based 5 stars rating system. Users will be able to both view the votes and vote themselves. The system will display votes based on integers from 1 to 5 as well as floating number ending with .5.
In other words there will be 9 possible values to display: 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5 and 5 stars.
You might think that we’ll have to create (or “find”) a separate image for each of the values above.
But don’t worry; using some CSS tricks will do just fine with two images for the display and two more for voting.
As an example we will rate the popularity of various fruit. If you are not a fruit fan … well you will still have to follow our example before you can apply what you are about to learn to your own situation.

This article uses PHP and MySQL for the back-end, but if you feel more comfortable with some other server-side technology feel free to try.

To design the necessary graphics you will need a modern graphic editor (Windows Paint won’t do).
Alternatively you can steel images provided with the source files and work only with the code.

In this iteration we will make all the necessary preparations and in the next one we will complete the application by putting all the pieces together.
So let’s get started!

Alex July

Alex JulyAlex July is a Vancouver-based (Canada, British Columbia) Web Developer/ Graphic Artist who has an extensive experience in both creative realms.
He is also a host of Linecraft.com where he is showcasing his skills and sharing experience with the developers community. For the past 3 years Alex has been focusing on the development of Rich Internet Applications using Macromedia Flash technology.

When away from the computer Alex is practicing Martial Arts, playing guitar and enjoying time with his wonderful family.

See All Postings From Alex July >>

Reviews

Be the first to write a review

You must me logged in to write a review.