Para nuestros ejemplos usaremos las siguientes tablas:

• Categoría
• Productos

1. SELECT

Este comando nos permite traer todos los registros de una tabla. La estructura de este comando es la siguiente:

SELECT [nombre de los campos separados por comas] FROM [nombre de la tabla]

Ejemplo:

En el caso deseemos traer todos los campos:

SELECT * FROM [nombre de la tabla]

Ejemplo:

Existen casos donde queremos mostrar registros que cumplan una condición:

SELECT [nombre de los campos separados por comas] FROM [nombre de la tabla] WHERE [condición]

Ejemplo:

En este caso vamos a mostrar los productos que son de la categoría 2:

2. COUNT

En muchos casos debemos contar registros en nuestras tablas. La estructura del comando es:

SELECT COUNT([campo a contar o *]) FROM TABLA [WHERE -condición]

Ejemplo:

Vamos a contar cuantos productos pertenecen a la categoría 2:

3. ORDER BY

Este comando nos permite ordenar el resultado de nuestro SELECT por uno o varios campos de la tabla de manera ascendente o descendente.

SELECT [campos] FROM [tablas] [WHERE condición] ORDER BY [campos] [DESC o ASC]

Si deseamos mostrar datos de manera ascendente no es obligatorio poner ASC.

Ejemplo

Vamos a ordenar nuestra tabla productos por el campo nombreProducto de manera descendente:

Ahoro vamos a mostrar los productos ordenados de manera ascendente:

4. GROUP BY

Este comando nos permite agrupar resultados de SELECT por uno o varios campos de una tabla:

SELECT [campos] FROM [tablas] [WHERE condición] GROUP BY [campos]

Ejemplo

Vamos a contar cuantos productos hay por categoría:

5. LIMIT

Muchas veces nuestras tablas contendrán miles o millones de registros, no siempre vamos a querer mostrarlos todos.

LIMIT permite establecer cuantos registros vamos a traer de nuestra base de datos.

SELECT [campos] FROM [tablas] [WHERE condición] LIMIT [cantidad]

Ejemplo:

Vamos a mostrar solo tres registros de nuestra tabla productos:

6. INSERT

Hasta ahora hemos obtenido datos de tablas pero también podemos agregar nuevos registros.

INSERT INTO [nombre tabla] ([campos de tabla]) VALUES([valores a agregar])

Ejemplo:

Vamos a agregar un nuevo producto:

7. UPDATE

Cuando ya hemos insertado un nuevo registro podemos cambiar los valores.

UPDATE [nombre tabla] SET [campo1=valor nuevo] [WHERE condición]

Ejemplo

Vamos a actualizar el nuevo producto que hemos insertado:

8. DELETE

Así como podemos agregar registros también podemos eliminarlos:

DELETE FROM [nombre tabla] [WHERE condición]

Ejemplo

Vamos a eliminar el nuevo registro:

9. ALTER TABLE

En el caso se nos haya olvidado agregar una columna al crear la tabla, podemos solucionarlo con el siguiente comando:

ALTER TABLE [nombre tabla] ADD [nombre campo] [tipo de dato];

Ejemplo

Vamos a agregar una columna a nuestra tabla productos llamada descripción:

10. DROP TABLE

En muchos casos tenemos tablas que no son necesarias, entonces decidimos eliminarlas.

DROP TABLE [nombre tabla]

Ejemplo

Vamos a eliminar la tabla productos:

Todos estos comandos te facilitarán dominar el fascinante mundo de las base de datos, en otros post veremos querys más complejos donde se unen dos o más tablas, operadores y condicionales.

¡Que la fuerza os acompañe jóvenes padawans!

La entrada 10 Comandos SQL que te pueden ser de utilidad se publicó primero en Tursos.

Requisitos:

• Tener acceso root o de administrador
• Tener Ruby 1.9.3, Windows: rubyinstaller.org, Mac: rvm install 1.9.3 –with-gcc=clang
• Tener Java actualizado, Java Runtime Environment

Herramientas a utilizar:

• Sencha CMD 3.1.2
• Sencha Touch 2.2.1

Nota: La página de Sencha detecta automáticamente el sistema operativo.

Sencha CMD 3.1.2

Sencha CMD nos ayudará a generar nuestros nuevos proyectos de forma rápida, tomando los archivos necesarios del Framework Sencha Touch.

Sencha Touch 2.2.1

Este archivo es el framework Sencha Touch, el cual esta basado en HTML5, CSS, JavaScript, ademas es de codigo abierto. Es una alternativa muy poderosa a Jquery Mobile, sobre todo para los que les gusta usar mucho Javascript. En este archivo estarán empaquetados todas los ficheros necesarios para poder armar nuestra aplicación Sencha:

• Descomprimimos nuestro sencha-touch-2.2.1-commercial.zip en nuestro servidor local (XAMPP, MAMP, AppServ).
• Para probarlo entramos a «localhost/touch-2.2.1» o con el nombre que tenga la carpeta y se debería mostrar lo siguiente:

Hello World

Ahora vamos a crear nuestra primera App llamada «Hello World». Ejecutamos Terminal en Mac o cmd en Windows y nos ubicamos en la carpeta del proyecto, en mi caso /Applications/XAMPP/xamppfiles/htdocs/touch-2.2.1.

Luego escribimos el siguiente comando para crear nuestra nueva aplicación:

sencha generate app HelloWorld ../HelloWorld

La sintaxis de este comando es:

sencha generate app (Nombre de la aplicación) (Ruta de la aplicación)

Y luego si vamos a http://localhost/helloworld nos deberia salir lo siguiente:

Espero les halla servido, ya estare subiendo mas tutoriales sobre Sencha Touch, cualquier duda ponedmela en los comentarios

La entrada Sencha Touch, Instalación y Hello World se publicó primero en Tursos.

El ser humano ha utilizado la naturaleza como fuente de inspiración desde tiempos inmemorables, no es coincidencia que en la era de la informacion tambien sea asi. De las plantas, los animales y los minerales podemos sacar las formas, texturas y colores de estos y añadirle un poco mas de detalle a nuestros diseños.

2. Arquitectura

Opuesto pero al mismo tiempo similar a la naturaleza es la arquitectura, los sitios Web inspirados en la arquitectura se conforman principalmente de mucho espacio, acompañado de grandes fotografias como fondos y pasmosas tipografias minimalistas.

3. Revistas

Las revistas, pioneras del diseño en base a columnas y grillas, son el origen de la mayoria de tendencias de diseño Web actual. De estas podemos rescatar la tipografía y su jerarquia, la organizacion de la informacion y el posicionamiento de imagenes o figuras para dar una apariencia asimetrica, todo esto para dar una lectura gratificante.

4. Productos

La forma sigue a la funcion, es un principio que rige a la mayoria de productos modernos, el cual indica que la funcion del objeto da forma a este, esto es aplicable al diseño Web, y nos puede ayudar a librar nuestras creaciones de elementos innecesarios, volviendolas mas minimalistas, balanceadas y funcionales.

5. Videojuegos

Los buenos juegos nunca se olvidan, ¿qué hace que estos sean tan memorables? Uno de los factores; es la experiencia de usuario, la cual es aplicable al diseño Web. La experiencia de usuario en los video juegos esta conformada de muchas cosas, entre ellas estan: las interfaces, los menus contextuales, los iconos, la interactividad, etc.

La entrada 5 Tipos de Inspiración para el Diseño Web se publicó primero en Tursos.

Los Widgets son pedazos de contenido administrables desde el backend (Apariencia > Widgets), estos se almacenan en espacios conocidos como ‘Sidebars Dinámicos’.

En este tutorial aprenderas como implementar Sidebars Dinámicos (Widgets) en tu theme de WordPress.

Registrando el Sidebar

El proceso es sencillo, lo unico que tenemos que hacer es colocar la función register_sidebar() en el fichero functions.php de nuestro theme.

Esta función acepta como parametro un Array en el cual se especifican los detalles del Sidebar:

• name: El nombre del Sidebar, por defecto es ‘Sidebar’.
• id: El id del sidebar (ej: sidebar-derecha), por defecto es el ID numerico auto-generado.
• description: Texto de descripcion del sidebar a registrar, se muestra en la pagina de Widgets, por defecto esta vacio
• class: Clase CSS a asignar a los widgets de este Sidebar.
• before_widget: Código HTML que ira antes de cada widget, por defecto es <li>
• after_widget: Código HTML que ira después de cada widget, por defecto es </li>
• before_title: Código HTML que ira antes del título del Widget, por defecto es <h2>
• after_title: Código HTML que ira después del título del Widget, por defecto es </h2>

Sabiendo esto, procedemos a crear un Sidebar de ejemplo:

<?php
register_sidebar( 
	array(
  		'name' => 'Zona de Anuncios',
  		'id' => 'ad-zone',
  		'description' => 'Aquí irán los anuncios del sitio',
  		'before_widget' => '<div class="widget ad">',
  		'after_widget'  => '</div>',
  		'before_title' => '<strong class="adtitle">',
  		'after_title' => '</strong>'
  	)
);

Con solo ese código, si vamos a Apariencia > Widgets deberíamos ver nuestro Sidebar, el cual podemos empezar a llenar con Widgets:

Mostrando el Sidebar

Para mostrar el Sidebar utilizamos la función dynamic_sidebar(), este lleva un solo parametro en donde debemos indicar que Sidebar mostrar, se pone el id (textual o numérico) del sidebar (en nuestro caso: ‘ad-zone’) si se deja vacío mostrará el primer sidebar registrado.

<?php dynamic_sidebar( 'ad-zone' ); ?>

Y esto lo podemos ubicar donde queramos, normalmente se acostumbra a crear un archivo sidebar.php, poner la función allí y luego incluirlo con get_sidebar().

Sin embargo los Sidebars en WordPress no siempre son usados como sidebars (literal), sino mas como un area dinámica multiproposito que se puede colocar en cualquier parte, por ejemplo en el Footer o en el Header.

La entrada Como Implementar Sidebars Dinámicos (Widgets) en WordPress se publicó primero en Tursos.

Optimización de Buscadores

Cuando buscamos algo en Google muy pocas veces vamos a la segunda o tercera pagina de resultados, lo mismo pasa con tus potenciales clientes, por eso hacer que tu sitio web aparezca en la primera pagina de los resultados de busqueda es de vital importancia y es necesario invertir tiempo y dinero, ya que esta inversion si es bien aplicada sera retornada en visitas y luego en acciones. La optimizacion en buscadores es un tema que se debe tomarse muy en serio. Tip: investiga posibles palabras claves con la herramienta de AdWords o desde el mismo auto-completar busqueda de Google.

Participa en tu Comunidad

Trata de hacerte conocido en la comunidad de tu nicho, esto puede ser participando en foros, comunidades o asistiendo a eventos del rubro. Recuerda presentarte como un individuo y no como una empresa, eso hace sentir que estan interactuando no con una marca sino con una persona y esto a la larga genera fidelidad. Tip: ayuda a la gente a resolver sus problemas/dudas.

Anuncios

Contratar anuncios es basicamente comprar tráfico, esto es beneficioso siempre y cuando se tenga una estrategia de contenidos adecuada, ya que de la noche a la mañana podemos tener un gran trafico pero si no ofrecemos un contenido que les haga quedarse no serviria de nada. Hasta hace unos años el monopolio de los anuncios lo tenia AdWords pero hoy dia con Facebook tenemos una una mejor competencia. Tip: Puedes publicar avisos gratis en sitios de anuncios sin costo.

Email Marketing

Para llevar a cabo esta una campaña de email marketing se necesita tener ya algo de tráfico en tu página Web, luego implementar una caja de suscripciones llamativa en alguna parte de tu página e ir construyendo una lista de correos. Posteriormente enviar de forma periodica y sin caer en la insistencia información relevante acerca de tu sitio Web. Tip: un buen horario para enviar boletines es en la mañana.

