logo

SoulSmasher’s Ultimate jQuery Helper for Komodo Media CSS Star Rater (Redux) With PHP and MySQL

Posted by SoulSmasher on Aug 5, 2009 in php | View Comments
logo
?View Code TEXT
/*jQuery Helper for Komodo Media CSS Star Rater (Redux) With PHP MySQL
* Version: 1.0
* This Script Is Based On Kjell Bublitz's JQuery Helper For Komodo Media CSS Star Rater, which is brought by komodomedia.com
* Author: Arda Kilicdagi (SoulSmasher)
* Web: http://www.soulsmasher.net
*/

I’ve been looking for a decent script which’d base on JQuery, support PHP, MySQL, allow more than one ratings per page, and disallow multiple ratings by same member. All of those options were in none of the scripts bundled. That’s why I decided to generate my own

This Script Is Based On Kjell Bublitz’s JQuery Helper For Komodo Media CSS Star Rater modification, which is brought by Komodomedia.

So, What’s this version’s advantages over other komodomedia (or other) ajax raters?

  • This version supports individual rating, so you can add more than one rating on the same page
  • This version brings preventing to rate more than once, so no one can rate more than one (well, I used cookie for this, you always can change the code for IP adresses)
  • This version brings database support (MySQL), so the values will be stored inside database, so the total and average value can be shown
  • Well, easy to install and integrate, you just have to call a function to show the content like ajaxrate($id) :)

Installation


Run This SQL Command through PHPMyAdmin or any SQL Interface:

?View Code MYSQL
DROP TABLE IF EXISTS ajax_ratings;
CREATE TABLE ajax_ratings (
rating_id MEDIUMINT(8) UNSIGNED NOT NULL,
total_raters MEDIUMINT(8) UNSIGNED NOT NULL DEFAULT '0',
total_rate MEDIUMINT(8) UNSIGNED NOT NULL DEFAULT '0',
average_rate TINYINT(1) UNSIGNED NOT NULL DEFAULT '0'
) TYPE=MyISAM;

After that, we need the star images:
star big star small

Then Now the CSS Part

?View Code CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

/* ======= STAR-RATER ======== */
/* http://www.soulsmasher.net/soulsmashers-ultimate-jquery-star-rater-with-php-mysql/ */
.star-rating,
.star-rating a:hover,
.star-rating a:active,
.star-rating a:focus,
.star-rating .current-rating{
background: url(star.gif) left -1000px repeat-x;
}
.star-rating{
position:relative;
width:125px;
height:25px;
overflow:hidden;
list-style:none;
margin:0;
padding:0;
background-position: left top;
}
.star-rating li{
display: inline;
}
.star-rating a,
.star-rating .current-rating{
position:absolute;
top:0;
left:0;
text-indent:-1000em;
height:25px;
line-height:25px;
outline:none;
overflow:hidden;
border: none;
}
.star-rating a:hover,
.star-rating a:active,
.star-rating a:focus{
background-position: left bottom;
}
.star-rating .current-rating{
z-index:1;
background-position: left center;
}
 
.inline-rating{
display:-moz-inline-block;
display:-moz-inline-box;
display: inline-block;
vertical-align: middle;
}
 
.small-star{
width:50px;
height:10px;
}
.small-star,
.small-star a:hover,
.small-star a:active,
.small-star a:focus,
.small-star .current-rating{
background-image: url(star_small.gif);
line-height: 10px;
height: 10px;
}
/* ======= /STAR-RATER ======== */

Now The Javascript:

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135

/**
 * SoulSmasher's jQuery Ajax Rater Plugin
 * http://www.soulsmasher.net/soulsmashers-ultimate-jquery-star-rater-with-php-mysql/
 * This rater is based on the code Ritesh Agrawal did. Unfortunatly his CSS and the hover technique breaks in some browsers.
 * So i thought, why not use the best CSS star-rater known to man kind and throw it in the mix.
 * I have used the CSS and technique from Komodo Media since it is stable and tested on many, many browsers.
 *
 * This rater compared, has no cancel button. But i think we can live with that :)
 * To avoid conflicts i have changed the function name.
 * 
 * Licensed under The MIT License
 * 
 * @version     1.0
 * @since       2009.08.05
 * @author      Arda Kilicdagi (soulsmasher) And Kjell Bublitz <m3nt0r.de@gmail.com
 * @link        http://www.m3nt0r.de/devel/raterDemo/ Demonstration and Documentation
 * @link        http://php.scripts.psu.edu/rja171/widgets/rating.php Based on Ritesh Agrawal Star Rating System
 * @link        http://komodomedia.com/blog/index.php/2007/01/20/css-star-rating-redux/ The Komodo Media CSS Rater Blogpost
 * @license     http://www.opensource.org/licenses/mit-license.php MIT 
 * @package     jQuery Plugins
 * @subpackage  Rater
 *
 * Improvements By: SoulSmasher
 * http://www.soulsmasher.net 
 */ 
 
 
