Sistema de votos por estrellas

Con este sistema podrás rankear páginas, noticias, etc. El sistema implementa un archivo css, una imágen, un archivo php para actualizar los votos (necesario base de datos mysql) y controlar la cantidad de votos que realiza un usuario (IP) y un archivo javascript (ajax).

---

1- Crear una imágen

Es necesario una imagen con 3 estrellas en diferentes tonalidades. El fondo de la imágen debe ser igual al fondo de la página o capa donde se utilizará. Si se desea modificar el tamaño de la imágen recordar que se deberá cambiar la especificación del tamaño en el archivo css (rating.css).

2- Archivo css (rank.css)

.rank ul { list-style: none; margin: 3px; padding: 0px; width: 125px; height: 25px; position: relative; background: url(rating.gif) top left repeat-x; margin-left:0px; } .rank li { padding: 0px; margin: 0px; float: left; } .rank li.current-rating { background: url(rating.gif) left bottom; position: absolute; height: 25px; display: block; text-indent: -9000px; z-index: 1; } .rank li a { display: block; width: 25px; height: 25px; text-decoration: none; text-indent: -9000px; z-index: 20; position: absolute; padding: 0px; background-image: none; } .rank li a:hover { background: url(rating.gif) left center; z-index: 1; left: 0px; } .rank a.star-1 {left: 0px;} .rank a.star-1:hover {width: 25px;} .rank a.star-2 {left: 25px;} .rank a.star-2:hover {width: 50px;} .rank a.star-3 {left: 50px;} .rank a.star-3:hover {width: 75px;} .rank a.star-4 {left: 75px;} .rank a.star-4:hover {width: 100px;} .rank a.star-5 {left: 100px;} .rank a.star-5:hover {width: 125px;}

Se utilizará un div y una lista (ul) para crear el siguiente efecto:

Código fuente del ejemplo (index.html)

<div class="rank"> <ul> <li class="current-rating" style="width:100px;">Currently 4/5 Stars.</li> <li><a href="#" title="dar 1 estrella de 5" class="star-1">1</a></li> <li><a href="#" title="dar 2 estrellas de 5" class="star-2">2</a></li> <li><a href="#" title="dar 3 estrellas de 5" class="star-3">3</a></li> <li><a href="#" title="dar 4 estrellas de 5" class="star-4">4</a></li> <li><a href="#" title="dar 5 estrellas de 5" class="star-5">5</a></li> </ul> Rated <b>4</b>/5 estrellas (269 votos) </div>

3- Creamos la Base de datos, tablas y registros

Ahora ya tenemos el aspecto gráfico de nuestro sistema de votos por estrellas, pero aún no realiza ninguna votación. Necesitamos almacenar las votaciones de los usuarios y para ello lo primero que deberemos hacer es una base de datos como se indica aqui abajo.

1- Crear la base de datos con el nombre bd_rank
2- Crear un usuario y contraseña para la base de datos
3- Crea las tablas y registros necesarios, inserta este código SQL en phpAdmin(panel de mysql)

CREATE TABLE `votos_usuarios` ( `id` INT NOT NULL default '0', `ip` char(15) NOT NULL default '', `dataCreate` date NOT NULL default '0000-00-00' ) ENGINE=MyISAM DEFAULT CHARSET=utf8; CREATE TABLE `rank` ( `id` INT NOT NULL default '0', `media` FLOAT NOT NULL default '0', `votos` INT NOT NULL default '0' ) ENGINE=MyISAM DEFAULT CHARSET=utf8; INSERT INTO `rank` (`id`, `media`, `votos`) VALUES (1,0,0),(2,0,0);

Tabla rank: Esta tabla almacena el ranking de la página, sección o noticia que se reankea. Esta tabla contiene 3 campos. (id, media, votos), el primer identifica la página o sección que se quiere rankear, el campo media, contiene la media de votos (1 al 5) y el campo votos, el total de votos recibidos.

Tabla votos_usuarios: Esta tabla almacena temporalmente el identificador de la página o sección votada, el identificador del usuario (IP del ordenador del usuario) y la fecha en que se voto. Esta contiene datos temporales porque cada vez que un usuario realice un voto, comprobará los regístros y eliminará los que esan diferentes a la fecha actual y evitará que un mismo usuario vote a una misma página o sección más de una vez.

4- Archivo PHP para actualizar el ranking (rank.php)

Con la base de datos, tablas y registros creados solo nos queda como actualizar los registros. El archivo rank.php se encargará de actualizarlos.

