I’ve searched around the interwebs for an ajax star rater and I came across a few different possibilities, all of which looked very good. The top result from google was Nick Stakenburg’s “Starbox” for “ajax star rater”. I also found Masuga Web Design’s Ajax Star Rater and a script from MySandbox to be popular results. However I couldn’t really seem to find a PHP / Mysql script that used Javascript for the rater effects. So I decided to make one based off of a script I found:
Reign Water Design’s 5 Star Rating System
This was a very nice easy to use Javascript 5 star rating script. All I had to do was make some tweaks to my preference and add on some PHP/Mysql code to submit the rating.
See the demo or download this script.
To view the PHP source code, images, and everything together you must download this script.
Javascript
Insert the following in the <head> tags of your page:
[codesyntax lang=”html4strict” title=”Javascript Source Code”]
<script type=”text/javascript”>
function insertParam(key, value)
{
key = escape(key); value = escape(value);
var kvp = document.location.search.substr(1).split(“&”);
var i=kvp.length; var x; while(i–)
{
x = kvp[i].split(“=”);
if (x[0]==key)
{
x[1] = value;
kvp[i] = x.join(“=”);
break;
}
}
if(i<0) {kvp[kvp.length] = [key,value].join(“=”);}
//this will reload the page, it’s likely better to store this until finished
document.location.search = kvp.join(“&”);
}
function alterDisplay(id){
var dropdown = document.getElementById(id);
if(dropdown.style.display == “none”){
dropdown.style.display = “”;
} else {
dropdown.style.display = “none”;
}
}
</script>
<script type=”text/javascript” language=”javascript” src=”./scripts/ratingsys.js”></script>
[/codesyntax]
CSS
You will need to include this in the <head> tags as well either in <style> tags or by <link>:
[codesyntax lang=”css” title=”CSS Styles”]
#rateMe #rate_overlay {
position:absolute;
display:block;
float:left;
margin:0;
padding:0;
height:30px;
width:auto;
background:#eee url(./images/star_overlay.gif) repeat-x;
z-index:2;
cursor:default;
}
#rateStatus{width:100px; height:20px;margin:4px 0 0 5px;font: 12px “Trebuchet MS”, Arial, Helvetica, sans-serif; font-weight: bold}
#rateMe{width:152px; height:50px; padding:1px; margin:0px; vertical-align:top; z-index:auto; border: 1px solid #ccc; }
#rateMe li{float:left;list-style:none;}
#rateMe li a:hover,
#rateMe .on{background:url(./images/star_on.gif) no-repeat;}
#rateMe a{float:left;background:url(./images/star_off.gif) no-repeat;width:30px; height:30px;cursor:pointer;}
#rateMe a:hover{background:url(./images/star_on.gif) no-repeat;}
#rateMe a.grey,#rateMe a.grey:hover{background:url(./images/star_off.gif) no-repeat; cursor:default;}
#rateVotes{display:block; margin-left:65px; font: 11px “Trebuchet MS”, Arial, Helvetica, sans-serif; color:#4a4a4a;}
#ratingSaved{display:none;}
.saved{color:red; }
.grey
.rate_on_button {
}
.rate_on_button a { float:left;padding:10px;margin:0 5px;border:2px solid #666; background-color:#fff; color: #000; font-size: 2em; text-align:center; display:block; color: #000; text-decoration: none; }
.rate_on_button a:hover { color: #fff; text-decoration: none; background-color: #333; }
[/codesyntax]
Basically I took the script that Water’s made and changed a few things to the css styles, added an overlay for the current rating, and wrote a php script to insert rates and determine the current rating, etc. I also added the Javascript functions insertParam() and alterDisplay(). You do not need to use this function insertParam() to create the url, you can simply set the <a> tags to something like this:
[codesyntax lang=”html4strict”]
<a href=”./index.php?r=1″ id=”_1″ title=”Terrible” onmouseover=”rating(this)” onmouseout=”off(this)”></a>
[/codesyntax]
The Javascript function alterDisplay() is used to hide and show the overlay <div> that holds the current rating (if there is one). So when you mouse over the rating bar holder it hides the overlay so you can rate.
The PHP script grabs the information from the Mysql table that you specify in the function. You will need to adjust the following values:
- $var – The column to base your mysql selection off of. Grab all rows where this column equals $id.
- $table – The table where the ratings are being held.
- $star_width – Width of the stars, default is 30px.
You will need to be connected to a MYSQL database before calling the rating bar function.
Since the syntax of the function is the following:
[codesyntax lang=”php” title=”Rating Bar Syntax”]
function rating_bar($id);
[/codesyntax]
You will need to supply the identifier ($id) which tells the PHP script which row to grab from the Mysql table.
To display the current rating after it has been rated on – because Javascript alone is not enough – I added an overlay <div> which will hold the current rating. This is done by setting the css style of this overlay div to the following:
[codesyntax lang=”css” title=”Rate Overlay CSS Style”]
#rateMe #rate_overlay {
position:absolute;
display:block;
float:left;
margin:0;
padding:0;
height:30px;
width:auto;
background:#eee url(./images/star_overlay.gif) repeat-x;
z-index:2;
cursor:default;
}
[/codesyntax]
The position: aboslute and z-index: 2 style attributes make the div lay over top of the rateMe div which holds the rater and has a z-index: 1.
Test out this free script with the demo link at the top of the post or download it and use on your own website. Credit where due is always appreciated.
Any questions or problems please feel free to email me at brian@bgallz.org or post here.
Please provide database sql.
If you download the script and look in the source code for index.php you can see the database sql.
This is simple and useful script but it has one drawback. if a user from one IP address gives a rating 5 the another user from different IP address is not able to give rating.
if a user gives a rating os suppose 2 then next user always strats from 3 only.
Do you have any solution for this.
The problem wasn't in the IP address check, but when I updated the script the name of the Javascript function being called was incorrect. So the overlay that was suppose to disappear upon mouseover, was not working.
It should be working fine now. Please feel free to download the script and examine the PHP source code if you have further issues. I apologize for the error, thanks for bringing it to my attention.
Thanks for your prompt response. I again downloaded the script and retest it but the result is same.
Please test it in following scenario:
a) First give a 2 * rating from one IP address.
b) Then try to rate that same item from different IP address.
c) Then it will not allow you to give 2 * rating again. But you can give 3 or 4 or 5 rating.
Please try the script out now and let me know what you think. I found a case where the serialized array was not returning correctly from the Mysql table. I believe it is fixed now. Be sure to let me know of any further issues.
Thanks.