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!