/**
 * Usage: $('#rating').rater('your_servlet', {id: rate_id, style:'basic', maxvalue:5, curvalue:0, hidden: 0});
 *  
 * @param url The address you want to post the result to. 
 * @param options The style and value attributes
 *
 * Valid options:
 * ---------------------------------------
 *       style:       'basic', 'inline' OR 'small'
 *       maxvalue:    the maximum value / number of stars
 *       curvalue:    the initial value / selected stars
 */ 
jQuery.fn.rater = function(url, options)
{
	if(url == null) return;
	var settings = {
		url       : url, // post changes to 
		maxvalue  : 5,   // max number of stars
		curvalue  : 0,    // number of selected stars
		id : 0, //the id of the rate
		hidden : 0 //If clicking will not be allowed, alter as 1.
	};
 
	if(options) { jQuery.extend(settings, options); };
	jQuery.extend(settings, {cancel: (settings.maxvalue > 1) ? true : false});
 
	var container = jQuery(this);
	jQuery.extend(container, { averageRating: settings.curvalue, url: settings.url, id: settings.id, hidden: settings.hidden });
 
	if(!settings.style || settings.style == null || settings.style == 'basic') {
		var raterwidth = settings.maxvalue * 25;
		var ratingparent = '<ul class="star-rating" style="width:'+raterwidth+'px">';
	}
	if(settings.style == 'small') {
		var raterwidth = settings.maxvalue * 10;
		var ratingparent = '<ul class="star-rating small-star" style="width:'+raterwidth+'px">';
	}
	if(settings.style == 'inline') {
		var raterwidth = settings.maxvalue * 10;
		var ratingparent = '<span class="inline-rating"><ul class="star-rating small-star" style="width:'+raterwidth+'px">';
	}
	container.append(ratingparent);
 
	// create rater
	var starWidth, starIndex, listitems = '';
	var curvalueWidth = Math.floor(100 / settings.maxvalue * settings.curvalue);
	for(var i = 0; i <= settings.maxvalue ; i++) {
		if (i == 0) {
			listitems+='<li class="current-rating" style="width:'+curvalueWidth+'%;">'+settings.curvalue+'/'+settings.maxvalue+'</li>';
			//listitems+='<span id="rate_'+settings.id+'">';//SPAN EKLE BAŞA
		} else {
			if (settings.hidden == 0) {
				starWidth = Math.floor(100 / settings.maxvalue * i);
				starIndex = (settings.maxvalue - i) + 2;
				listitems+='<li class="star" id="rate_'+settings.id+'_'+i+'"><a href="#'+i+'" title="'+i+'/'+settings.maxvalue +'" style="width:'+starWidth+'%;z-index:'+starIndex+'">'+i+'</a></li>';
				if (i == settings.maxvalue) {
				//listitems+='</span>'; //SPAN SONU
				}
			}
		}
	}
	container.find('.star-rating').append(listitems); // i am using find here, because the span wrapped in the small style would break children()
 
	if(settings.maxvalue > 1) // add a container for the ajax result
	{
		container.append('<span class="star-rating-result"></span>'); 
 
	}
	var stars = jQuery(container).find('.star-rating').children('.star');
 
 
	stars.click(function()
	{
		if(settings.maxvalue == 1) // on / off
		{
 
			for(var j = 0; j <= settings.maxvalue ; j++) {
			$('#rate_'+settings.id+'_'+j+'').remove();
			}
 
			settings.curvalue = (settings.curvalue == 0) ? 1 : 0;
			jQuery(container).find('.star-rating').children('.current-rating').css({width:(settings.curvalue*100)+'%'});
			jQuery.post(container.url, { "rating": settings.curvalue });
			return false;
 
 
		}
		else
		{		
 
			for(var j = 0; j <= settings.maxvalue ; j++) {
			$('#rate_'+settings.id+'_'+j+'').remove();
			}
 
			settings.curvalue = stars.index(this) + 1;
			raterValue = jQuery(this).children('a')[0].href.split('#')[1];
			jQuery.post(container.url, { "rating": raterValue }, function(response){
				container.children('.star-rating-result').html(response)	
			});
 
			return false;
		}
 
		return true;
	});
 
	return this; // strict warning: anonymous function does not always return a value. fix?
}

Save this javascript as jquery.rater.js

put star.gif, star_small.gif and jquery.rater.js into same folder

