Registro Usuario con pdo y modal, javascript, ajax

Cómo Registrar un Usuario desde un Formulario de Inicio de Sesión

Paso 1: Formulario de Inicio de Sesión

Para registrar un usuario desde el formulario de inicio de sesión, primero necesitas tener un formulario de inicio de sesión con un botón para que los usuarios puedan registrarse.

Código del Formulario de Inicio de Sesión

        <div class="login-form border border-2 p-5 bg-secondary text-white">
        <!-- Imagen redonda centrada -->
        <div class="profile-image mb-4 text-center">
          <img src="img/user.png" alt="Usuario" class="rounded-circle mx-auto" style="width: 150px; height: 150px;">
        </div>
        <h2 class="text-center">Inicio de Sesión</h2>
        <form style="width: 300px;">
          <div class="form-group">
            <label for="usuario">Usuario:</label>
            <input type="text" class="form-control" id="usuario_login" placeholder="Ingrese su usuario">
          </div>
          <div class="form-group">
            <label for="contrasena">contrasena:</label>
            <input type="password" class="form-control" id="contrasena_login" placeholder="Ingrese su contrasena">
          </div><br>
          <div class="text-center">
            <button type="submit" class="btn btn-primary btn-block mb-3">Iniciar Sesión</button>
            <button type="button" class="btn btn-warning btn-block mb-3 ms-3" data-toggle="modal" data-target="#registroModal">Registrarse</button>
  
          </div>
        </form>
        <div class="bg-white form-control">
          <!-- Enlaces para recuperar contrasena -->
          <a href="#" class="mt-2 d-block">¿Olvidó su contrasena?</a>
        </div>
      </div>
    

...

Paso 2: Conexión a la Base de Datos

Para insertar un registro o realizar consultas, siempre es necesario conectarse a la base de datos. Aquí tienes un ejemplo de cómo hacerlo utilizando PDO.

Me gusta utilizar PDO para la conexión. Puedes ver el código de conexión aquí.

Paso 3: Formulario de Registro de Usuario

Obviamente, necesitas un formulario de registro de usuario para que los usuarios puedan proporcionar sus datos. Aquí tienes el código del formulario.

Código del Formulario de Registro de Usuario

        <!-- Modal de Registro -->
        <div class="modal fade" id="registroModal" tabindex="-1" aria-labelledby="registroModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="registroModalLabel">Registro de Usuario</h5>
                <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                <!-- Agrega una clase CSS personalizada para el formulario -->
                <form class="container-fluid formulario-registro">
                  <div class="mb-3">
                    <label for="idRol" class="form-label">Rol:</label>
                    <input type="text" class="form-control" id="idRol" placeholder="Rol" value="1">
                  </div>
      
                  <div class="mb-3">
                    <label for="nombre" class="form-label">Nombre:</label>
                    <input type="text" class="form-control" id="nombre" placeholder="Ingrese su nombre">
                  </div>
                  <div class="mb-3">
                    <label for="apellidos" class="form-label">Apellidos:</label>
                    <input type="text" class="form-control" id="apellidos" placeholder="Ingrese sus apellidos">
                  </div>
                  <div class="mb-3">
                    <label for="email" class="form-label">Correo Electrónico:</label>
                    <input type="email" class="form-control" id="email" placeholder="Ingrese su correo electrónico">
                  </div>
                  <div class="mb-3">
                    <label for="contrasena" class="form-label">contrasena:</label>
                    <input type="password" class="form-control" id="contrasena" placeholder="Ingrese su contrasena">
      
                  </div>
      
                </form>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary" id="registrarUsuario">Registrarse</button>
              </div>
            </div>
          </div>
        </div>
    

Paso 4: Envío de Datos

En lugar de enviar datos directamente con PHP, utilizaremos JavaScript y PHP para hacer que la página sea más segura. Aquí está el código JavaScript que se encarga de enviar los datos al servidor utilizando AJAX.

En esta acción, enviamos una acción para separar las acciones unas de otras y tener el código mejor organizado.

Código JavaScript para el Envío de Datos

        <script>
        // Agregar Usuarios
        $("#registrarUsuario").click(function() {
          var nombre = $("#nombre").val();
          var apellidos = $("#apellidos").val();
          var correo = $("#email").val();
          var contrasena = $("#contrasena").val();
          var idRol = $("#idRol").val(); // Obtener el valor del campo de rol
          var accion = 2; // Establece la acción como 2
    
          var datos = {
            nombre: nombre,
            apellidos: apellidos,
            correo: correo,
            contrasena: contrasena,
            idRol: idRol, // Agrega el valor del campo de rol al objeto de datos
            accion: accion // Agrega la acción al objeto de datos
          };
    
          $.ajax({
            type: "POST",
            url: "./sistema/ajax/registrar_usuario.php",
            data: datos,
            dataType: "text", // Cambia "dataType" a "text" para recibir una respuesta de tipo texto
            success: function(response) {
              if (response === "success") {
                // Registro exitoso, puedes redirigir al usuario o mostrar un mensaje de éxito
                alert("Registro exitoso");
              } else {
                // Registro fallido, muestra un mensaje de error o realiza otras acciones
                alert("Error en el registro");
              }
            },
            error: function() {
              // Maneja errores de la solicitud
              alert("Error en la solicitud");
            }
          });
        });
      </script>
    

Paso 5: El Servidor

El servidor es responsable de enviar los datos a la base de datos y responder al JavaScript para mostrar un mensaje positivo o negativo según el caso. Aquí tienes el código completo del servidor.

NOTA: Hay algunas cosas que debes tener en cuenta:

• Primero, en relación al uso de AJAX, coloqué los archivos AJAX o servidores en una carpeta con el mismo nombre ajax.
• Segundo, en el lado del formulario, los campos no pueden repetir sus IDs, ya que esto puede causar conflictos.

Código del Servidor PHP

        <?php

        include_once('../../conexion.php');
        
        if ($_SERVER["REQUEST_METHOD"] === "POST") {
            if (isset($_POST['accion']) && $_POST['accion'] == 2) {
                $nombre = $_POST['nombre'];
                $apellidos = $_POST['apellidos'];
                $correo = $_POST['correo'];
                $contrasena = $_POST['contrasena'];
                $idRol = $_POST['idRol']; // Obtén el valor del campo de idRol
        
                try {
                    $hashedPassword = password_hash($contrasena, PASSWORD_DEFAULT);
        
                    $sql = "INSERT INTO usuarios (nombre, apellidos, email, password, idRol) VALUES (:nombre, :apellidos, :email, :password, :idRol)";
                    $stmt = $pdo->prepare($sql);
                    $stmt->bindParam(':nombre', $nombre);
                    $stmt->bindParam(':apellidos', $apellidos);
                    $stmt->bindParam(':email', $correo);
                    $stmt->bindParam(':password', $hashedPassword);
                    $stmt->bindParam(':idRol', $idRol); // Agrega el idRol a la inserción en la base de datos
                    $stmt->execute();
        
                    echo "success";
                } catch (PDOException $e) {
                    echo "Error en la base de datos: " . $e->getMessage();
                }
            } else {
                echo "Acción no válida";
            }
        } else {
            echo "Solicitud no válida";
        }
    

Este es un registro básico de un usuario. En el próximo tutorial, agregaré mensajes swal.fire para que sea más agradable de ver. También implementaré medidas de seguridad, como verificar si un usuario ya está registrado a través de su correo electrónico.

La contraseña ya está encriptada con password_hash.

Estoy mejorando dentro de lo posible.

---

Ir al índice

<