How to build a basic and simple 5-star rating system?

Question

I'm very new to web technologies and this is basically for a term project that my team is working on. We are working on a food review site.

As of now, I'm not quite sure how to implement a simple 5-star rating system. Am I supposed to use a server-side language like PHP or a client-side one like Javascript (w/ JQuery). Looking around it seems that JQuery is more suitable for this? Or would it be a combination of both?

What I'm looking for as far as functionality goes is:

• Stars light up when mouse hovers
• Page doesn't have to be reloaded when a star is clicked (not really needed)
• Some sort of average shown beside the stars
• Rating has to be stored somewhere in a MySQL database (Is this a good idea?)

I really apologize if the question sounds vague and stupid, I don't have much of a clue on how to implement this and I've tried googling around. If you have any questions about it please let me know.

Thank you very much.

Answer 1

Stars light up when mouse hovers
Simple, have an image for yellow star and an image for white star. When a star is hovered, all stars to the left have their "src"s changed to the yellow star, all stars to the right have their srcs changed to the white star.

Page isn't reloaded when star is clicked
Look into Ajax/XHR
http://en.wikipedia.org/wiki/Ajax_(programming)
Hint: Have a .php file called vote.php , and pass into it the ID of your food and the rating given by the user.

Some sort of average shown between the stars
Most websites only show 0%, 50%, and 100% stars... users won't really freak out if they don't get 'exact precision'

Rating should be stored in MySQL database
Any database system is fine. But yes, you would probably want to use an SQL database for this

Answer 2

Yeah you're approach sounds perfect. there are a couple pieces:

stars with hover effect:

jquery: http://www.fyneworks.com/jquery/star-rating/

prototype: http://www.fyneworks.com/jquery/star-rating/

css: http://www.henryhoffman.com/css-star-rating-tutorial.html

onclick can invoke an ajax call with jquery: http://api.jquery.com/jQuery.post/

then on the server side it can be maintained in a rating table

theres a longer example here:

http://webtint.net/tutorials/5-star-rating-system-in-php-mysql-and-jquery/

Answer 3

A combination of JS and PHP is the way to go (if PHP is your chosen server-side language). JQuery is a good way to easily implement a sort of starring system, I once developed this for one of my sites I later removed. It was a simple thing that had onrollover events linked to 5 images. When clicked, if it was "id 4", it'd send that as the vote of the user using jQuery's .post() function to a PHP script which noted the user and recorded the vote in a MySQL database if they hadn't already voted.

Answer 4

To have a nice star-clicky control, yeah you need javascript. So you should do jQuery.

Yes, you'll want to store stuff in a database. You could use PHP and MySQL for that.

Given this is a class assignment, thats a lot to implement. Consider cheating by using an existing CMS. Drupal in particular has functionality similar to what you ask for. You won't have to learn much of Drupal, just buy the book "Using Drupal". Chapter 4 will show you how to:

... build a community product review website, with ... and Fivestar modules providing a rating widget.

Drupal is PHP based and uses MySQL as its database, so it seems to match where you were going. It may take a bit to get Drupal running... but then you can get to chapter 4 in a snap.

If the teacher insists you write code, Drupal is open source and its easy to add custom modules.

Answer 5

Here's an answer to a similar question and should be a great start.

http://stackoverflow.com/questions/1987524/turn-a-number-into-star-rating-display-using-jquery-and-css/1987545#1987545

Answer 6

Stars light up when mouse hovers
There's a brilliant tutorial on the web for designing a 5 star rating system: http://www.komodomedia.com/blog/2007/01/css-star-rating-redux/. It's purely CSS so no need for Javascripting.

Page doesn't have to be reloaded when a star is clicked (not really needed)
Ajax is your friend, what I did was to have a <a class="one_star" href="javascript: submitRating(1, 5)"> where <a> represented a star and the submitRating() function used Ajax to transmit my rating (1/5) to the server, the server stores the rating (and assigns the user that gave the rating) and recalculates the new average rating and submit the results back in JSON format.

Some sort of average shown beside the stars
Easy. Write a SQL script that, based on the product id, takes the sum of the average rating (i.e. 1/5 + 2/5 + 4/5, etc), divide it(sum) by the total amount of ratings and multiplies it by 100. Return the value back to the server, and from the server back to the client.

Rating has to be stored somewhere in a MySQL database (Is this a good idea?)
I am using MySQL for this and it works like a charm....Any DB systems is fine.