Descripción de la tarea

Introducción


Ya has creado en la tarea anterior un sitio web para tu empresa (incluyendo un formulario que facilita el contacto con tus posibles clientes). Este sitio ha sido creado con Gogole Sites y publicado en los propios servidores de google.

Un sitio web está alojado en una computadora conocida como servidor web, también llamada servidor HTTP. Usualmente utilizamos servidores externos y programas para crear y publicar nuestros sitios web, aunque también podemos instalar un servidor web en nuestro equipo y allí crear nuestro propio sitio web.

Apache es el programa más comúnmente usado como servidor web.

Desarrollo de la tarea

En esta tarea vamos a crear un formulario de contacto al igual que el formulario que hiciste en la tarea Análisis: Tu sitio Web, pero en vez de usar los servicios de google, vamos a programarlo e instalarlo en nuestro propio servidor. Si recuerdas la tarea anterior, en la academia de música, Sara y Elena crearon este formulario de contacto.

La tarea consta de varias fases, puedes ir haciéndolas una a una.

1. Instalación de XAMPP

Lo primero que tenemos que hacer es instalar Apache en nuestro ordenador para que pueda funcionar como servidor de páginas web. En esta tarea utilizamos el programa XAMPP que incluye apache.

El programa xampp se puede descargar en el siguiente enlace. En el siguiente vídeo se explica como instalarlo en tu ordenador.


2. Formulario en HTML

Una vez instalado el servidor, debemos crear un formulario en html.

Para ello tenemos que crear un fichero de texto con el programa Notepad, llamarlo formulario.html y copiarlo en la carpeta HTDOCS del programa XAMPP.

El código a teclear es el siguiente:

 Código formulario HTML

En el bloque rojo indicamos el archivo que hará el tratamiento de los datos, en nuestro caso, tratamiento_datos.php y el método de envío de datos que es POST.

Fíjate bien en el código html y en los CAMPOS con los que que vas a trabajar:

En el bloque verde utilizamos campos de tipo texto para introducir el nombre y los dos apellidos.

En el bloque azul utilizamos campos de tipo checkbox para introducir el nivel de estudios; en este tipo de campos se puede seleccionar más de una opción.

En el bloque amarillo utilizamos botones de tipo radio para introducir la edad, son botones excluyentes, se puede elegir uno u otro, pero no los dos a la vez.

Por último, necesitamos implementar unos BOTONES:

El bloque violeta incluye los botones de enviar y borrar los datos (que nos deja el formulario en blanco).

3. Programamos en PHP

Ahora tenemos que crear en la carpeta HTDOCS, con el Notepad, el fichero tratamiento_datos.php con el siguiente contenido.

Tratamiento de datos

La explicación de este código es la siguiente:

En el bloque 1 se hace el tratamiento del nombre y los apellidos que se muestran por pantalla, en el bloque 2 se hace el tratamiento de los estudios; para ello se recorre un array y se imprimen los elementos.

En el bloque 3 se hace el tratamiento de la edad, mediante un array que se recorre dentro de un blucle.

Atención: Conceptos como array o blucle no te sonarán mucho, pero realmente no es necesario conocerlos a fondo para realizar esta tarea, son estructuras de control que veremos a fondo en el siguiente trimestre.

4. Probamos

Cuando queramos usar nuestro equipo como servidor (y probar nuestro formulario), debemos asegurarnos de que esté funcionando el programa XAMPP; en particular, el servicio APACHE debe estar activo.

XAMPP

Captura de pantalla de elaboración propia

Ahora ya podemos usar el navegador como servidor de páginas web.

Ponemos en el navegador la dirección interna locahost/formulario.html, aparecerá el formulario vacio, lo rellenamos y pulsamos el botón enviar.

Envío de formulario

A continuación, tras pulsar en el botón Enviar se cargará automáticamente en el navegador el fichero tratamiento_datos.php que nos mostrará los datos que hemos introducido previamente en el formulario.

Resultado del envío

5. Aplicamos CSS

Ya tenemos nuestro formulario funcionando, ahora vamos a modificarlo y mejorarlo para que se parezca lo más posible al formulario que hemos creado en la tarea anterior con google.

Puesto que ya hemos hecho un curso de HTML y CSS, solo hemos de poner en práctica todo lo aprendido.

Te adjuntamos un ejemplo de hoja de estilo que debes incorporar en tu formulario.html para aplicar la clase "formulario". También puedes modificar el estilo CSS que te damos en ese ejemplo (colores, tipo, tamaño de letra, alineación...) para darle tu toque personal al formulario.

Los nuevos archivos se llamarán: formulario_new.html, tratamiento_datos_new.php, demo_new.css

Una vez realizadas las cinco fases de la tarea y creado tu propio formulario personalizado

Vamos a documentar todo el proceso:

  • Debes realizar un videotutorial donde explicarás el funcionamiento de tu servidor, nos mostrarás tu carpeta HTDOCS con todos los archivos creados, abrirás el formulario, lo rellenarás y ejecutarás (pulsando el botón enviar) para ver el resultado.
  • Una vez grabado el vídeo tienes que subirlo a tu cuenta de youtube y ponerle las etiquetas #IEDA #aulatic

Modo de envío

Deberás entregar las siguientes evidencias de tu aprendizaje:

  • Debes entregar un único archivo comprimido con ZIP y llamado tarea_2.3_pellido1_apellido2.zip; este comprimido debe incluir los archivos: formulario_new.html, tratamiento_datos_new.php, demo_new.css)
  • La url del vídeo en youtube.

Las direcciones deben estar bien construidas y ser navegables, así que compruébalo antes de enviar la tarea, en otro caso no serán calificadas.