Validar usuario existente con Ajax, jQuery & PHP. Sin duda los registros duplicados es un verdadero problema para un sistema web. Es por tal motivo, que en este artículo nos enfocaremos de evitar estos inconvenientes usando un validador de usuarios y también de correo electrónico en línea.
Hoy las grandes compañías apuestan por este método para validar usuarios y otros campos que ve convenientes. Por ejemplo, el famoso correo Gmail, Youtube, Blogger, entre otras aplicaciones utilizan estos métodos para validar sus datos, sin tener que cargar la página web.
Validar usuario existente con Ajax, jQuery & PHP
Estas grandes tecnologías usan librerías y lenguajes de programación para lograr tal objetivo. A continuación, nombrare los recursos que necesitaremos para realizar este ejemplo.
- JQuery Ajax. Sera el encargado de realizar la petición al servidor MySQL
- Lenguaje de programación PHP. Para realizar la consulta.
- HTML. Para albergar el formulario, es decir la interfaz gráfica de la página web.
- Librería BootStrap. Para realzar la interfaz gráfica.
En este ejemplo, veremos un pequeño sistema para la verificación de usuario y correo electrónico en vivo usando Ajax, jQuery, y MySQL. Este tipo de validación es muy usado en la mayoría de los portales en línea.
¿Cómo funciona el sistema?
Cuando un usuario trata de registrase le piden nombre de usuario y/o coreo electrónico. Sin embargo, justo después de que el usuario ingrese el nombre de usuario, se desencadena una llamada AJAX que solicitará la página PHP llamada «ComprobarDisponibilidad.php", para obtener la disponibilidad del nombre de usuario o Email.
Si la verificación es verdadera devolverá una respuesta basándose en la disponibilidad y existencia de dichos registros enviados.
Estructura de nuestro sistema de validación
En este apartado mostraremos una serie de pasos que es parte del funcionamiento de este modelo de validación.
1. Código para la tabla usuarios
Primero, creamos nuestra base de datos llamado «php_validarusuario«. Luego, importe la tabla usuarios para ejecutar este ejemplo en nuestro servidor web. La consulta SQL para la tabla usuarios es la siguiente:
CREATE TABLE IF NOT EXISTS `usuarios` ( `idUser` int(11) NOT NULL, `Usuario` varchar(100) DEFAULT NULL, `Password` varchar(100) DEFAULT NULL, `Nombres` varchar(100) DEFAULT NULL, `Apellidos` varchar(100) DEFAULT NULL, `Email` varchar(150) DEFAULT NULL ) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8; -- Volcado de datos para la tabla `usuarios` INSERT INTO `usuarios` (`idUser`, `Usuario`, `Password`, `Nombres`, `Apellidos`, `Email`) VALUES (1, 'carlosdb', '894578', 'Carlos', 'Flores', 'carlos@gmail.com'), (2, 'mariadb', '346622', 'Maria', 'Giron', 'maria@gmail.com'), (3, 'henrydb', '124152', 'Henry', 'Caceres', 'henry@gmail.com'), (4, 'angeldb', '985820', 'Angel', 'Cotrina', 'angel@gmail.com'); ALTER TABLE `usuarios` ADD PRIMARY KEY (`idUser`); ALTER TABLE `usuarios` MODIFY `idUser` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=5;
2. La interfaz del formulario para la disponibilidad de usuario y Email.
Usaremos un formulario HTML que contiene 2 campos:
- Nombre de usuario.
- Correo electrónico.
Al escribir sobre el campo usuarios desencadena la llamada AJAX en el evento onBlur llamado «comprobarUsuario«. Al término mostrara un mensaje sobre el estado del nombre ingresado.
<form>
<div class="form-group">
<div class="username">
<label for="ComprobarUsuario">Comprobar usuario:</label>
<input name="usuario" type="text" id="usuario" class="form-control" onBlur="comprobarUsuario()">
<span id="estadousuario"></span>
</div>
<p><img src="LoaderIcon.gif" id="loaderIcon" style="display:none" /></p>
</div>
<div class="form-group">
<div class="email">
<label for="ComprobarEmail">Comprobar usuario:</label>
<input name="email" type="text" id="email" class="form-control" onBlur="comprobarEmail()">
<span id="estadoemail"></span> </div>
<p><img src="LoaderIcon.gif" id="loaderIconEmail" style="display:none" /></p>
</div>
</form>
3. jQuery para solicitar disponibilidad de usuario mediante una función
Esta función utiliza jQuery como motor de consulta. Sin embargo, el uso de Ajax es para enviar el nombre de usuario ingresado junto con la solicitud de una página PHP.
<script>
function comprobarUsuario() {
$("#loaderIcon").show();
jQuery.ajax({
url: "ComprobarDisponibilidad.php",
data:'usuario='+$("#usuario").val(),
type: "POST",
success:function(data){
$("#estadousuario").html(data);
$("#loaderIcon").hide();
},
error:function (){}
});
}
function comprobarEmail() {
$("#loaderIconEmail").show();
jQuery.ajax({
url: "ComprobarDisponibilidad.php",
data:'email='+$("#email").val(),
type: "POST",
success:function(data){
$("#estadoemail").html(data);
$("#loaderIconEmail").hide();
},
error:function (){}
});
}
</script>4. Consultar el nombre en la base de datos usando PHP
Básicamente, este código PHP es el motor del ejemplo, su ejecución es en base a la llamada AJAX de jQuery. Por lo tanto, compara los datos de usuario en la base de datos. Basándose en el resultado obtenido, responderá a la llamada AJAX con una respuesta verdadera o falsa.
<?php
require_once("DBController.php");
$db_handle = new DBController();
if(!empty($_POST["usuario"])) {
$query = "SELECT * FROM usuarios WHERE usuario='" . $_POST["usuario"] . "'";
$user_count = $db_handle->numRows($query);
if($user_count>0) {
echo "<span class='estado-no-disponible-usuario'> Usuario no Disponible.</span>";
}else{
echo "<span class='estado-disponible-usuario'> Usuario Disponible.</span>";
}
}
if(!empty($_POST["email"])) {
$query = "SELECT * FROM usuarios WHERE Email='" . $_POST["email"] . "'";
$user_count = $db_handle->numRows($query);
if($user_count>0) {
echo "<span class='estado-no-disponible-email'> Email no Disponible.</span>";
}else{
echo "<span class='estado-disponible-email'> Email Disponible.</span>";
}
}
?>
CONCLUSIÓN
- La usabilidad de este método es muy recomendado, como dije líneas arriba las grandes compañías tecnológicas líderes en el rubro de internet usan estos sistemas de validación en línea.
- Con más razón nuestros proyectos deberían tener un sistema de validación de Email, Usuarios, Códigos, etc.
- Ahora, les dejare un link para que puedan descargar el sistema completo usando PDO, MySQL y también la base de datos. Espero que este código les sea de utilidad.
