martes, 24 de septiembre de 2013

Pequeña introducción a PHP y formulario de contacto

PHP es un lenguaje de scripting que permite la generación dinámica de contenidos en un servidor web. El significado de sus siglas es Page HyperText Preprocessor. Entre sus principales características cabe destacar su potencia, su alto rendimiento, su facilidad de aprendizaje y su escasez de consumo de recursos.

El código PHP puede incluirse dentro del código html de la pagina. Para delimitar la seccion de codigo PHP podemos hacerlo de varias formas:

-Usando las etiquetas <?php y <?
-Usando las etiquetas <? y ?>
-Mediante <script languaje="php"> </script>

El funcionamiento de las páginas en PHP alojadas en un servidor es el siguiente:

-El navegador del cliente solicita el documento PHP.

-Llega la solicitud del servidor y el servidor localiza el documento, lanza el intérprete de PHP y ejecuta todo su codigo.

-Una vez ejecutado el código se genera el resultado en HTML y lo devuelve al servidor para que lo transfiera al cliente.

-El servidor transfiere el resultado en HTML y es mostrado en el navegador del cliente.

Variables

Una variable podría definirse como una posición de memoria creada para introducir o asignar cualquier valor o dato. Durante la ejecución del script el valor de la variable puede "variar"(valga la redundancia) tanto de tipo como de valor. En PHP (al igual que en JavaScript) no hace falta declarar la variable ya que simplemente anteponiendo el caracter $ al nombre de la variable estamos indicando que es una variable.

Otro hecho que cabe destacar a la hora de programar en PHP y la declaración de variables es que PHP es un lenguaje "CASE SENSITIVE" es decir que diferencia entre mayúsculas y minúsculas y debido a esta razón no sería lo mismo $miVariable=valor; que $MiVaRiABle=valor; ya que PHP lo interpretaría como dos variables completamente diferentes.

Los tipos de datos posibles que puede almacenar una variable son los siguientes :

Integer Números enteros positivos y negativos
Double Números decimales o de coma flotante
String Cadenas de texto
Boolean Valores True o False
Array Tipo especial de colección de valores
Object Tipo especial de dato complejo
En capítulos posteriores daremos cabida a los dos últimos tipos de datos(array y object) que aqui no han sido explicados ni comentados apenas.

Convertir tipos

PHP es un lenguaje que realiza la conversión de tipos en función de los operandos y del operador. De esta forma si intentamos sumar la cadena '10' y el número 20 la acción que realizaría sería convertir la primera variable a numérica y de esa forma podría sumar 10+20=30.

Aparte de que PHP en algunos casos realiza la conversión existen dos funciones especiales del propio lenguaje las cuales nos permiten saber el tipo de variable que estamos usando y también pueden convertir el tipo de variable:

gettype() Recibe el tipo de variable que es
settype($variable,'tipo variable') Transforma el tipo de variable del modo actual a el modo que le introduzcamos.

Variables características de PHP

argv Array de argumentos pasados en la ejecución del script.
$_SERVER['argc'] Número de parametros pasados al script en su ejecución.
$_SERVER['PHP_SELF'] Nombre del script que se está ejecutando
$_COOKIE Array asociativo de pares (clave,valor) pasados a través de cookies
$_GET Array asociativo de pares (clave,valor) pasados a través de GET
$_POST Array asociativo de pares (clave,valor) pasados a través de POST
$_FILES Array asociativo que contiene información de los ficheros recibidos mediante POST
$_ENV Array asociativo de pares (clave,valor) del entorno
$_SERVER Array asociativo de pares (clave,valor) del servidor
$_SESSION Array asociativo de pares (clave,valor) de sesion
Constantes

Son valores que se van a mantener constantes a lo largo de la ejecución del script y que posiblemente queramos usar a lo largo del script un gran número de veces. Para ello usamos la siguiente sintaxis:

<? define("nombre de la constante", valor);  ?>

Mi primer script PHP


Una vez que ya tenemos instalados PHP y MySQL , y el servidor Apache configurado para usarlos, podemos comenzar a escribir nuestro primer script en PHP.

Ejemplo script php

<html> 
<body> 
<?php 
$myvar = "Hola. Este es mi primer script en PHP \n"; 
//Esto es un comentario 
es mi primer script en PHP n"; 
//Esto es un comentario 
echo $myvar; 
?> 
</body> 
</html>

Una vez escrito esto lo salvamos en un fichero con la extensión php, y lo colocamos en nuestro servidor, http://mi_servidor/php/test.php . Ahora si ponemos esta URL en nuestro navegador veremos una línea con el texto "Hola. Este es mi primer script en PHP" .

Lo primero que apreciamos en el script son sus delimitadores. En la primera línea del script vemos <?php que nos indica que comienza un script en PHP, y en la última colocamos ?> para indicar el final del script. Hay que destacar que todas las líneas que se encuentre entre estos delimitadores deben acabar en punto y coma , excepto las sentencias de control (if, swicht, while, etc.).

Como en toda programación, es importante poner muchos comentarios, para lo cual si queremos comentar una sola línea tenemos que poner al principio de la línea // , si lo que queremos es comentar varias utilizaremos los delimitadores /* - */ .

Para que el servidor envié texto utilizaremos la instrucción echo , aunque también podemos utilizar printf de uso similar al del C o Perl .

Finalmente, vemos que la palabra myvar comienza con el signo dólar ( $ ) . Este símbolo le indica a PHP que es una variable. Nosotros le hemos asignado un texto a esta variable, pero también pueden contener números o tablas (arrays). Es importante recordar que todas las variables comienza con el signo dólar . También habréis observado que el texto que le asignamos a la variable termina con \n , esto no se imprime sirve para indicarle al navegador una nueva línea.

Script para enviar e-mail

El código PHP, necesario para esto, se compone básicamente de las siguientes partes:

  • Obtener la información del formulario
  • Preparar el texto del mensaje
  • Definir la cabecera del e-mail
  • Enviar el e-mail


En PHP, podemos obtener la información que nos envía otra pagina mediante POST, que es un sistema de envio de datos. La orden que utilizamos para obtener la información se llama $_POST.

Tal como se comenta al crear el formulario  HTML, cada campo tiene un nombre que lo identifica. Los campos son: nombre, empresa, mail, mensaje

El código completo de este archivo send.php es el siguiente:

El "." suma dos cadenas o strings. Las cadenas son una sucesión de caracteres entre comillas simples o dobles.

El símbolo ".=" significa que le agrego a una variable $header en este caso, el resultado de lo que tenía antes MAS lo que está del otro lado del signo ".="


< ?php
$nombre = $_POST['nombre'];
$mail = $_POST['mail'];
$empresa = $_POST['empresa'];

$header = 'From: ' . $mail . " \r\n";
$header .= "X-Mailer: PHP/" . phpversion() . " \r\n";
$header .= "Mime-Version: 1.0 \r\n";
$header .= "Content-Type: text/plain";

$mensaje = "Este mensaje fue enviado por " . $nombre . ", de la empresa " . $empresa . " \r\n";
$mensaje .= "Su e-mail es: " . $mail . " \r\n";
$mensaje .= "Mensaje: " . $_POST['mensaje'] . " \r\n";
$mensaje .= "Enviado el " . date('d/m/Y', time());

$para = 'info@tusitio.com';
$asunto = 'Contacto desde Taller Webmaster';

mail($para, $asunto, utf8_decode($mensaje), $header);

echo '&estatus=ok&';
?>


Como dijimos, por medio de $_POST, obtenemos los datos enviados desde el formulario, estos datos se guardan en variables, que son posiciones de memoria que mantendrán la información mientras la procesamos. Es así entonces que tomamos el campo $_POST['nombre'] en la variable $nombre, y lo mismo con $mail y $empresa con los respectivos campos $_POST['mail'] y $_POST['empresa'].

Todo e-mail, es conveniente que tenga una cabecera con los datos mínimos para identificar, quien lo envía, el programa que lo genero, el formato de los datos del e-mail, etc. Esto es lo que generamos en las siguientes 4 líneas de nuestro código, o sea la Cabecera del e-mail., que la guardamos en la variable $header.

La primer línea arma el remitente, para esto se escribirá From: emailremitente@servidor.com que obviamente no es ese que menciono, esto es solo un ejemplo y si prestamos atención lo que dice el código es: From: $mail, esto significa que $mail, como es una variable tomara ahí el e-mail. ingresado en nuestro formulario.

La sigueinte línea X-Mailer, indica el programa usado para envía este e-mail., siempre usen lo mismo tal como esta ahí, cuando usen lenguaje PHP. Las líneas 3 y 4 indican el formato del e-mail., esas también usenlas iguales copien eso directamente.

Deben notar que al final de cada línea hay un " \r\n", esto indica un Salto de Línea, es simplemente para que lo que viene luego de ese código siga en el renglón de abajo.

Bien, la parte mas importante de este ejemplo es la del mensaje mismo, y es lo que sigue y se forma en la variable $mensaje, ahí se escribe un texto que suma el contenido de $nombre y $empresa, para armar una frase coherente tipo así: "Este mensaje fue enviado por José Pérez, de la empresa Empresa S.A." y salta a la siguiente línea y abajo escribe: "Su e-mail es: joseperez@susitio.com", salta un renglón y abajo escribe: "Mensaje: todo el texto que ingresamos del mensaje", completando eso, abajo del renglón, con la fecha de envio.

Las siguientes líneas son el destinatario, que se almacena en la variable $para y el asunto que se guarda en la variable $asunto. Estos dos renglones ustedes pueden personalizarlos a gusto según el caso.

Por ultimo se ejecuta la orden PHP, que permite el envio del mensaje, esta orden se llama mail y se le debe indicar de esta forma y en este orden:

mail(destinatario, asunto, mensaje, cabecera)

Que como vemos y como tuvimos la precaución de guardar todo en variables, sera muy sencillo hacer la línea tal como esta ahí, de la siguiente manera:

mail($para, $asunto, utf8_decode($mensaje), $header);

Por ultimo lo que se escribe es un echo "&estatus=ok&", que en el formulario flash se utiliza para saber si el envio fue correcto.

En nuestro ejemplo de Formulario HTML, podemos sustituir eso con un mensaje de éxito tipo: echo "Mensaje enviado correctamente", en lugar de echo "&estatus=ok&"




viernes, 20 de septiembre de 2013

Formularios HTML

Un formulario puede insertarse en un documento HTML a través del elemento HTML form que actuará como contenedor para todos los elementos de entrada. Toda la información recolectada por un formulario puede ser enviada a un agente procesador (un archivo conteniendo un script hecho especialmente para procesar esta información) que usualmente va especificado en el atributos "action". Lo que el agente procesador haga con la información y cómo la maneje es un tema que no será tratado en este sitio ya que no pertenece al estándar HTML. Para manejar la información de un formulario debes usar un script del lado servidor.

También puedes especificar cómo la información será enviada en el valor del atributo "method": "post" (los datos del formulario son adjuntados al cuerpo del mismo) ó "get" (los datos del formulario son adjuntados a la URL). Se supone que el agente procesador sabe cuál es el método de envío del formulario.

De este modo, un formulario simple puede tener la siguiente declaración:

<form method="post" action="handler.php">
...Controles...
</form>

Elementos de entrada

La mayoría de los controles de entrada son visuales y pueden interactuar con el usuario. Su uso depende del tipo de control y también del tipo de información que pueden recolectar. Los elementos de entrada de un formulario pueden ser definidos mediante el uso de cuatro elementos: 

  • el elemento HTML input
  • el elemento HTML button
  • el elemento HTML select 
  • el elemento HTML textarea.


Como regla general para todos los controles, el atributo "name" identificará la información para el agente procesados, y su valor dependerá de la naturaleza del control (algunas veces, como en las casillas de verificación o botones radio, será el contenido del atributo "value").

Entrada textual

Existen tres tipos de entrada textual que pueden recolectar información.

Entrada de línea 

Este control recolecta información textual en una sola línea, lo que significa que el usuario no podrá utilizar la tecla "enter" para ir a la siguiente línea (en la mayoría de los formularios, la tecla "enter" presionada en uno de estos campos, envía el formulario que lo contiene).

Este control es insertado en documentos HTML usando el tag HTML input con el valor "text" en su atributo "type". El valor inicial, mostrado cuando la página se carga, puede ser definido usando el atributo "value".

Código
<form method="post" action="agente.php">
Ingresa un texto: <input name="ingresatexto" type="text" value="Por favor, ingresa aquí" />
</form>
Vista
Ingresa un texto: 

Entradas de password

Este control actúa exactamente como el de entrada de línea con la excepción de que "esconde" los caracteres ingresados mostrándolos como puntos o asteriscos para evitar que los usuarios ven su contenido.

Es definido utilizando el valor "pass" en el atributo "type", y su valor inicial puede ser definido usando el atributo "value". Es comúnmente usado para el ingreso de contraseñas.

Código
<form method="post" action="agente.php">
Ingresa tu contraseña: <input name="contrasena" type="password" value="123456" />
</form>
Vista
Ingresa tu contraseña: 

Entrada de multilínea

Este control permite a los usuarios ingresar texto en una o más líneas. se inserta utilizando el tag HTML textarea y puede ser usado para recolectar reportes, comentarios, cartas, etc. En este tag, el contenido será el texto inicial.

Código
<form method="post" action="agente.php">
Ingresa tus comentarios:<br /><textarea name="comentarios" rows="2" cols="30">...Tus comentarios aquí...</textarea>
</form>
Vista
Ingresa tus comentarios:


Nota que los tributos "rows" y "cols" establecen las dimensiones de la caja de texto.
El valor pasado al agente procesador será el texto ingresado, es decir, el contenido de la caja de texto.

Opciones

Los autores pueden también dejar que sus visitantes elijan opciones preestablecidas de una lista. Esto puede lograrse usando uno de los tres controles siguientes, que pueden construir diferentes tipos de listas de opciones.

Casillas de verificación

Una casilla de verificación es una opción simple que puede tomar uno de dos valores: "marcado" ó "no marcado" ("checked" ó "unchecked"). Las casillas de verificación pueden ser agrupadas visualmente formando listas de opciones, pero cada una de ellas es tratada individualmente.

Este control es insertado mediante el tag HTML input con el valor "checkbox" en su atributo "type". Inicialmente, la casilla aparece sin marcar a menos que lo especifique de otra forma usando el atributo booleano (verdadero o false) "checked". Recuerda, que para lograr un código correcto en XHTML necesitas definir al atributo booleano con sus nombres como valores (por ejemplo, checked="checked").

Código
<form method="post" action="agente.php">
Selecciona tus intereses:<br />
<input name="cbipeliculas" type="checkbox" />Películas<br />
<input name="cbilibros" type="checkbox" checked="checked" />Libros<br />
<input name="cbiinternet" type="checkbox" />Internet
</form>
Vista
Selecciona tus intereses:
Películas
Libros
Internet

En este caso, el valor pasado será booleano y representará el estado de la opción (marcado o no marcado). Dependiendo del agente procesador puede ser "on/off", "checked/unchecked", "true/false", etc.

Botones radio

Los botones radio trabajan de la misma forma que las casillas de verificación con una pequeña diferencia: los botones radio que comparte el mismo nombre conforman un grupo de opciones donde el usuario no puede seleccionar más de una a la vez. Esto significa que cuando un usuario elige una opción, las demás son automáticamente deseleccionadas.

El valor inicial para el grupo depende del navegador (la mayorñia muestra todos los controles sin marcar). Esto puede ser cambiado usando el atributo booleano "checked".

Código
<form method="post" action="agente.php">
Selecciona tu actividad favorita:<br />
<input name="intereses" type="radio" value="rbipeliculas" />Películas<br />
<input name="intereses" type="radio" value="rbilibros" />Libros<br />
<input name="intereses" type="radio" value="rbiinternet" checked="checked" />Internet
</form>
Vista
Selecciona tu actividad favorita:
Películas
Libros
Internet

Para botones radio el valor pasado al agente procesador es el contenido del atributo "value" de la opción seleccionada, lo que significa que una lista con muchos botones radio solo pasará un valor.

Listas

Estas listas pueden ser construídas utilizando tres elementos: el elemento HTML select (contenedor principal), el elemento HTML option (opción simple) y el elemento HTML optgroup (grupo de opciones). El último elemento es el único prescindible para construir este tipo de listas.

Los controles de lista pueden ser usadas para recolectar información al igual que los botones radio (sólo una opción) o como casillas de verificación (múltiples opciones), dependiendo de la presencia del atributo booleano "multiple". Como en los controles anteriores, el valor inicial de los elementos HTML option puede ser establecido a "seleccionado" usando el atributo booleano "selected".

Código
<form method="post" action="agente.php">
Elije solo una opción, como en los botones radio:
<select name="entradalista">
<optgroup label="Entradas textuales">
<option>Entrada de línea</option>
<option selected="selected">Entrada de contraseña</option>
<option>Entrada multi-línea</option>
</optgroup>
<optgroup label="Opciones">
<option>Casillas de verificación</option>
<option>Botones radio</option>
<option>Listas</option>
</optgroup>
</select>
<br />
Elije tantas opciones como quieras, como con casillas de verificación (manteniendo presionada la tecla "Ctrl"):<br />
<select name="entradalista[]" multiple="multiple">
<optgroup label="Entradas textuales">
<option>Entrada de línea</option>
<option>Entrada de contraseña</option>
<option>Entrada multi-línea</option>
</optgroup>
<optgroup label="Opciones">
<option selected="selected">Casillas de verificación</option>
<option>Botones radio</option>
<option>Listas</option>
</optgroup>
</select>
</form>
Vista
Elije solo una opción, como en los botones radio: 
Elije tantas opciones como quieras, como con casillas de verificación (manteniendo presionada la tecla "Ctrl"):

Para la primera lista sin el atributo "multiple", el valor pasado al agente procesador será la opción seleccionada, pero para el segundo ejemplo el valor pasado será un arreglo (array) con los valores de las opciones seleccionadas. Es por esto que, para listas con el atributo "multiple" presente, debes agregar los corchetes("[]") al final del nombre del tag HTML select. El valor individual pasado en ambos casos es el contenido del atributo "value" si el mismo está presente, y el contenido del elemento si no (de las opciones seleccionadas).

Botones

Un botón es un dispositivo primordialmente diseñado para realizar una acción con el formulario que lo contenga. De echo, existen dos tipos básicos de botones: para enviar el formulario y para reestablecerlo (devuelve todos los campos a sus valores iniciales). Existe sólo un tipo más de botón que no posee una acción predefinida (la misma debe ser especificada con un lenguage del lado cliente).

Los botones pueden insertarse a través del tag HTML input (botones para enviar y reestabler y botones de imagen) o el elemento HTML button (botones de contenido).

Botones de envío

Este tipo de botones envía automáticamente el formulario en que se encuentra cuando es presionado. Es insertado utilizando el tag HTML input con el valor "submit" en su atributo "type".

Código
<form method="post" action="agente.php">
<input type="submit" value="Enviar este formulario" />
</form>
Vista

Botones de reestablecimiento

Este tipo de botones reestablecen los controles en un formulario a sus valores iniciales cuando es presionado. Son insertados con el tag HTML input con el valor "reset" en su atributo "type".

Código
<form method="post" action="agente.php">
<input type="text" name="texto1" value="Valor por defecto" /><br />
<input type="checkbox" name="reglas" checked="checked" /> Acepto las relgas<br />
<input type="reset" value="Reestablecer todos los campos a su valor predeterminado" />
</form>
Vista

 Acepto las relgas

En el ejemplo anterior, puedes probar la funcionalidad del botón cambiando los valores de los elementos y presionando el botón para reestablecer los campos a sus valores iniciales.

Botones de imagen

Los botones de imagen funcionan exactamente como los botones de envío con la única diferencia que los de imagen son representados visualmente con la imagen especificada en el atributo "src". Otra particularidad es éstos envían además las coordenadas donde ha ocurrido el click cuando el formulario fue enviado, tomadas desde la esquina superior izquierda del botón (por ejemplo, para un botón de imagen llamado "boton1"las coordenadas serán enviadas en la forma "boton1.x" y "boton1.y").

Los botones de imagen se insertan con el tag HTML input, usando el valor "image" en su atributo "type".

Código
<form method="post" action="agente.php">
<input type="image" src="/img/p/tutorials/forms/3/submit.png">
</form>
Vista

Botones de contenido

Los botones de contenido pueden ser usados como botones de envío o reestablecimiento, o bien pueden no tener ninguna acción preestablecida (dependiendo del valor de su atributo "type"). Pero su características es que permite a los autores inserta contenido dentro de los mismos. Esto significa que una porción de código HTML puede ser mostrado dentro del botón (vínculos, párrafos, texto en negrita, imágenes, etc.).

Código
<form method="post" action="agente.php">
<button type="button">
El <b>tag HTML button</b><br />
permite contenido.
</button>
</form>
Vista

Entrada de archivos

La entrada de archivos puede ser utilizada para subir archivos al servidor. Este control muestra una caja de texto donde el usuario debe especificar la ruta del archivo (que será adjuntado localmente por el navegador) que será enviado al servidor. De este modo los autores pueden pedir a los visitantes que envíen archivos de sus computadoras a través de la página. El control habitualmente muestra un botón para elegir el archivo visualmente.

Nota que para los formularios con subida de archivos debes especificar el valor "multipart/form-data" en el atributo "enctype" del tag HTML form, de otro modo, el archivo no será enviado.

Código
<form method="post" action="agente.php" enctype="multipart/form-data">
Ingresa el archivo: <input name="imagen" type="file" />
</form>
Vista
Ingresa el archivo: 


Etiquetando elementos

Las etiquetas de los elementos pueden hacer que tu página luzca mejor y sea más funcional en agentes de usuario visuales (cuando un visitante hace click en la etiqueta, el enfoque pasa automáticamente al control asociado), pero éstas sin duda harán una gran diferencia para personas con discapacidades o con navegadores no visuales. Una etiqueta establece una relación entre un control y una porción de texto (que se supone, establece un "título" para el control).

Las etiquetas pueden insertarse con el elemento HTML label y son asociados a los controles mediante el atributo "for", que debe coincidir con el valor del atributo "id" en el control.

Código
<form method="post" action="agente.php">
<label for="idnombre">Nombre:</label> <input type="text" id="idnombre" name="nombre" /><br />
<label for="idapellido">Apellido:</label> <input type="text" id="idapellido" name="apellido" /><br /><br />
Género:<br /><input type="radio" id="idmasculino" name="genero" /><label for="idmasculino">Masculino</label><br />
<input type="radio" id="idfemenino" name="genero" /><label for="idfemenino">Femenino</label>
</form>
Vista
 
 

Género: