BLOG DE DISEÑO WEB CORUÑA

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

Sistema de votación Me gusta o No me gusta con PHP, Jquery y Ajax

14/JUN/2013 26.186 visitas Ver comentarios
Sistema de votación Me gusta o No me gusta con PHP, Jquery y Ajax

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.

Si recuerdas una entrada mía anterior donde dejaba un sistema de votación con estrellas, sabrás de qué va esta entrada. Es la misma votación pero modernizada a contar la cantidad de LIKES o HATES recibidos.

En castellano entendible, vendría a ser un contador de la cantidad de gente a la que le gusta lo que ve y la cantidad de gente a la que no le gusta lo que ve.

Para hacerlo, me he basado en un poco de Javascript (mediante jQuery), Ajax y PHP. Básicamente lo que vamos a hacer es presentar por cada entrada o artículo o foto (ya me han dicho que lo usarán para ese fin), presentar una imagen con un pulgar para arriba y otra para abajo y el número de votos recibidos, tanto positivos como negativos.

La particularidad de este sistema es que no bloquea el voto para siempre, sino que una vez votado por ME GUSTA o por NO ME GUSTA, habilitará una Cookie que durará unas 2 horas donde bloqueará un nuevo voto en la misma entrada o foto.

El tiempo de vida de esta cookie es configurable en el archivo PHP, pero la idea no es bloquear para siempre sino hacer que la cantidad de votos recibidos crezca, de ahí el motivo del poco tiempo de vida.

Esta cookie se creará única para cada entrada, lo que permitirá a un usuario votar en tantas entradas, fotos o lo que sea como quiera sin restricciones. Eso sí, sólo podrá votar por SI o NO cada 2 horas.

Si miras la demo entenderás de qué hablo, con cada voto, mostraremos justo debajo el mensaje recibido, un gracias o un simple ya has votado que desaparecerá solito.

Pero bueno, creo que ya te he soltado bastante rollo... por eso, te dejo los códigos que se separan en 3 partes (porque sólo tengo 3 cajas para códigos en mi blog).

El primero es la tabla, porque siempre me piden las tablas MySQL usadas, aunque te valdría cualquiera donde le agregues 2 campos de tipo INT llamados LIKES y HATES.

En segundo lugar, tenemos el HTML y Javascript que muestra los artículos o imágenes y en tercer lugar tenemos el PHP llamado mediante AJAX para hacer la votación y devolver la cantidad nueva o un mensaje de error.

Cabe destacar que hace tiempo he migrado todos mis códigos a MySQLI y, a partir de las últimas entradas y en adelante, toda conexión a base de datos por PHP estará en MySQLI. Si no lo utilizas, es muy fácil migrarlo a MySQL o PDO o cualquier otro método que utilices.

Como siempre, me gustaría que me ayudaras en la difusión de esta entrada, me dejaras tus comentarios, puntos de vista, opiniones o lo que quieras decirme. Será bienvenido.

PD: Como te faltará la imagen, te dejo la ruta directa para descargarla aquí (guarda como).

Código 1 - SQL
CREATE TABLE IF NOT EXISTS `posts` (
  `id` int(255) NOT NULL AUTO_INCREMENT,
  `likes` int(5) NOT NULL,
  `hates` int(5) NOT NULL,
  `titulo` varchar(255) NOT NULL,
  `resumen` text NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

/* No olvides crear entradas! */
Código 2 - HTML
// MIRA EL SOURCE DE LA DEMO PORQUE LO BORRA EL GESTOR DE CONTENIDOS
Código 3 - PHP
/* ARCHIVO CONFIG.PHP */
$db_username = 'USUARIO';
$db_password = 'CLAVE';
$db_name = 'BASE_DE_DATOS';
$db_host = 'localhost';

$db = new mysqli($db_host, $db_username, $db_password,$db_name) or die('No puedo conectarme a la base de datos');

/* ARCHIVO AJAX_VOTO.PHP */

require_once("config.php");
if($_POST)
{
	$voto = trim($_POST["voto"]);
	$id = filter_var(trim($_POST["id"]),FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_LOW | FILTER_FLAG_STRIP_HIGH);
	
	if (isset($_COOKIE["votado_".$id]))
	{
		echo "voto_duplicado";
	}
	else
	{
		$total_votos=$db->query("select ".$voto." from posts WHERE id='$id' limit 1");
		if ($fila=$total_votos->fetch_array()) $numero=$fila[$voto];
		
		$votado=$db->query("UPDATE posts SET ".$voto."=".$voto."+1 WHERE id='$id'");
		setcookie("votado_".$id, 1, time()+7200);
		echo ($numero+1);
	}

}

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