CFGM DESARROLLO DE APLICACIONES WEB

En esta memoria hay poca cosa que explicar ya que el trabajo principal se realiza en los ficheros .php que se tienen
que crear y que realicen la funciones indicadas cada uno de los ejercicios. Tambien comentar que los ejercicios de la
practica no son independientes los unos de los otros, sino que se van complementando de forma secuencial, es decir,
mas que ejercicios son indicaciones paso a paso de como realizar los archivos .php.

Los archivos .php se encontraran dentro de la carpeta php que se adjuntara en un .zip junto a esta memoria.

La realización de esta practica esta basada en el contenido explicado por el tutor en la videoclases numero 3 y
numero 4 de este modulo, donde se explican los conceptos mediante un ejemplo practico de:

• Dinamismo en la web mediante el uso del lenguaje PHP que es un lenguaje de entorno servidor.
• Reaprovechamiento de codigo mediante la palabra reservada “include”.
• Uso de formularios y de los metodos GET y POST

El ejemplo practico de estas videoclases es casi identico al que se pide en la siguiente practica simplemente hay que
adaptarlo con nuestro propio contenido (HTML) y estilo (CSS).

Por último indicar que el único concepto que aparece en esta practica que no se ha explicado en las videoclases pero
que aparece en el libro base, es el concepto de arrays en el lenguaje de PHP y como hacer recorridos por sus
posiciones mediante bucles.

Después de esta breve explicación, empezamos con los enunciados de los ejercicios.

EJERCICIO 1

Crea cinco archivos PHP con los cuales vamos a generar una pequeña estructura web. Estos archivos los
vamos a nombra de la siguiente forma:
• index.php
• cabecera.php
• cuerpo.php
• pie.php
• formulario.php

Para que funcionen los .php en el navegador tendremos que tener instalado correctamente el servidor XAMPP en
nuestro PC. Los 5 archivos los guardamos dentro de la carpeta C://xampp/htdocs/ilerna/m9/uf2/pac3 y para
verlos correctamente tendremos que tener inicializado el servicio Apache del XAMPP.
Una vez activado el servicio Apcache, nos dirigirnos a nuestro navegador web y en la url introducimos lo siguiente:

localhost/ilerna/m9/uf2/pac3

Al introducir la url anterior en el navegador, si los archivos .php no tienen nigun error se ejecutara el archivo
index.php.

EJERCICIO 2

El archivo index.php incluira todos los demas archivos, este va a ser el archivo principal, va a contener la
estructura de la pagina para poder centralizar todas las funcionalidades de la pagina en varios ficheros.

NOTA: Este fichero donde centralizaremos toda la estructura de la web, tiene que ser el fichero que
llamemos cuando mostramos la web en el navegador.

Estructura basica de una pagina web

Existen muchos diseños páginas web, pero si hablamos de una página web sencilla, encontraríamos todos o al menos
muchos de los siguientes elementos:
• Cabecera: aparece al inicio de la página y normalmente muestra el nombre de la web y el logotipo. También
suele incluir una imagen principal o un slider (un conjunto de imágenes que van pasando).
La cabecera es uno de los elementos en los que más se esmeran los diseñadores, ya que es lo primero que
ven los visitantes. Además, lo normal es que la cabecera permanezca invariable en todas las páginas que
forman el sitio web.
• Menu: es la barra donde aparecen los enlaces a las principales páginas de la web. Al igual que la cabecera,
suele estar visible en todas las páginas para que en todo momento el usuario pueda navegar a cualquier
 lugar. Una página puede tener varios menús, por ejemplo, un menú principal y un menú secundario. El
menú principal suele aparecer justo debajo (o justo encima) de la cabecera, aunque también es habitual
verlo en un lateral.

• Contenido: todo lo que está entre la cabecera, la sidebar y el footer. Incluye el contenido principal de toda
la pagina.

• Sidebar: los widgets no pueden colocarse en cualquier sitio de una página, sino que deben ir en una barra,
que cuando tiene una posición lateral se denomina sidebar.

• Footer (pie): es la parte inferior de una web. Es la zona menos relevante de la web, por lo que se aprovecha
para poner los enlaces menos interesantes, como a la Política de Privacidad o al Copyright.

Estructura index.php
Para que index.php incluya todos los demas archivos utilizaremos la palabra reservada include, mediante la que
haremos uso de la buen praxis del reaprovechamiento de codigo para evitar la repeticion de codigo.

La estructura de index.php sera la siguiente:

cabecera.php → en nuestra cabecera esta incluido el menu
<div id=”contenedor>
Segun la opcion seleccionada en el menu web incluido en cabecera se inluira:
opcion1 → inicio.php
opcion2 → cuerpo.php
opcion3 → formulario.php
</div>
pie.php

El archivo inicio.php es un archivo que he decido crear de forma complementaria, no se pide en la pac, para que se
visualice cuando ejecutamos por primera vez index.php y simplemente es una capa que contiene diferentes etiquetas
<p> donde aparecen los enunciados de la practica. Tambien se incluye para que el menu web tenga tres opciones y no
solo dos.

