¡Las encuestas son divertidas! Pueden ayudar a atraer a los lectores de su sitio y brindarles a usted y al encuestado información valiosa. Veamos cómo crear una encuesta desde cero. Desde el diseño de Photoshop hasta el PHP/MySQL que lo impulsa. Esto es lo que construiremos:
La demostración en vivo ya no está en línea, pero puede descargar un .zip de todos los archivos de esta demostración.
1. Diseña el Fondo en Photoshop
Cree un nuevo documento de Photoshop. En el mío, he rellenado el fondo con un azul oscuro (#233743) y lo he dimensionado en 700x700px.
Luego cree una nueva capa (presione el ícono de la pequeña página en la paleta de capas) encima de su capa de fondo. Seleccione la herramienta de degradado (herramienta secundaria de la herramienta de cubo de pintura). Asegúrese de tener la herramienta de degradado configurada en Primer plano a Transparente, radial y opacidad completa como esta:
En el mío, usé un color azul ligeramente más claro (# 364c5a) y eliminé un degradado desde cerca del medio superior. El degradado puede salirse de la parte superior, pero asegúrese de que no se salga de ningún lado ni de la parte inferior. La idea aquí es que vamos a centrar esto sobre un fondo de un azul a juego, por lo que no queremos que el degradado termine abruptamente. La razón por la que estamos haciendo esto en su propia capa es para que podamos moverlo sin tener que volver a hacerlo.
Ahora agreguemos la diversión “¡ENCUESTA!” texto en la parte superior. Aquí usé la fuente Agenda Black (una de mis nuevas favoritas) en un tono de azul aún más claro (#e3f1fa). Lo transformé libremente (Comando-T) para girarlo un poco y luego le di una ligera sombra paralela en los estilos de capa.
Ahora el gráfico está listo para ser guardado. Puede “Guardar para Web y dispositivos” desde el menú de archivo. Use una configuración JPG de alta calidad (mejor para imágenes más grandes con degradados). Nombre el archivo “page-bg.jpg” y guárdelo en una carpeta de “imágenes” dentro de un directorio que usará para este proyecto.
2. Construcción de la estructura de la página
Una encuesta, en nuestro caso, es solo un formulario realmente simple. Básicamente, una serie de entradas de botón de radio y un botón de envío. Así es como se ve todo el marcado HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Poll</title>
<link href="https://css-tricks.com/how-to-design-and-create-a-php-powered-poll/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<fieldset>
<legend>What is your JavaScript library of choice?</legend>
<form action="<?php echo $editFormAction; ?>" id="form1" name="form1" method="POST">
<label>
<input type="radio" name="Poll" value="mootools" id="Poll_0" />
Mootools
</label>
<label>
<input type="radio" name="Poll" value="prototype" id="Poll_1" />
Prototype
</label>
<label>
<input type="radio" name="Poll" value="jquery" id="Poll_2" />
jQuery
</label>
<label>
<input type="radio" name="Poll" value="spry" id="Poll_3" />
Spry
</label>
<label>
<input type="radio" name="Poll" value="other" id="Poll_4" />
Other
</label>
<input type="submit" name="submit" id="submit" value="Vote" />
<input type="hidden" name="id" value="form1" />
<input type="hidden" name="MM_insert" value="form1" />
</form>
</fieldset>
</body>
</html>
Algunas cosas a tener en cuenta en el marcado aquí. Puse mi formulario dentro de un campo. No hay nada relacionado con la funcionalidad aquí, solo me gusta cómo se ve la combinación de campo/leyenda y nos da un gancho para algunos estilos CSS. Observe también cómo las entradas están dentro de los elementos de la etiqueta. Esto permite a los usuarios hacer clic en las palabras y en el botón de opción para seleccionarlas, lo cual es bueno. También observe la parte de PHP en la acción del formulario, lo abordaremos más adelante.
Aquí está el CSS:
* {
margin: 0;
padding: 0;
}
body {
font-size: 62.5%;
font-family: Georgia, serif;
background: url(images/page-bg.jpg) top center no-repeat #233743;
}
h6 {
font-size: 1.4em;
margin-bottom: 15px;
}
a { color: white; }
label, li {
display: block;
padding: 5px;
font-size: 1.4em;
color: #e3f1fa;
}
fieldset {
margin: 115px auto;
width: 400px;
padding: 8px 15px 15px 15px;
border: 1px solid white;
display: block; /* IE 7 Requires This */
}
legend {
padding: 4px 6px 4px 6px;
border: 1px solid white;
font-size: 2.0em;
color: #e3f1fa;
font-style: italic;
}
ul { list-style: none; margin-bottom: 15px;}
.results-bar {
padding: 10px;
color: white;
background: url(images/result-bar-bg.png) left center;
white-space: nowrap;
}
span.total-votes {
font-size: 2.6em;
}
Observe los estilos en la parte inferior para las cosas que aún no están en nuestro marcado, esos son para la página de resultados a la que llegaremos más adelante.
3. Crear una base de datos para almacenar resultados
La mayoría de los paquetes de alojamiento le permiten crear bases de datos en su servidor. Si aún no sabe cómo hacerlo, es posible que deba comunicarse con ellos o buscar en sus áreas de ayuda para averiguar cómo agregar una nueva.
Programar Plusestá en Media Temple, por lo que hay una pequeña herramienta útil justo en el área de administración del dominio para crear nuevas bases de datos:
Asegúrese de que se trata de una base de datos MySQL. Las cuatro cosas que necesitará saber son el nombre de host, el nombre de usuario de la base de datos, la “contraseña” de la base de datos y el nombre de la base de datos.
Ahora deberá crear un nuevo archivo en el directorio que ha iniciado para este proyecto llamado “conn_vote.php”. He puesto el mío dentro de una subcarpeta llamada “Conexiones”. Aquí está el PHP:
<?php
# FileName="Connection_php_mysql.htm"
# Type="MYSQL"
# HTTP="true"
$hostname_conn_vote = "localhost";
$database_conn_vote = "your-database-name";
$username_conn_vote = "your-database-username";
$password_conn_vote = "your-database-password";
//$conn_vote = mysql_pconnect($hostname_conn_vote, $username_conn_vote, $password_conn_vote) or trigger_error(mysql_error(),E_USER_ERROR);
$conn_vote = mysql_connect($hostname_conn_vote, $username_conn_vote, $password_conn_vote) or die('Can't create connection: '.mysql_error());
mysql_select_db($database_conn_vote, $conn_vote) or die('Can't access specified db: '.mysql_error());
?>
Observe las cuatro líneas en negrita arriba, esas son las cuatro variables para las cuatro cosas que dije que necesitaría saber. Es muy probable que su host sea localhost, pero no siempre es así. En el caso de Media Temple como yo, es algo como esto: internal-db.s12345.gridserver.com
Su nueva base de datos vacía necesitará una estructura de tabla y algunos datos falsos para comenzar. Aquí hay algo de SQL que puede ejecutar para hacerlo:
--
-- Table structure for table `poll`
--
CREATE TABLE `poll` (
`id` int(3) NOT NULL auto_increment,
`question` varchar(200) default NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=43 ;
--
-- Dumping fake data for table `poll`
--
INSERT INTO `poll` VALUES (42, 'jquery');
INSERT INTO `poll` VALUES (41, 'mootools');
INSERT INTO `poll` VALUES (40, 'other');
INSERT INTO `poll` VALUES (39, 'mootools');
INSERT INTO `poll` VALUES (38, 'jquery');
INSERT INTO `poll` VALUES (37, 'mootools');
INSERT INTO `poll` VALUES (36, 'spry');
INSERT INTO `poll` VALUES (35, 'jquery');
INSERT INTO `poll` VALUES (21, 'mootools');
INSERT INTO `poll` VALUES (22, 'other');
INSERT INTO `poll` VALUES (23, 'mootools');
INSERT INTO `poll` VALUES (24, 'mootools');
INSERT INTO `poll` VALUES (25, 'prototype');
INSERT INTO `poll` VALUES (26, 'other');
INSERT INTO `poll` VALUES (27, 'mootools');
INSERT INTO `poll` VALUES (28, 'spry');
INSERT INTO `poll` VALUES (29, 'jquery');
INSERT INTO `poll` VALUES (30, 'mootools');
INSERT INTO `poll` VALUES (31, 'prototype');
INSERT INTO `poll` VALUES (32, 'mootools');
INSERT INTO `poll` VALUES (33, 'mootools');
INSERT INTO `poll` VALUES (34, 'mootools');
La mayoría de los hosts también le dan acceso a phpMyAdmin para ejecutar cosas como esta. Asegurarse está en su nueva base de datos y luego puede pegar ese SQL y ejecutarlo.
4. Haz que funcione con PHP
Ahora estamos listos para un poco de magia de codificación PHP para hacer que todo funcione. No puedo pretender entender todo esto, pero la esencia es que tomará la opción seleccionada, la convertirá en un valor de cadena seguro y legible, y la guardará como una nueva entrada en esa tabla en nuestra base de datos.
Muchas gracias a Jonathan Fean por el PHP que impulsa esta cosa y a David Walsh por ayudarme a resolver algunos problemas y ponerlo en funcionamiento en mi servidor.
Inserta este código PHP en la parte superior (incluso antes del DOCTYPE) de tu archivo poll.php:
<?php require_once('Connections/conn_vote.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
{
$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
$theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
switch ($theType) {
case "text":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "long":
case "int":
$theValue = ($theValue != "") ? intval($theValue) : "NULL";
break;
case "double":
$theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL";
break;
case "date":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "defined":
$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
break;
}
return $theValue;
}
}
$editFormAction = $_SERVER['PHP_SELF'];
if (isset($_SERVER['QUERY_STRING'])) {
$editFormAction .= "?" . htmlentities($_SERVER['QUERY_STRING']);
}
if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "form1")) {
$insertSQL = sprintf("INSERT INTO poll (id, question) VALUES (%s, %s)",
GetSQLValueString($_POST['id'], "int"),
GetSQLValueString($_POST['Poll'], "text"));
mysql_select_db($database_conn_vote, $conn_vote);
$Result1 = mysql_query($insertSQL, $conn_vote) or die(mysql_error());
$insertGoTo = "results.php";
if (isset($_SERVER['QUERY_STRING'])) {
$insertGoTo .= (strpos($insertGoTo, '?')) ? "&" : "?";
$insertGoTo .= $_SERVER['QUERY_STRING'];
}
header(sprintf("Location: %s", $insertGoTo));
}
$colname_rs_vote = "-1";
if (isset($_GET['recordID'])) {
$colname_rs_vote = $_GET['recordID'];
}
mysql_select_db($database_conn_vote, $conn_vote);
$query_rs_vote = sprintf("SELECT * FROM poll WHERE id = %s", GetSQLValueString($colname_rs_vote, "int"));
$rs_vote = mysql_query($query_rs_vote, $conn_vote) or die(mysql_error());
$row_rs_vote = mysql_fetch_assoc($rs_vote);
$totalRows_rs_vote = mysql_num_rows($rs_vote);
?>
Y este PHP al final del archivo poll.php (incluso después del ):
<?php
mysql_free_result($rs_vote);
?>
5. Crear una página de resultados
Así que nuestras encuestas están funcionando y reuniendo votos con éxito, ¡pero la página de resultados es la verdadera recompensa! Esta no solo es la parte divertida, sino que nuestra función PHP se redirige automáticamente a una página de “resultados.php” después de presionar el botón de votar, por lo que tenemos que crear una =)
Esta vez te daré todo el marcado y el PHP juntos en un gran bloque:
<?php require_once('Connections/conn_vote.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
{
$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
$theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);
switch ($theType) {
case "text":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "long":
case "int":
$theValue = ($theValue != "") ? intval($theValue) : "NULL";
break;
case "double":
$theValue = ($theValue != "") ? "'" . doubleval($theValue) . "'" : "NULL";
break;
case "date":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "defined":
$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
break;
}
return $theValue;
}
}
mysql_select_db($database_conn_vote, $conn_vote);
$query_rs_vote = "SELECT * FROM poll";
$rs_vote = mysql_query($query_rs_vote, $conn_vote) or die(mysql_error());
$row_rs_vote = mysql_fetch_assoc($rs_vote);
$totalRows_rs_vote = mysql_num_rows($rs_vote);
$resultQuestion1 = mysql_query("SELECT * FROM poll WHERE question='mootools'");
$num_rowsQuestion1 = mysql_num_rows($resultQuestion1);
$resultQuestion2 = mysql_query("SELECT * FROM poll WHERE question='prototype'");
$num_rowsQuestion2 = mysql_num_rows($resultQuestion2);
$resultQuestion3 = mysql_query("SELECT * FROM poll WHERE question='jquery'");
$num_rowsQuestion3 = mysql_num_rows($resultQuestion3);
$resultQuestion4 = mysql_query("SELECT * FROM poll WHERE question='spry'");
$num_rowsQuestion4 = mysql_num_rows($resultQuestion4);
$resultQuestion5 = mysql_query("SELECT * FROM poll WHERE question='other'");
$num_rowsQuestion5 = mysql_num_rows($resultQuestion5);
$percentQuestion1 = ($num_rowsQuestion1 / $totalRows_rs_vote)*100;
$percentQuestion2 = ($num_rowsQuestion2 / $totalRows_rs_vote)*100;
$percentQuestion3 = ($num_rowsQuestion3 / $totalRows_rs_vote)*100;
$percentQuestion4 = ($num_rowsQuestion4 / $totalRows_rs_vote)*100;
$percentQuestion5 = ($num_rowsQuestion5 / $totalRows_rs_vote)*100;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Results</title>
<link href="https://css-tricks.com/how-to-design-and-create-a-php-powered-poll/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<fieldset>
<legend>Results</legend>
<ul>
<li>
<?php echo $num_rowsQuestion1 ?> Mootools
<br />
<div class="results-bar" style="width: <?php echo round($percentQuestion1,2); ?>%;">
<?php echo round($percentQuestion1,2); ?>%
</div>
</li>
<li>
<?php echo $num_rowsQuestion2 ?> Prototype
<div class="results-bar" style="width: <?php echo round($percentQuestion2,2); ?>%;">
<?php echo round($percentQuestion2,2); ?>%
</div>
</li>
<li>
<?php echo $num_rowsQuestion3 ?> jQuery
<div class="results-bar" style="width: <?php echo round($percentQuestion3,2); ?>%;">
<?php echo round($percentQuestion3,2); ?>%
</div>
</li>
<li>
<?php echo $num_rowsQuestion4 ?> Spry
<div class="results-bar" style="width: <?php echo round($percentQuestion4,2); ?>%;">
<?php echo round($percentQuestion4,2); ?>%
</div>
</li>
<li>
<?php echo $num_rowsQuestion5 ?> Other
<div class="results-bar" style="width: <?php echo round($percentQuestion5,2); ?>%;">
<?php echo round($percentQuestion5,2); ?>%
</div>
</li>
</ul>
<h6>Total votes: <?php echo $totalRows_rs_vote ?></h6>
Back to Voting
</fieldset>
</body>
</html>
<?php
mysql_free_result($rs_vote);
?>
Tenga en cuenta que se está haciendo un poco de matemática en el PHP que calcula el porcentaje del total de votos para cada opción de encuesta. Esta no solo es una buena información, sino que podemos usar ese porcentaje para establecer el ancho de una barra para agregar algo de estilo visual a nuestros resultados. Cada opción de encuesta tiene su propio elemento de lista donde se muestra el total de votos para ese elemento junto con una “barra de resultados”, cuyo ancho se determina estableciendo un valor de ancho en línea para el porcentaje calculado. De vuelta en nuestro CSS, ya tenemos ese div diseñado con una imagen de fondo con un patrón sutil.
La demostración en vivo ya no está en línea, pero puede descargar un .zip de todos los archivos de esta demostración.
(Recuerde: esto requiere un servidor que ejecute PHP y una base de datos MySQL, por lo que deberá seguir los pasos anteriores para que funcione en su propio servidor. Archivo de Photoshop incluido).