Registro y validación de usuarios con Ajax PHP y MySQL

Registro y validación de usuarios con Ajax PHP y MySQL. En esta publicación nos enfocaremos en crear un formulario para registro de usuarios. Sin embargo, usaremos un formulario dinámico con la ayuda de jQuery, PHP, HTML5, MySQL, para lograr un registro muy interactivo.

La idea es tener que registrar usuarios usando algunos Framework que existen en el mercado web para no tener que recargar la página web y/o sistema web dando agilidad al sistema y logrando no consumir muchos recursos del servidor web.

Registro y validación de usuarios con Ajax PHP y MySQL

Hoy en día crece el desarrollo dinámico y uno de los pilares más importantes que exige las empresas es la agilidad de las plataformas para la atención del cliente.

Con este pequeño sistema de registros estamos agilizando el proceso. Por lo tanto, nuestro sistema será más veloz, al ahorrar las validaciones del PHP que todos sabemos trabaja al lado del servidor.

Es por tal motivo, les dejo este modelo de registro vía AJAX para que implementen a sus sitios web y/o sistemas web.

Componentes a utilizar en este sistema web

• AJAX
• Lenguaje jQuery
• PHP
• Base de datos MySQL
• Framework BootStrap

Estructura del sistema de registro y validacion de usuarios con AJAX

1. Fichero «php_registrarajax»

Este archivo contiene los datos de la tabla en el cual se almacenaran los registros de usuarios.

-- --------------------------------------------------------

CREATE TABLE IF NOT EXISTS `usuarios` (
  `UsuarioId` int(11) NOT NULL AUTO_INCREMENT,
  `Nombres` varchar(120) DEFAULT NULL,
  `UsuarioEmail` varchar(120) NOT NULL,
  `Celular` varchar(20) NOT NULL,
  `Password` varchar(150) NOT NULL,
  PRIMARY KEY (`UsuarioId`),
  UNIQUE KEY `UsuarioEmail` (`UsuarioEmail`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

--
-- Volcar la base de datos para la tabla `usuarios`
--

2. Fichero index.php

Fichero donde se desarrollara la recepción y envío de la información a la base de datos.

Librerías externas

<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="assets/signup-form.css" type="text/css" />

<!-- Bootstrap core CSS -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/sticky-footer-navbar.css" rel="stylesheet">

<script src="assets/jquery-1.12.4-jquery.min.js"></script> 
<script src="assets/jquery.validate.min.js"></script> 
<script src="assets/ValidarRegistro.js"></script>

Formulario de proceso

<div class="signup-form-container"> 
        
        <!-- form start -->
        <form method="post" role="form" id="register-form" autocomplete="off">
          <div class="form-header">
            <h3 class="form-title"><i class="fa fa-user"></i>
            <span class="glyphicon glyphicon-user"></span>  Registrarme</h3>
          </div>
          <div class="form-body"> 
            
            <!-- json response will be here -->
            <div id="errorDiv"></div>
            <!-- json response will be here -->
            
            <div class="form-group">
              <div class="input-group mb-3">
                <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"><span class="glyphicon glyphicon-user"></span></span> </div>
                <input name="name" type="text" id="name" class="form-control" placeholder="Nombres" maxlength="40" autofocus="true">
              </div>
              <span class="help-block" id="error"></span> 
            </div>
            
            
            <div class="form-group">
              <div class="input-group mb-3">
                <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"><span class="glyphicon glyphicon-envelope"></span></span> </div>
                <input name="email" id="email" type="text" class="form-control" placeholder="Email" maxlength="50">
              </div>
              <span class="help-block" id="error"></span> 
              </div>
            <div class="form-group">
              <div class="input-group mb-3">
                <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"><span class="glyphicon glyphicon-phone"></span></span> </div>
                <input name="celular" type="text" id="celular" class="form-control" placeholder="Celular" maxlength="40">
              </div>
              <span class="help-block" id="error"></span> 
            </div>
            
            <div class="row">
              <div class="form-group col-lg-6">
                <div class="input-group mb-3">
                  <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"><span class="glyphicon glyphicon-lock"></span></span> </div>
                  <input name="password" id="password" type="password" class="form-control" placeholder="Contraseña">
                </div>
                <span class="help-block" id="error"></span> </div>
              <div class="form-group col-lg-6">
                <div class="input-group mb-3">
                  <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"><span class="glyphicon glyphicon-lock"></span></span> </div>
                  <input name="cpassword" type="password" class="form-control" placeholder="Repita contraseña">
                </div>
                <span class="help-block" id="error"></span> </div>
            </div>
          </div>
          <div class="form-footer">
            <button type="submit" class="btn btn-primary" id="btn-signup"> <span class="glyphicon glyphicon-log-in"></span> Registrarme </button>
          </div>
        </form>
</div>

3. RegistroAjax.php

La consulta que almacenara la información a la base de datos que fue recogida y validada por el formulario.

// Consulta para insertar los registros a la base de datos 
$query = "INSERT INTO usuarios(Nombres,UsuarioEmail, Celular,Password) VALUES(:name, :email, :celular, :pass)";
		
$stmt = $DBcon->prepare( $query );
$stmt->bindParam(':name', $full_name);
$stmt->bindParam(':email', $user_email);
$stmt->bindParam(':celular', $user_celular);
$stmt->bindParam(':pass', $hashed_password);

4. RevisarEmail.php

Aquí detallaremos una condicional para validar si el correo electrónico existe en la base de datos. Por lo tanto, si existe enviara mensaje de error.

// Condicional para revisar el correo electronico
if ( isset($_REQUEST['email']) && !empty($_REQUEST['email']) ) {
		
		$email = trim($_REQUEST['email']);
		$email = strip_tags($email);
		// Consulta para verificar la existencia del correo
		$query = "SELECT UsuarioEmail FROM usuarios WHERE UsuarioEmail=:email";
		$stmt = $DBcon->prepare( $query );
		$stmt->execute(array(':email'=>$email));
		
		if ($stmt->rowCount() == 1) {
		//Si el correo electrónico ya existe muestra false
			echo 'false'; 
		} else {
			echo 'true'; 
		}
}

CONCLUSIÓN

El punto crítico de todo sistema es la agilidad, en algunos casos PHP puede trabajar un poco lento. Sin embargo, para agilizar este proceso es recomendable corregir algunos que detallaremos a continuación.

• Activar el PHP 7.2 en tu servidor.
• Migrar a registros y validaciones con JavaScript y jQuery que en este artículo detallamos.
• Utilizar Framework externos como el CDN de BootStrap

Espero que estos breves concejos les ayuden a crear sistemas más ligeros que toda empresa desea lograr.

Muy agradecido y no se olviden de suscribirse para recibir artículos similares en sus correos electrónicos.

DESCARGAS