im trying to add a star rating system to a website. id like to do something elegant graphically instead of just using a drop down... the javascript framework im using is mootools and i found a great rating system here, but have no idea how to adjust it so that it updates the database with the new rating vote from the user and it calculates the new average rating.
the way i have the database set up for this is with the following fields:
id (the rating's unique id)
listingid (the listing that the rating corresponds to)
userid (the user that entered the rating)
rating (the rating itself)
i use php to communicate with a mysql database.
the file im going to write will check to see if there is already a rating entered in from the logged in user. if there is, it will update it. if not, it will insert it, then it will calculate the average of all votes for that listing (rounded up) and return the new rating to the page and set the stars to reflect that rating... ive tweaked the code a bit to represent a 5 star system instead of a 10 star system and also so it can be used multiple times on a page.
heres what ive been playing with:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mootools Simple Star Rating</title>
<script type="text/javascript" src="mootools.js"></script>
<link rel="stylesheet" type="text/css" href="star-rating.css" />
</head>
<body>
<ul id="rate1" class="normal rating fourstar">
<li title="1" class="rate one"><a href="javascript://" title="1 Star">1</a></li>
<li title="2" class="rate two"><a href="javascript://" title="2 Stars">2</a></li>
<li title="3" class="rate three"><a href="javascript://" title="3 Stars">3</a></li>
<li title="4" class="rate four"><a href="javascript://" title="4 Stars">4</a></li>
<li title="5" class="rate five"><a href="javascript://" title="5 Stars">5</a></li>
</ul>
<ul class="featured rating fivestar">
<li title="1" class="rate one"><a href="javascript://" title="1 Star">1</a></li>
<li title="2" class="rate two"><a href="javascript://" title="2 Stars">2</a></li>
<li title="3" class="rate three"><a href="javascript://" title="3 Stars">3</a></li>
<li title="4" class="rate four"><a href="javascript://" title="4 Stars">4</a></li>
<li title="5" class="rate five"><a href="javascript://" title="5 Stars">5</a></li>
</ul>
<script>
$$('.rate').each(function(element,i){
element.addEvent('mouseup', function(){
var myStyles = ['nostar', 'onestar', 'twostar', 'threestar', 'fourstar', 'fivestar'];
myStyles.each(function(myStyle){
if(element.getParent().hasClass(myStyle)){
element.getParent().removeClass(myStyle)
}
});
myStyles.each(function(myStyle, index){
if(index == element.title){
element.getParent().toggleClass(myStyle);
alert(index);
}
});
});
});
</script>
</body>
</html>
and the css:
/* star rating code - use lists because its more semantic */
/* No javascript required */
/* all the stars are contained in one matrix to solve rollover problems with delay */
/* the background position is just shifted to reveal the correct image. */
/* the images are 16px by 16px and the background position will be shifted in negative 16px increments */
/* key: B=Blank : O=Orange : G = Green * /
/*..... The Matrix ....... */
/* colours ....Background position */
/* B B B B B - (0 0)*/
/* G B B B B - (0 -16px)*/
/* G G B B B - (0 -32px)*/
/* G G G B B - (0 -48px)*/
/* G G G G B - (0 -64px)*/
/* G G G G G - (0 -80px)*/
/* O B B B B - (0 -96px)*/
/* O O B B B - (0 -112px)*/
/* O O O B B - (0 -128px)*/
/* O O O O B - (0 -144px)*/
/* O O O O O - (0 -160px)*/
/* the default rating is placed as a background image in the ul */
/* use the background position according to the table above to display the required images*/
.rating{
width:80px;
height:16px;
margin:0 0 20px 0;
padding:0;
list-style:none;
clear:both;
position:relative;
}
.normal{background: url(star-bluebk.gif) no-repeat 0 0;}
.featured{background: url(star-goldbk.gif) no-repeat 0 0;}
/* add these classes to the ul to effect the change to the correct number of stars */
.nostar {background-position:0 0}
.onestar {background-position:0 -16px}
.twostar {background-position:0 -32px}
.threestar {background-position:0 -48px}
.fourstar {background-position:0 -64px}
.fivestar {background-position:0 -80px}
ul.rating li {
cursor: pointer;
/*ie5 mac doesn't like it if the list is floated\*/
float:left;
/* end hide*/
text-indent:-999em;
}
ul.rating li a {
position:absolute;
left:0;
top:0;
width:16px;
height:16px;
text-decoration:none;
z-index: 200;
}
ul.rating li.one a {left:0}
ul.rating li.two a {left:16px;}
ul.rating li.three a {left:32px;}
ul.rating li.four a {left:48px;}
ul.rating li.five a {left:64px;}
ul.rating li a:hover {
z-index:2;
width:80px;
height:16px;
overflow:hidden;
left:0;
}
ul.normal li a:hover { background: url(star-bluebk.gif) no-repeat 0 0}
ul.featured li a:hover { background: url(star-goldbk.gif) no-repeat 0 0}
ul.rating li.one a:hover {background-position:0 -176px;}
ul.rating li.two a:hover {background-position:0 -192px;}
ul.rating li.three a:hover {background-position:0 -208px}
ul.rating li.four a:hover {background-position:0 -224px}
ul.rating li.five a:hover {background-position:0 -240px}
i havent even been able to get the system to average the current rating and the new rating... HELP!!!