Tag Archive for: jquery

Star Rating jquery sin base de datos 2

Categories: AJAX, PHP - Tags: , , , ,

Puedes ver la primera parte del tutorial aqui
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;

Finalmente puedes decargar todos los archivos del tutorial aqui

Star Rating jquery sin base de datos 1

Categories: AJAX, PHP - Tags: , , , ,

Para la parte del css me he basado en el codigo 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 asi ya no requiero una base de datos

El diseño

Las instrucciones detalladas como ya indique las pueden encontrar en Komodo Media, asi que yo me voy a limitar a copiar el codigo del formulario.

1
2
3
4
5
6
7
8
9
10
11
12
13
<form name="frm_rating" 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 class="star"><a href='#' title='1' class='one-star'>1</a></li>
        <li class="star"><a href='#' title='2' class='two-stars'>2</a></li>
        <li class="star"><a href='#' title='3' class='three-stars'>3</a></li>
        <li class="star"><a href='#' title='4' class='four-stars'>4</a></li>
        <li class="star"><a href='#' title='5' class='five-stars'>5</a></li>
        <li class="star"><a href='#' title='6' class='six-stars'>6</a></li>
    </ul>
    <input type="hidden" name="my_vote" value="0" id="my_vote" />
    <input type="submit" name="submit" 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 libreria jquery:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script language="javascript" src="jquery-1.2.6.min.js"></script>
<script language="javascript">
$(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>

Pueden ver la segunda parte del tutorial aqui
Otra forma de hacer un Star Rating usando un plugin para Jquery