Sistema de votos con AJAX + PHP + MySQL

Tutoriales de AJAX

Autor: Carlos Gant Bernal [carlos (@) cimoconsultores.com]
Fecha: Agosto, 2007

Introducción

Hola, hoy vamos a hacer un sistema de votación aplicable a noticias o cualquier otro elemento del estilo en Ajax.

Este tutorial está destinado a programadores web con conocimientos en PHP y Javascript.

Comenzamos

Para agilizar un poco el tutorial y abstraernos de toda la parafernalia de ajax, usaré la librería jquery para realizar todas las llamadas en ajax. Se sale del cometido de este tutorial explicar qué es Ajax y cómo se usa.

Lo primero que haremos es descargar la librería jquery que como he dicho antes está en www.jquery.com

Lo segundo será crear un listado de noticias, en nuestro ejemplo usaremos una base de datos en mysql para alojar estos datos. He creado una estructura que podrás utilizar para este ejemplo, se encuentra en el fichero "votacion.sql" que está en los ficheros adjuntos, al final de este tutorial.

Tambien tendremos que insertar algunas noticias y usuarios.

	INSERT INTO USUARIO VALUES 
		(1, 'user1', '1234', 'user1@localhost', now(), "adsdhkajhdh28349h"),
		(2, 'user2', '1234', 'user2@localhost', now(), "qju985h4htohngjbf"),
		(3, 'user3', '1234', 'user3@localhost', now(), "d98uj9hn4ji09fjro"),
		(4, 'user4', '1234', 'user4@localhost', now(), "du98urj4jhorfnjhc"),
		(5, 'user5', '1234', 'user5@localhost', now(), "09d98jcgj3094uijg"),
		(6, 'user6', '1234', 'user6@localhost', now(), "ads98uj98vjh984ji");

	INSERT INTO noticia VALUES
		(1, "Noticia Nº1", "Esta noticia es la mejor votadme", 1, now()),
		(2, "Noticia Nº2", "Esta noticia es la mejor votadme", 1, now()),
		(3, "Noticia Nº3", "Esta noticia es la mejor votadme", 2, now()),
		(4, "Noticia Nº4", "Esta noticia es la mejor votadme", 3, now()),
		(5, "Noticia Nº5", "Esta noticia es la mejor votadme", 4, now()),
		(6, "Noticia Nº6", "Esta noticia es la mejor votadme", 4, now()),
		(7, "Noticia Nº7", "Esta noticia es la mejor votadme", 5, now());

Nota: el campo seed es un ejemplo de como implementar un pequeño seguro ante usuarios malintencionados. Con esto se da poca seguridad y solamente le complicaría la vida un poco al usuario malintencionado. Seguramente hay métodos mucho mejores para dar seguridad a una aplicación ajax, pero ni se me ocurren ahora ni soy un experto en la materia, así que cada uno empolle por su lado.

Ahora tenemos que hacer lo siguiente:

1. El script que lista las noticias en PHP (listar_votacion.php).
2. El script que sirve para que el usuario puntue una noticia en javascript (votacion_ajax.js).
3. El script que recoge la llamada en ajax para guardar la votación en php (votacion_ajax.php).

Listando las noticias

Bueno, poco se puede explicar aquí ya que en el código lo he explicado todo. Básicamente lo que hace este script es listar las noticias con sus notas medias y permite a los usuarios votar. En este script también he añadido una funcionalidad a modo de simulación que permite cambiar de usuario para realizar votaciones desde distintos usuarios.

El evento en javascript

En el fichero votacion_ajax.js vemos que hay una funcion votar() que realiza la llamada en ajax. Es prácticamente el punto más crítico de esta aplicación aunque es muy sencillo de entender. La llamada está hecha usando jquery y básicamente lo que hace es cargar otra página web de forma transparente para el usuario, enviando la información que aparece en el parametro data:.

Como ya he dicho el objeto de este tutorial no es aprender a usar jquery, hay un montón de documentación en su web, así que leedla si no comprendeis el script.

El código php que recibe las llamadas de ajax.

En este fichero (votacion_ajax.php) se encuentra el código que realiza el trabajo de votar, es decir, introducir en la base de datos. Este código tambien está muy bien comentado, así que lo mejor es irse directamente al fichero y leer. Supongo que será más interesante y eficiente estudiar la materia directamente sobre el código, así que sobran las palabras.

Los ficheros del proyecto

Pues los podeis descargar de este zip.

Despedida y cierre

Eso es todo, espero que os haya resultado útil. Siento no haber tenido tiempo para explicar todo más detalladamente pero creo que queda todo bastante claro. El sistema me ha parecido muy buen ejemplo ya que se puede utilizar para realizar votaciones de cualquier cosa que se os ocurra, por ejemplo, votar peliculas, juegos, usuarios, o cualquier cosa que se pueda listar.

Un Saludo.
Carlos Gant Bernal.

Esta obra está bajo una licencia de Creative Commons.

Compartir es bueno:

(cc) turbia.net 2008. Condiciones de uso. Contacte con nosotros.