How to build simple reviewing and 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.

1
21
8/21/2018 12:56:18 PM

Accepted Answer

Stars light up when mouse hovers
There's a brilliant tutorial on the web for designing a 5 star rating system: http://rog.ie/blog/css-star-rater. 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.

20
4/12/2016 10:58:59 PM

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


Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Icon