Social Media

El social media es otra forma de acercarte a tus clientes y construir una relación personal con ellos, es importante dar razones competentes que incentiven al visitante a darle «Me gusta» a tu pagina de Facebook o seguirte en Twitter, luego regularmente ir compartiendo mensajes cortos de interes para que se acuerden de regresar a tu página, no en exceso pero de forma consistente. Tip: participa del Google Authorship, conecta tu contenido a tu cuenta de Google+.

Esas fueron 5 formas de las tantas que hay para promocionar tu sitio Web o blog, recuerda que para que cualquier estrategia de promoción sea efectiva se necesita tener un contenido adecuado que convenza a tus visitantes a quedarse y no cerrar la pagina luego de 5 segundos.

La entrada 5 Formas de Promocionar tu Sitio Web se publicó primero en Tursos.

Seguro ya conoces los selectores de atributos de CSS, pero ¿conoces todas las variaciones y que usos prácticos se les puede dar?. En este tutorial veremos todos los tipos de selectores de atributo disponibles y ademas algunos ejemplos aplicables que tal vez te sean de utilidad.

Nota: En este tutorial voy a utilizar CodePen para los ejemplos, para un mejor entendimiento recuerda mirar el codigo en el orden: HTML » CSS » Resultado.

¿Qué son los selectores de atributos CSS?

Son selectores que se basan en el atributo del elemento HTML para seleccionarlo, se usan corchetes [].

Por ejemplo si tenemos un:

<p align="right">

</p>

Podemos seleccionarlo en CSS con:

p[align="right"]{

}

Tambien se puede obviar la declaración del tipo de elemento y seleccionar unicamente con el atributo:

[align="right"]{

}

Existen una serie de variaciones en las cuales podemos refinar la selección siendo mas especificos, si tienes conocimiento de expresiones regulares, esto te sera facil ya que los términos son similares.

Ejemplos

1. [attr=valor]

El uso mas básico, donde se declara exactamente el atributo y el valor indicado que este debe llevar para que sea seleccionado.

Ejemplo:

Digamos que tenemos una serie de elementos input y como sabemos, estos tienen que llevar el atributo type en donde se declara que tipo de campo sera, mediante los selectores de atributo podemos estilizar cada uno de los tipos de input individualmente sin declararle clase alguna:

See the Pen #1 Selector de Atributo = by josueochoa (@josueochoa) on CodePen.0

2. [attr^=valor]

Esta variación seleccionará a los elementos que tengan ese atributo y cuyo valor declarado comience con lo que se indica.

Ejemplo:

