Registro Usuario PDO, Jquery, ajax

En la entrada anterior aprendimos a crear un formulario de inicio de sesión.

En esta entrada, continuaremos con el código para registrar a los usuarios.

Porque no podrás iniciar sesión si no estás registrado.

Además, aprenderemos a cifrar nuestras contraseñas para que no sean reconocibles y estén encriptadas y no se puedan descifrar.

Entonces, cuando hagamos clic en el botón "Registrar usuario", algo debe suceder, y lo que sucederá es que se abrirá un modal para realizar nuestro registro.

Así que primero construyamos el modal.

Código del modal de registro de usuarios

<!-- Modal para registrar Usuarios -->
<div class="modal fade" id="insertarUsuarioModal" tabindex="-1" role="dialog"
    aria-labelledby="insertarUsuarioModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content bg-success">
            <div class="modal-header bg-warning text-center">
                <h1 class="modal-title mx-auto" id="insertarUsuarioModalLabel">Insertar Usuario</h1>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>

            <div class="modal-body">
                <form id="insertarUsuarioForm" action="procesar_insercion_usuario.php" method="post">
                    <div class="form-group mb-2">
                        <label for="user">Usuario</label>
                        <input type="text" class="form-control" id="user" name="user" required>
                    </div>
                    <div class="form-group mb-2">
                        <label for="nombre">Nombre</label>
                        <input type="text" class="form-control" id="nombre" name="nombre" required>
                    </div>
                    <div class="form-group mb-2">
                        <label for "apellidos">Apellidos</label>
                        <input type="text" class="form-control" id="apellidos" name="apellidos" required>
                    </div>
                    <div class="form-group mb-2">
                        <label for="email">Email</label>
                        <input type="email" class="form-control" id="email" name="email" required>
                    </div>
                    <div class="form-group mb-2">
                        <label for="password">Contraseña</label>
                        <input type="password" class="form-control" id="password" name="password" required>
                    </div>
                    <div class="form-group mb-2">
                        <label for="foto">Foto</label>
                        <input type="file" class="form-control-file" id="foto" name="foto">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                <button type="button" class="btn btn-primary" id="registrarUsuarioBtn">Registrar</button>
            </div>

        </div>
    </div>
</div>
        

---

...

Ya tenemos el modal, ahora lo que falta es crear los scripts para:

• 1. Abrir el modal
• 2. Registrar al usuario

Abrir el modal

Para abrir el modal, necesitamos utilizar un script que, al hacer clic en el botón "¿No tienes una cuenta?", abra el modal.

Código del botón

                <p class="text-center mt-3">
                <a href="#" id="registroLink">¿No tienes una cuenta? Regístrate aquí.</a>
                 </p>
            

Ahora, colocaré el script para abrir el modal.

                <script>
                $(document).ready(function() {
                    // Evento de clic en el enlace de registro
                    $('#registroLink').click(function(e) {
                        e.preventDefault(); // Evita que el enlace siga su URL

                        // Abre el modal de registro
                        $('#insertarUsuarioModal').modal('show');
                    });
                });
                </script>
            

Captura de los campos del formulario

Una vez que el formulario esté abierto, debemos llenar los campos necesarios para realizar el registro.

Después de completar los campos, debemos capturar esos datos y enviarlos al servidor para que los almacene en la base de datos.

Entonces, la captura se realiza con el siguiente script.

Es importante notar que dividiré el script en dos partes:

• 1. Envío de los datos
• 2. Recepción de la respuesta

                // Evento de clic en el botón para abrir el formulario
                $('#registrarUsuarioBtn').click(function() {
                    // Crea un objeto FormData para enviar la imagen
                    var formData = new FormData();

                    // Agrega la imagen seleccionada al FormData
                    formData.append('foto', $('#foto')[0].files[0]);

                    // Captura otros datos del formulario
                    var usuario = $('#user').val();
                    var nombre = $('#nombre').val();
                    var apellidos = $('#apellidos').val();
                    var email = $('#email').val();
                    var password = $('#password').val();
                    var accion = 2;

                    // Agrega los otros datos al FormData
                    formData.append('usuario', usuario);
                    formData.append('nombre', nombre);
                    formData.append('apellidos', apellidos);
                    formData.append('email', email);
                    formData.append('password', password);
                    formData.append('accion', '2');

                    // Realiza una solicitud AJAX a ajax/usuario.php
                    $.ajax({
                        url: 'ajax/usuario.php',
                        method: 'POST',
                        data: formData,
                        contentType: false,
                        processData: false,
                        success: function(response) {
                            $('#user').val('');
                            $('#nombre').val('');
                            $('#apellidos').val('');
                            $('#email').val('');
                            $('#password').val('');
                            $('#foto').val('');
                            // Verificar si la respuesta es positiva
                            if (response.status === "success") {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Operación exitosa',
                                    text: response.message,
                                    timer: 2000
                                });

                                // También puedes realizar acciones adicionales si es necesario.
                            } else if (response.status === "error") {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: response.message,
                                    timer: 2000
                                });

                                // Puedes manejar otros casos de error si es necesario.
                            }
                            $('#insertarUsuarioModal').modal('hide');
                        }
                    });
                });
            

Envío de los datos al servidor

El envío de los datos al servidor se realiza a través de AJAX y jQuery, y se envían los datos capturados en el formulario al servidor.

Esta es la parte del código que se encarga del envío:

                // Evento de clic en el botón para abrir el formulario
                $('#registrarUsuarioBtn').click(function() {
                    // Crea un objeto FormData para enviar la imagen
                    var formData = new FormData();

                    // Agrega la imagen seleccionada al FormData
                    formData.append('foto', $('#foto')[0].files[0]);

                    // Captura otros datos del formulario
                    var usuario = $('#user').val();
                    var nombre = $('#nombre').val();
                    var apellidos = $('#apellidos').val();
                    var email = $('#email').val();
                    var password = $('#password').val();
                    var accion = 2;

                    // Agrega los otros datos al FormData
                    formData.append('usuario', usuario);
                    formData.append('nombre', nombre);
                    formData.append('apellidos', apellidos);
                    formData.append('email', email);
                    formData.append('password', password);
                    formData.append('accion', '2');

                    // Realiza una solicitud AJAX a ajax/usuario.php
                    $.ajax({
                        url: 'ajax/usuario.php',
                        method: 'POST',
                        data: formData,
                        contentType: false,
                        processData: false,
            

El servidor recibe los datos y envía una respuesta que puede ser positiva o negativa.

Si los datos se ingresan correctamente, se enviará una respuesta positiva; de lo contrario, se enviará una respuesta negativa.

Lo que haremos es:

• 1. Limpiar los campos del formulario
• 2. Mostrar un mensaje de éxito o error según la respuesta recibida

        success: function(response) {
            // Limpiar los campos del formulario
            $('#user').val('');
            $('#nombre').val('');
            $('#apellidos').val('');
            $('#email').val('');
            $('#password').val('');
            $('#foto').val('');
            
            // Verificar si la respuesta es positiva
            if (response.status === "success") {
                Swal.fire({
                    icon: 'success',
                    title: 'Operación exitosa',
                    text: response.message,
                    timer: 2000
                });

                // También puedes realizar acciones adicionales si es necesario.
            } else if (response.status === "error") {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: response.message,
                    timer: 2000
                });

                // Puedes manejar otros casos de error si es necesario.
            }
            $('#insertarUsuarioModal').modal('hide');
        }
    });
    

---

Ir al índice