Unobtrusive AJAX Star Rating Bar
What It Is
This is a rating bar script done with PHP and mySQL that allows users to rate things like can be done on Netflix or Amazon, all web 2.0-like with no page refresh. It is a major improvement on the previous version because it is now unobtrusive, meaning that if Javascript is off it will still work (although the page will refresh). You can also set the number of rating units you want to use (i.e. 4 stars, 5 stars, or 10 stars) on a rater to rater basis (see samples below or read the docs). A few other changes were made as well – see the docs for details. Note that this script isn’t tied to any specific system (such as WordPress), so you should be able to adapt it to your situation without too much trouble. What are you waiting for? Check the demos.
Based on work found at Komodo Media and Climax Designs. There is also another AJAX version of a rater on this page: Yvo Schaap
Good people of the Internet: This work is licensed under a Creative Commons Attribution 3.0 License. Please give credit where it is due, whether it is to me or the people upon whose work I based this script, and don’t claim this work as your own! Please consider making a donation – even $0.50 or a buck. That would be so freaking cool of you. Donate button located below.
If you have any problems downloading the file, first make sure you don’t have any over-crazy firewall protection on. When you can’t grab the file that is USUALLY the culprit. And you have to download it from this domain. I don’t like direct links from other sites. If that doesn’t work, .
Whatchoo Talkin’ ‘Bout
v 1.2.2 Updates (March 18, 2007):
Sorry for the quick release between version 1.2.1 and version 1.2.2. I needed to update the script this page was actually using (it was still using the oldest version) because someone kept farting around with the ratings here. Hopefully, that won’t happen now that this page is using the newest version of the script. Also, because I’m running this site with Wordpress, I found it was a pain in the arse to go in and change the DB queries manually, so I just altered the script to work with Wordpress out of the box by changing what needed to be changed.
- Added: prefixed DB calls with $rating_dbname for better separation from other scripts. This will really help with Wordpress installs – As of 1.2.2 – I don’t think you need to do any special tweaks any longer.
- Updated: changed some variable names so as not to confuse with other scripts
Notes
Basic changes, modifications, and answers to common questions. I will move all changes, modifications, and general advice to the forums, where they belong. (The forums are NOT live right now, but coming soon…)
With a Little Help From My Friends
HEY MONKEYBOY. YEAH, YOU. One very good reason that I DO NOT offer tech support on this script, offer CSS lessons, teach HTML, or give anyone any idea how to fix this silly thing in IE 6 – all things that google is so good at if you know how to type, is because I make next to nothing on this script.
I spent a lot of spare time polishing this thing up and trying to make it more useful. If the late nights I spent tearing my hair out trying to determine why Internet Explorer won’t allow dynamic insertion of an “onclick“ into a link using setAttribute has saved you any time at all, or if you just think it looks purty, consider a little donation. C’mon, you know there must be a couple bucks just sitting in your PayPal account that you’ve forgotten about!
If you come up with anything more interesting or better developed than what I have here, you’ll have to drop a line in the forums (which, I’m telling you, are coming soon). Suggestions are welcome and information about vulnerabilities or egregious violations of PHP best practices is most welcome as well – just be nice. And remember, spread some good karma: donate today!
Whither Wall of Fame & Live Samples?
These have been quietly removed. All I got was an inbox full of needy people looking for linkage to their site, that may or may not have been shoddy, and may or may not have actually used the rater in such a way that it looked good. There was way more noise than signal there, and I didn’t need the headache. Thanks to everyone who has donated in the past, and will donate in the future. It’s much appreciated!
Demos
Comments are closed for the Star Rater!
Sorry, but comments have been closed for this script. You can now read all about it (and post your questions and advice) in the forums! (Coming VERY soon...) Pretty much all the info you need to fix or upgrade the Star Rater version 1.1 is found in the existing comments. And again, sorry if you feel like you're getting dissed, but I can't offer help on this script. I just can't. I can't give lessons in CSS, either. I may be able to pop in on the forums from time to time. Thanks for your understanding.
300 Comments
Sorry, comments are closed.
August 19th, 2006
Hi,
I’m fairly new to PHP and MySQL, so forgive me in advance if I have done something obviously wrong! But I can’t seem to create the DB table with the SQL query in your “readme” file, each time I try I get an syntax error that says:
#1064 - You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ''ratings' ('id' varchar(11) NOT NULL,
'total_votes' int(11) NOT NULL defa' at line 1
Thanks
August 20th, 2006
Good job, thx ryan for you script ;)
August 20th, 2006
@AJ: You might want to try this alternate SQL syntax. I just did a basic google search for “create table mySQL” and found some examples. The following worked for me:
CREATE TABLE ratings2 (id VARCHAR(11) NOT NULL,
total_votes INT NOT NULL DEFAULT '0',
total_value INT NOT NULL DEFAULT '0',
used_ips LONGTEXT)
If anyone can improve upon the SQL used to create the table, I’d love to incorporate your suggestions.
August 21st, 2006
hello, i did a great job! keep doing this! you are great!
August 23rd, 2006
Has anybody gotten this rating system to work with Wordpress? My blog is protected with a PHP script (aMember) and I believe this is causing problems on my statement. When the blog loads, the user login page loads inside the page (because of the require statement ??)
Having problems, please let me know if you’ve succesfully implemented Ajax ratings into your Wordpress Comments. Thanks.
August 23rd, 2006
Great rater, love it.
With the SQL and alittle revising it is very easy to create a top 10 list…
For the SQL i used the older SQL which came with the version before this, but it would be the same with this one, just a little less in the sql statement…
CREATE TABLE `createdtablename` (`id` varchar(11) NOT NULL,
`total_votes` int(11) NOT NULL default '0',
`total_value` int(11) NOT NULL default '0',
`average` float(5,2) NOT NULL default '0',
`which_id` int(11) NOT NULL default '0',
`used_ips` longtext,
PRIMARY KEY (`id`)
) TYPE=MyISAM AUTO_INCREMENT=3 ;
I added the “average” field which i made to a float(5,2) although i’m sure other data types would work also.
Once your SQL table is created all you have to do is a few changes to a few of the files:
///////// FILENAMES: db.php and rpc.php /////////////
where it says:
if (($vote_sent >= 1 && $vote_sent <= $units) && ($ip == $ip_num)) { // keep votes within range$update = "UPDATE $tableName SET total_votes='".$added."', total_value='".$sum."', used_ips='".$insertip."' WHERE id='$id_sent'";
$result = mysql_query($update);
}
change to:
if (($vote_sent >= 1 && $vote_sent <= $units) && ($ip == $ip_num)) { // keep votes within range$average=$sum / $added;
$update = "UPDATE $tableName SET total_votes='".$added."', total_value='".$sum."', average='".$average."', used_ips='".$insertip."' WHERE id='$id_sent'";
$result = mysql_query($update);
}
Explanation… The original statement was used to update the table you just created beforehand, so need to allow the average to be updated in the sql UPDATE statement. $average is just a php variable. it can be anything you want. $average is found by taking $sum (which is total_value) divided by $added (which is total_votes). That puts the average into that php variable. Then we just SET the field ‘average’ with the value of $average which can be seen above.
Remember you have to switch it in both :-D
I “believe” those are the only two changes to files IF you are using this version! if you’re using the older version there are a few others.
////////////////////////////////////////////
Alright now that we have the files setup, we need to add the data to the table…
mysql_query("INSERT INTO `createdtablename` (id, total_votes, total_value, average, which_id, used_ips) VALUES('Test', '0', '0', '0', '0', '') ") or die(mysql_error());You must make sure that your ID is whatever you want the name to be and then however many other fields you have before used_ips are 0 out. Without the right amount you will get errors. In my case its 4 zeros (total_votes, total_value, average, and which_id)...it would depend on your table structure…
////////////////////////////////////////////
Now the fun part...:-D Creating the Top 5/10/or whatever you want statement
You first need a connection to the SQL, otherwise it wont see the data. There are a lot of ways of doing this, i just did it this way(created a config file and then used my connection here). Once you are connected, you do a SELECT Statement...This statement can be complex as you want, mines pretty simplistic…
<?php
$conn = mysql_connect($dbhost, $dbuser, $dbpass)
or die ('Error connecting to mysql');
mysql_select_db($dbname);
$tableName="createdtablename";
$result = mysql_query("SELECT * FROM createdtablename
WHERE average > 0 ORDER BY average DESC LIMIT 0, 10")
or die(mysql_error());
echo "<table>";
// keeps getting the next row until there are no more
while($row = mysql_fetch_array( $result )) {
// Print out the contents of each row into a table
echo "<tr><td>";
echo $row['id'];
echo "</td><td>";
echo $row['average'];
echo "</td><td>";
echo $row['total_votes'];
echo "</td></tr>";
}
echo "</table>";
?>
Looking at the select statement, it basically says “select all from table where average is greater than 0, sort them in descending order with 10 listings” The php code then prints all the averages that fit that up to 10!
One final last thing i did, if you have the names of your pages the same as your ids, such as ID=girl and the page for girl=girl.php, you can have it so that the top 10 that get printed, the IDs will be links… You can do that by changing
// Print out the contents of each row into a tableecho "<tr><td>";
echo $row['id'];
echo "</td><td>";
to
$url= $row['id'] ;// Print out the contents of each row into a table
echo "<tr><td><a href=$url.php>";
echo $row['id'];
echo "</a></td><td>";
Depending where you have your files located at might make you have to play around with this last part. I have my top rated in the same folder as my pages so it works great..
Hopefully this helped everyone, its kinda long though...Sorry!
August 23rd, 2006
@Jay: Did you see the note I posted above about getting this script to play nice with Wordpress? Looks like you posted your comment very near the time I updated this page with the WP info.
@Jason: Thanks for taking the time to write how you put together a “Top 10” rating script.
August 23rd, 2006
Looks pretty nice. Any chance you’ll mod this into a MediaWiki extension?
August 24th, 2006
It’s all good. I had an absolute path in my require statement as opposed to a relative path.
August 24th, 2006
Any ideas on how to implement a unique ID for the call?
I’m adding this line into my comments template for wordpress, thus it’s only defined once. I’m not able to explicitly define the id each time. Currently, every comment gets the same id so when I vote on one it populates for all.
Basically, I need to setup a PHP variable ($dynamic_id) that I can pass into this ratings bar call. Any ideas? Thanks.
August 24th, 2006
@Joshua: I didn’t have any plans for that, although it’s not out of the realm of possibility. I’d rather cobble together a Wordpress plugin first, as Wordpress is something I’m very familiar with.
@Jay: Well, each comment has a unique ID number (116, 117, and so forth...) and it appears like so in the comment form:
<li class="<?php echo $oddcomment; ?>"id="comment-<?php comment_ID() ?>">
So I imagine that you could do something like this:
<?php$raterID = 'rater-' . comment_ID();
rating_bar("$raterID");
?>
Which would (I think...I haven’t tested this) output something like
rating_bar("rater-142");. Did I understand you correctly? Hope that helped.
August 24th, 2006
Hi. Very nice work indeed :]
Instead of always having to make manual db inserts i’ve added a few lines that’ll make the entry if it doesn’t exist:
This is the _drawrating.php file:
function rating_bar($id,$units='') {
// get the db connection info
require('_config-rating.php');
//set some variables
$ip = $_SERVER['REMOTE_ADDR'];
if (!$units) {$units = 10;}
$query=mysql_query("SELECT total_votes,
total_value, used_ips FROM $tableName
WHERE id='$id' ") or die(" Error: ".mysql_error());
if (mysql_num_rows($query) == 0) {
$sql = "INSERT INTO $tableName (`id`,
`total_votes`, `total_value`, `used_ips`)
VALUES ('$id', '0', '0', '')";
$result = mysql_query($sql);
}
August 24th, 2006
Ryan,
Makes sense, however my $comment_id variable isn’t setup quite like that. I’m using an ajax comments plugin and I suspect the $comment_id variable is setup differently since the comment_id is reset to 0 for each new post. Meaning, every post has comment id 1,2,3...etc.
I guess I should look for the code from the original comments template that doesn’t reset the comment_id for each new post. I should be able to figure this out now, thanks.
August 24th, 2006
Hi, I’ve tried to install this little rating bar, but i’m afraid I’ve missed something…
I installed everything I think ok, but when I give hit my stars to give it a rating, it just sits there and doesn’t write to the database. The config on the database seems to be set up...any ideas what it could be?
August 24th, 2006
Can someone tell me what this SQL statement does?
TYPE=MyISAM AUTO_INCREMENT=3 ;What is the auto_increment of 3 do? How do you assign a database to increment like that? Isn’t that supposed to be the key?
August 24th, 2006
@Wax0r: I know the lack of manual insertion (easy, everyone, this is a FAMILY website...) was an issue for those who wanted to generate dynamic id’s for their raters, but I took the INSERT statements out of the v1.1 script due to tomfoolery on some people’s parts when trying to manipulate the URL’s. But that was because I had the INSERT in the wrong place, i.e., when you voted, instead of when the rater was drawn. Duh on my part. I’m no programmer, I just play one on the web. Nice work, thanks!
@Jay: Couldn’t you append the post ID as well? If it’s comment 4 of post 237, construct your variable and rater like so:
<?php$raterID = 'rater-'.post_ID().'-'.comment_ID();
rating_bar("$raterID");
?>
which would then look something like
rating_bar("rater-237-4");?
@Billy: Are you sure the paths to your db.php and rpc.php pages are correct? I’m guessing those are in a different level dircetory than the core of the script, so it just hangs. And honestly, I don’t know what the heck that SQL is for. Like I mentioned, this script is based on work done by other people, and that was probably left over from their work. You could try the alternate SQL above (comment 3, I think).
August 25th, 2006
not work for me :(
http://kokai.awardspace.com/rating
August 25th, 2006
@kokai: You know, I’d love to help you but if you can’t take the time to describe the problem, I can’t take the time to look. How about (and this goes for everyone else who has emailed me that theirs “doesn’t work”...): You install it AS IT WAS DOWNLOADED and get it to work FIRST, and then you can worry about how it looks, and what it says, and all that other fun stuff.
I just spent a lot of time emailing someone back and forth about this very thing and I will not do that again. Once I told him to download a FRESH copy and completely re-install the script, keeping everything as he sees it - it (curiously enough) started working. Go figure.
Note to everybody: if you want to keep your db.php and rpc.php files in the rater directory (or any other directory) that is not the SAME directory as the one your rating script is in, you had better change your paths to those files in the code.
If you don’t want to monkey with icky code and changing the paths because you’re too cool for school, then make sure that if you have a page titled rate-these-hot-people.php and you have rating bars all over it, that rpc.php and db.php are in the SAME folder as that page. Please look at the directory structure of the file download when you open it. Thanks!
August 25th, 2006
Thanks for all the help. Using Waxor’s info and the various mods for Wordpress, I know have a custom plugin that works wonders.
One quick question, how do I remove the $rater_id from being displayed in the output.
For example, it will look like
25. Rating 4.0/5 (1 vote cast)
I’m assuming this is in the _drawrating.php file but I’m not sure where.
Thanks.
August 26th, 2006
@Jay: To remove the rater’s ID from the output, you have to change a couple things. In _drawrating.php, about line 45, change this:
<?php echo $id ?>. Rating:to this:
Rating:And in rpc.php, about line 66, change this:
“$id_sent. Rating:to this:
Rating:You say you have a WordPress plugin developed? What does it do? How does it make it easier to work this script into a Wordpress install?
August 26th, 2006
I want (and plan) to develop a rating bar plugin for Wordpress with this script. I’m just wondering what functionality people think it should have. What would you look for in a Wordpress AJAX Rating Bar plugin?
August 26th, 2006
Hi,
I tried upgrading, but now all I get is Error connecting to MySQL. I checked, it’s the correct information, but it will not connect. What’s going on?
August 26th, 2006
Thank you so much.
August 26th, 2006
Ryan,
I haven’t built a plugin, I was saying that using the information from this page I was able to implement the ratings into my Wordpress blog. It’s very simple, I just wanted a way for people to rate comments.
Whenever you develop the plugin, I would just look for easy usability. There’s so many different themes, etc. out there that it’s tough to write an install for all the different cases. I dunno, I’m satisfied though!
August 29th, 2006
Hey, nice script.
I have set it all up. When I click on a star, it shows me a loading thing (the circle) and doesn’t go further than that. But when i refresh, the votes has been counted. So, that means the script is working, but it doesn’t go to the new rating,
August 29th, 2006
Really cool script. I’ve been searching for one just like it, but couldn’t find a good one until I searched for an ‘AJAX’ script. One feature that would be really cool is to be able to generate a top 10 table.
August 29th, 2006
@Alex: See Jason G’s comment above about making a Top Ten list.
August 29th, 2006
you need to use tickles ` left next the backspace key. but not for the default values!
August 29th, 2006
hey this is awesome script! i wanted something like this for wordpress, but you know that the wysiwyg editor disallows php (and also wordpress itself).. i combined it with other scripts, modified it a bit (and the last version was wrong, had to fix some php to make it work) and now i have a button in wysiwyg editor that promts for ID and inserts a voting bar right into the post, you can insert these as many as you like as long as you supply unique IDs. see the result here
I might put it up in some package and post it on my homepage later..
August 29th, 2006
@Valters: I know that Wordpress disallows PHP by default. I thought I mentioned somewhere (in the docs?) that if you want to plug these rating bars into your posts or pages, that you will need to run a plugin like the awesome Exec-PHP that allows PHP to be executed inside posts. Hmm. Can’t find that anywhere. I’ll make sure to point that out when I do a revision or an update. And what are you doing using the Wordpress WYSIWYG editor?! Just kidding.
Nice work using the rater. That is pretty much how I envisioned it being used with Wordpress; allowing for multiple ratings in a single post or page.
@fine: Huh?