<?php //funcion para conectar con la base de datos function conectar(){ // Conexión a la base de datos $dbhost='localhost'; $dbusername='gabriel'; //nombre del usuario $dbuserpass='carlos1988'; //password o contraseña del usuario $dbname='DB_rank';//nombre de la base de datos $link = mysql_connect($dbhost, $dbusername,$dbuserpass); mysql_select_db($dbname, $link); return $link; } $id = $_GET['id_pagina'];//pagina, apartado o noticia que se quiere votar if($id!=""){ $link = conectar();//conectamos a la base de datos $voto = $_GET['v'];//voto del usuario //obtenemos la IP del usuario if($_SERVER){ if($_SERVER[HTTP_X_FORWARDED_FOR]){ $realip = $_SERVER["HTTP_X_FORWARDED_FOR"]; }elseif($_SERVER["HTTP_CLIENT_IP"]){ $realip = $_SERVER["HTTP_CLIENT_IP"]; }else{ $realip = $_SERVER["REMOTE_ADDR"]; } }else{ if(getenv( "HTTP_X_FORWARDED_FOR")){ $realip = getenv( "HTTP_X_FORWARDED_FOR"); }elseif(getenv( "HTTP_CLIENT_IP")){ $realip = getenv( "HTTP_CLIENT_IP" ); }else{ $realip = getenv( "REMOTE_ADDR" ); } } $fecha = date('Y-m-d'); //actualizamos la tabla de votos realizadas por los usuarios y borramos lo que sean del dia anterior $result = mysql_query("DELETE FROM votos_usuarios WHERE dataCreate <> '".$fecha."'",$link); //comprobamos que este usuario ya no haya realizado un voto (identificacion por IP) $result = mysql_query("SELECT *FROM votos_usuarios WHERE ip = '".$realip."' and id = $id",$link); $row = mysql_fetch_row($result); //el usuario no ha votado para este apartado if($row[0]==""){ $result = mysql_query("SELECT votos,media FROM ".$tabla[$tipo]." WHERE id =$id",$link); $row = mysql_fetch_row($result); $auxmedia = $row[1]; $votos =$row[0] + 1; $media = (($row[0] * $auxmedia) + $voto)/ $votos; //actualizamos el voto $result = mysql_query("UPDATE rank SET votos= $votos, media= $media WHERE id= $id",$link); mysql_query("INSERT INTO rank(id,ip,dataCreate)VALUES($id,'".$realip."','".$fecha."')",$link); echo "voto realizado"; }else{ //el usuario ya ha votado para este apartado echo "Usted ya ha votado"; } } ?>

En este archivo PHP hay una única funcion conectar() que realizará la conección a la base de datos y también contiene el código para actualizar el las tablas del ranking

5- Actualizando los votos(rank.js)

Ahora el último paso realizar la llamada desde la página principal al archivo PHP para actualizar los datos. Basicamente se podria hacer de dos formas, la primera seria realizar una página extra donde se pasaran los valores, ID de la página y el valor del voto por el método POST o el método GET y utilizar la misma página, pero en este caso utilizaremos AJAX y para ello el archivo rank.js que lo único que hará es enviar los datos al archivo php y actualizar la página principal.

function objetoAjax(){ var xmlhttp=false; try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }catch(E){ xmlhttp = false; } } if(!xmlhttp && typeof XMLHttpRequest!='undefined'){ xmlhttp = new XMLHttpRequest(); } return xmlhttp; } function sendDatos(datos, resultado,borrar){ divResultado = document.getElementById(resultado); if(divResultado.innerHTML=='' || borrar){ ajax = objetoAjax(); if(datos!=""){ divResultado.innerHTML = "<span style='color:#ff0000;'>Loading...</span>"; ajax.open("GET", datos); ajax.onreadystatechange=function(){ if(ajax.readyState==4){ divResultado.innerHTML = ajax.responseText } } ajax.send(null); }else divResultado.innerHTML =""; } }

6- Modificamos el código de la pagina principal (index.php)

Ahora solo tendremos que insertar el código siguiente en la página principal, en el lugar donde se quiera que salga el voto por estrellas.

<?php include("rank/rank.php"); $link = conectar(); $result = mysql_query("SELECT id,votos,media FROM rank where id=1",$link); $row = mysql_fetch_row($result); if($row){ echo '<div class="rank">'; echo '<ul>'; echo '<li class="current-rating" style="width:'.($row[2] * 25).'px;">Currently '.$row[2].'/5 Stars.</li>'; echo '<li><a href="javascript:sendDatos(\'rank/rank.php?id='.$row[0].'&v=1\',\'page'.$row[0].'\',true)" title="dar 1 estrella de 5" class="star-1">1</a></li>'; echo '<li><a href="javascript:sendDatos(\'rank/rank.php?id='.$row[0].'&v=2\',\'page'.$row[0].'\',true)" title="dar 2 estrellas de 5" class="star-2">2</a></li>'; echo '<li><a href="javascript:sendDatos(\'rank/rank.php?id='.$row[0].'&v=3\',\'page'.$row[0].'\',true)" title="dar 3 estrellas de 5" class="star-3">3</a></li>'; echo '<li><a href="javascript:sendDatos(\'rank/rank.php?id='.$row[0].'&v=4\',\'page'.$row[0].'\',true)" title="dar 4 estrellas de 5" class="star-4">4</a></li>'; echo '<li><a href="javascript:sendDatos(\'rank/rank.php?id='.$row[0].'&v=5\',\'page'.$row[0].'\',true)" title="dar 5 estrellas de 5" class="star-5">5</a></li>'; echo '</ul>'; echo 'Rated <strong>'.$row[2].'</strong>/5 estrellas ('.$row[1].' votos)'; echo '<span id="page'.$row[0].'" style="color:#ff0000;"></span>'; echo '</div>'; } ?>

El código es similar al del paso 2, donde ahora se llama a la función javascript senDatos(), pasando como parámetro el identificador de la página o sección, la valoración del voto (1-5) y un parametro final que tiene se valer siempre true

Ejemplo final

Aqui el ejemplo finalizado, donde puedes votar y comprobar el funcionamiento. Después de presionar una estrella refresca la página para ver el voto realizado y la nueva media.

Descargar el archivo con el ejemplo funcional

Descargar archivo