Formulario de Login usando Ajax+JavaScript, PHP+JSON y Bootstrap 4.3

En este HowTo aprenderás a realizar un formulario de acceso (login) haciendo uso de  Ajax+JavaScript, por lo que no tendrás que recurrir a bibliotecas externas como jQuery.

Para empezar puedes ver un ejemplo del formulario funcionando en el siguiente enlace

Estructura de directorios y ficheros

Vamos a empezar preparando una estructura de directorios y ficheros que nos servirá para construir el formulario con todos sus componentes:

  • El directorio assets/ con un directorio css/ donde ubicaremos los estilos, el directorio js/ que contendrá toda la funcionalidad AJAX y JavaScript y el directorio img/ con el preloader.
  • El directorio inc/ contiene el fichero php que recibe y trata los datos del formulario.

Todo formulario requiere de código HTML5 para su construcción y funcionamiento y contendrá una serie de elementos que hacen que este funcione correctamente:

  • En primer lugar necesitamos solicitar datos al usuario por lo que vamos a incluir un campo email y clave. Para ello hacemos uso de los elementos <input>.
  • También necesitamos de un área donde mostrar los mensajes de error si es que fuera necesario y un preloader para indicar al usuario que tiene que esperar mientras  se están consultando sus credenciales.

Ajax y JavaScript

Una vez tenemos construido el formulario vamos a incluir la funcionalidad de este y para ello utilizamos Ajax y JavaScript. Ajax se encarga de realizar la petición al servidor donde se comprobarán si los datos introducidos por el usuario son correctos.

  • Haciendo uso del objeto XMLHttpRequest realizamos una petición asíncrona que se encarga de enviar al servidor los datos del formulario que han sido introducidos por el usuario.
  • El encargado de recibir los datos del formulario será el fichero login.php, que procesa estos datos  y una vez comprobados (por ejemplo contra una Base de Datos) devuelve unos resultados en formato JSON que indicarán si este proceso se ha realizado correctamente.

Por último necesitamos incluir el fichero login.php

  • Le vamos a incluir una cabecera indicando que el contenido del fichero está en formato JSON.
  • A continuación usamos la función filter_input() con cada dato recibido y los saneamos para poder tratarlos.
  • En este ejemplo tan sólo voy a compararlo con unas cadenas para así comprobar que todo funciona como es debido, pero lo suyo es compararlos contra una tabla de usuarios de una base de datos.
  • Los datos los devolvemos en formato JSON por lo que hacemos uso de la función PHP json_encode().
  • Si el acceso fuera correcto podemos incluir sesiones de PHP para identificar que usuario se ha validado correctamente, con lo que con devolver true o false nos bastaría para terminar de realizar las comprobaciones con JavaScript.

CSS y preloader

La maquetación del formulario la realizamos con Bootstrap 4.3 por lo que la hoja de estilos adicional no tiene misterio alguno. En ella tan sólo vamos a ocultar el preloader inicialmente.

La imagen del preloader es un gif animado que vamos a guardar en el directorio assets/img/

El ejemplo funcionando lo podéis visualizar y descargar aquí

Etiquetado

Deja una respuesta

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.