Vamos a crear encuestas para nuestro sitio web. Para ello crearemos dos sencillas tablas en MySQL, una para controlar las encuestas propiamente dichas y otra para las respuestas de cada encuesta.
Tabla de encuestas:
CREATE TABLE encuestas (id INT not null AUTO_INCREMENT, titulo VARCHAR (50) not null , fecha INT (10) not null , PRIMARY KEY (id));
- Id: Es el identificador de la encuesta. Se incrementa automáticamente y sirve de clave primaria.
- Titulo: Tendremos 50 caracteres para asignar un titulo que contendrá la pregunta en sÃ.
- Fecha: Servirá tanto para conocer la fecha de la encuesta, como para que sólo se muestre la última.
Tabla de respuestas:
CREATE TABLE respuestas (id INT not null AUTO_INCREMENT, texto VARCHAR (50) not null , votos INT (5) not null , idenc INT not null, PRIMARY KEY (id));
- Id: Identificador de la respuesta. Se incrementa automáticamente y sirve de clave primaria.
- Texto: Es el texto que describirá la respuesta
- Votos: El total de votos acumulados.
- Idenc: Referencia al Id de la encuesta a la que está asociado.
Dar de alta una nueva encuesta
La forma de crear una nueva encuesta será sencilla; Un formulario nos pregunta el texto de la pregunta y el número total de respuestas. Damos a "Enviar". Acto seguido tendremos un campo de texto por cada respuesta, donde asignaremos el texto de la respuesta. Volvemos a dar a "Aceptar" y si todo ha ido bien, nuestra encuesta ya estará dada de alta en nuestra base de datos.
Primer formulario:
<form name="form1" method="post" action="enc2.php"> <p>Titulo de la encuesta: <input type="text" name="titulo"> </p> <p>Número de respuestas: <input type="text" name="respuestas"> </p> <p> <input type="submit" name="Submit" value="Enviar"> </p> </form>
Segundo formulario, dentro de enc2.php. Básicamente lo único que hacemos en este formulario es poner tantos campos de texto como posibles respuestas haya.
<form action="enc3.php" method="post"> <table border="0"> <?php for($i=1;$i<=$respuestas;$i++){ ?> <tr> <td>respuesta <?php echo $i; ?></td> <td><input name="p<?php echo $i;?>" type="text" size="50" maxlength="50"></td> </tr> <?php } ?> </table> <input type="submit" name="Submit" value="Enviar"></p> <input name="titulo" type="hidden" value="<?php echo $titulo;?>"> <input type="hidden" name="respuestas" value="<?php echo $respuestas;?>"> </form>
El siguiente fichero (enc3.php) es el que se encarga de guardar los cambios en la base de datos. En un primero momento, guardamos tan solo la encuesta, con sus campos 'fecha' y 'titulo'. Posteriormente sacamos el 'id' asignado a nuestra encuesta (la última almacenada) para que al insertar las respuestas podamos hacer referencia al id de la encuesta a la que va asociada.
<?php //Conectamos con la base de datos require('configuracion.inc.php'); $enlace = mysql_connect($host, $usuario, $password); mysql_select_db($db,$enlace); //Obtenemos la fecha del sistema $fecha = time(); //Insertamos la nueva encuesta $sql = "INSERT INTO encuestas (titulo, fecha) VALUES ('$titulo', '$fecha') "; $sql = mysql_query($sql); //Ahora obtenemos el ID de la encuesta que acabamos de insertar $sql = "SELECT id FROM encuestas ORDER BY fecha DESC LIMIT 0,1"; $sql = mysql_query($sql); while($row = mysql_fetch_array($sql)){ $id=$row["id"]; } //Recorremos todas las preguntas for($i=1; $i<=$respuestas; $i++){ //Obtenemos el texto de la pregunta $preg = p.$i; $texto = $$preg; //Y lo insertamos $sql = "INSERT INTO respuestas(texto, votos, idenc) VALUES("$texto", 0, $id)"; $sql = mysql_query($sql); } ?> <div align="center"><strong>Felicidades!! Si todo ha ido bien, tu encuesta ha sido insertada!! </strong> </div>
Y por último, creamos el fichero configuracion.inc.php que contiene la siguiente información:
<? $host = "miHost"; $usuario = "miUsuario"; $password = "miContraseña"; $db = "miBaseDeDatos"; ?>
Por supuesto, deberemos indicar la configuración de nuestra base de datos. Ya tenemos nuestra base de datos creada, y nuestra aplicación en html para insertar nuevas encuestas, ya sólo nos queda el formulario para votar, y mostrar un gráfico de barras con el resultado.
Votar los resultados
Tal y como yo he planteado este sistema de encuestas, la única que se mostrará será la que tenga la fecha más reciente, es decir, la última encuesta insertada. Cualquier modificación para evitar este funcionamiento no creo que os suponga mucho esfuerzo.
A continuación tenéis el código del formulario para votar la opción que deseada.
<?php //Conectamos con la base de datos require('configuracion.inc.php'); $enlace = mysql_connect($host,$usuario,$password); mysql_select_db($db,$enlace); //Seleccionamos la informacion de la última encuesta insertada $consulta = "SELECT * FROM encuestas ORDER BY fecha DESC LIMIT 0,1"; $consulta = mysql_query($consulta,$enlace); while($row = mysql_fetch_array($consulta)){ $titulo=$row["titulo"]; $fecha=$row["fecha"]; $id=$row['id']; } ?> <body> <form name="form1" method="post" action="votar.php"> <table width="350" border="1"> <tr> <td colspan="2"><strong>Titulo</strong>: <?php echo $titulo; ?> <input type="hidden" name="id" value="<?php echo $id;?>"></td> </tr> <?php $sql = "SELECT texto, id FROM respuestas WHERE idenc="$id""; $sql = mysql_query($sql,$enlace); while($row = mysql_fetch_array($sql)){ $texto=$row["texto"]; $idres=$row["id"]; ?> <tr> <td width="51"><input type="radio" name="opcion" value="<?php echo $idres; ?>"></td> <td width="283"><?php echo $texto; ?></td> </tr> <?php } ?> <tr> <td><input type="submit" name="Submit" value="Enviar"></td> <td>Esta encuesta está desde el <?php echo date('d-m-y',$fecha); ?></td> </tr> <tr> <td colspan="2"><a href="votar.php">Ver resultados</a></td> </tr> </table> </form> </body>
El código que viene a continuación, votar.php, de momento sólo añade el voto a la base de datos. Más adelante pondremos en éste mismo fichero el código que añade la imagen con el gráfico de barras:
<? require('configuracion.inc.php'); $enlace = mysql_connect($host, $usuario, $password); mysql_select_db($db,$enlace); //Obtenemos el titulo de la encuesta $consulta = "SELECT titulo FROM encuestas ORDER BY fecha DESC LIMIT 1,0"; $consulta = mysql_query($consulta,$enlace); $lado=mysql_num_rows($consulta); while($row = mysql_fetch_array($consulta)){ $titulo= $row['titulo']; } //Obtenemos el numero actual de votos para la opción elegida //Comprobamos si $opcion no está vacÃo porque posteriormente este mismo //fichero lo utilizaremos para ver resultados sin tener que votar necesariamente if(!empty($opcion)) { $consulta = "SELECT votos FROM respuestas WHERE id=$opcion"; $consulta = mysql_query($consulta,$enlace); $lado=mysql_num_rows($consulta); while($row = mysql_fetch_array($consulta)){ $votos= $row['votos']; } //Incrementamos en uno los votos totales $votos = $votos + 1; //Y actualizamos la base de datos $consulta = "UPDATE respuestas SET votos = $votos WHERE id=$opcion"; mysql_query($consulta,$enlace); } ?>
Mostrar el gráfico de barras
Para realizar esto lo que haremos es crearnos un fichero que conectará con la base de datos y extraerá la información necesaria. Crearemos una imagen, y le daremos formato con funciones de la librerÃa gd.
Quizás a muchos de vosotros os surja la duda, tal y como me ocurrió a mÃ, de como poner en funcionamiento esta librerÃa: Tenéis que bajaros (en caso de estar en Windows) el archivo php_gd.dll, copiarlo a la carpeta extensions de php y descomentar la lÃnea donde se hace referencia a la DLL en cuestión en el php.ini.
El código, aunque a alguno a primera vista os intimide, realmente no tiene complicación alguna, tan solo leemos de la base de datos y dibujamos los elementos de nuestro gráfico de barras:
NOTA: Éste fichero ha de conectar con la base de datos. Para que funcione correctamente, tenéis que añadir que incluya configuracion.inc.php directamente vosotros en el sitio que corresponda. Dicho queda.
<?php //Fijaos en que esta vez tenéis que añadir vosotros la informacion en mysql_connect $enlace = mysql_connect('tuHost','tuUsuario','tuPassword'); mysql_select_db('tuBaseDeDatos'); //Obtenemos el titulo de la última encuesta para colocarlo como tÃtulo en nuestro gráfico $consulta = "SELECT titulo, id FROM encuestas ORDER BY fecha DESC LIMIT 0,1"; $consulta = mysql_query($consulta,$enlace); $lado=mysql_num_rows($consulta); while($row = mysql_fetch_array($consulta)){ $titulo= $row['titulo']; $id=$row['id']; } //Obtenemos el numero de votos de cada opcion y los metemos en "votos[]" $consulta = "SELECT votos, texto FROM respuestas WHERE idenc=$id"; $consulta = mysql_query($consulta,$enlace); $lado=mysql_num_rows($consulta); while($row = mysql_fetch_array($consulta)){ //Guardamos el texto en la variable temp. Este texto nos servirá como //Ãndice en el array votos[] $temp = $row['texto']; $votos[$temp]= $row['votos']; } //Variables del gráfico $width = 500; //Ancho de la imagen $espacioCol = 30; //Espacio que habrá del principio de una columna a otra $altoCol = 15; //El alto de las columnas $height = 2*count($votos)*$espacioCol+45; //El alto de la imagen $maxvoto = max($votos); //Valor de la opcion mas votada $maxlargo = $width-50; //Largo que tendrá la opción mas votada $coeficiente = (int)($maxlargo / $maxvoto); //Coeficiente para calcular el largo de cada opcion //Creamos la imagen con el alto y ancho asignados anteriormente $image = imagecreate($width,$height); //Declaramos variables para los colores. Al ser el gris el primer color que //declaramos, éste se quedará como color de fondo en la imagen $gray = imagecolorallocate($image, 0xC0, 0xC0, 0xC0); $black = imagecolorallocate($image, 0x00, 0x00, 0x00); $blue = imagecolorallocate($image, 0x00, 0x00, 0xFF); //Recorremos el array 'votos' for($i=0; list($texto, $vot) = each($votos); $i++) { $labelfont = 2; //Fuente empleada para etiquetas //Dibujamos las barras //Coordenadas para definir el rectángulo $valign = ($i+1)*$espacioCol + 15; $halign = 30; $valign2 = $valign + $altoCol; $halign2 = $halign+$vot*$coeficiente; imagefilledrectangle($image,$halign,$valign,$halign2,$valign2,$blue); //Ponemos el Ãndice de cada barra //Coordenadas para colocar los indices $indice = $i + 1; $halign = 15; imagestring($image, $labelfont, $halign, $valign, $indice, $black); //Leyenda: Numero de opcion + Texto + ( votos ) //Coordenadas para colocar la leyenda $valign = ($i+1)*$espacioCol + (count($votos)*$espacioCol)+ 15; $halign = 30; $leyenda = "Opcion ".$indice.": ".$texto." ($vot)"; imagestring($image, $labelfont, $halign, $valign, $leyenda, $black); } //Asignamos tipografÃa y colocamos el tÃtulo en la parte superior izquierda $titlefont = 3; imagestring($image, $titlefont, 10, 10, $titulo, $black); //Dibujamos el recuadro que encierra el contenido imagerectangle($image, $width - 5, 30, 5, $height - 5, $black); //Devolvemos la imagen header("Content-type: image/png"); imagepng($image); imagedestroy($image); ?>
Ya lo tenemos todo hecho, tan sólo nos falta incluir un pequeño detalle a nuestro código. En el archivo que capta los votos (votar.php) tenéis que añadir el siguiente código:
<img src="dgrafica.php">
Y os coloco una imagen del resultado final de una encuesta cualquiera: