Aplicaciones Web

Práctica 5
Login
En la mayoría de las aplicaciones web restringen el acceso a usuarios a través de un formulario denominado login
(ver imagen).

Para realizarlo se deberá de hacer lo siguiente en código PHP y MySQL (ver vídeo):

• Crear el formulario e implementar validaciones

• Darle funcionalidad
o Conectarse a la base de datos
o Generar consulta
o Mostrar resultados y mensajes (en caso de que sea correcta o incorrecta la consulta)

1. Inicialmente deberá de descargar una imagen que haga referencia al usuario y almacenar en la carpeta de
imágenes.

2. La página index.php renombrarla como login.php

3. Hacerle cambios al <title> </titile>

Página 1
 Aplicaciones Web
4. Utilizar el grid de Bootstrap (container, row y col) para que la página sea responsiva
5. Entra a la página oficial de bootstrap y selecciona la versión que estas utilizando, Insertar los códigos de los
controles (cuadros de texto, etiquetas y botones)

Página 2
 Aplicaciones Web
6. Validar los controles con las propiedades del control o el pattern

Una vez que el formulario esta diseñado y validado de acuerdo a los requerimientos del usuario (ver siguiente imagen), se procede a darle la funcionalidad.

Página 3
 Aplicaciones Web

7. Crear el archivo validar.php y almacenarlo en la carpeta de trabajo

8. En el archivo de login.php agregar en la cabecera de <form> las siguientes instrucciones

Página 4
 Aplicaciones Web
9. El archivo de php permitirá realizar los siguiente:
a. Vincularse con la BD y otros archivos
b. Conectarse a la Base de Datos
c. Construir la consulta (desde phpMyAdmin)
d. Ejecutar la consulta desde php
e. En función del resultado de la consulta, mostrar mensaje o redireccionarse a otra página.

En caso de que el usuario o contraseña estén incorrectos o no este registrado el usuario, manda ventana modal con mensaje de error.

Página 5
 Aplicaciones Web

Si los datos esta correctos, se redireccionará a la página que muestre la información del usuario.

10. La ventana modal para que no se cierre de manera inesperada, abra el archivo de mensaje.php y utiliza el siguiente código.

Página 6