EJERCICIO 3

Los archivos cabecera.php y pie.php tienen que contener la capa superior y la capa inferior de la pagina
respectivamente.
• El archivo cabecera.php tiene que contener un menu web para poder navegar por la pagina.
• El archivo pie.php tiene que mostrar un pie de pagina donde mostraremos nuestros datos.

NOTA: Estos ficheros daran formato visual a nuestra web.

El archivo cabecera.php contiene la etiqueta <html> de apertura, todo el contenido de las etiquetas <head>. Dentro
del <head> realizamos donde incluimos el documento externo estilos.css que utilizaremos para darle estilo al
documento index.php, tambien se incluye un <title> y una función javascript que es lanzada cada vez que se pulsa
una opcion del menu, para añadir el valor de la variable op por url. El valor de esta variable es recuperado mediante
un GET en el div contenedor y según su valor sera incluido inicio.php, en caso de que la variable op tenga valor 1,
cuerpo.php, en caso de que la variable op tenga valor 2 y por ultimo si la variable tiene valor 3 se incluye el archivo
formulario.php.

Previo al div contenedor tenemos un div cabecera que incluye el div logo donde tenemos una imagen y el div menu
que que inlcuye el menu web con las tres opcion para el div contenedor mediante tres etiquetas <button>.

El archivo pie.php incluye un div pie que contiene el contenido del pie de pagina y despues de este div incluye la
etiqueta de cierre del </body> y la del </html>

EJERCICIO 4

El archivo cuerpo.php tiene que mostrar en contenedores HTML los datos almacenados en una variable de
tipo array. Estos datos tienen que ser recorridos con una estructura repetitiva. Tambien tiene que mostrar
en una capa los datos que envie la pagina formulario.php
NOTA: Tenemos que gestionar con capas (<divs>) el formato visual del cuerpo y los datos que tenemos que
mostrar. Se puede utilizar cualquiera de las estructuras repetitivas que ofrece el lenguaje.

El archivo cuerpo.php esta incluido dentro del div contenedor y es ejecutado en caso de que sea pulsado el button
Cuerpo.

Este archivo contiene dos etiquetas <div> la primera para mostrar los datos almacenados en una variable de tipo
array y una segunda donde se muestran los datos que envie formulario.php estos datos se recuperan mediante el
metodo POST.

Por último creo conveniente explicar como funcionan los arrays en php.

Un array es una matriz/vector/arreglo que almacena valores de 3 maneras posibles dependiendo de su tipo. 
Enumero los 3 diferentes tipos tal y como explica la web oficial:

• Array indexado.
• Array asociativo.
• Array multidimendional (Matrices).
En nuestro caso solo nos centraremos en el array indexado que es el array mas comun. Es un tipo de array que tiene
índices numéricos y se accede con un número entero a cada valor del mismo.
$array = array($valor1, $valor2, $valor3, …);
En donde:

• $array: Es la variable donde se guardará el array.

• $valor1, $valor2 y $valor3: Valores de cada elemento.
Los arrays se pueden recorrer todos sus elementos mediante bucles, el bucle for($i=0,$i<count($array),$i++) es el
mas utilizado para ello, aunque se puede hacer de otras maneras.
Podemos acceder directamente a un elemento del array sin necesidad de recorrerlo de la siguiente manera:
$array[0]; (accedemos al primer elemento del array)
$array[5]; (accedemos al sexto elemento del array)

EJERCICIO 5

El archivo formulario.php tiene que contener un formulario HTML, el cual tiene que simular un
formulario de registro de un usuario web. El formulario tiene que contar con diferentes tipos de inputs
(numerico, texto, contraseña, selección, etc.) y enviar la informacion a la pagina de cuerpo.php con el
metodo POST.

NOTA: El formulario tiene que contar con 4 tipos de input distintos como mínimo. El envio de los datos
tiene que redireccionar a la pagina principal para que estos sean mostrados en su capa pertinente.

Como en mi solucion de esta practica y siguiendo los pasos de las videoclases hacemos uso tanto del metodo POST
en el envio de informacion del formulario como del metodo GET para la selección del contenido que incluye el div
contenedor al pulsar una de las opciones del menu web vamos a explicar las diferencias existentes entre estos dos
metodos.

El método GET envía la información codificada del usuario en el header del HTTP request, directamente en la URL.
La página web y la información codificada se separan por un interrogante ?:
localhost/index.php?key1=value1&key2=value2&key3=value3...

• El método GET envía la información en la propia URL, estando limitada a 2000 caracteres.
• La información es visible por lo que con este método nunca se envía información sensible.
• No se pueden enviar datos binarios (archivos, imágenes...).
• En PHP los datos se administran con el array asociativo $_GET.
Con el método POST también se codifica la información, pero ésta se envía a través del body del HTTP Request, por
lo que no aparece en la URL.
• El método POST no tiene límite de cantidad de información a enviar.
• La información proporcionada no es visible, por lo que se puede enviar información sensible.
• Se puede usar para enviar texto normal así como datos binarios (archivos, imágenes...).
• PHP proporciona el array asociativo $_POST para acceder a la información enviada.
Una vez explicado los dos metodos de envio de información existentes, explicaremos como funcionan los formularios
en html.

Un formulario es un conjunto de controles (botones, cajas de texto, casillas de verificación, botones radio, etc) que
permiten al usuario introducir datos y enviarlos al servidor web para su procesamiento.

La etiqueta que delimita un formulario es la etiqueta <form> ...</form>. Los atributos más importantes de la etiqueta
<form> son:

• action: contiene el nombre del agente que procesará los datos remitidos al servidor (por ejemplo, un script
de PHP)
• method: define la manera de envíar los datos al servidor. Los valores posibles son:
get: los valores enviados se añaden a la dirección indicada en el atributo action
post: los valores se envían de forma separada

Si el atributo method no está establecido, el formulario se comporta como si el valor fuera get.

La etiqueta <form> es un elemento de bloque. En su interior puede haber cualquier elemento típico de una página
web (párrafos, imágenes, divisiones, listas, tablas, etc.), además de las etiquetas que crean los controles.

Los etiquetas que crean los controles en los formularios son <input>, <button>, <select>, <optgroup>, <option> y
<textarea>. Además, se pueden estructurar los controles con las etiquetas <fieldset> y <legend>.

El navegador envía únicamente los datos de los controles contenidos en el formulario. En una misma página puede
haber varios formularios que envíen datos al mismo o a diferentes agentes.

Una vez explicado a rasgos generales en que consisten los formularios nos centraremos en los tipos de inputs que
hay.

A continuacion mostramos los tipos de inputs mas comunes. (para seleccionar el tipo de input se utiliza el atributo
type):
• type=text: este es quizá uno de los tipos de input más conocido y usado, practicamente se usa para ingresar
alguna cadena de texto.

• type=password: input tipo password, se usa en algún formulario en el que desees que el usuario ingrese
una contraseña, al elegir este tipo de input la cadena que se ingrese aparecerá en un formato de puntos o
asteriscos permitiendo darle mayor seguridad.

• type=submit: cuando trabajes sobre algún formulario los input tipo submit te permiten enviar información
a algún archivo externo que te permita procesar la información.

• type=radio: el input tipo radio te permite poner una serie de opciones pero elegir solo una, para esto
puedes observar que se debe compartir el atributo name entre todas las opciones que se incluyan.

• type=checkbox: a diferencia del anterior, el input tipo checkbox permite a los usuarios poder elegir más de
alguna opción, en este caso cada opción tienen su propio name.

• type=button: si deseas incluir algún botón para realizar alguna función  podrías usar el input tipo button.

El siguiente listado inputs surgieron con HTML5:

• type=date: si deseas obtener alguna fecha, el input tipo date muestra un minicalendario para que los
usuarios elijan alguna fecha en específico, puedes determinar un mínimo y máximo de fecha.
 • type=email: para capturar algún correo electrónico lo ideal sería que usaras un input tipo email, este input
se encarga de validar que la cadena que se ingrese en efecto sea un correo electrónico.

• type=number: para un tipo de dato donde solo se deban ingresar caracteres tipo número puedes usar el
input tipo number, puedes determinar también algún mínimo y un máximo.
• type=time: este tipo de input permite a los usuarios elegir alguna hora en específico.
• type=url: este input lo puedes usar para campos que requieran ingresar alguna url, dependiendo de los
navegadores que lo soporten se podría validar que en efecto la cadena que se ingresa sea una url válida.
Ademas del atributo type, a continuacion mostramos los atributos mas comunes:

• value: especifica el valor inicial para un campo de entrada

• readonly: especifica que el campo de entrada es de sólo lectura. Este atributo no tiene valor.

• disabled: especifica que el campo de entrada se desactiva. Este atributo no tiene valor.

• size: especifica el tamaño en caracteres para el campo de entrada.

• maxlength: especifica la longitud máxima permitida para el campo de entrada,

• autocomplete especifica si un campo de formulario o de entrada debe tener autocomplete encendido o

apagado. Cuando autocomplete está activado, el navegador automáticamente los valores completos basados
en valores que el usuario ha introducido antes.

• autofocus: es un atributo booleano. Cuando está presente, especifica que un <input> elemento debe recibir
automáticamente el enfoque cuando se carga la página.

• min y max: especifican el valor mínimo y máximo para un <input> elemento.

• pattern: especifica una expresión regular que la <input> valor de elemento se comprueba contra.

• placeholder: especifica una pista que describe el valor esperado de un campo de entrada. La pista se
muestra en el campo de entrada antes de que el usuario introduce un valor.

• required: es un atributo booleano. Cuando está presente, se especifica que un campo de entrada debe ser
llenada antes de enviar el formulario. Este atributo no tiene valor