Question

I want to let my users create their own polls so they could paste my code somewhere on their website and users may rate their own game characters (with 1-5 stars rating).

I want to use jQuery or javascript for this purposes, but I have no idea how to start developing something like that. It should be free from being spoofed in any way, so I’d like to store the poll records in my database table (MySQL).

You probably had some experiences on this case, so I’m waiting for your suggestions.

Answer 1

Here is what I would do in a nut shell

First you are going host a javascript file and images for the stars somewhere, preferably on a CDN.

Second you need to setup a php file (or java or ruby or whatever you like for server-side) that can send and receive data via JSONP.

From here you ask your users to simply include the remote javascript file in the document head, and div on the page with a special class to signify that star rater (for this example .star).

Tasks:

1. Javascript: Populate all instances of <div class="star"></div> with your star images and set up.

2. Javascript: Request current rating tally average from server via JSONP with full identifiers (see step 4).

3. PHP: Use identifiers to find predetermined average of star rating so far, return current average rating as JSON. If non is found return ‘unrated’ state in JSON.

4. Javascript: Style stars so they all look correct, either displaying the current rating average received from ajax, or unrated state.

5. Javascript: Setup basic behaviors (hover style change ect.)

6. Javascript: Create click event bindings to stars. When user clicks you will have to send information about the rating to the server via AJAX JSON. This information needs to include the rating itself along with the url of the rater and any other identifiers.

   something like:

   {
        url : 'http://endUsersite.com/pagetoberated.html',
        starId : 'pictureOfBillMurray',
        rating : 4,
        raterIP : 192.168.1.130
        date   : UTCstringhere
   }
   

7. Javascript: Restyle to show rating in progress and prevent future ajax from clicks.

8. PHP: Catch the JSON, process and store it in mySQL

9. PHP: After successful storage respond to ajax call with JSON stating the rating was successful

10. Javascript: upon getting ‘success-response’ of JSON, style stars to show successfully rated.

11. PHP: process ratings to determine new average.

You will most likely also want to implement some kind of timing system on the server-side to prevent rating spamming from the same IP address.