4. Formularios con PHP

Vamos a dar un repaso a los formularios básicos HTML y veremos la interacción con PHP.

Un formulario básico en HTML se compone de la etiqueta <FORM> con un conjunto de parámetros (de los cuales veremos los básicos) y el conjunto de campos que se envía con el formulario. Lo más básico para definir un formulario sería, por ejemplo:

<FORM NAME='mi_formulario' ACTION='procesar.php' METHOD='POST'>

........

</FORM>

Los 3 parámetros que he incluído son:

• NAME: el nombre del formulario para luego ser referenciado en el código (se utiliza especialmente el nombre que le demos cuando trabajemos con javascript). Es muy recomendable utilizarlo en conjunción con el parámetro ID (ID='mi_formulario' siguiendo el ejemplo) ya que según qué navegadores puede primar un parámetro sobre otro.

• ACTION: indica la página de destino a la que se deben mandar los datos del formulario. Como vemos en el ejemplo, los datos se mandarían a la página procesar.php

• METHOD: indica cómo se deben pasar los parámetros:

• POST: se mandan como variables “ocultas” (basta saber esto para lo que queremos conseguir en este cursillo).

• GET: las variables se mandan dentro de la URL de destino (son visibles).

Por ejemplo si pasamos una variable que sea el DNI de la persona y el formulario usa METHOD=GET veríamos en la barra de navegador una URL similar a:

http://miservidor/pagina.php?dni=112335965

Sin embargo, con POST veríamos solamente http://miservidor/pagina.php y el acceso a la variable DNI vendría “embebido” en el formulario.

Visto así, parece que siempre debiéramos usar POST en vez de GET, ¿verdad? El usuario no tiene por qué ver qué variables manejamos. Esto será cierto la mayoría de los casos, pero habrá ocasiones en las que no nos quede más remedio que usar GET. La experiencia te irá diciendo cuándo usar uno u otro método.

Hay un cuarto parámetro que utilizaremos bastante: TARGET. Este parámetro nos sirve para determinar dónde debe mandar los datos el formulario. ACTION nos determina la página que ha de mostrar y que deberá procesar los campos del formulario, TARGET dirá dónde debe mostrarse esa información. Puede tomar los valores:

• _self : en este mismo marco o ventana.

• _blank : en una ventana nueva.

• _top : en el marco de que depende toda la ventana que estamos visualizando (si no utilizamos marcos en nuestra página (FRAMESET) equivaldrá a _self).

• _parent : el marco padre de la ventana que estamos visualizando (si utilizamos FRAMESET con sólo un nivel de anidación, equivaldrá a _top).

• “nombre elemento” : podemos indicar que el destino sea un elemento de nuestra página susceptible de recibir información de un formulario. Por ejemplo, un marco que hayamos creado y tenga un nombre definido, un IFRAME, etc... en general se entiende este “nombre elemento” como el nombre de un marco.

Dentro del formulario tendremos campos que se declaran con la etiqueta INPUT. No vamos a repasar los distintos tipos de campos que existen sino que pasaremos directamente a ver cómo tratarlos en PHP.

Veamos cómo manejar los campos de un formulario que es recibido por una página PHP. Sea el siguiente formulario que incluiremos en la página c4-ejemplo1.html:

<FORM NAME=”datos” ID=”datos” ACTION=”c4-e1.php” METHOD=”POST”>

Tu nombre: <INPUT NAME=”nombre” ID=”nombre” size=”20” maxlength=”20”>

<BR>

Tu email: <INPUT NAME=”email” ID=”email” size=”20” maxlength=”20”>

<BR>

<INPUT TYPE=”SUBMIT” VALUE=”Enviar”>

</FORM>

Introducimos nuestro nombre y el email y pulsamos el botón de Enviar. ¿Cómo consultamos el valor de estos campos en el PHP de destino? PHP construye arrays asociativos para las variables que nos remitan por un formulario:

• Si hemos usado METHOD=GET tendremos un array asociativo $_GET[“nombre_var”] para referenciar cada variable del formulario.

• Si hemos usado METHOD=POST el array será $_POST[“nombre_var”].

Dependiendo además de la configuración del servidor existirá la posibilidad de utilizar, directamente $nombre_var (por ejemplo, $dni ó $email). A modo de comentario, esto dependerá de si la variable REGISTER_GLOBALS está a ON en el servidor. Sin embargo, $_POST y $_GET siempre estarán disponibles, por lo que a efectos de portabilidad de la aplicación es más recomendable utilizar estos arrays.

Por tanto, si construimos el siguiente PHP, tendremos en pantalla la información remitida por el formulario:

<HTML>

<HEAD>

<TITLE>Cap 4 ejemplo 1</TITLE>

</HEAD>

<BODY>

Tu DNI es <? echo $_POST[“dni”]; ?>

Tu email es <? echo $_POST[“email”]; ?>

</BODY>

</HTML>

Puedes ver el ejemplo completo aquí: http://phpdesdecero.host.sk/c4-ejemplo1.html

Filosofía Todo en uno

Muy frecuentemente nos convendrá (o necesitaremos) mantener en pantalla el mismo formulario que hemos enviado al PHP. Para lograrlo, construiremos el formulario dentro de una página PHP y accederemos a las variables de la siguiente forma:

<HTML>

<HEAD>

<TITLE>Cap 4 ejemplo 2</TITLE>

</HEAD>

<BODY>

<FORM NAME="datos" ID="datos" ACTION= "c4-e2.php" METHOD="POST">

Tu nombre: <INPUT NAME="nombre" ID="nombre" size="20" maxlength="20" VALUE="<? echo $_POST["nombre"]; ?>" >

<BR>

Tu email: <INPUT NAME="email" ID="email" size="20" maxlength="20" VALUE="<? echo $_POST["email"]; ?>" >

<BR>

<INPUT TYPE="SUBMIT" VALUE="Enviar">

</FORM>

<?

if (strlen($_POST["nombre"]) > 0){

echo "<BR>Tu nombre es ";

echo $_POST["nombre"];

}



if (strlen($_POST["email"]) > 0){

echo "<BR>Tu email es ";

echo $_POST["email"];

}



?>

</BODY>

</HEAD>

He resaltado en azul aquello que hemos cambiado o añadido:

• Si hacemos que el ACTION del formulario sea la propia página que estamos visualizando, los valores que se introduzcan después de visualizar la primera vez la página serán remitidos a nuestra misma página.

• Al ponerle a cada INPUT la propiedad VALUE le estamos asignando un valor por defecto. Si le indicamos que el valor por defecto es “lo que contenga la variable PHP” estaremos “conservando” lo remitido en el formulario.

• En la sección final he incluído el uso de la función strlen de PHP (es equivalente a la misma función en C). Esta función devuelve el número de caracteres que componen la variable que se le pase por argumento. Lo que hemos hecho ha sido decir “si la variable contiene más de cero caracteres, ejecuta estas sentencias”. Las sentencias, por su parte, son muy simples: mostrar un mensaje fijo de texto y a continuación el valor de la variable.

Puedes ver el ejemplo funcionando en http://phpdesdecero.host.sk/c4-e2.php

3. Variables PHP. Mi primer PHP

Vamos a dedicar esta entrada a las variables en PHP y finalizaremos creando nuestro primer PHP. En primer lugar, ¿qué es una variable? Una variable podríamos definirla como un nombre simbólico que toma un valor concreto. Para aclarar esta definición:

•  Un número entero (0, 1, 2) es tal número de por sí y para siempre (el 1 no va a ser nunca el 2).

•  Una variable que llamemos, por ejemplo, mi_numero, contiene un valor (por seguir con el ejemplo, un valor entero) y puede cambiarse asignándole otro valor. Así, la sentencia:

•  mi_numero = 1 hace que la variable mi_numero, al ser consultada, diga que toma valor 1.

•  mi_numero = 1 + 5 hace que la variable tome el valor 6.

•  Etc etc

Pero una variable puede ser de distintos tipos, no tiene por qué ser siempre un número. Así pues, ¿qué tipos de variables nos podemos encontrar en PHP? Generalizando muy mucho, los tipos más comunes son:

•  Tipos simples: Entero, Flotante, Carácter, Booleano.

•  Tipos compuestos: Arrays, Cadena de Caracteres.

Tipos Simples:

•  Entero: valor numérico (positivo o negativo) sin decimales (-10, 0, 1, 100.000, ...).

•  Flotante: valor numérico (positivo o negativo) con decimales (15.45, -20.1895, ...).

•  Carácter: valor alfanumérico determinado por una tabla de códigos conversora (generalmente, ASCII). Para entendernos y generalizando mucho, una letra o símbolo de nuestro teclado (‘a', ‘b', ‘C', ‘-‘, ‘+', ...). Observa que he utilizado un entrecomillado simple (‘) porque así es como se utilizará luego al programar en PHP.

•  Booleano: es un valor sí ó no, como si de un interruptor se tratase. En PHP se utilizan los valores true o false (verdadero o falso).

Tipos Compuestos:

•  Array (vector, matriz): sobre arrays se podría dedicar un tema entero a hablar de ellos. Un array es una colección de objetos referenciada bajo un único nombre. Todos los objetos que contiene son del mismo tipo. Podemos hablar de un array de enteros, un array de flotantes, de caracteres, etc. Por ejemplo, supongamos que queremos almacenar la combinación de la lotería primitiva. En dicho caso, podríamos utilizar una variable llamada “primitiva”, de tipo array, que contuviera los valores de este modo:

•  primitiva[0] = 10;

•  primitiva[1] = 12;

•  primitiva[2] = 20;

•  primitiva[3] = 29;

•  primitiva[4] = 41;

•  primitiva[5] = 47;

Observa que aparecen los símbolos “[“ y “]”. Estos sirven para indicar, dentro del array, qué posición queremos acceder. Así, primitiva[0] es una referencia al primer elemento del array, primitiva[1] al segundo elemento, etc. Lo que hemos hecho con el código anterior es asignar a los 6 primeros elementos del array los 6 valores de la combinación ganadora (10, 12, 20, 29, 41 y 47).

Existe la posibilidad, en PHP, de asignar a cada elemento del array un valor de distinto tipo. O sea, que en la primera posición tengas un entero, en la segunda un carácter, etc etc. Esto, que a priori parece algo muy simple, no te lo permiten la mayoría de los lenguajes de programación a no ser que crees tu propia estructura de datos. En PHP no es necesario disponer de estructuras de datos como un tipo aparte al disponer de esta funcionalidad. Piensa, por ejemplo, que dispones de una variable “pedido” que simboliza el pedido de un cliente, y le asignas estos valores:

•  pedido[0] = “15/01/2008”;

•  pedido[1] = “maleta”;

•  pedido[2] = 2;

Si a la hora de programarlo piensas: “en la primera posición siempre voy a guardar la fecha, en la segunda el nombre de producto y en la tercera la cantidad pedida...” este array cobra sentido, ¿verdad? Y fíjate que mientras que las dos primeras posiciones son del tipo cadena de caracteres (ahora veremos más en detalle qué son) la última, la cantidad, es de tipo numérico.

•  Cadena de Caracteres: Una combinación de caracteres alfanuméricos. Por ejemplo, “hola, esto es una cadena” sería una cadena de caracteres (observa que he usado el entrecomillado doble (“) para delimitarla). También se podría dedicar otro capítulo entero para hablar de la manipulación de cadenas de caracteres. Como peculiaridad, indicar que una cadena de caracteres es un subtipo del tipo array más una serie de propiedades añadidas. Así, el siguiente trozo de código:

•  mi_cadena=”Hola Soy una Cadena”;

•  mi_cadena[0] = ‘P';

Es perfectamente válido. En la primera sentencia he asignado a una variable llamada “mi_cadena” el valor “Hola Soy una Cadena”. En la siguiente sentencia, he modificado el primer carácter de la cadena dándole el valor “P”. Si ahora consultásemos el valor de “mi_cadena”, el resultado sería “Pola Soy una Cadena”. Es decir, los elementos de una cadena de caracteres pueden referenciarse como si de un array de caracteres estuviéramos hablando.

Sintaxis de las variables en PHP

Bien, ya sabemos (o nos hemos hecho una idea) de los tipos básicos que hay en PHP de variables. ¿Cómo utilizar una variable en PHP?

Las variables en PHP van antecedidas del símbolo $. Así,

•  $numero = 5; hace que se cree la variable numero y se le asigne valor 5.

•  $numero[0] = ‘K'; hace que se cree un array llamado numero y a su primera posición se le asigne el valor ‘K';

Tradicionalmente, los lenguajes de programación nos “exigen” que declaremos explícitamente el tipo de la variable (esto es, si va a contener un entero, si va a contener un booleano...) o incluso, cuando hablamos de tipos de datos complejos, preasignar la memoria que pueden ocupar dentro de tu ordenador . Con PHP no es necesario nada de lo anterior, el mero hecho de referenciar una variable con el símbolo $ antecediéndole ya “provoca” tanto la creación de la variable como la asignación de memoria. PHP es, como que se suele llamar en tecnologías de la información, un lenguaje débilmente tipado, ya que no requiere conocer explícitamente el tipo de las variables a utilizar. Las ventajas son enormes, no sólo por no tener que gestionar el espacio de memoria sino por el hecho de poder crear y asignar variables en el momento que se necesiten sin tener que acordarte de los tipos ni de su nomenclatura. Además, PHP te permite hacer cosas como:

•  $numero = 5;

•  $numero = “hola”;

Donde, en la primera sentencia, hemos creado una variable numero y le hemos dado valor 5 y, acto seguido, a esa misma variable le hemos asignado el valor “hola”, que como sabemos es una cadena de caracteres que requiere distinto almacenamiento que un número y cuya filosofía de uso y operaciones permitidas son distintas a las del tipo entero.

La principal contra de este uso de variables es que un error en el nombre de una variable NO SE DETECTA DIRECTAMENTE. Por ejemplo, en un lenguaje fuertemente tipado, como C, si hacemos:

•  int numero = 5;

•  numro = 6;

El lenguaje nos dará un error porque la variable numro no existe (existe numero, pero al escribirlo de nuevo nos comimos la “e”).

Con PHP, sin embargo:

•  $numero = 5;

•  $numro = 6;

Provoca la creación de dos variables, numero y numro. Si posteriormente hacemos referencia a la variable numero pensando que su valor es 6, habremos cometido un error y sólo lo detectaremos revisando el código.

Nuestro primer PHP

Bien, ya es hora de entrar en faena. Como en todos los libros de programación, comenzaremos por el programa más sencillo (en este caso, la web más sencilla). El clásico “Hola Mundo”. Su objetivo no es más que mostrar, en pantalla, ese texto, “Hola Mundo”.

Como estamos tratando con páginas web, el contenido debe estar incluido dentro del formato de una página web. O sea, nuestro PHP debe generar un HTML cuando queramos visualizar algo en pantalla (esto es una máxima aplicable a cualquier página web que utilice lenguaje de servidor).

La estructura más simple que contiene una página web es:

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

Desglosando un poco:

•  Toda marca del lenguaje HTML va encerrada entre los símbolos “<” y “>”.

•  Las marcas de HTML constituyen bloques que se abren y se cierran. Por ejemplo, <HTML> indica que estamos iniciando una página HTML y </HTML> indica el cierre de la misma.

•  Un bloque puede contener más bloques. Por ejemplo, el bloque <HTML> contiene los bloques <HEAD> y <BODY>

•  La sección HEAD de toda página HTML contiene información relativa a la página que no es visible en el navegador (o, al menos, para visualizarla se nos requiere que consultemos explícitamente, dentro de nuestro navegador, información sobre la página) salvo la sección TITLE, que se utiliza para darle un título a la página (el título que aparece en la barra superior de la ventana del navegador).

•  La sección BODY es el cuerpo de la página, aquellos datos, estructuras, secciones, etc que deseemos mostrar.

Sólo con esto, ya tenemos una página en formato HTML (por supuesto, en blanco, no muestra nada, pero el navegador “la comprende”). Si queremos incluir código PHP, lo debemos hacer entre las marcas “<?” para iniciarlo y “?>” para finalizarlo (sin las comillas.

Nuestro “Hola Mundo” en PHP sería algo como lo siguiente:

<html>

<head>

<title>Cap 3, ejemplo 1</title>

</head>

<body>

<? echo "Hola Mundo"; ?>

</body>

</html>

No es difícil ver que hemos agregado la sección Title dentro de Head para darle título a la página (si no la incluimos, mostrará “Documento sin título” en la barra superior), así como que hemos agregado una sección con código PHP:

<? echo “Hola Mundo”; ?>

¿Qué hemos hecho aquí? Hemos utilizado una función de PHP, echo , que sirve para mostrar algo. Fíjate que todas las sentencias de PHP finalizan con el carácter “;” . La función echo de PHP siempre “espera” que se le indique un parámetro que debe mostrar. ¿Cómo lo muestra? Incluyendo el resultado del parámetro dentro del HTML que después devolverá. El PHP anterior generaría, por ejemplo, este HTML para nuestro navegador:

<html>

<head>

<title>Cap 3, ejemplo 1</title>

</head>

<body>

Hola Mundo

</body>

</html>

El resultado de la cadena “Hola Mundo” es precisamente ese texto, así que lo incluye como resultado de la sección PHP que habíamos creado.

Cualquier persona puede decir: “bueno, pero para eso no necesito hacer un PHP. Hago la página resultante y ya he acabado”. Y es muy cierto. Para el ejemplo anterior no hace falta PHP puesto que con contenido estático HTML ya lo podríamos haber creado. Pero ahora, analicemos el siguiente PHP:

<html>

<head>

<title>Cap 3, ejemplo 2</title>

</head>

<body>

<?

$frase = rand(0,2);

 

if ($frase == 0) echo "Hola Mundo";

if ($frase == 1) echo "Hola Continente";

if ($frase == 2) echo "Hola Ciudad";

?>

</body>

</html>

Aquí hay elementos que aún no hemos comentado. Aunque los discutiremos, basta indicar, para comprender el ejemplo, que:

•  Rand (mínimo, máximo) es una función que devuelve un número aleatorio entre el mínimo y máximo que se le indique.

•  If es una sentencia condicional. Evalúa la condición que se le indique. Si es cierta, ejecuta las sentencias que se le indiquen.

•  Cuando decimos $frase == número estamos haciendo una comparación (poner == en PHP equivale a decir “si lo de la izquierda es igual a lo de la derecha“).

¿Qué hace este PHP?

•  Crea la variable $frase y le asigna un valor aleatorio entre 0 y 2.

•  Si la variable $frase vale 0, muestra la cadena “Hola Mundo”.

•  Si la variable $frase vale 1, muestra la cadena “Hola Continente”.

•  Si la variable $frase vale 2, muestra la cadena “Hola Ciudad”.

El resultado HTML puede variar CADA VEZ QUE LLAMES A LA PÁGINA por lo que sabemos que será una de las tres combinaciones pero cada vez que accedas a este PHP el resultado será distinto.

Puedes probar los dos ejemplos en estas direcciones:

Primer ejemplo: http://phpdesdecero.host.sk/c3-e1.php

Segundo ejemplo: http://phpdesdecero.host.sk/c3-e2.php

2. Herramientas recomendadas para trabajar con php

Antes de empezar a trabajar con PHP, considero importante discutir qué entorno necesitamos tener disponible para realizar pruebas y empezar a crear nuestras primeras páginas PHP. Así pues, esta entrada la vamos a dedicar a:
- Obtención de un servidor web con PHP.
- Herramientas recomendables para edición de páginas PHP.

Todas las referencias que hagamos a PHP en el blog han de entenderse sobre la versión 4.x de PHP. La versión 5.x tiene algunos cambios sustanciales (tanto en filosofía de programación como en funciones obsoletas) y no garantizo que los ejemplos funcionen sobre dicha versión.

Vamos a empezar por ver qué necesitamos tener instalado en nuestro equipo si queremos trabajar con PHP. Si recordamos la entrada anterior del blog, PHP es un lenguaje de servidor, podríamos entenderlo como un procesador que recibe un código en PHP y devuelve una página HTML plana (entendiendo por “plana” que la visualización de dicha página es inmutable, siempre vas a ver el mismo aspecto y contenido dentro de la página). Así pues, nuestro equipo necesitará tener instalado un procesador de dicho lenguaje de servidor.

Existen, básicamente, dos opciones:
1) Instalar en tu equipo un servidor web de internet que “comprenda” PHP.
2) Abrirte una cuenta en un servidor de internet que permita el alojamiento de páginas web en PHP.

