Sistema de votación con estrellas o Star Rating con jQuery Blog de Martin Iglesias .eu

Sistema de votación con estrellas o Star Rating con jQuery

Escrito por: Martín el 29-12-2010 05:00:02 y leído 11569 veces

Este sistema permite que los usuarios puedan votar mediante estrellitas gráficas que van rellenando su color según la valoración que nos da el usuario, diferentes artículos o productos de nuestra web, donde nos guste tener la participación activa de nuestros visitantes.

ACTUALIZACION: He publicado una demo online y el código totalmente modificado porque veo que está dando varios problemas. Recuerda que deberás modificar las rutas en todos los archivos, ya que casi todos los archivos tienen rutas relativas de las llamadas en AJAX para la votación que debes adaptar a las carpetas de tu web.

ACTUALIZACION 2: Antes de que me pongas verde en los comentarios diciendo NO FUNCIONAAAAA, lee los últimos comentarios. Hay un archivo en la carpeta JS llamado rating.js del que debes modificar la línea 65 con la ruta relativa de tus archivos (en la demo está puesta la ruta para que funcione en mi demo con mis urls amigables). Pone: xmlhttp.open('get', '/demos/votos/rpc.php?j='+vote+'&q='+id_num+'&t='+ip_num+'&c='+units);

El sistema, puede ser implementado mediante una base de datos o no almacenar los datos, eso es a gusto del desarrollador. Lo más completo sería integrarlo con una base de datos, un registro de IP votantes y asi no dejar repetir el voto.

Pero bueno, vamos a ello...
Las estrellas, no serán más que inputs del tipo radio que pondremos a modo de formulario en cada producto o post donde necesitemos la votación. Mediante jQuery y CSS nos ocuparemos de cambiarles el aspecto y que parezcan las estrellitas tan bonitas que aparecen en la foto más arriba.

Para ello...
En el código 2) vemos como declaramos nuestros input, en nuestro ejemplo, las estrellas comenzarán con un valor de 3/5, es decir, sobre 5 estrellas, las primeras 3 estarán pintadas.

En el código 1) vemos como llamamos a la configuración de las estrellas, en nuestro ejemplo, tendremos el código de las estrellas dentro de la carpeta votos en nuestro ftp.

A tener en cuenta...
Debes tener una tabla mysql creada, configurar el archivo _config-rating.php con los datos de conexión mysql y debes adaptar las consultas en el archivo db.php a tu tabla mysql.

Tabla MySQL
Además de todos tus campos, tu tabla mysql debe incluir estos 3 campos al final de todo y en estos formatos:

total_votes: int(255)
total_value: int(255)
used_ips: longtext

Estos campos se ocuparan de mantener el sistema de votación, donde total_votes, guardará el número total de votaciones, total_value, el la suma de puntos obtenidos dividido la cantidad de votaciones y el campo used_ips, guardará una lista de IPs votantes para evitar votos duplicados.

¿Complicado?
Te dejo todo el sistema subido, solo debes, en tu página, aplicar los códigos que muestro abajo y listo. Cualquier duda, ya sabes, usa el sistema de comentarios.

[Descargar Adjunto]

Categorías: Star Rating • Sistema De Votación • Estrellitas • •