After researching how to develop a star ratings system for our website beerfriends.com - reading and following the tutorials - it became apparent there was nothing existing (that we could find anyway) that accomplished all we wanted out of a star rating system. There are several decent tutorials but each seemed to have some major drawback - and didn't accomplish everything we needed - so we developed our own. First up was defining how the rating system would work - the user experience and requirements. Loosely, this star rating system is similiar to how the Netflix star rating system works.
DOM query tool. jQuery AJAX $.Post is used to communicate data to the backend server for storing star rating info.
We do not cover backed server processing in this tutorial, though we offer hints and tips for backend processing. The backend is where your data will be stored, presumably in a database. Our backend is primarily used for retreiving and storing star rating info - any backend language and architeture can be used such as C# asp.net, php, etc.
Step 1: There are seven states a star can be in: Empty, Half, Full, My Full, Full Hover and Empty Hover. Drop the code snippets below into you website / webpage.
This is enough to get started though backend processing is not specified here, so some level of database knowledge and backend processing is necessary to
get a complete model up and running. To set rating information when a page is loaded, call this function "AdjustRatings(msr, ar, tr);" - with msr (my star rating), ar
(average rating), tr (total ratings) variables set on the backend.
Step 2: Be amazed. We followed our own tutorial and had a sample webpage up and running in a less than 5 minutes, by utilizing a simple notepad .htm document. Be sure to include a jQuery cdn link so jQuery works properly.
Check out our website www.beerfriends.com for a live demo of this star rating system in action. You can see the hover effect (desktop) and how the stars are rendered.
Each brewery, beer and bar/restaurant page makes use of this star rating. Also, where these objects are grouped in a list, the star rating is shown as a read
only display - this is done on the location pages such as city, county, country pages, and more.
(To actually give a rating you need to Sign up and become a member)
Have a question or comment or just want to say hi? You can contact us through our twitter account @beerfriends_ OR by email at email@example.com. Cheers!