Formulario de Login usando Bootstrap4, jQuery3 y PHP

Una razón para seguir utilizando jQuery es por su sencillez al realizar peticiones Ajax usando los métodos $.ajax $.post y $.get

$.ajax $.post y $.get nos permite realizar peticiones asíncronas, por lo que pueden ser ejecutadas mientras que el navegador es libre de realizar otras operaciones al mismo tiempo.

Estas peticiones usan la librería XMLHttpRequest y nos permite realizar peticiones tanto peticiones GET como POST.

XMLHttpRequest fué incluida en Internet Explorer 5.0 por Microsoft como un objeto ActiveX y posteriormente fué incluido por navegadores Mozilla, Opera y Safari.

  • $.ajax es una función o método de jQuery que nos permite realizar peticiones asíncronas al servidor.
  • $.post y $.get son una forma sencilla que tiene jQuery para simplificar aún más la función $.ajax.

$.ajax

$.ajax nos permite realizar esas peticiones asíncronas tan necesarias en nuestras páginas web.

Estas peticiones podrán ser tanto POST como GET. Un ejemplo sencillo de uso sería el siguiente:

Tiene gran número de configuraciones, donde las más comunes son:

  • type: Será el método que queremos utilizar (Post o Get).
  • url: la ruta del fichero que recibirá la petición.
  • data: cotiene una cadena de texto con los datos devueltos por el fichero.
  • dataType: Formato de los datos devueltos por el servidor (xml, json, script, text, html), que por defecto serán texto.
  • success: función que se ejecutará en caso de tener éxito la solicitud.
  • error: función que se ejecuta si la petición falla.
  • complete: es una función que se ejecutará una vez llamadas success o error.
  • cache: Valor booleano (true/false). Por defecto es true y nos permite forzar si las páginas serán cacheadas por el navegador.
  • beforeSend: es una función que nos permitirá modificar el objeto antes de ser enviado.
  • async: Valor booleano (true/false) por defecto a true por lo que se realizar una operación asíncrona.
  • contentType: como son enviados los datos al servidor. Por defecto serán UTF-8
  • crossDomain: Valor booleano (true/false) que por defecto es false. Si queremos forzar que las peticiones sean sobre el mismo dominio lo estableceremos a true.
  • timeout: nos permite indicar el tiempo en milisegundos en el que acabará la petición.
  • username y password: usuario y clave para realizar peticiones de acceso HTTP usando XMLHttpRequest.

$.post

$.post es la versión simplificada de $.ajax y tal y como su nombre indica, realiza una petición POST.

Los datos retornados por sucesss son almacenados en el objeto data.

La configuración de $.post es bastante sencilla:

  • url: la ruta del fichero que recibirá la petición.
  • data: cotiene una cadena de texto con los datos devueltos por el fichero.
  • success: función que se ejecutará en caso de tener éxito la solicitud.
  • dataType: Tipos de datos devuelto por el servidor (xml, json, script, text, html) y por defecto será texto

Login con Bootstrap, jQuery y PHP

Para crear el formulario de acceso necesitaremos las librerías:

  • Bootstrap 4 >
  • jquery 3 >
  • fontawesome 5 >

Ahora veamos el fichero jquery-login.js y cómo funcionaría una solicitud de acceso a un área privada:

  • Se realiza una petición Post al fichero login.php.
  • login.php recibe email y password de un formulario y chequeará contra la base de datos si estos datos son correctos.
  • Si fueran correctos iniciamos sessiones, cookies, etc ..
  • Retornamos los datos que deseemos a través del objeto data en formato json.

Estos datos devueltos podremos hacer debug de ellos a través de console.log() y si es correcto el acceso hacer una recarga de pagina o redireccionarlo a otra que deseemos.

El fichero de login ya queda a nuestra elección personalizarlo (aquí tan solo se está comprobando que los datos son recibidos y se devuelven en formato json para realizar debug sobre ellos):

El caso es que podremos realizar cualquier proceso que deseemos pero en este caso tan solo necesitamos saber si login.php valida el acceso.

La alternativa para crear un formulario de login sin necesidad de usar jQuery que sobrecargue tu página es usando Ajax directamente. Para saber cómo implementar el formulario de login puedes seguir este enlace.

 

Etiquetado

Deja un comentario

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