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.
|
1 2 3 4 5 6 7 8 9 10 |
|- assets/ |- css/ style.css |- js/ login.js |- img/ loader.gif |- inc/ |- login.php |- index.php |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<aside id="login" class="col-md-4"> <div class="card"> <div class="card-body"> <a href="" class="float-right btn btn-outline-primary">Registro</a> <h4 class="card-title mb-4 mt-1">Acceso</h4> <hr /> <form method="post" name="login_form" id="login_form" action="" onsubmit="enviar(this); return false;"> <div class="form-group"> <input class="form-control" placeholder="Email" type="email" id="email" name="email" value="jose@artegrafico.net" autocomplete /> </div> <div class="form-group"> <input class="form-control" placeholder="******" type="password" id="password" name="password" autocomplete /> </div> <div class="row"> <div class="col-md-6"> <div class="form-group"> <button type="submit" class="btn btn-primary btn-block" id="access" name="access">Acceso</button> </div> </div> <div class="col-md-6 pt-2 pr-4 text-right"> <a class="small" href="#" class="">¿Olvidó su contraseña?</a> </div> </div> </form> <!-- messages --> <div class="row"> <div class="col-12"> <div class="outer-loader"> <span class="inner-loader"><img src="assets/img/loader.gif" alt="consultando ..." /></span> <span class="messages"></span> </div> <span class="debug"></span> </div> </div> <!-- end messages --> </div> </div> </aside> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
function enviar() { var loader = document.querySelector(".inner-loader"); var messages = document.querySelector(".messages"); let xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(res){ messages.innerHTML = ""; (xhr.readyState < 4) ? loader.style.display = "block" : loader.style.display = "none"; } xhr.onload = function () { if (xhr.status == 200) { let res = JSON.parse(this.responseText); //console.log(res); (res.access) ? messages.innerHTML = "login correcto" : messages.innerHTML = "login incorrecto"; } } xhr.open('post', 'inc/login.php', true); // prepare FormData() let form = document.querySelector("#login_form"); data = new FormData(form); //data.append('origin', "login"); // campo adiccional // Send Request xhr.send(data); } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?php header('Content-Type: application/json'); sleep(2); // check data vs DB $email = filter_input(INPUT_POST, 'email', FILTER_SANITIZE_EMAIL);; $password = filter_input(INPUT_POST, 'password'); $origin = filter_input(INPUT_POST, 'origin', FILTER_SANITIZE_STRING); ($email == "test@test.com" && $password == "1234" ) ? $access = true : $access = false; // return data to debug echo json_encode([ 'email' => $email, 'password' => $password, 'origin' => $origin, 'access' => $access ]); |
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.
|
1 |
.inner-loader { display: none; } |
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í
