Anteriormente (2010) les había compartido un artículo sobre como crear un sistema de encuestas utilizando PHP y Mysql. En esta ocasión utilizaremos ese conocimiento para hacer algo mas sencillo, un sondeo o encuesta de una pregunta para tu sitio web o proyecto.
Alguien puede decir, ¿por qué escribir sobre lo mismo?. No, no es lo mismo. En el artículo Sistema de encuestas básico en PHP y MySql creamos un sistema o plataforma independiente de encuesta que puede ser enviado como un URL en un email, un enlace en tu sitio web, en la redes sociales, etc., por ejemplo como SurveyMonkey.
En esta ocasión haremos una encuesta simple para integrarlo a un website o una aplicación basada en Web, como esas que aparecen el los diarios electrónicos, sitio web de proveedores de servicio o en Twitter, si, en Twitter puedes hacer encuestas.
1. Base de Datos
Iniciamos con la estructura de datos o base de datos donde almacenaremos la encuesta y los votos. Para la encuesta necesitaremos tres tablas, una para el identificador o id de la encuesta o pregunta y el título de la misma. Una segunda tabla para las opciones o posibles respuestas a presentar para cada pregunta o encuesta y tercero una tabla para almacenar los votos u opciones seleccionadas por los usuarios como voto.
Crearemos una base de datos, o pueden utilizar una existente y solo cambiar la referencia en el archivo de configuración que veremos mas adelante. Por ahora vamos a llamarla: poll.
Nuestra base de datos contendrá las siguientes tablas:
Tabla 1: poller (Para la pregunta o encuesta)
CREATE TABLE `poller` ( `ID` int(11) NOT NULL AUTO_INCREMENT, `pollerTitle` varchar(255) COLLATE utf8_spanish_ci DEFAULT NULL, PRIMARY KEY (`ID`) ) ENGINE=MyISAM AUTO_INCREMENT=1 DEFAULT CHARSET=utf8 COLLATE=utf8_spanish_ci AUTO_INCREMENT=1 ;
Como les mencionaba en la introducción esta primera tabla contendrá la pregunta de la encuesta y el id de la misma para enlazar las opciones y votos.
Tabla 2: poller_option (Para las opciones de la pregunta o sondeo)
CREATE TABLE `poller_option` ( `ID` int(11) NOT NULL AUTO_INCREMENT, `pollerID` int(11) DEFAULT NULL, `optionText` varchar(255) COLLATE utf8_spanish_ci DEFAULT NULL, `pollerOrder` int(11) DEFAULT NULL, `defaultChecked` char(1) COLLATE utf8_spanish_ci DEFAULT '0', PRIMARY KEY (`ID`) ) ENGINE=MyISAM AUTO_INCREMENT=1 DEFAULT CHARSET=utf8 COLLATE=utf8_spanish_ci AUTO_INCREMENT=1 ;
En esta segunda tabla, almacenaremos los opciones y a qué pregunta corresponden, ya que presentaremos varias opciones de respuesta a los usuarios, desde un simple si o no, hasta opciones múltiples. ID es un campo de indexación en este caso para manejar la relación opción -> voto. PollerID es el ID de la pregunta para la relación pregunta->opciones. PollerOrder puede ser utilizado para organizar en orden en que se presentan las opciones, creame esto influye en la respuesta de los usuarios. Por último defaultChecked, este campo nos puede servir si deseamos seleccionar una opción como indicadora o pre-seleccionada, esto se le llama inducción, o influir en la selección del usuario. Esto se emplea con frecuencia en encuestas sobre un servicio prestado.
Tabla 3: poller_vote (Votos o selección de respuesta del usuario)
CREATE TABLE `poller_vote` ( `ID` int(11) NOT NULL AUTO_INCREMENT, `optionID` int(11) DEFAULT NULL, `ipAddress` varchar(255) COLLATE utf8_spanish_ci DEFAULT NULL, `pollID` int(11) DEFAULT NULL, PRIMARY KEY (`ID`) ) ENGINE=MyISAM AUTO_INCREMENT=1 DEFAULT CHARSET=utf8 COLLATE=utf8_spanish_ci AUTO_INCREMENT=1 ;
En esta tercera tabla capturaremos los votos o selección de respuesta de los usuarios. Nótese el campo ipAddress, con este campo almacenaremos el IP del usuario al momento de votar. De esta forma podemos activar o no la opción de limitar un voto por usuario, claro, no es una forma completamente garantizada; pero puede servir ya que es muy poco probable que un usuario cambie su IP para hacer un voto, siendo el IP público un IP asignado por el proveedor de servicio de internet o telefonía y que muy raras veces cambia.
2. Conexión a la Base De Datos
Para esta encuesta utilizaremos OOP (Object Oriented Programming) o programación orientada a objetos, es decir, utilizaremos una clase para gestionar la información hacia y desde la base de datos. Como trabajaremos con OOP, utilizaremos PHP PDO como gestor de conexión de base de datos.
Entonces, tendremos nuestro archivo config.php o como quieran llamarle donde almacenaremos las credenciales de nuestro servidor de base de datos. En este definiremos constantes para referencia de los valores necesarios:
//config.php
define("DB_HOST", "localhost");
define("DB_USER", "root");
define("DB_PASS", "");
define("DB_NAME", "poll");
3. Modelo o Clase de gestión de datos
Una vez más, como utilizaremos una estructura OOP, crearemos una clase o librería la que llamaremos Polls.php con los métodos necesarios para: obtener la encuesta activa, obtener los resultados de la encuesta, capturar el voto del usuario y un método o función privada para saber si el usuario ya ha votado previamente basado en su dirección IP.
class Application_Model_Polls {
private $host = DB_HOST;
private $user = DB_USER;
private $pass = DB_PASS;
private $dbname = DB_NAME;
private $conn;
private $error;
function __construct(){
}
function getPoll($pollId = ''){
try {
$conn = new PDO('mysql:host='.$this->host.';dbname='.$this->dbname.';charset=utf8', $this->user, $this->pass);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
//get poll id and title
if($pollId == ''){
$sql = "SELECT ID, pollerTitle FROM poller ORDER BY ID DESC LIMIT 0,1";
}else{
$sql = "SELECT ID, pollerTitle FROM poller WHERE ID = '".$pollId."'";
}
$q = $conn->query($sql);
$poll = $q->fetch(PDO::FETCH_ASSOC);
//get poll options
$sql = '';
$sql = "SELECT ID, pollerID, optionText, pollerOrder, defaultChecked
FROM poller_option WHERE pollerID='".$poll['ID']."' ORDER BY pollerOrder";
$q = $conn->query($sql);
$options = $q->fetchAll(PDO::FETCH_ASSOC);
$result = array('code' => '200',
'poll'=>array('id' =>$poll['ID'],
'title' => $poll['pollerTitle']
),
'options' => $options);
return json_encode($result);
$conn = null;
}
catch(PDOException $e)
{
echo $e->getMessage();
return false;
}
}
function getPollResults($pollId = ''){
try {
$conn = new PDO('mysql:host='.$this->host.';dbname='.$this->dbname.';charset=utf8', $this->user, $this->pass);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
//get poll id and title
if($pollId == ''){
$sql = "SELECT MAX(p.ID) as ID, p.pollerTitle, COUNT(v.pollID) as total
FROM poller as p
LEFT JOIN poller_vote as v ON p.ID = v.pollID
GROUP BY v.pollID
ORDER BY p.ID DESC LIMIT 0,1";
}else{
$sql = "SELECT p.ID, p.pollerTitle, COUNT(v.pollID) as total
FROM poller as p
LEFT JOIN poller_vote as v ON p.ID = v.pollID
WHERE p.ID = '".$pollId."' ORDER BY ID DESC LIMIT 0,1";
}
$q = $conn->query($sql);
$poll = $q->fetch(PDO::FETCH_ASSOC);
//get poll options
$sql = '';
$sql = "SELECT o.ID, o.pollerID, o.optionText, o.pollerOrder, o.defaultChecked, COUNT(v.ID) as votes
FROM poller_option as o
LEFT OUTER JOIN poller_vote as v
ON v.optionID = o.ID
WHERE o.pollerID='".$poll['ID']."'
GROUP BY o.ID
ORDER BY o.pollerOrder ";
$q = $conn->query($sql);
$options = $q->fetchAll(PDO::FETCH_ASSOC);
$result = array('code' => '302',
'poll'=>array('id' =>$poll['ID'],
'title' => $poll['pollerTitle'],
'total' => $poll['total']
),
'results' => $options);
return json_encode($result);
$conn = null;
}
catch(PDOException $e)
{
echo $e->getMessage();
return false;
}
}
function castVote($pollId = '', $optionId = ''){
try {
$conn = new PDO('mysql:host='.$this->host.';dbname='.$this->dbname.';charset=utf8', $this->user, $this->pass);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
if(!$this->hasVoted($pollId)){
//no voto desde ip...registra voto
$insert = $conn->prepare("INSERT INTO poller_vote (optionID, ipAddress, pollID) VALUES (:oid, :address, :pid)");
$insert->bindParam(':oid', $optionId);
$insert->bindParam(':address', $_SERVER['REMOTE_ADDR']);
$insert->bindParam(':pid', $pollId);
//asign values to vars and then execute
$status = $insert->execute();
if($status)
{
return $this->getPollResults($pollId);
}
else
{
$result = array('code' => '520', //520 Unknown Error
'poll' =>array('id' => $pollId,
'title' => null
),
'results' => 'Su voto no pudo ser procesado.');
return json_encode($result);
}
}else{
return $this->getPollResults($pollId);
}
$conn = null;
}
catch(PDOException $e)
{
echo $e->getMessage();
return false;
}
}
private function hasVoted($pollId = ''){
try {
$conn = new PDO('mysql:host='.$this->host.';dbname='.$this->dbname.';charset=utf8', $this->user, $this->pass);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
//select ip address to validate vote by ip
if($pollId == ''){
$sql = "SELECT COUNT(ID) as vote
FROM poller_vote
WHERE ipAddress = '".$_SERVER['REMOTE_ADDR']."' AND pollID = '(SELECT MAX(ID) FROM poller)'";
}else{
$sql = "SELECT COUNT(ID) as vote
FROM poller_vote
WHERE ipAddress = '".$_SERVER['REMOTE_ADDR']."' AND pollID = '".$pollId."'";
}
$q = $conn->query($sql);
$vote = $q->fetchColumn();
return ($vote == 0) ? false : true;
$conn = null;
}
catch(PDOException $e)
{
echo $e->getMessage();
return false;
}
}
}
Vamos a ver nuestra clase en detalle para explicarles las propiedades cada método en ella:
Primero, hemos declarado nuestra clase con el nombre Application_Model_Polls, pueden utilizar cualquier nombre para la case, sin embargo, para mejor control y mantenimiento, recomiendo utilizar una estrucutra de etiquetas y formato “CamelCase” para identificar a quien pertenece, que es, y que contiene en el nombre. Así, con solo leer el nombre sabremos que es lo que estamos viendo en cualquier controlador o cualquier fichero donde hagamos referencia a nuestra encuesta.
Una vez declarada la clase, encontramos una serie de propiedades:
private $host = DB_HOST; private $user = DB_USER; private $pass = DB_PASS; private $dbname = DB_NAME; private $conn; private $error;
Estas propiedades, como su nombre de declaración lo indican, nos servirán para utilizar la conexión a la base de datos por medio de PDO y una variable $conn para definir la conexión misma dentro de la clase y $error para capturar cualquier error que se genere.
Luego encontramos el método __construct() que aunque está vacío, lo incluyo como referencia si queremos utilizar una conexión ya existente en nuestro proyecto.
Método getPoll();
Entonces encontramos la función getPoll(); Este método nos permite consultar la encuesta activa o en este caso la más reciente de nuestra tabla para mostrarla. Es decir, la pregunta y las opciones relacionadas a la pregunta para ser presentadas al usuario.
Nótese que empleamos try and catch para depurar nuestro código, tener mejor control y saber que sucede al momento de depurar y como bootstrap para la consulta misma, de forma que no destruya nuestro código general y así evitar un error que nos impida seguir mostrando el contenido de nuestro sitio o proyecto a pesar de que la encuesta falle.
Hemos utilizado el gestor PDO como gestor ya estable y depurado con que contamos en PHP 5 y superior. Consultamos si tenemos un parámetro “pollid”, en caso de que deseemos mostrar una encuesta en específico y no la más reciente, es un plus ;), de nuestra tabla poller.
Luego de tener el título y el ID de la pregunta, consultaremos todas las opciones disponibles para la pregunta en la tabla poller_option y creamos un array con el código de espuesta (code), basado en los códigos de respuesta de HTTP, seguido un array poll, con el ID y la pregunta de la encuesta y por último un array con las opciones disponibles. Esto se conoce como array o matriz anidado o bidimencional en este caso para facilitarnos el proceso de mostrar y manejar la información la cual retornamos como una estructura jSON json_encode(). Recuerden, estaremos trabajando con jQuery para la experiencia de usuario, y nada mejor que jSON para manejar datos estructurados.
Método getPollResults();
Para presentar los resultados de la encuesta basado en los votos obtenidos, debemos consultar la encuesta, las opciones y los votos obtenidos y contar los votos por cada opción para conocer los resultados de la encuesta parcial o final y para mostrarla al usuario una vez que este realice su voto.
Una vez más, pasamos el parámetro pollID para conocer el id específico de la pregunta o encuesta y poder obtener las opciones y votos relacionados a esta u obtener esta información de la última encuesta creada.
La igual que el método anterior, el retorno será un array bidimencional en estructura jSON de la matriz resultante con el código HTTP de respuesta, la pregunta y id de la encuesta y los resultados, que en este caso son las opciones de la pregunta y la cantidad de votos recibidos por cada una “COUNT(v.ID) as votes” de nuestra consulta SQL.
Método castVote();
Este método requiere dos parámetros o valores para capturar el voto del usuario: el id de la pregunta o encuesta y el id de la opción seleccionada por el usuario. (pollId, optionId). Internamente capturamos la dirección IP del usuario con la variable $_SERVER[‘REMOTE_ADDR’] para “garantizar” un voto por usuario. Esto puede desabilitarse simplemente pasando un valor NULL en caso de quere una encuesta abierto con multiples votos por usuario o, crear un método separado para limitar la cantidad de votos por IP o cualquier otra idea de como necesitemos gestionar los votos en nuestra encuesta.
Aquí nos encontramos con una condición basada en el método hasVoted, que describiremos a continuación. Este método nos ayudará a validar el voto del usuario.
Método hasVoted();
Esta función privada, solo puede usarse dentro de la clase misma, nos permitirá controlar un voto por usuario por encuesta, consultando el id de la encuesta y la dirección IP del usuario, buscando un registro en la tabla poller_vote. Si existe un registro con ambas condiciones, entonces significa que el usuario ya ha votado en la encuesta actual. Devolveremos un booleano (true, false) para saber si existe o no el voto.
4. Controlador de la encuesta (controller)
Nos permitirá consultar el método indicado según la acción del usuario e indicar que pregunta o encuesta queremos presentar. Así como intermediario entre el modelo y la vista o la forma en que el usuario interactúa con la encuesta, es decir, será la URL que utilizaremos en nuestro javascript. Permitiendo esto, libre control de como presentar la encuesta.
Vamos a crear un archivo en nuestro folder de controladores y lo llamaremos poll.php, donde llamaremos el archivo config.php por medio de include() o require_once(). Llamaremos el archivo que contiene la clase de nuestra encuesta y declararemos el objeto con el cual trabajaremos para mostrar tanto la encuesta como los resultados y capturar el voto del usuario. Todo en uno.
Entonces nuestro archivo poll.php contiene lo siguiente:
error_reporting(E_ALL);
ini_set("display_errors", 0);
require_once('config.php');
require_once('Polls.php');
$polls = new Application_Model_Polls;
if( isset($_POST['option']) ) {
$pollId = isset($_POST['poll']) ? $_POST['poll'] : '';
$optionId = isset($_POST['option']) ? $_POST['option'] : '';
$pollId = filter_var($pollId, FILTER_SANITIZE_NUMBER_INT);
$optionId = filter_var($optionId, FILTER_SANITIZE_NUMBER_INT);
$poll = $polls->castVote($pollId, $optionId);
print_r($poll);
exit;
}else{
$poll = $polls->getPoll('');
print_r($poll);
exit;
}
Como vemos, en el archivo controlador hacemos tres cosas:
Primero, incluimos el archivo de configuración config.php y el archivo con la clase Polls.php por medio de requiere_once(); el orden es importante, primero config.php para cargar las constantes definidas con las credenciales de la base de datos y luego la clase que utiliza estas constantes en el gestor PDO, no al revés, o tendremos un error.
Segundo, declaramos un nuevo objeto para gestionar nuestros métodos $polls = new Application_Model_Polls. Es importante que el nombre del objeto sea el mismo que el de la clase. Por eso les decía lo importante del nombre, así podemos tener varios objetos diferentes en un controlador y con solo ver el nombre sabremos de que se trata.
Tercero, tenemos una condición if…else… que nos permitirá saber si el usuario esta realizando la acción de votar o seleccionar su opción o si simplemente presentar la encuesta al usuario, capturando la variable $_POST. En este caso option que es el id de la opción o respuesta, aunque podemos hacerlo con el id de la encuesta y el id de la opción al mismo tiempo.
Filtramos las variables para eliminar cualquier XSS o uso indebido sabiendo que, los valores que esperamos son números enteros (ID).
De no existir la variable $_POST[‘option’], significa que el usuario no está votando castVote(), entonces, mostraremos la encuesta, getPoll().
Presentamos el resultado con print_r() y luego salimos: exit; para finalizar la ejecución de nuestro controlador.
5. HTML
Como la idea es presentar una encuesta simple, una pregunta con sus opciones de respuesta, en nuestro website, blog, web app o lo que sea en que necesites contar con una encuesta simple. Necesitaremos un bloque donde mostrarlo.
Esto lo hacemos creando una capa o contenedor, en este caso utilizaremos un <DIV> con el id “featured-poll”. Entonces tendremos este código el cual colocaremos donde queremos mostrar la encuesta:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Encuesta simple con PHP y jQuery</title>
<meta name="description" content="Encuesta simple con PHP y jQuery">
<link href=”style.css” rel=”stylesheet” type=”text/css”>
</head>
<body>
<div id="featured-poll"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="poll.js"></script>
</body>
</html>
Eso esto todo. Si, con una simple línea de html podemos implementar nuestra encuesta. Recuerda que utilizaremos jQuery como gestor de interacción de la misma.
6. Javascript y jQuery
Como presentaremos la encuesta en nuestro website, ahora necesitamos crear las funciones javascript necesarias para mostrar y capturar la encuesta. Para esto necesitaremos dos llamados $.ajax() uno con GET para mostrar la encuesta y otro POST para capturar el voto del usuario. Finalmente una funcion javascript para crear una barra horizontal que muestre la relación de votos o procentaje segun el total de votos por opción ¿Recuerdan esto de nuestra clase Polls.php?
Vamos a crear un archivo .js lo llamaremos poll.js donde colocaremos nuestro código javascript y la implementación de jQuery $.ajax:
$(document).ready(function() {
//featured-poll
$.ajax({
type: "GET",
url: "poll.php",
dataType: "json",
success: function (data) {
//console.log(data);
$('body #featured-poll') .append('<h3>'+data.poll.title+'</h3>');
if(data.code == 200)
{
$('body #featured-poll') .append('<form id="formPoll">');
$.each(data.options, function( index, value ) {
$('#featured-poll form').append('<div><input type="radio" name="'+value.pollerID+'" value="'+value.ID+'">'+
'<label>'+value.optionText+'</label>'+
'</div>');
});
$('body #featured-poll form') .append('<button name="castVote" id="castVote" type="submit">Votar</button>');
$('body #featured-poll') .append('</form>');
}
else if(data.code == 302)
{
$('body #featured-poll').html('');
$('body #featured-poll').append('<h3>'+data.poll.title+'</h3>');
$.each(data.results, function( index, value ) {
var percent = Math.round(value.votes / data.poll.total * 100);
$('body #featured-poll') .append('<p>'+value.optionText+' '+
'<div id="bar-'+value.ID+'" class="progressBar"><div>('+value.votes+') '+percent+' %</div></div>');
progress(percent, $('#bar-'+value.ID));
});
}
},
error: function (jqXHR, textStatus, errorThrown) {
//alert(errorThrown);
}
});
function progress(percent, $element) {
var progressBarWidth = percent + '%';
$element.find('div').animate({ width: progressBarWidth }, 500).css('float','left').html();
}
$(document).on('submit','#formPoll',function(event) {
// get the form data
var formData = {
'poll' : $("#formPoll input[type='radio']:checked").prop("name"),
'option' : $("#formPoll input[type='radio']:checked").val()
};
// process the form
$.ajax({
type : 'POST', // define the type of HTTP verb we want to use (POST for our form)
url : 'poll.php', // the url where we want to POST
data : formData, // our data object
dataType : 'json', // what type of data do we expect back from the server
encode : true,
cache : false
})
// using the done promise callback
.done(function(data) {
// here we will handle errors and validation messages
$('body #featured-poll').html('');
$('body #featured-poll').append('<h3>'+data.poll.title+'</h3>');
$.each(data.results, function( index, value ) {
var percent = Math.round(value.votes / data.poll.total * 100);
$('body #featured-poll') .append('<p>'+value.optionText+' '+
'<div id="bar-'+value.ID+'" class="progressBar"><div>('+value.votes+') '+percent+' %</div></div>');
progress(percent, $('#bar-'+value.ID));
});
})
// unexpected fail: show errors
.fail(function(data) {
})
// finally, enable button and change its caption
.always(function() {
});
// stop the form from submitting the normal way and refreshing the page
event.preventDefault();
});
});
En el código javascript tenemos lo siguiente:
Primero, un llamado GET que se ejecuta la cargar la página o sitio web. Este llamado $.ajax es para desplegar la encuesta por medio del llamado a nuestro controlador poll.php. En este caso no pasamos ningún parámetro, de forma que el controlador poll sea quien decida que encuesta mostrar según nuestra declaración de objeto.
Por medio del ID del bloque o elemento div al que le dimos el valor “featured-poll” hacemos referencia para que el resultado del llamado $.ajax pueda ser insertado en el HTML. De esta forma creamos nuestra estructura html de como queremos que se muestre la encuesta, permitiéndonos total control de la apariencia, para lo que nos ayuda jQuery.
En algunos casos he visto que la estructura html ya viene procesada en el modelo o clase php. Sin embargo, esto limita mucho que podamos reutilizar la encuesta y adaptarla a diferentes estructuras y páginas dentro de nuestro sitio, incluso para una versión móvil independiente de nuestro sitio.
El segundo llamado es un evento on(‘sumbit’). Como hemos colocado un botón en nuestro llamado GET para presentar la encuesta y como medio de acción para capturar el voto del usuario. Utilizaremos la propiedad submit para enviar el voto del usuario al controlador ($_POST en nuestro archivo poll.php de la condición if..else).
De igual forma, procesamos el resultado (data) que devuelve nuestro controlador en forma de jSON y colocamos esta información de respuesta con una estructura HTML según la forma en que queremos presentar los resultados de la encuesta una vez procesado el voto.
Aquí, tenemos un div o capa cuyo ID tiene el prefijo “bar-” y la clase progressBar. Este div nos permitirá presentar una barra del color que deseemos con el porcentaje en relacion al 100% del total de votos por cada opción.
Finalmente tenemos la función javascript progress(). Esta función nos ayuda a convertir el total del votos de cada opción a valor porentual en relación al ancho (width) que tenemos disponibles según nuestra capa HTML featured-poll. A la vez creamos un efecto de animación para llenar la barra horizontalmente con un color sólido indicador del porcentaje de la opción. Otro plus, no es necesario animarla pero se ve bien.
Esta función javascript progress toma el el div con la clase progressBar para presentar la barra animada según el id del elemento u opción como lo declaramos en la llamada del “on(‘submit’)”.
7. CSS
Por último, pero no menos importante, tenemos el CSS (Cascading Style Sheet) que nos ayudará a dar forma y color a nuestra encuesta:
/* Polls Form */
#featured-poll {
background-color: #ebebeb;
padding: 10px;
}
#formPoll > div {
line-height: 18px;
margin: 3px;
}
#featured-poll input {
margin-right: 8px;
}
#formPoll label {
font-family: Arial;
font-size: 12px;
}
#formPoll > button {
background-color: #005689;
height: 31px;
line-height: 18px;
margin-top: 5px;
padding: 5px 15px 10px;
width: 80px;
}
/* Polls Results */
.progressBar {
width: 100%;
height: 18px;
background-color: #f7f7f7;
font-family: Arial;
font-size: 12px;
}
.progressBar div {
height: 100%;
color: #fff;
text-align: right;
line-height: 18px;
width: 0;
background-color: #005689;
}
#featured-poll p, #featured-poll div {
font-size: 12px;
margin-top: 3px;
}
Con el CSS podemos dar forma y color a nuestra encuesta ya sea de forma inline <style>…</style> o por referencia a un acrchivo css externo por <link />: <link href=”style.css” rel=”stylesheet” type=”text/css”> en nuestro sitio web.
Pueden jugar con el CSS para personalizar aún más la presentación de la encuesta de modo que siga el diseño y paleta de colores de su sitio web.
Pongan todo junto y prueben esta encuesta simple para websites, blogs o web apps.
Para administrar sus encuestas lo pueden hacer con phpMyadmin o bien creando su propio sistema de administración RBAC o incorporando un nuevo módulo en su sistema actual para listar, editar y crear encuestas. También, pueden crear un plugin para WordPress o cualquier otro sistema CMS.
Espero les sea de utilidad y recuerden. CODE IS POETRY!