css-star-rating-systeem
Gesponsorde koppelingen
PHP script bestanden
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
CREATE TABLE `starvote` (
`id` int(1) NOT NULL auto_increment,
`score` int(5) NOT NULL,
`votes` int(5) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;
INSERT INTO `starvote` (`id`, `score`, `votes`) VALUES
(1, 0, 0);
`id` int(1) NOT NULL auto_increment,
`score` int(5) NOT NULL,
`votes` int(5) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;
INSERT INTO `starvote` (`id`, `score`, `votes`) VALUES
(1, 0, 0);
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
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
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
<HTML>
<HEAD>
<style>
/* Dit zijn de styles die gebruikt worden door het systeem */
.sterren{
width:80px;
height:16px;
margin:0 0 20px 0;
padding:0;
list-style:none;
clear:both;
position:relative;
background:url(stars/star_green.gif) no-repeat 0 0;
}
.s0star {background-position:0 0}
.s1star {background-position:0 -16px}
.s2star {background-position:0 -32px}
.s3star {background-position:0 -48px}
.s4star {background-position:0 -64px}
.s5star {background-position:0 -80px}
ul.sterren li {cursor:pointer;float:left;text-indent:-999em;}
ul.sterren li a {
position:absolute;
left:0;
top:0;
width:16px;
height:16px;
text-decoration:none;
z-index:200;
}
ul.sterren li.s1 a {left:0}
ul.sterren li.s2 a {left:16px;}
ul.sterren li.s3 a {left:32px;}
ul.sterren li.s4 a {left:48px;}
ul.sterren li.s5 a {left:64px;}
ul.sterren li a:hover {
z-index:2;
width:80px;
height:16px;
overflow:hidden;
left:0;
background:url(stars/star_green.gif) no-repeat 0 0;
}
ul.sterren li.s1 a:hover {background-position:0 -96px;}
ul.sterren li.s2 a:hover {background-position:0 -112px;}
ul.sterren li.s3 a:hover {background-position:0 -128px}
ul.sterren li.s4 a:hover {background-position:0 -144px}
ul.sterren li.s5 a:hover {background-position:0 -160px}
h3{margin:0 0 2px 0;font-size:110%}
</style>
<TITLE>Sterren</TITLE>
</HEAD>
<BODY>
<?php
// Verbinding maken met MySQL.
mysql_connect('localhost','root','');
mysql_select_db('test');
// Stem uitbrengen. (Controle of de stem wel tussen de 1 en de 5 zit)
if(isset($_GET["vote"]) && $_GET["vote"] > 0 && $_GET["vote"] <= 5){
// Oude data ophalen...
$query = "SELECT score,votes FROM starvote";
$result = mysql_query($query)or die(mysql_error()."<br>".$query);
$VotesSQL = mysql_fetch_assoc($result);
// ...nieuwe data opslaan...
$new_votes = ($VotesSQL['votes'] + 1);
$new_score = ($VotesSQL['score'] + $_GET["vote"]);
// ...en toevoegen aan de database!
$query = "UPDATE starvote SET score = '".$new_score."', votes = '".$new_votes."'";
mysql_query($query)or die(mysql_error()."<br>".$query);
}
// Votes ophalen en in een string zetten.
$query = "SELECT score,votes FROM starvote";
$result = mysql_query($query)or die(mysql_error()."<br>".$query);
$VotesSQL = mysql_fetch_assoc($result);
$votes = $VotesSQL['votes'];
$score = $VotesSQL['score'];
// Gemiddelde berekenen en er netjes 1 waarde van maken; het aantal sterren.
$score != 0 ? $stars = round(($score / $votes)) : $stars = 0;
$stars > 5 ? $stars2 = 5 : $stars2 = $stars;
//$starsTxt = array('s0','s1','s2','s3','four','five');
// Door midden van de aantal sterren, de CSS class definieren in een string.
$StarClass = 'sterren s'.$stars2.'star';
echo $stars.' sterren door '.$votes.' stemmen.';
//Sterren CSS class dynamisch toevoegen, en de sterren weergeven. ?>
<ul class="<?php echo $StarClass; ?>">
<li class="s1"><a href="index.php?vote=1" title="1 Star" onFocus="this.blur()">1</a></li>
<li class="s2"><a href="index.php?vote=2" title="2 Stars" onFocus="this.blur()">2</a></li>
<li class="s3"><a href="index.php?vote=3" title="3 Stars" onFocus="this.blur()">3</a></li>
<li class="s4"><a href="index.php?vote=4" title="4 Stars" onFocus="this.blur()">4</a></li>
<li class="s5"><a href="index.php?vote=5" title="5 Stars" onFocus="this.blur()">5</a></li>
</ul>
</BODY>
</HTML>
<HEAD>
<style>
/* Dit zijn de styles die gebruikt worden door het systeem */
.sterren{
width:80px;
height:16px;
margin:0 0 20px 0;
padding:0;
list-style:none;
clear:both;
position:relative;
background:url(stars/star_green.gif) no-repeat 0 0;
}
.s0star {background-position:0 0}
.s1star {background-position:0 -16px}
.s2star {background-position:0 -32px}
.s3star {background-position:0 -48px}
.s4star {background-position:0 -64px}
.s5star {background-position:0 -80px}
ul.sterren li {cursor:pointer;float:left;text-indent:-999em;}
ul.sterren li a {
position:absolute;
left:0;
top:0;
width:16px;
height:16px;
text-decoration:none;
z-index:200;
}
ul.sterren li.s1 a {left:0}
ul.sterren li.s2 a {left:16px;}
ul.sterren li.s3 a {left:32px;}
ul.sterren li.s4 a {left:48px;}
ul.sterren li.s5 a {left:64px;}
ul.sterren li a:hover {
z-index:2;
width:80px;
height:16px;
overflow:hidden;
left:0;
background:url(stars/star_green.gif) no-repeat 0 0;
}
ul.sterren li.s1 a:hover {background-position:0 -96px;}
ul.sterren li.s2 a:hover {background-position:0 -112px;}
ul.sterren li.s3 a:hover {background-position:0 -128px}
ul.sterren li.s4 a:hover {background-position:0 -144px}
ul.sterren li.s5 a:hover {background-position:0 -160px}
h3{margin:0 0 2px 0;font-size:110%}
</style>
<TITLE>Sterren</TITLE>
</HEAD>
<BODY>
<?php
// Verbinding maken met MySQL.
mysql_connect('localhost','root','');
mysql_select_db('test');
// Stem uitbrengen. (Controle of de stem wel tussen de 1 en de 5 zit)
if(isset($_GET["vote"]) && $_GET["vote"] > 0 && $_GET["vote"] <= 5){
// Oude data ophalen...
$query = "SELECT score,votes FROM starvote";
$result = mysql_query($query)or die(mysql_error()."<br>".$query);
$VotesSQL = mysql_fetch_assoc($result);
// ...nieuwe data opslaan...
$new_votes = ($VotesSQL['votes'] + 1);
$new_score = ($VotesSQL['score'] + $_GET["vote"]);
// ...en toevoegen aan de database!
$query = "UPDATE starvote SET score = '".$new_score."', votes = '".$new_votes."'";
mysql_query($query)or die(mysql_error()."<br>".$query);
}
// Votes ophalen en in een string zetten.
$query = "SELECT score,votes FROM starvote";
$result = mysql_query($query)or die(mysql_error()."<br>".$query);
$VotesSQL = mysql_fetch_assoc($result);
$votes = $VotesSQL['votes'];
$score = $VotesSQL['score'];
// Gemiddelde berekenen en er netjes 1 waarde van maken; het aantal sterren.
$score != 0 ? $stars = round(($score / $votes)) : $stars = 0;
$stars > 5 ? $stars2 = 5 : $stars2 = $stars;
//$starsTxt = array('s0','s1','s2','s3','four','five');
// Door midden van de aantal sterren, de CSS class definieren in een string.
$StarClass = 'sterren s'.$stars2.'star';
echo $stars.' sterren door '.$votes.' stemmen.';
//Sterren CSS class dynamisch toevoegen, en de sterren weergeven. ?>
<ul class="<?php echo $StarClass; ?>">
<li class="s1"><a href="index.php?vote=1" title="1 Star" onFocus="this.blur()">1</a></li>
<li class="s2"><a href="index.php?vote=2" title="2 Stars" onFocus="this.blur()">2</a></li>
<li class="s3"><a href="index.php?vote=3" title="3 Stars" onFocus="this.blur()">3</a></li>
<li class="s4"><a href="index.php?vote=4" title="4 Stars" onFocus="this.blur()">4</a></li>
<li class="s5"><a href="index.php?vote=5" title="5 Stars" onFocus="this.blur()">5</a></li>
</ul>
</BODY>
</HTML>