Now The PHP/HTML Part:
Save this php file as ajaxrate.php

?View Code PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<?php 
//SoulSmasher's Ultimate jQuery Helper for Komodo Media CSS Star Rater (Redux) With PHP and MySQL
// http://www.soulsmasher.net/soulsmashers-ultimate-jquery-star-rater-with-php-mysql/
 
//connect to mysql here
$conenct=mysql_connect('host', 'user', 'pass', 'dbname') or die("could not connect to db");
$select=mysql_select_db('dbname') or die("could not select a database");
//connect to mysql here ends
 
if (isset($_POST['rating']) && preg_match("/^[0-9]+$/",$_POST['rating']) && isset($_GET['id']) && preg_match("/^[0-9]+$/",$_GET['id'])) {
	$result=mysql_query("SELECT * FROM ajax_ratings WHERE rating_id='".$_GET['id']."'");	
	if (!mysql_num_rows($result)) {//no rate has been posted yet, so we have to insert to a column
		$result2=mysql_query("INSERT INTO ajax_ratings (rating_id, total_raters, total_rate, average_rate) VALUES ('".$_GET['id']."', '1', '".$_POST['rating']."', '".$_POST['rating']."')");
		setcookie("ajaxrate_".$_GET['id'],$_POST['rating'],time()+2592000);
		echo $result2?"Given Rate: ".$_POST['rating'].", Total Rates: 1":"There has been an error while adding the rate!";
	} else {
		$data=mysql_fetch_array(mysql_query("SELECT * FROM ajax_ratings WHERE rating_id='".$_GET['id']."'"));
		$new_average = round(($data['total_rate'] + $_POST['rating']) / ($data['total_raters']+1));
		$result2=mysql_query("UPDATE ajax_ratings SET total_raters='".($data['total_raters']+1)."', total_rate='".($data['total_rate']+$_POST['rating'])."', average_rate='".$new_average."' WHERE rating_id='".$_GET['id']."'");
		setcookie("ajaxrate_".$_GET['id'],$_POST['rating'],time()+2592000);
		echo $result2?"Given Rate: ".$_POST['rating'].", Total Rates: ".($data['total_raters']+1).", Average Rating: ".$new_average:"There has been an error while adding the rate!";
	}
} else {
die("Go Away!");
exit;
}
 
/*echo($_POST['rating']); ?>! Id is <?php echo $_GET['id'];*/ 
 
?>

This code will be required by your script. Include it as any way you like:

?View Code PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<?php
//http://www.soulsmasher.net/soulsmashers-ultimate-jquery-star-rater-with-php-mysql/
 
function ajax_rating($id,$style="basic",$hidden=false) {
$output="";
	$result=dbquery("SELECT average_rate FROM ajax_ratings WHERE rating_id='".$id."'");
	$average=0;
	if (dbrows($result)) {
		$data=dbarray($result);
		$average=$data['average_rate'];
	}
		$output.= isset($_COOKIE['ajarate_'.$id])?"I rated this content with: ".$_COOKIE['ajaxrate_'.$id]:"Rate this content:";
		$output.= "<div id='ajaxrate_".$id."'></div>";
		$output.= "<script type='text/javascript'>
			$('#ajaxrate_".$id."').rater('ajaxrate.php?id=".$id."', {id: ".$id.", style: '".$style."',hidden:".((isset($_COOKIE['ajaxrate_'.$id]) || $hidden)?1:0).",curvalue: ".$average."});
		</script>";
	/*if (isset($_COOKIE['ajaxrate_'.$id])) { //unhide this if you want to show what the rater gave
	$output.="Given Rate: ".stripinput($_COOKIE['ajaxrate_'.$id]);		
	}*/
	return $output;
}
 
//The Rater will be called like this:
echo ajax_rating(1); //for default star view with id: 1
echo ajax_rating(5,"small"); //for small style, id: 5
echo ajax_rating(5,"inline"); //for inline style, id: 5
echo ajax_rating(99,"small",true); //small style, with id: 99, cannot be clicked
 
//Easy, isn't it? ;)
 
?>

Demo: here (I yet don’t have time to make a proper demo, but will soon.)

Download Link: SoulSmashers_Ultimate_star_rater_soulsmsher_net.rar

Enjoy! ;)

VN:F [1.9.3_1094]
Rating: 6.5/10 (38 votes cast)
VN:F [1.9.3_1094]
Rating: +2 (from 14 votes)
SoulSmasher's Ultimate jQuery Helper for Komodo Media CSS Star Rater (Redux) With PHP and MySQL, 6.5 out of 10 based on 38 ratings
blog comments powered by Disqus
logo
logo
Powered by Wordpress | Designed by Elegant Themes