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 incluir todos los componentes necesarios para construir el formulario.
- El directorio assets/css/ donde ubicaremos los estilos,
- El directorio assets/js/ que contendrá toda la funcionalidad AJAX y JavaScript
- El directorio assets/img/ con el preloader.
- El directorio inc/ contiene el fichero php que recibe y comprobará si los datos del formulario son correctos.
|
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 |
Frameworks y Scripts
Necesitamos incluir en la cabecera los siguientes ficheros para que funcione correctamente:
- Bootstrap 4>, el framework que utilizamos para maquetar el formulario.
- FontAwesome 5>, el framework que permite utilizar iconos y otras utilidades en nuestras páginas web.
- Estilos, con nuestra estilos personalizados, en caso de disponer de ellos.
- JavaScript, los scripts necesarios de JavaScript y Ajax para hacer funcionar el formulario.
|
1 2 3 4 5 6 7 8 9 10 11 |
<!-- Bootstrap --> <link type="text/css" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /> <!-- Fontawesome --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous"> <!-- Custom CSS --> <link rel="stylesheet" type="text/css" media="screen" href="assets/css/style.css" /> <!-- Custom Scripts --> <script src="assets/js/login.js"></script> |
El formulario
Todo formulario requiere de código HTML5 para su visualización por parte del cliente 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 42 43 44 45 46 47 48 49 50 51 52 53 |
<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="input-group mb-3"> <div class="input-group-append"> <span class="input-group-text"><i class="fas fa-user"></i></span> </div> <input type="email" id="email" name="email" value="test@test.com" class="form-control input_user" value="" placeholder="Email" autocomplete /> </div> <div class="input-group mb-2"> <div class="input-group-append"> <span class="input-group-text"><i class="fas fa-key"></i></span> </div> <input type="password" id="password" name="password" autocomplete class="form-control input_pass" placeholder="password"> </div> <div class="form-group"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="customControlInline"> <label class="custom-control-label" for="customControlInline">Recordarme</label> </div> </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 18 |
<?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); # comprobación de datos contra la base de datos ($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í
