Para la parte del css me he basado en el código de Komodo Media, e cual pueden encontrar aqui
Lo interesante de este script es que uso jquery y guardo la votación en un archivo de texto y así ya no requiero una base de datos
El diseño de las star rating en el form html
Las instrucciones detalladas como ya indique las pueden encontrar en Komodo Media, asi que yo me voy a limitar a copiar el código del formulario.
1
2
3
4
5
6
7
8
9
10
11
12
13 |
<form method=»post» action=»index.php»>
<ul class=’star-rating’>
<li class=’current-rating’ style=’width:<?php echo 25 * round($promedio);?>px;’>Currently 3.5/6 Stars.</li>
<li><a href=’#’ title=’1′ class=’one-star’>1</a></li>
<li><a href=’#’ title=’2′ class=’two-stars’>2</a></li>
<li><a href=’#’ title=’3′ class=’three-stars’>3</a></li>
<li><a href=’#’ title=’4′ class=’four-stars’>4</a></li>
<li><a href=’#’ title=’5′ class=’five-stars’>5</a></li>
<li><a href=’#’ title=’6′ class=’six-stars’>6</a></li>
</ul>
<input value=»0″ />
<input value=»Votar» />
</form> |
La hoja de estilos y el grafico de las estrellas lo encuentran en el archivo zip al final del tutorial
AJAX
Ahora necesito que cuando se le de click a una estrella, esta se marque y el valor del campo hiddden “my_vote” se modifique
Para eso voy a hacer un simple javascript invocando mi librería jquery:
1
2
3
4
5
6
7
8
9
10
11
12
13
14 |
<script src=»jquery-1.2.6.min.js»></script>
<script>
$(document).ready(function(){
// Detecto la estrella que es presionada
$(«li.star a»).click(function(event){
// Recojo el valor de la estrella
valor_actual=$(this).attr(«title»);
// Cambio el estilo para mostrar la estrella seleccionada
$(«li.current-rating»).css(«width», valor_actual*25);
// Cambio el valor del campo hidden
$(«#my_vote»).attr(«value», valor_actual);
});
});
</script> |
Ya tenemos las estrellas, tambien se marcan las estrellas, ahora nos falta guardar la votación
<h2>Guardar la votación</h2>
Para eso debemos crear un archivo llamado datos.txt y deben asegurarnos que sea escribible, el codigo php requerido es:
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 |
// Verificamos si se ha votado
if (isset($_POST[‘my_vote’])) {
Abrimos el archivo datos.txt
$filename = ‘datos.txt’;
// Capturamos el valor del voto
$somecontent = $_POST[‘my_vote’].»\n»;
// Verificamos que nuestro archivo sea escribible
if (!$handle = fopen($filename, ‘a’)) {
echo «Cannot open file ($filename)»;
exit;
}
// Escribimos $somecontent en nuestro archivo
if (fwrite($handle, $somecontent) === FALSE) {
// Marcamos error de escritura
echo «Cannot write to file ($filename)»;
exit;
}
// El archivo se escribio correctamente y lo cerramos
fclose($handle);
}
//abro el archivo para lectura
$archivo = fopen («datos.txt», «r»);
$num_lineas = 0;
while (!feof ($archivo)) {
// Leo linea por linea las votaciones pasadas
if ($linea = fgets($archivo)){
// Guardo la cantidad de votaciones y sus valores
$num_lineas++;
$valores[$num_lineas]=$linea;
}
}
fclose ($archivo);
//print_r($valores);
// Calculo el total
$total=0;
for ($i=1; $i<=$num_lineas; $i++) {
$total=$total+$valores[$i];
}
// Hallo el promedio y lo redondeo
$promedio=$total/$num_lineas;
echo «total: «.round($promedio);
?> |
Jarivia 3D, blog de investigacion 3d interactiva para web 