Un uso práctico seria por ejemplo ponerles iconos a una serie de enlaces a redes sociales, donde detectamos a que red social esta enlazando (el enlace debe empezar con http://face…) y de acuerdo a ello ponemos el icono respectivo:

See the Pen #2 Selector de atributo ^= by josueochoa (@josueochoa) on CodePen.0

3. [attr$=valor]

Este selector es lo invertido al anterior, seleccionará a los elementos que tengan ese atributo y cuyo valor declarado termine con lo que se indica.

Ejemplo:

El uso mas común que se le da a este tipo de selector es para estilizar enlaces de descarga de archivos, en el cual la ruta termina en el formato de archivo (http://…/documento.doc), el cual usamos para hacer una selección individual:

See the Pen #3 Selector de Atributo $= by josueochoa (@josueochoa) on CodePen.0

4. [attr*=valor]

Este selector es el que tiene mas alcance, ya que como ven lleva el *, lo que indica que es global, va a seleccionar el elemento que tenga el valor indicado este donde este.

Ejemplo:

Un ejemplo práctico es cuando trabajamos con los menús de WordPress y queremos aplicar estilo al elemento activo o current, pero WordPress nos añade un montón de clases y al final no logramos lo cometido o terminamos con un CSS muy desordenado, para estos casos podemos usar el selector de atributo global *=:

See the Pen #4 Selectores de Atributos *= by josueochoa (@josueochoa) on CodePen.0

5. [attr~=valor]

Esta variación seleccionará a los elementos que tengan ese atributo y cuyo valor declarado este entre espacios.

Ejemplo:

Esta tipo de selector se usa casi siempre para seleccionar elementos que tengan atributos con multiples valores, tales como el atributo rel de un a, en este ejemplo tendremos un par de parrafos en los cuales habran varios enlaces a los que les pondremos multiples valores rel, pero colorearemos de verde solo los que sean external:

See the Pen #5 Selector de Atributo ~= by josueochoa (@josueochoa) on CodePen.0

6. [attr|=valor]

Esta variación seleccionará a los elementos que tengan ese atributo y cuyo valor declarado este entre guiones.

Ejemplo:

Para este selector haremos un ejemplo un poco mas complicado: lo usaremos para hacer una pequeña grilla CSS, en la cual las propiedades se aplicaran a las columnas solo por el hecho de que la clase de estas contenga la palabra grid-, seguido ira el numero que indique el ancho de esa columna:

See the Pen #6 Selector de atributo |= by josueochoa (@josueochoa) on CodePen.0

Compatibilidad

Cada uno de estos selectores funciona perfectamente en todos los navegadores modernos. Incluso Internet Explorer lo viene soportando a partir de la version 7.

La entrada Ejemplos Prácticos de Selectores de Atributos CSS se publicó primero en Tursos.

Actualizado el 25-09-2020: se han cambiado todas las funciones mysql (deprecadas) por mysqli, tambien se actualizo un poco el CSS y se arreglo la URL del .zip al código

En este tutorial aprenderas a hacer un sistema de encuestas funcional, práctico y expandible, usaremos PHP y MySQL con tablas relacionales.

Trabajaremos con 4 ficheros PHP, uno para la conexión a la base de datos (conexion.php), uno para listar las encuestas (index.php), otro para crear nuevas encuestas (agregar.php), el que mostrara los resultados de las encuestas (resultado.php) y por ultimo estilos.css que se encargara de darle algo de estetica pero tambien de una parte muy esencial que es la de mostrar la barra de votaciones.

Si en ciertas partes el código te resulta muy complejo, lee los comentarios.

0. estilos.css

.barra{
    background: #ff3019;
    background: linear-gradient(to bottom, #ff3019 0%,#cf0404 100%);
    clear: both;
    height: 15px;
    color: white;
    font-weight: bold;
    text-align: right;
    padding: 6px;
    border-radius: 4px;
    max-width: 356px;
    min-width: 20px;
}
 
/* A partir de aqui es solo cosmetico, lo puedes borrar */
*{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    font-size: 14px;
}
body{
    background: #464646;
}
a{
    text-decoration: none;
    color: red;
}
.fr{
    float: right;
}
.fl, .votar{
    float: left;
}
.cf{
    clear: both;
}
.wrap{
    padding: 25px;
    margin: 0 auto;
    width: 385px;
    background: #F3F3F3;
    border-radius: 4px;
    margin-top: 70px;
    border: 1px solid #E0E0E0;
}
h1{
    margin-bottom: 20px;
    font-size: 21px;
    border-bottom: 1px solid #DDD;
    padding-bottom: 15px;
    text-align: center;
}
form > div{
    margin-bottom: 20px;
}
form .titulo{
    margin-right: 20px;
}
form label{
    display: block;
}
form input[type='text'], select{
    border: 1px solid #E0E0E0;
    padding: 6px;
    resize: none;
}
form input[type="submit"]{
    padding: 8px 16px;
    background: gray;
    border: 0;
    display: block;
    font-weight: bold;
    color: white;
    border-radius: 6px;
}
form input[type="submit"]:hover{
    background: #505050;
}
ul.votacion{
    margin-bottom: 25px;
    list-style: none;
}
.votacion li a{
    padding: 8px;
    background: #FCFCFC;
    border-radius: 5px;
    margin-bottom: 5px;
    color: gray;
    font-weight: bold;
    font-size: 16px;
    display: block;
}
.votacion li a:hover{
    color: black;
    background: white;
}
.votacion li span{
    margin-left: 10px;
}
.votacion .fl{
    margin-bottom: 5px;
}
.volver{
    display: block;
    padding-top: 15px;
    clear: both;
}
.votar{
    float: left;
}
.resultado{
    float: left;
    margin-left: 10px;
    margin-top: 7px;
    color: black;
}

1. SQL

Creamos una tala con el nombre encuestas con los siguientes campos: id, titulo y fecha. Aqui se almacenara los datos las encuestas como el titulo y la fecha que fue creada la encuestas, utilizaremos otra tabla para que almacene las opciones de las encuestas.

CREATE TABLE IF NOT EXISTS `encuestas` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`titulo` varchar(50) NOT NULL,
`fecha` date NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Ahora insertarmos unos datos de ejemplo en la tabla:

INSERT INTO `encuestas` (`id`, `titulo`, `fecha`)
VALUES (NULL ,  'Que os parecen los tutoriales de PHP?',
'2012-12-15');

Creamos otra tabla con el nombre opciones con los siguientes campos: id, id_encuesta, nombre y valor.
El campo de id_encuesta tendrá relación con el campo id de la tabla encuestas, en nombre ira el nombre y valor guardara el numero de votos que tendra la opcion respectiva.

CREATE TABLE IF NOT EXISTS `opciones` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `id_encuesta` int(11) NOT NULL,
  `nombre` varchar(50) NOT NULL,
  `valor` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Insertamos datos a la tabla opciones:

INSERT INTO  `opciones` (`id` ,`id_encuesta` ,`nombre` ,`valor`)
VALUES (NULL ,  '1',  'Muy Bueno',  '14')
, (NULL ,  '1',  'Bueno',  '6')
, (NULL ,  '1',  'Malo',  '2');

Fijaos que he definido id_encuesta con 1 y es porque quiero que estas opciones esten relacionadas con la encuestas que creamos anteriormente que llevaba el id de 1.

Si no entendisteis bien como vamos a trabajar las relaciones de las tablas, esta grafica te aclarará las dudas:

02. conexion.php

El tipico fichero PHP para guardar los datos de la conexión, nada del otro mundo:

<?php // datos para la conexion a mysql
define('DB_SERVER','localhost');
define('DB_NAME','tursos');
define('DB_USER','root');
define('DB_PASS','root');
 
$conex = mysqli_connect(DB_SERVER,DB_USER,DB_PASS);
mysqli_select_db($conex, DB_NAME);

03. index.php

Lo primero sera incluir al fichero de conexión, luego haremos una consulta a la base datos para que nos muestren los títulos de la tabla ‘encuestas’ los mismos que mostraremos como enlaces hacia las encuestas, estos enlaces llevaran el id de la encuestas en cuestión mediante GET (encuestas.php?id=x).

<?php
require('conexion.php');
$sql = "SELECT * FROM encuestas ORDER BY id DESC";
$req = mysqli_query($conex, $sql);
?>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Sistema de encuestas</title>
    <link rel="stylesheet" href="estilos.css">
</head>
<body>
    <div class="wrap">
        <h1>Encuestas</h1>
        <ul class="votacion index">
        <?php
            while($result = mysqli_fetch_object($req)){
                echo '<li><a href="encuesta.php?id='.$result->id.'">'.$result->titulo.'</a></li>';
            }
        ?>
        </ul>
        <a href="agregar.php">+ Agregar nueva encuesta</a>
    </div>
</body>
</html>

Nos debería ir quedando así:

04. encuesta.php

Linea 04: Si no existe la variable de URL se regresara a la pagina principal.
Linea 11: Si le dan a votar (el form de votacion ira abajo) y si han seleccionado una opcion se va a actualizar los datos del campo ‘valor’ de la tabla ‘opciones’:

<?php
require('conexion.php');
    $id = $_GET['id'];
    if(!isset($_GET['id'])){
        header('location: index.php');
    }
 
    if(isset($_POST['votar']))
    {
 
        if(isset($_POST['valor'])){
            $opciones = $_POST['valor'];
            $mod = mysqli_query($conex, "SELECT * FROM opciones WHERE id = ".$opciones);
            while($result = mysqli_fetch_object($mod)){
                $valor = $result->valor + 1; // obtenemos el valor de 'valor' y le añadimos 1 unidad
                mysqli_query($conex,"UPDATE opciones SET valor =  '".$valor."' WHERE id = ".$opciones); // luego ejecutamos el query SQL
            }
            header('location: resultado.php?id='.$id); // Por ultimo lo redireccionamos a la encuestas mostrando los resultados.
        }
    }
?>

Ahora la parte HTML donde ira el form de votacion, aqui vamos a generar una consulta a la base datos para que se muestren los datos de la tabla ‘encuestas’ con relación a la tabla ‘opciones’ como radiobuttons, partes de un form:

Linea 15: En esta linea haremos un query con INNER JOIN en el cual trabajaremos con las tablas ‘encuestas’ y ‘opciones’ donde a sera encuestas y b es opciones, aqui buscaremos filas donde a.id sea igual a b.encuesta_id, el valor de a.id que se comparara sera definido por $id, este valor lo obtuvimos al principio en el primer pedazo de código mediante GET.

Linea 18 y 27: Con el resultado del query hacemos un while donde mostraremos el titulo de la encuesta y luego en la linea 48 se muestran cada una de las opciones como input[type=’radio’], $aux es una variable auxiliar que nos ayuda a detener el bucle para que ciertos elementos se muestren solo una vez.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Sistema de encuestas</title>
    <link rel="stylesheet" href="estilos.css">
</head>
<body>
 
<div class="wrap">
 
<form action="" method="post">
<?php
$aux = 0;
$sql = "SELECT a.titulo as titulo, a.fecha as fecha, b.id as id, b.nombre as nombre, b.valor as valor FROM encuestas a INNER JOIN opciones b ON a.id = b.id_encuesta WHERE a.id = ".$id;
$req = mysqli_query($conex, $sql);
 
while($result = mysqli_fetch_object($req)){
 
    if($aux == 0){
        echo '<h1>'.$result->titulo.'</h1>';
 
        echo '<ul class="votacion">';
        $aux = 1;
    }
 
    echo '<li><label><input name="valor" type="radio" value="'.$result->id.'"><span>'.$result->nombre.'</span></label></li>';
 
}
    echo '</ul>'; 
 
    if(!isset($_POST['valor'])){
        echo "<div class='error'>Selecciona una opcion.</div>";
    }
 
    echo '<input name="votar" type="submit" value="Votar" class="votar">';
    echo '<a href="resultado.php?id='.$id.'" class="resultado">Ver Resultados</a>';
    echo '<a href="index.php" class="volver">← Volver</a>';
 
?>
 
</form>
</div>
 
</body>
</html>

Si todo salió bien, encuesta.php deberia verse asi:

05. resultado.php

Esta archivo es mas simple, aqui mostraremos los resultados de las encuestas de acuerdo al id obtenido por GET (resultado.php?id=x):
Linea 11: Para obtener el valor usamos SUM() para que nos resulte la suma total del valor en un solo numero:

<?php
 
require('conexion.php');
 
if(!isset($_GET['id'])){
    header('location: index.php');
}
 
$suma = 0;
$id = $_GET['id'];
$mod = mysqli_query($conex,"SELECT SUM(valor) as valor FROM opciones WHERE id_encuesta = ".$id);
while($result = mysqli_fetch_object($mod)){
    $suma = $result->valor;
}
 
?>

Luego mostramos los resultados con el mismo query con INNER JOIN que ya hemos usado anteriormente, esto nos mostrara cada opción en forma de div (.barra) al que le definimos el ancho en porcentaje usando una operación matemática:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Sistema de Encuestas</title>
    <link rel="stylesheet" href="estilos.css">
</head>
<body>
<div class="wrap">
<form action="" method="post">
<?php
$aux = 0;
$sql = "SELECT a.titulo as titulo, a.fecha as fecha, b.id as id, b.nombre as nombre, b.valor as valor FROM encuestas a INNER JOIN opciones b ON a.id = b.id_encuesta WHERE a.id = ".$id;
$req = mysqli_query($conex, $sql);
 
while($result = mysqli_fetch_object($req)){
    if($aux == 0){
            echo "<h1>".$result->titulo."</h1>";
            echo "<ul class='votacion'>";
        $aux = 1;
    }
    echo '<li><div class="fl">'.$result->nombre.'</div><div class="fr">Votos: '.$result->valor.'</div>';
    if($suma == 0){
        echo '<div class="barra cero" style="width:0%;"></div></li>';
    }else{
        echo '<div class="barra" style="width:'.($result->valor*100/$suma).'%;">'.round($result->valor*100/$suma).'%</div></li>';
    }
 
}
echo '</ul>'; 
 
if(isset($aux)){
    echo '<span class="fr">Total: '.$suma.'</span>';
    echo '<a href="encuesta.php?id='.$id.'"" class="volver">← Volver</a>';
}
 
?>
</ul>
</form>
</div>
</body>
</html>

Si llegaste hasta aqui resultado.php debería lucir similar a esto:

06. agregar.php

En este fichero es probablemente el mas complejo de todos, manejaremos el proceso PHP arriba y el formulario abajo, por ello para entender esta parte es necesario ver el código completo (leer comentarios):

<?php require('conexion.php');
$cont = 0;
 
$titulo = ''; if(isset($_POST['titulo'])){ $titulo = trim($_POST['titulo']); } // definimos $titulo para evitar errores, y guardamos su valor por el ingresado.
 
if(isset($_POST['enviar'])){
     if($titulo != ""){
        $num = $_POST['opciones']; // este valor lo vamos a obtener de lo que el usuario ingrese como numero de opciones al crear la encuesta
        $fecha = date('Y-m-d');
 
        $sql= "INSERT INTO `encuestas` (`id` ,`titulo` ,`fecha`) VALUES (NULL ,  '$titulo', '$fecha');"; // si han ingresado si quiera un titulo insertamos esta encuesta en la tabla
        mysqli_query($conex, $sql);
 
        $sql = "SELECT MAX(id) as id FROM encuestas"; // ahora obtenemos el id de la ultima fila,
                                                      // la que acabamos de ingresar,
                                                      // esto lo hacemos para poder asociarle las opciones
        $req =  mysqli_query($conex, $sql);
 
        while($result = mysqli_fetch_object($req)){
            $id_encuesta = $result->id;  // con el resultado obtenido hacemos un bucle y definimos los resultados como id_encuesta.
        }
 
        $sql = "INSERT INTO  `opciones` (`id` ,`id_encuesta` ,`nombre` ,`valor`) VALUES "; // En esta parte estamos armando un query SQL dinamico el cual sera modificado de acuerdo a lo que el usuario ingrese en el formulario.
        for($i=1;$i<=$num;$i++){
            $opcnativa = trim($_POST['opc'.$i]); // obtenemos el nombre de cada opcion indivudalmente.
            if($opcnativa != ""){
                $sql .= "(NULL ,  '$id_encuesta',  '$opcnativa',  '0')"; // el id de la opcion ira null para que se ponga automaticamente, en id_encuesta pues ira el id de la encuesta que acabamos de crear, en 'nombre' ira el nombre de la opcion y valor ira 0, puesto que es una nueva opcion sin votos, esto se repetira con todas las opciones que el usuario haya definido.
                $cont++;
            }
            if($i == $num){
                $sql .= ";"; // si es que se llega al final, termina la consulta
            }else{
                $sql .= ", "; // sino se pone una , y se continua.
            }
        }
 
        if($cont < 2){ // si el usuario no definio ninguna opcion, se elimina la encuesta recien creada, esto es poco probable que suceda ya que la definicion de opciones la haremos con un select, y aqui se seleccionara el valor de 2 por defecto.
            $sql = "DELETE FROM `encuestas` WHERE id = ".$id_encuesta;
            echo "<div class='error'>Tiene que llevar por lo menos 2 opciones.</div>";
        }else{
            header('location: index.php'); // por ultimo si todo salio bien, redireccionamos al index para que el usuario vea su encuesta recien creada.
        }
        mysqli_query($conex, $sql); // y ejecutamos el query
    }
}
?>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Sistema de Encuestas</title>
    <link rel="stylesheet" href="estilos.css">
</head>
<body>
 
<div class="wrap">
    <h1>Agregar Encuesta</h1>
    <form action="" method="post">
 
    <div class="fl titulo">
        <label>Titulo:</label>
        <input name="titulo" type="text" value="<?php echo $titulo; ?>" size="26">
    </div>
    <?php
        // esto es simplemente un formulario, pero aqui hacemos una condicion, identificamos si se ha definido un numero de opciones, si es si hacemos un bucle, si es no mostramos el select para definir un numero de opciones, como es obvio por defecto se mostrara el bucle:
    if(isset($_POST['opc'])){
        $num = $_POST['opciones']; // guardamos el valor del numero de opciones
        for($i=1;$i<=$num;$i++){ // hacemos el bucle mostrando los campos respectivos.
    ?>
    <div class="cf">
        <label>Opcion <?php echo $i; ?>: </label>
        <input name="opc<?php echo $i; ?>" type="text" size="43">
    </div>
    <?php } // aqui termina el bucle ?>
    <div class="cf">
        <input name="enviar" type="submit" value="Enviar">
        <input name="opciones" type="hidden" value="<?php echo $num; // le pasamos el valor de num al proceso del formulario mediante un campo oculto. ?>">
        <input name="cont" type="hidden" value="<?php echo cont; ?>">
    </div>
    <?php }else{ // sino se ha definido nro de opciones: ?>
    <div class="fl">
        <label>Nº de opciones:</label>
        <select name="opciones">
            <?php for($i=2;$i<=20;$i++){ // esto es un loop simple, solo para ahorrarnos trabajo, este select tendra de 2 a 20 opciones, si deseas cambiarlo lo puedes hacer aqui. ?>
            <option value="<?php echo $i; ?>"><?php echo $i; ?></option>
            <?php } ?>
        </select>
    </div>
 
    <div class="cf">
        <input name="opc" type="submit" value="Continuar">
    </div>
 
      <?php } // Sino se han definido opciones, que en vez de salir el boton de Enviar, salga uno que sea Continuar. ?>
    <a href="index.php" class="volver">← Volver</a>
    </form>
    </div>
</body>
</html>

Por ultimo, agregar.php en sus dos fases:

Posibles mejoras

Dentro de las posibles mejoras que se le podemos hacer al sistema, esta la creación de nuevas encuestas (agregar.php) detrás de un login, otra adición seria la de impedir votaciones consecutivas bloqueando la IP o por cookies.

Si no entendiste alguna parte o te sale algún error, házmela saber en los comentarios y recuerda que puedes bajarte el código fuente desde este enlace.

La entrada Como Hacer un Sistema de Encuestas con PHP y MySQL se publicó primero en Tursos.

La función date() de PHP nos sirve para mostrar la fecha actual (obtenida del ordenador del cliente), pero el problema es que esta solo se muestra en inglés, esto no es un problema si queremos que el formato de la fecha sea solo en numeros (10-11-2012), sin embargo en ocasiones queremos mostrarla de forma mas elaborada por ej: Sabado, 10 de Noviembre de 2012, es alli donde viene el problema.

Para solucionarlo vamos a usar un método que considero es el mas practico y seguro que funcione, lo que haremos sera guardar los valores en variables, pasarlos por una condición y por ultimo reemplazarlos por su valor traducido.

Dividimos cada elemento de la fecha y lo guardamos en variables:

$dia=date("l"); // Saturday

$mes=date("F"); // November

$ano=date("Y"); // 2012

En los comentarios esta lo que resultaria en cada caso (si no entiendes esos parámetros te recomiendo leas la documentación), ahora lo que haremos sera de acuerdo al resultado que obtengamos mediante una condición reemplazar ese valor de la variable:

$dia = date("l");

if ($dia == "Monday") $dia = "Lunes";
if ($dia == "Tuesday") $dia = "Martes";
if ($dia == "Wednesday") $dia = "Miércoles";
if ($dia == "Thursday") $dia = "Jueves";
if ($dia == "Friday") $dia = "Viernes";
if ($dia == "Saturday") $dia = "Sabado";
if ($dia == "Sunday") $dia = "Domingo";

$mes=date("F");

if ($mes == "January") $mes = "Enero";
if ($mes == "February") $mes = "Febrero";
if ($mes == "March") $mes = "Marzo";
if ($mes == "April") $mes = "Abril";
if ($mes == "May") $mes = "Mayo";
if ($mes == "June") $mes = "Junio";
if ($mes == "July") $mes = "Julio";
if ($mes == "August") $mes = "Agosto";
if ($mes == "September") $mes = "Setiembre";
if ($mes == "October") $mes = "Octubre";
if ($mes == "November") $mes = "Noviembre";
if ($mes == "December") $mes = "Diciembre";

$ano = date("Y");

Algo mas que añadir seria una variable mas a la cual llamaremos $dia2 esta almacenara el valor del dia pero en numeros y no sera traducida ya que no es necesario:

$dia2 = date("d");

Ya teniendo esto podemos armar nuestra fecha como nos plazca:

echo "$dia, $dia2 de $mes de $ano";

Lo que resultaria en:

Sábado, 10 de Noviembre de 2012

El mayor inconveniente que le veo a esta solución es el tamaño del código, por eso te recomendaria cuando lo uses guardarlo en un archivo aparte y llamarlo mediante un include o un require.

Porque no usar setlocale + strftime

El problema de usar este metodo es que setlocale utiliza un recurso del sistema operativo, el cual puede variar de acuerdo al OS que este usando el cliente, por consiguiente la funcion podria no funcionar siempre.

Espero te haya servido este pequeño tutorial, puedes bajarte el código fuente desde este enlace y no olvides que si tienes alguna pregunta o duda hazmela saber en los comentarios que con gusto te asistiré en lo que pueda.

La entrada Traducir la Función date() de PHP al Español se publicó primero en Tursos.

En esta parte veremos como almacenar los valores ingresados por el usuario en nuestro formulario y almacenarlos en una base de datos MySQL usando PHP para ello, vamos a utilizar el mismo codigo del tutorial anterior.

1. Antes de empezar

Ya que vamos a trabajar con PHP, es necesario que tengas instalado en tu sistema un servidor local que soporte PHP.

CREATE TABLE `cf` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nombre` varchar(255) NOT NULL,
  `email` varchar(255) NOT NULL,
  `asunto` varchar(255) NOT NULL,
  `mensaje` text NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Ahora vamos a crear un nuevo archivo donde se van almacenar los datos de conexión a la base de datos, a este le pondremos conexion.php:

El contenido de este archivo tiene que ser asi:

<?php

$host = 'localhost';
$usuario = 'root';
$pass = 'root';

$conn = mysql_connect($host, $usuario, $pass) or die ('Error conectando a la base de datos');

$bdnombre = 'cf';
mysql_select_db($bdnombre);

Allí definiremos las credenciales de conexión a MySQL, en caso de trabajar en un servidor local casi siempre son esos (localhost, root, root).

2. index.php

Abrimos este archivo y modificamos la parte de PHP, lo primero sera incluir a conexion.php, en esta ocasion vamos a usar require, ya que es necesario que ese archivo este presente:

<?php
        require("conexion.php");

        if(isset($_POST['boton'])){
            if($_POST['nombre'] == ''){
                $error1 = '<span class="error">Ingrese su nombre</span>';
            }else if($_POST['email'] == '' or !preg_match("/^[a-zA-Z0-9_\.\-]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$/",$_POST['email'])){
                $error2 = '<span class="error">Ingrese un email correcto</span>';
            }else if($_POST['asunto'] == ''){
                $error3 = '<span class="error">Ingrese un asunto</span>';
            }else if($_POST['mensaje'] == ''){
                $error4 = '<span class="error">Ingrese un mensaje</span>';
            }else{
                $dest = "tu@email.com"; //Email de destino
                $nombre = $_POST['nombre'];
                $email = $_POST['email'];
                $asunto = $_POST['asunto']; //Asunto
                $cuerpo = $_POST['mensaje']; //Cuerpo del mensaje
                //Cabeceras del correo
                $headers = "From: $nombre <$email>\r\n"; //Quien envia?
                $headers .= "X-Mailer: PHP5\n";
                $headers .= 'MIME-Version: 1.0' . "\n";
                $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n"; //

                if(mail($dest,$asunto,$cuerpo,$headers)){
                    $result = '<div class="result_ok">Email enviado correctamente <img src="https://tursos.com/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley"> </div>';
                    // si el envio fue exitoso reseteamos lo que el usuario escribio:
                    $_POST['nombre'] = '';
                    $_POST['email'] = '';
                    $_POST['asunto'] = '';
                    $_POST['mensaje'] = '';

                }else{
                    $result = '<div class="result_fail">Hubo un error al enviar el mensaje <img src="https://tursos.com/wp-includes/images/smilies/icon_sad.gif" alt=":(" class="wp-smiley"> </div>';

                }
            }
        }
    ?>

Ahora nos movemos hasta la linea 34 luego de la parte donde se hace la condicional si envio o no el correo, alli añadimos un salto de linea y ponemos dos lineas en una se va a guardar la consulta SQL que se va ejecutar y la otra va a ir la funcion que la ejecute:

if(mail($dest,$asunto,$cuerpo,$headers)){

$sql = "INSERT INTO `cf` (`nombre`,`email`,`asunto`,`mensaje`) VALUES ('{$_POST['nombre']}','{$_POST['email']}','{$_POST['asunto']}','{$_POST['mensaje']}')"; 
mysql_query($sql) or die(mysql_error()); 

$result = '<div class="result_ok">Email enviado correctamente :)</div>';    
// si el envio fue exitoso reseteamos lo que el usuario escribio:
$_POST['nombre'] = '';
$_POST['email'] = '';
$_POST['asunto'] = '';
$_POST['mensaje'] = '';

}else{
    $result = '<div class="result_fail">Hubo un error al enviar el mensaje :(</div>';   
}

Y con eso ya tendríamos nuestro formulario funcionando, recuerda que si modificaste los campos haz de hacerlo tambien en la consulta, por ejemplo:

$sql = "INSERT INTO `cf` (`nombre`,`email`,`asunto`,`mensaje`,`campo_z`,`campo_x`,`campo_y`) 
VALUES ('{$_POST['nombre']}','{$_POST['email']}','{$_POST['asunto']}','{$_POST['mensaje']}','{$_POST['campo_z']}','{$_POST['campo_x']}','{$_POST['campo_y']}')";

O en caso tengas el los valores guardados/concatenados en variables:

$sql = "INSERT INTO `cf` (`nombre`,`email`,`asunto`,`mensaje`) 
VALUES ('$nombre','$email','$asunto','$mensaje','$body')";

3. Mejoras de seguridad

Como vamos a trabajar con bases de datos es recomendable asegurarnos que no nos inyecten el formulario, para eso vamos a usar mysql_real_escape_string antes de la consulta mediante un foreach, de esta forma lo hara en todas las variables POST que se hayan ingresado:

if(mail($dest,$asunto,$cuerpo,$headers)){

    foreach($_POST AS $key => $value) { 
        $_POST[$key] = mysql_real_escape_string($value); 
    } 

    $sql = "INSERT INTO `cf` (`nombre`,`email`,`asunto`,`mensaje`) VALUES ('{$_POST['nombre']}','{$_POST['email']}','{$_POST['asunto']}','{$_POST['mensaje']}')"; 
    mysql_query($sql) or die(mysql_error()); 

    $result = '<div class="result_ok">Email enviado correctamente :)</div>';    
    // si el envio fue exitoso reseteamos lo que el usuario escribio:
    $_POST['nombre'] = '';
    $_POST['email'] = '';
    $_POST['asunto'] = '';
    $_POST['mensaje'] = '';

} else {
    $result = '<div class="result_fail">Hubo un error al enviar el mensaje :(</div>';   
}

4. Código Final

 <?php
    require('conexion.php'); 

    if(isset($_POST['boton'])){
        if($_POST['nombre'] == ''){
            $error1 = '<span class="error">Ingrese su nombre</span>';
        }else if($_POST['email'] == '' or !preg_match("/^[a-zA-Z0-9_\.\-]+@[a-zA-Z0-9\-]+\.[a-zA-Z0-9\-\.]+$/",$_POST['email'])){
            $error2 = '<span class="error">Ingrese un email correcto</span>';
        }else if($_POST['asunto'] == ''){
            $error3 = '<span class="error">Ingrese un asunto</span>';
        }else if($_POST['mensaje'] == ''){
            $error4 = '<span class="error">Ingrese un mensaje</span>';
        }else{
            $dest = "tu@email.com"; //Email de destino
            $nombre = $_POST['nombre'];
            $email = $_POST['email'];
            $asunto = $_POST['asunto']; //Asunto
            $cuerpo = $_POST['mensaje']; //Cuerpo del mensaje
            //Cabeceras del correo
            $headers = "From: $nombre <$email>\r\n"; //Quien envia?
            $headers .= "X-Mailer: PHP5\n";
            $headers .= 'MIME-Version: 1.0' . "\n";
            $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n"; //

            if(mail($dest,$asunto,$cuerpo,$headers)){

                foreach($_POST AS $key => $value) {
                    $_POST[$key] = mysql_real_escape_string($value);
                } 

                $sql = "INSERT INTO `cf` (`nombre`,`email`,`asunto`,`mensaje`) VALUES ('{$_POST['nombre']}','{$_POST['email']}','{$_POST['asunto']}','{$_POST['mensaje']}')";
                mysql_query($sql) or die(mysql_error()); 

                $result = '<div class="result_ok">Email enviado correctamente <img src="https://tursos.com/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley"> </div>';
                // si el envio fue exitoso reseteamos lo que el usuario escribio:
                $_POST['nombre'] = '';
                $_POST['email'] = '';
                $_POST['asunto'] = '';
                $_POST['mensaje'] = '';

            }else{
                $result = '<div class="result_fail">Hubo un error al enviar el mensaje <img src="https://tursos.com/wp-includes/images/smilies/icon_sad.gif" alt=":(" class="wp-smiley"> </div>';
            }
        }
    }
?>
<html>
    <head>
        <title>Contacto</title>
        <link rel='stylesheet' href='estilos.css'>
        <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'></script>
        <script src='funciones.js'></script>
    </head>
    <body>
        <form class='contacto' method='POST' action=''>
            <div><label>Tu Nombre:</label><input type='text' class='nombre' name='nombre' value='<?php echo $_POST['nombre']; ?>'><?php echo $error1 ?></div>
            <div><label>Tu Email:</label><input type='text' class='email' name='email' value='<?php echo $_POST['email']; ?>'><?php echo $error2 ?></div>
            <div><label>Asunto:</label><input type='text' class='asunto' name='asunto' value='<?php echo $_POST['asunto']; ?>'><?php echo $error3 ?></div>
            <div><label>Mensaje:</label><textarea rows='6' class='mensaje' name='mensaje'><?php echo $_POST['mensaje']; ?></textarea><?php echo $error4 ?></div>
            <div><input type='submit' value='Envia Mensaje' class='boton' name='boton'></div>
            <?php echo $result; ?>
        </form>
    </body>
</html>

Con eso hemos terminado esta ultima parte del formulario (por ahora), recuerda que puedes descargarte el código fuente en este enlace.

Si no entendiste una parte o tienes alguna duda, házmela saber en los comentarios.

La entrada Como Hacer un Formulario de Contacto IV: Almacenar en Base de Datos MySQL con PHP se publicó primero en Tursos.