star rating con html, php, js y un txt


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&lt;=$num_lineas; $i++) {
$total=$total+$valores[$i];
}
// Hallo el promedio y lo redondeo
$promedio=$total/$num_lineas;
echo “total: “.round($promedio);
?&gt;
  1. 26/09/09

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: