Sistema de votación con AJAX
Podríamos realizar un sistema de votación sencillo utilizando php y mysql, lo cual requerirá enviar la información al servidor en cada voto. Para hacerlo más atractivo y más usable para el usuario conviene que el voto se envíe utilizando la tecnología AJAX.
Con la tecnología AJAX, al enviar el voto no haría falta recargar por completo toda la página. Para conseguir este efecto, lo primero que deberemos hacer es incluir en nuestro <head> la siguiente función AJAX:
<script type="text/javascript">
function getVote(value) {
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("poll").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getpoll.php?vote="+value,true);
xmlhttp.send();
}
</script>
La función principalmente se encarga de recibir el voto enviado abriendo el fichero «getpoll.php» el cual cifraremos más adelante y se encarga de guardar el voto.
Para enviar el voto, los usuarios deberían tener disponible un formulario como el siguiente ejemplo:
<div id="poll"> <h3>Te gusta programar en PHP y AJAX?</h3> <form> Si: <input type="radio" name="vote" value="0" onclick="getVote(this.value)" /> <br /> No: <input type="radio" name="vote" value="1" onclick="getVote(this.value)" /> </form> </div>
Si nos fijamos, el formulario no tiene ninguna etiqueta y en cada opción o radiobutton al hacer onclick llamamos a la función AJAX que se encarga de guardar el voto enviado.
El archivo php que mencionábamos anteriormente «getPoll.php» contiene lo siguiente:
<?php
//require('config.php');
$vote = $_REQUEST['vote'];
//get content of textfile
$filename = "poll_result.txt";
$content = file($filename);
//put content in array
$array = explode("||", $content[0]);
$yes = $array[0];
$no = $array[1];
if ($vote == 0) {
$yes = $yes + 1;
}
if ($vote == 1) {
$no = $no + 1;
}
//insert votes to txt file
$insertvote = $yes."||".$no;
$fp = fopen($filename,"w");
fputs($fp,$insertvote);
fclose($fp);
?>
<h2>Resultado:</h2>
<table>
<tr>
<td>Si:</td>
<td><img src="poll.gif" width='<?php echo(100*round($yes/($no+$yes),2)); ?>' height='20'> <?php echo(100*round($yes/($no+$yes),2)); ?>% </td>
</tr>
<tr>
<td>No:</td>
<td><img src="poll.gif" width='<?php echo(100*round($no/($no+$yes),2)); ?>' height='20'> <?php echo(100*round($no/($no+$yes),2)); ?>% </td>
</tr>
</table>
<p>Total de votos: <?php echo ($no+$yes); ?></p>
<p><a href="index.php">Volver a votar</a></p>
El paso siguiente sería guardar el voto ya sea en la base de datos o en un archivo y luego mostraríamos los resultados con una tabla.
Autor
¿Buscas trabajo de programador?
21 respuestas a “Sistema de votación con AJAX”
Deja una respuesta
102 artículos que te podrían interesar
Ver más sobre
y si las opciones para votar son mas de 2, que le modificariamos al codigo del programa ????
Hola,
Debes cambiar los radio buttons por checkboxes y name array. Algo así:
input type=»checkbox» name=»vote[]»…
Y luego en el código php que recibe los datos deberás recorrer este array para insertar en la base de datos.
Saludos
me urge contactarte para unproyecto soy de mexico me urge
Hola,
Puede enviarnos un ticket al centro de soporte técnico para estos temas:
https://www.jose-aguilar.com/soporte/
Saludos
Muy Bueno Bro n.n Gracias, Solo Una Cosa mmm Es y Que Me Di Cuenta Que Al Entrar Al Archivo De getpoll.php Se Suma Uno Automaticamente :/ Como Puedo Evitar Esto Hasta Que Se Apriete El Input Radio, Alguna Opcion?
Hola, creo que poniendo un botón y controlar en el getpoll.php si se ha pulsado ese botón.
Algo asi:
if (isset($_POST[‘submitResponse’])) {}
Hola°!
Muy bueno el tuto!
Si quisiera un tercer elemento dentro de la votacion, que tendria que hacer?
Se tienen que hacer varios cambios. En el formulario tienes que añadir tu nueva opción y luego en el archivo php que recibe la información recoger este nuevo valor y procesarlo de la misma forma que los otros
Comose haria con 4. me gusatria que lo explicarias en codigo, gracias.
ola jose me paresio muy bueno tu post mmm…me prodrias explicar en esta parte de codigo de tu aplicacion de votos xfa la necesito. soy nueva en esto de ajax. te lo agradeceria muxo estare al pendiente de tu post x si llegaras a publicar la respuesta. saludos
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById(«poll»).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open(«GET»,»getpoll.php?vote=»+value,true);
xmlhttp.send();
Esta parte del código significa que el documento va a estar listo a cuando se haga click en una de las opciones de la encuesta depositando el resultado que retorna el archivo php en el contenedor de la encuesta.
hola a todos… tengo un pequeño sistemita de votaciones… trabaja a la perfeccion… lo que quiero es que se pueda votar una sola vez por dia y una sola vez por ip… digamos ke las votaciones se realicen de lunes a sabado y cada usuario vote 1 vez al dia durante los 6 dias ya estipulados!!! si me ayudan con algo me seria grato… yo les paso mi sistema por correo…
hola a todos… tengo un pequeño sistemita de votaciones… trabaja a la perfeccion… lo que quiero es que se pueda votar una sola vez por dia y una sola vez por ip… digamos ke las votaciones se realicen de lunes a sabado y cada usuario vote 1 vez al dia durante los 6 dias ya estipulados!!! si me ayudan con algo me seria grato… yo les paso mi sistema por correo.. abraham_kof@hotmail.com
Me parece que deberás registrar los votos por día y usuario según su ip en la base de datos y controlar que solo se pueda votar una vez por dia según la ip.
soy yo nuevamente como doy lata verdad oye me podrias explicar lo q esta dentro de los script xfa espero tu respuesta
solo paso para agradecerte me ayudo muchísimo amigo exito
esta muy bien el tuto un favor puedes postear el archivo config.php te lo agradeceria mas toda via
Tan solo tiene el siguiente código php con la conexión de tu base de datos envuelto por los tags de
$conexion = mysql_connect(DB_SERVER, DB_SERVER_USERNAME, DB_SERVER_PASSWORD);
mysql_select_db(DB_DATABASE, $conexion);
Hola! me Gusto mucho este sistema de votación seria bueno que publicaras el código de archivo getpoll.php por que sin ese archivo este ejemplo no sirve para nada!!
Me encartaría implementar este sistema en mi web, te agradecería y lo subiera o si me hacer el favor y me haces llegar ami correo este archivo.
Muchas Gracias.
esta muy chebre este sitio web 😀
Ok, hemos añadido el código del archivo php
Hola! me Gusto mucho este sistema de votación seria bueno que publicaras el código de archivo getpoll.php por que sin ese archivo este ejemplo no sirve para nada!!
Me encartaría implementar este sistema en mi web, te agradecería y lo subiera o si me hacer el favor y me haces llegar ami correo este archivo.
Muchas Gracias.