up/down thumbs – sistema de voto con AJAX, PHP y MySQL

Reinaguro el blog con este sistema de voto (parecido al que tiene Youtube), usando AJAX, PHP y MySQL. Estoy actualmente estoy trabajando en un proyecto personal, y estoy aprendiendo a usar todos estos scripts. Este sistema logré hacerlo por mi propia cuenta, después de leer un montón de documentación sobre Javascript, XML y AJAX, y algunos tutoriales.

El HTML

<div id="xxx">
  <a id="xxx" onclick="vote(this.id, this.name)" name="up" href="javascript:void(0)">up [#]</a> /
  <a id="xxx" onclick="vote(this.id, this.name)" name="down" href="javascript:void(0)">down [#]</a>
</div>

id=”xxx” del div sirve para que AJAX pueda cambiar el contenido luego de que se procese el pedido al server. Los id de los links, sirven para indicar a que post se le debe agregar los puntos y pasarselos al PHP, al igual que el name de cada link, mediante el evento onclick=”vote(this.id, this.name)”
[#] mostraría la cantidad de votos que ya tiene el post, que debería obtenerse de la base de datos (con PHP).

El script de AJAX

function vote(id, name) {
  xmlhttp=new XMLHttpRequest();

  //Una vez que el servidor envía la respuesta, realiza lo que está dentro de esta función
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
   document.getElementById(id).innerHTML=xmlhttp.responseText;
    }
  }

  //Envía el pedido junto con las variables
  xmlhttp.open("GET","vote.php?id=" + id + "&name=" + name,true);
  xmlhttp.send();
}

La creación de objeto XMLHttpRequest se tiene que hacer diferente para IE 5 y 6 (por si todavía les interesa darle soporte a estos navegadores)

if (window.XMLHttpRequest)
  {// Para navegadores modernos
  xmlhttp=new XMLHttpRequest();
  }
else
  {// Para IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

Y finalmente el PHP

<?php
$id = $_GET['id'];
$name =  $_GET['name'];

$conexion = mysql_connect (localhost, root, '') or die(mysql_error());
$database = mysql_select_db([base de datos], $conexion) or die(mysql_error());

if ($name == up) {
	$sql = "UPDATE [tabla] SET up=up+1 WHERE [tabla].[columna] = '" . $id . "'";
} else {
	$sql = "UPDATE [tabla] SET down=down+1 WHERE [tabla].[columna] = '" . $id . "'";
}

mysql_query( $sql); // Actualiza la base de datos
 // Vuelve a tomar los datos de la base actualizada
$recordset = mysql_query("SELECT * FROM [tabla] WHERE [columna id] = ".$id);
$entradas = mysql_fetch_array($recordset);

//Esto es lo que le devuelve el PHP al AJAX para que actualice el HTML
echo "<a href='javascript:void(0)' class='vote' name='up' id='", $entradas[columna id'], "' onclick='vote(this.id, this.name)'>up ", $entradas['up'], "</a> / <a href='javascript:void(0)' class='vote' name='down' id='", $entradas['columna id'], "' onclick='vote(this.id, this.name)'>down ", $entradas['down'], "</a> Gracias por votar";
?>

La tabla de la base de datos tiene que tener un campo id del post que se vota, un campo up (para los votos positivos) y un campo down (para los negativos).
Falta agregarle un verificador de ip, para que los usuarios solo puedan votar una sola vez (no lo necesito en el proyecto, por eso no lo puse)
Básicamente esto es lo que lo hace funcionar, trate de explicarlo lo mejor que pude (soy nuevo en esto), cualquier duda pueden preguntar
Este es el primer tutorial que probé, esta hecho con jQuery. Funciona igual, pero no me terminó sirviendo para mi proyecto, así que lo hice de cero sin jQuery

Advertisement