- Getting Started
- Creating the Non-Ajax Version
- Adding Ajax
- Retrieving Ratings
- Final Thoughts
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Creating the Non-Ajax Version
When creating an Ajax version of any site feature, you should always begin with the non-Ajax version. There are two reasons for doing so:
- First, it gives you, the developer, the chance to create the entire, fully functioning system without the confusion of Ajax (Ajax can make debugging harder).
- Second, the proper way to use Ajax—and JavaScript in general—is so that it degrades gracefully. This means that should the user’s browser support the Ajax feature, it will work; should the user’s browser not support it, the non-Ajax version will be used automatically and the user won’t know the difference.
To start, you should create a separate file for handling all the aspects of a rating system, logically named something like rating.php. Every PHP script that could be rated, whether it displays a product or some content, would just need to include that script.
If going the form route—a select menu or radio buttons—the form could use an empty action attribute so that the form is submitted back to the same page that included rating.php. By doing that, any visitor rating a page through the non-Ajax system would still see what they were previously viewing after submitting his or her rating. Here’s the form:
<div id="rating_div"><form action="" method="post" id="rating_form">
<select name="rating" id="rating">
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
</select>
<input type="hidden" name="item_id" value="<?php echo $item_id; ?>" id="item_id" />
<input type="submit" value="Rate!" />
</form></div>
Or:
<div id="rating_div"><form action="" method="post" id="rating_form">
<radio name="rating" value="5" /> 5
<radio name="rating" value="4" /> 4
<radio name="rating" value="3" /> 3
<radio name="rating" value="2" /> 2
<radio name="rating" value="1" /> 1
<input type="hidden" name="item_id" value="<?php echo $item_id; ?>" id="item_id" />
<input type="submit" value="Rate!" />
</form></div>
Note that in both forms, the item_id is stored as a hidden input. You’d use PHP to set this value accordingly.
The rating.php script would check for a form submission in order to add the rating to the database. It can do so by validating that it received an allowed rating value and an item_id:
if (isset($_POST['rating'], $_POST['item_id']) && filter_var($_POST['rating'],
FILTER_VALIDATE_INT, array('min_range' => 1, 'max_range' => 5)) &&
filter_var($_POST['item_id'], FILTER_VALIDATE_INT,
array('min_range' => 1))) { // Okay!
To validate the two numbers, I’m using PHP’s Filter extension, added in PHP 5.3. If that extension isn’t available to you, you’ll need to validate the values the old fashioned way: using is_numeric(), typecasting, comparison operators, etc.
The query that gets executed is just:
INSERT INTO ratings (item_id, rating) VALUES ($_POST['item_id'], $_POST['rating'])
Depending upon how you decided to handle users and multiple submissions, the query would need to be changed to reflect that.
Once you have the non-Ajax version working, you can create the cooler Ajax version.