BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

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

29/DIC/2010 47.547 visitas Ver comentarios
Sistema de votaci贸n con estrellas o Star Rating con jQuery

ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

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.

Acerca del Autor...

Macadia, es una agencia de Diseño Web Coruña, especializada en maquetación css y desarrollo de páginas web a medida con más de 21 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Los comentarios han sido desactivados momentaneamente a la espera de que Disqus adapte su plataforma a la próxima RGPD que entra en vigor desde el 25/05/2018