Si lo que queremos es empezar a trabajar YA contra PHP y/o tenemos planeado publicar nuestra página en internet, lo mejor es tener un alojamiento externo (o sea, en un servidor de internet), ya que dispondremos de un nombre para nuestra web, un lugar donde colocar nuestros PHP y, generalmente, una base de datos MySQL con los permisos suficientes para conectarse con nuestros PHP (ya veremos cómo).
Si lo que deseas es probar en tu PC las páginas PHP sin necesidad de estar cargándolas en un servidor externo ni consultándolas vía internet, no tienes otro remedio que instalarte en tu equipo los siguientes componentes:
- Un servidor Apache (1.3.x ó 2.x)
- Un procesador PHP 4.x que luego integres con tu Apache.
- (opcional) Un servidor de base de datos MySQL.

En Windows todo esto lo puedes tener bajándote e instalando el programa PHPTriad (http://sourceforge.net/projects/phptriad/) o alternativas similares como FoxServ. En Unix/Linux no tienes más remedio que hacerlo tú mismo paso a paso (hay muchos tutoriales sobre ello en internet, basta que busques un poco). La instalación de PHPTriad es muy sencilla, la única pega es la configuración del MySQL que tampoco es de excesiva complejidad. Si te decantas por esta opción y te quedas atascado o con problemas, coméntamelo y te ayudo en lo que pueda.

Si lo que deseas es tener un alojamiento externo (lo habitual es referirse a “alojamiento” por su equivalente en inglés, hosting) hay muchos sitios web en internet que te lo pueden facilitar. Por ejemplo:
- www.host.sk
- www.iespana.es
- miarroba.com
- etc
Por lo general todos te van a ofrecer lo mismo:
- Un espacio máximo de alojamiento para PHP e imágenes (entre 10 y 100MB), con un acceso FTP para gestionar los archivos que publiques (y/o una interfaz web para hacerlo, como ofrece host.sk)
- Una conexión a base de datos MySQL con una interfaz web para gestionarla (la interfaz web se le llama PHPMyAdmin y también la tendrás disponible si te has instalado localmente el PHPTriad).

No es el objetivo del blog explicar cómo se hace una conexión FTP para transferir archivos así que no entraré en detalles, pero como siempre, cualquier duda que tengas coméntamela e intentaré resolverla.

Bien, ya tenemos dónde ubicar nuestros PHP. Ahora la pregunta es ¿cómo creo un PHP?. Como cualquier lenguaje de programación de tercera generación, una página PHP se compone de instrucciones de texto, por lo que el editor más simple (el bloc de notas del windows por ejemplo) nos sirve para crear o editar un PHP. Ahora bien, existen herramientas en el mercado (algunas comerciales, otras gratuítas) que nos pueden facilitar mucho la labor. Yo os recomiendo tener una de estas dos (o ambas):
- Crimson Editor (http://www.crimsoneditor.com/): es un potente editor completamente gratuíto para varios lenguajes de programación (C, C++, HTML, PHP, ...). La gran ventaja de este editor respecto al bloc de notas de Windows es que utiliza combinaciones de colores para distinguir las distintas “marcas” especiales que utilizan los lenguajes de programación (distingue los bloques de inicio y fin, las palabras reservadas del lenguaje, las marcas HTML, etc etc etc) con lo que la visualización y modificación de código se hace algo más clara y sencilla.
- Dreamweaver (http://www.adobe.com/es/products/dreamweaver/) es, a mi juicio, el editor más potente que existe. En realidad es un 4GL (lenguaje de cuarta generación) puesto que permite la inserción de código “prefabricado” (esto es, módulos estándar que el programa conoce y te ahorra escribir muchas líneas de código) y te ofrece un entorno visual para programar webs (puedes ver la página resultante mientras la diseñas). Por el contrario, no es gratuito (lo que es más, es bastante caro) por lo que si no dispones del dinero suficiente para comprar una licencia, es mejor utilizar una alternativa gratuita (aunque ni por asomo tan potente) como el editor Crimson.

Si dispones de una instalación de Office en tu equipo puedes utilizar FrontPage, que si bien está más orientado a tecnologías Microsoft (páginas web ASP) al menos te puede facilitar un entorno visual para la parte estática de las páginas que diseñes (esto es, la parte que esté hecha con HTML y no necesite de PHP).

En la siguiente entrada crearemos nuestro primer PHP y discutiremos el uso y tipos de variables de PHP.

1. Lenguaje Cliente y Lenguaje Servidor

Esta primera “lección” puede ser algo farragosa, pero considero muy importante saber diferenciar qué elementos intervienen en una comunicación web para luego poder distinguir, a la hora de programar una web, dónde han de ubicarse los distintos elementos, subprogramas etc que necesitemos.

Generalmente, cuando vamos a visitar una web, seguimos estos pasos:

• Escribimos la dirección de internet en nuestro navegador (por ejemplo www.google.es ) y pulsamos la tecla Enter para que se cargue.

• En la pantalla, al cabo de unos segundos, aparece la web que queremos.

¿Qué ocurre realmente para que al escribir esa dirección nos sea mostrada una página?

• Al pulsar la tecla Enter, nuestro navegador emite una petición al servidor que aloja la página que queremos visitar diciéndole, básicamente: “dame el contenido de esta dirección”.

• El servidor recibe la petición y devuelve la página en formato HTML (HyperText Markup Language, Lenguaje de marcas de hipertexto), que es el código básico que entiende un navegador y define el aspecto de la página a mostrar.

• El navegador cliente (tu Firefox, tu Internet Explorer...) recibe ese código, lo interpreta y lo muestra en tu pantalla.

Sencillo, ¿verdad? Esto nos sirve para ir desgranando un poco más y ver que en toda comunicación web intervienen dos “agentes” por así llamarlos: el cliente (tu navegador internet o, generalizando, tú) y el servidor (que contiene la web que queremos visitar). No vamos a entrar en cómo el navegador sabe qué servidor web debe consultar para acceder a según qué página porque no es el objetivo de este blog, pero si a alguien le interesa le puedo contar cuál es el proceso que se sigue.

Un símil “sencillo” para entender la filosofía que sigue este proceso es el de una tienda cualquiera. El cliente (tú) llega buscando un producto que solicita al dependiente (que sería el servidor). Éste lo busca entre los productos que puede entregarte y te lo da. Tú, por tu parte, lo examinas y le das el uso que estimes oportuno.

Vamos a complicar un poco más el ejemplo para ir ilustrando mejor el proceso. Supongamos ahora que visitamos una web con un buscador de internet, por ejemplo la página de google. El proceso para que se muestre la página de inicio ya lo hemos visto, pero ¿qué ocurre cuando efectuamos una búsqueda?

• Tras pulsar el botón de Buscar (o bien la tecla Enter) tu navegador realiza el envío de un formulario a través de internet a una dirección de internet concreta, que ya viene determinada por la página que estás visitando (por ejemplo, el índice de google contiene un formulario que determina que, al pulsar buscar, debe mandar el formulario a otra página de google dedicada a buscar resultados).

• El servidor recibe la petición de mostrar una página CON UN CONJUNTO DE PARÁMETROS (determinados por el formulario que rellenaste). Fíjate que no estamos teniendo una página para cada búsqueda que se pueda efectuar (eso sería demencial) sino que hay una página que:

• i. Recibe los parámetros de búsqueda que hayas indicado.

• ii. Efectúa la búsqueda personalizada.

• iii. Genera un conjunto de resultados.

• Ahora bien, si recapitulamos recordaremos que el navegador cliente sólo entiende HTML y por tanto, el servidor debe devolver una página en dicho formato. ¿Qué hacer entonces con ese conjunto de resultados dinámico que acabamos de obtener? La solución, evidentemente, es generar tanto código HTML como sea necesario para devolver una página que el navegador cliente pueda entender. Simplificando el tema, podríamos pensar en que nos devuelva una línea de texto por cada resultado que haya podido obtener, con lo que la página del servidor, una vez obtenido el conjunto de resultados, “insertará” tantas líneas como resultados haya obtenido y ese resultado final será el devuelto a tu navegador.

Aquí podemos ver lo que hace un lenguaje de servidor. Esquemáticamente, sería:




¿Cómo distinguir una página web que es capaz de generar resultados dinámicos como los del ejemplo indicado de una que no lo hace? La solución pasa por ver la extensión que tiene la web que llamamos. Por ejemplo, si abrimos la página http://www.google.es/index.html vemos que llamamos a la página “index”, que tiene extensión “html” dentro del servidor www.google.es . Por el contrario, si abrimos una página cuyo nombre sea, por ejemplo (la siguiente dirección es inventada, pero ilustra lo que venimos diciendo): http://www.miweb.com/buscar.php?termino=programar

podemos ver que estamos abriendo la página “buscar” con extensión “php” dentro del servidor www.miweb.com y, además, le hemos pasado un parámetro bajo el nombre “termino” y con el valor “programar”.

Las extensiones de las páginas web son distintas según el contenido que vayan a mostrar (estático, dinámico) así como el tipo de lenguaje de servidor que vayan a emplear. Categorizando, estos serían algunos ejemplos de extensiones:

• Contenido Estático (la web siempre ofrece el mismo aspecto y contenido cada vez que la visitamos): extensiones HTML, HTM...

• Contenido Dinámico (la web se adapta a una serie de parámetros y tanto el aspecto como el contenido varían según dichos parámetros): PHP, PHP3, ASP, JSP, ...

Hay muchas más extensiones que nos podremos encontrar según naveguemos y veamos distintas páginas, sin olvidar que un navegador web puede reproducir distintos tipos de archivo (vídeos, fotos, pdf, archivos de office, etc) y cada cual tiene su extensión. Pero de cara a la programación de páginas dinámicas, los más reseñables son los indicados (PHP, ASP (basado en tecnologías Microsoft) y JSP (basado en tecnologías Java)).

Con esto creo que queda claro qué es un lenguaje de servidor y cuál es su función. Aunque en el diagrama anterior no se refleja, generalmente el procesamiento de la información viene acompañado de una consulta a una base de datos. Para quien lo desconozca, una base de datos puede entenderse como un repositorio organizado y estructurado de información, como puedan ser los datos de los usuarios registrados en tu página web, los comentarios recibidos en la misma, la categorización de palabras para un buscador, etc. En los capítulos posteriores trabajaremos con bases de datos MySQL ya que son las más sencillas de encontrar en webs de alojamiento gratuítas.

Ahora volvamos al ejemplo de ir a una tienda. Supongamos que vamos a comprarnos un flamante DVD del cuál sabemos una serie de características que debe tener. Llegamos, le decimos al vendedor qué buscamos y él nos ofrece varios. Elegimos uno y el vendedor nos lo entrega acompañado de su manual de instrucciones. Nos llevamos el DVD, llegamos a casa, lo enchufamos y encontramos instrucciones para reproducir películas, cambiar el idioma, el formato de pantalla etc etc etc.

Adaptemos el ejemplo a una comunicación web.

• Introducimos en el buscador qué deseamos buscar, por ejemplo, una calculadora online (equivale a decirle al vendedor las características de nuestro DVD).

• El servidor nos ofrece los resultados encontrados para nuestra búsqueda (nos reduce el catálogo a los modelos de DVD que se ajustan a lo buscado).

• Accedemos a una página que contiene una calculadora que nos permite hacer operaciones aritméticas sin necesidad de estar consultando otras webs, todo lo hace la misma página.

Gráficamente, si tomamos el diagrama antes mostrado:





(7) Operación Aritmética con la calculadora

(8) Resultado de la operación

Si nos fijamos, veremos que se ha agregado, en la parte cliente (tu navegador) un procesador de lenguaje cliente que se dedica a efectuar operaciones en tu propio navegador, sin tener que efectuar comunicaciones con un servidor externo. Esto es, tu navegador de internet es capaz de efectuar operaciones y procesar datos.

La pregunta que surge es: cuando yo programe una página web, ¿en qué casos hay que usar un lenguaje de cliente y en qué casos un lenguaje de servidor? Pero la respuesta es sencilla:

• Si las operaciones a realizar involucran consultar datos que sólo tú posees, que son inherentes a tu web (por ejemplo, tu catálogo de productos), debes usar un lenguaje de servidor, puesto que los datos a consultar no están en el ordenador de la persona que luego consulte tu página, sino en el servidor donde alojes tu web y, por extensión, tus datos.

• Si las operaciones a realizar son del tipo “mostrar un mensaje de alerta si al hacer un pedido no han indicado la cantidad a pedir”, “activar el campo número de unidades cuando se selecciona el producto”, etc etc, en ese caso es recomendable usar el lenguaje de cliente puesto que son operaciones que se pueden efectuar sobre la página que el cliente esté viendo.

Ojo, fíjate que en el caso de las operaciones con lenguaje de cliente, sólo recomiendo su uso, puesto que prácticamente todas las operaciones de lenguaje cliente pueden efectuarse a través del envío de datos al servidor, pero es más cómodo para la persona que visita tu página que no haya un exceso de comunicaciones (recuerda que, cada vez que consultas una página, tienes que esperar mientras se manda la petición desde tu navegador, el servidor responde y tu navegador procesa el resultado) y operaciones sencillas como efectuar comprobaciones de validez en un formulario se pueden hacer sin necesidad de enviar el formulario al servidor generalmente.

A modo de ejemplo, esta tabla te puede facilitar el entender algunas de las operaciones más comunes que suelen hacerse en un lado de la comunicación o en otro (en algunos casos es imperativo que sea en el lado del servidor o del cliente):

LENGUAJE CLIENTE	LENGUAJE SERVIDOR
• Comprobar que un campo tiene valor numérico (sin letras), o que está en mayúsculas, etc (comprobaciones del valor de un campo en general). • Emitir un mensaje de alerta. • Solicitar la confirmación del envío de datos al servidor. • Activar un campo según el valor que tome otro campo. • Hacer que un botón se “ilumine” al pasar el ratón por encima. • Mostrar mensajes de ayuda.	• Servir un conjunto (o subconjunto si hacemos una búsqueda) de datos sobre la temática de tu web (p.ej. mensajes del foro, productos de un área, etc etc). • Guardar y/o manipular información que envíe un usuario (interacción con bases de datos). • Efectuar comprobaciones sobre los datos recibidos en los parámetros. • Mandar al cliente a otra página distinta según qué condiciones.

Hay muchas más operaciones que pueden realizarse, pero con lo anterior creo que se puede tener ya una visión general acertada de dónde es adecuado realizar unas u otras operaciones. El lenguaje de cliente más utilizado suele ser Javascript (con extensión JS) aunque también hay otras opciones como VisualBasic Script (utilizado normalmente en conjunción con páginas ASP al ser ambas tecnologías Microsoft).

Creo que por hoy ya está bien. En la próxima entrada comenzaremos a trabajar con PHP, para lo cual recomendaré algunas herramientas necesarias o aconsejables a tener instaladas en tu ordenador y lograr ver los primeros PHP (que serán extremadamente sencillos pero iremos avanzando).

Saludos

Objetivo del Blog

Soy un informático con bastante experiencia en PHP. Recientemente algunos compañeros que me han pedido que cree algún tipo de curso sobre PHP que sirva para aprenderlo desde cero. El objetivo de este blog será, partiendo de un punto básico (conocimientos sobre HTML), lograr que quien siga las entradas del blog acabe por aprender PHP en un nivel lo bastante aceptable como para lograr desarrollar webs con un poco más de complejidad de lo habitual (posibilidad de hacer formularios personalizados y guardar esos datos en un servidor de bases de datos, hacer páginas dinámicas cuyo contenido venga determinado por una estructura de base de datos y así no tener que tocar las páginas fuente cada vez que queremos agregar una entrada (como ocurre por ejemplo en el propio diseño de un blog o de una página web de noticias) etc.).

Empezaré lo antes posible con el capítulo inicial, dedicado a diferenciar lenguajes de cliente de lenguajes de servidor. Es fundamental entender esa diferencia para lo que posteriormente desarrollaremos.

En ocasiones utilizaremos javascript además de html. Según vea la participación en este blog posiblemente cree otro dedicado a los programas más usuales que se desarrollan en javascript así como sus funcionalidades DHTML.

Por supuesto, mientras dure la ilusión de desarrollar este blog, me comprometo a responder todos los comentarios con dudas que vayan surgiendo.

Espero traer el primer capítulo mencionado muy pronto. Saludos