👋

So, I found this great star rater script made in css. But I missed the web 2.0 stuff. So I played around with it to make it work on a database without having to refresh any pages (but updating the database with AJAX). In this version I use it for rating a image (with unique ID = imgId).
Screenshot:

not a beginners tutorial - and just follow the steps

1) The star image:

Star rate image (use save as..)

2) Javascript part (to do the dynamic stuff):

Javascript with AJAX module + rateImg function. (use save as..)

3) PHP part: Create a update.php file (to do the database update with the user rating):

if($_GET[‘rating’] && $_GET[‘imgId’]){
$dbh=mysql_connect ("localhost", "#######", ""#######", ") or die ('I cannot connect to the database because: ' . mysql_error());
mysql_select_db (""#######", ");
$imgId = $_GET['imgId']; //clean up variable from exploits (e.g. via is_numeric(), or addslashes())

if(is_numeric($_GET['rating'])){
//adds the rating to imgID in the database
$update = "update vote set voteNr = voteNr + 1, voteValue = voteValue + ".$_GET['rating']." WHERE imgId = '".$imgId."'";
$result = mysql_query($update);
if(mysql_affected_rows() == 0){
//creates a new row if imgID has no own row yet
$insert = "insert into vote (voteNr,voteValue,imgId) values ('1','".$_GET['rating']."','$imgId')";
$result = mysql_query($insert);
//Assume OK, return some text . current rating?
}else{
//OK return some text / current rating?
}
}

4) Mysql part: (to create a table).

CREATE TABLE `vote` (
        `voteNr` int(8) NOT NULL default ‘0’,
        `voteValue` int(8) NOT NULL default ‘0’,
        `imgId` varchar(100) NOT NULL default ‘’,
        UNIQUE KEY `imgId` (`imgId`)
) TYPE=MyISAM;

5) CSS part
Stylesheet part (creates onmouseover stars):

Stylesheet to create stars + mouseover. (use save as..)

HTML/PHP PART
An example php code to retrieve the current rating from the database: $rating = getCurrenRating(‘12’);

function getCurrenRating($imgId){

$sql= "select * from tblVote WHERE imgId= '".addslashes($imgId)."' LIMIT 0, 1";
$result=@mysql_query($sql);
$rs=@mysql_fetch_array($result);

return @round($rs[voteValue] / $rs[voteNr],1);

}

$rating is the rounded rating taken from database.

$imgId is the unique id for this (image) item. This is used in the javascript, passed to the update.php file to update the database.

And don’t forget to include the rating.js file.

<div id="rating">
<h3>Rating:</h3>
<pre>
<ul class=‘star-rating’>
<li class=‘current-rating’ id=‘current-rating’ style=‘width: <? $ratingpx = $rating *25; echo $ratingpx;?>px’><!—Currently <? echo $rating ?>/5 Stars.—></li>
<li><a href="javascript:rateImg(1,’<? echo $imgId ?>’)" title=‘1 star out of 5’ class=‘one-star’>1</a></li>
<li><a href="javascript:rateImg(2,’<? echo $imgId ?>’)" title=‘2 stars out of 5’ class=‘two-stars’>2</a></li>
<li><a href="javascript:rateImg(3,’<? echo $imgId ?>’)" title=‘3 stars out of 5’ class=‘three-stars’>3</a></li>
<li><a href="javascript:rateImg(4,’<? echo $imgId ?>’)" title=‘4 stars out of 5’ class=‘four-stars’>4</a></li>
<li><a href="javascript:rateImg(5,’<? echo $imgId ?>’)" title=‘5 stars out of 5’ class=‘five-stars’>5</a></li>
</ul>
</pre>

Completely confused? See example here (scroll down) http://www.guidetobuy.info/product6-beamers.html.

NEW: Simple inline text edit!