馃懃 CRUD de Usuarios con PHP, AJAX y jQuery

Jorge Catalao mayo 18, 2025

Creaci贸n de la tabla usuarios con SQL

Para almacenar la informaci贸n de los usuarios en nuestra base de datos, necesitamos crear una tabla llamada usuarios. La siguiente estructura SQL muestra c贸mo podemos definir esta tabla, incluyendo los campos necesarios y sus propiedades.

Estructura SQL de la tabla usuarios


CREATE TABLE usuarios (
    idUsuario INT AUTO_INCREMENT PRIMARY KEY,
    nombre VARCHAR(100) NOT NULL,
    apellido VARCHAR(100) NOT NULL,
    email VARCHAR(100) UNIQUE NOT NULL,
    password VARCHAR(255) NOT NULL,
    idRol INT NOT NULL,
    activo BOOLEAN DEFAULT TRUE,
    fechaCreacion TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (idRol) REFERENCES roles(idRol)
);

Explicaci贸n de los campos:

  • idUsuario: Identificador 煤nico para cada usuario. Es de tipo entero (INT), se incrementa autom谩ticamente con cada nuevo registro (AUTO_INCREMENT) y es la clave primaria de la tabla (PRIMARY KEY).
  • nombre: Nombre del usuario. Es una cadena de texto de hasta 100 caracteres (VARCHAR(100)) y es un campo obligatorio (NOT NULL).
  • apellido: Apellido del usuario. Similar al nombre, es una cadena de texto de hasta 100 caracteres y es obligatorio.
  • email: Direcci贸n de correo electr贸nico del usuario. Es una cadena de texto de hasta 100 caracteres, debe ser 煤nica para cada usuario (UNIQUE) y es obligatorio.
  • password: Contrase帽a del usuario. Es una cadena de texto de hasta 255 caracteres (para almacenar hashes seguros) y es obligatoria.
  • idRol: Clave for谩nea que referencia el ID del rol del usuario en la tabla roles. Es de tipo entero y es obligatoria. La restricci贸n FOREIGN KEY asegura la integridad referencial entre las tablas.
  • activo: Indica si el usuario est谩 activo o no. Es de tipo booleano (BOOLEAN) y tiene un valor predeterminado de TRUE (activo).
  • fechaCreacion: Marca de tiempo autom谩tica que registra la fecha y hora en que se cre贸 el usuario. Utiliza el valor predeterminado CURRENT_TIMESTAMP.

Ejemplo visual de la estructura de la tabla:

Conceptualmente, la tabla usuarios se ver铆a as铆:

Campo Tipo Atributos Descripci贸n
idUsuario INT AUTO_INCREMENT, PRIMARY KEY Identificador 煤nico del usuario
nombre VARCHAR(100) NOT NULL Nombre del usuario
apellido VARCHAR(100) NOT NULL Apellido del usuario
email VARCHAR(100) UNIQUE, NOT NULL Correo electr贸nico 煤nico del usuario
password VARCHAR(255) NOT NULL Contrase帽a del usuario (hash)
idRol INT NOT NULL, FOREIGN KEY ID del rol del usuario (referencia a la tabla roles)
activo BOOLEAN DEFAULT TRUE Estado del usuario (activo/inactivo)
fechaCreacion TIMESTAMP DEFAULT CURRENT_TIMESTAMP Fecha y hora de creaci贸n del usuario

Creaci贸n de la tabla HTML para mostrar los usuarios

Esta tabla HTML servir谩 como el contenedor donde DataTables de jQuery mostrar谩 la lista de usuarios obtenida del servidor. Incluiremos los encabezados de columna que se corresponden con los datos que queremos visualizar. Para asegurar una buena visualizaci贸n, mostraremos tanto el c贸digo HTML como una representaci贸n visual de la estructura de la tabla.

Estructura HTML de la tabla de usuarios


<table id="tablaUsuarios" class="table table-striped table-bordered" style="width:100%">
    <thead>
        <tr>
            <th>ID</th>
            <th>Nombre</th>
            <th>Apellido</th>
            <th>Email</th>
            <th>Rol</th>
            <th>Estado</th>
            <th>Acciones</th>
        </tr>
    </thead>
    <tbody>
        </tbody>
</table>


Representaci贸n visual de la estructura de la tabla:

Columna Descripci贸n
ID Identificador 煤nico del usuario
Nombre Nombre del usuario
Apellido Apellido del usuario
Email Correo electr贸nico del usuario
Rol Rol del usuario (referencia a la tabla roles)
Estado Estado del usuario (activo/inactivo)
Acciones Botones para Editar y Eliminar


Ejemplo visual

ID Nombre Apellido Email Rol Estado Acciones
1 Ana Garc铆a ana.garcia@example.com Administrador Activo
2 Carlos L贸pez carlos.lopez@example.com Editor Activo
3 Sof铆a Mart铆nez sofia.martinez@example.com Usuario Inactivo


Explicaci贸n de la estructura:

  • <table id="tablaUsuarios" class="table table-striped table-bordered" style="width:100%">: Define la tabla HTML con el ID tablaUsuarios para DataTables y aplica estilos de Bootstrap.
  • <thead>: Contiene la fila de encabezados de la tabla, definiendo las columnas.
  • <tbody>: Contiene el cuerpo de la tabla, donde se insertar谩n los datos din谩micamente.

DataTables utilizar谩 esta estructura HTML para mostrar los datos de los usuarios de manera interactiva. La columna "Acciones" contendr谩 los botones para editar y eliminar cada usuario.

Creaci贸n del modal HTML para Insertar y Editar Usuarios

Este componente de Bootstrap se utilizar谩 tanto para insertar nuevos usuarios como para editar los existentes. Incluir谩 campos de formulario para cada uno de los datos del usuario que necesitamos gestionar.

Estructura HTML del modal


<div class="modal fade" id="modalUsuarios" tabindex="-1" aria-labelledby="modalUsuariosLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalUsuariosLabel">Gesti贸n de Usuarios</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="formUsuarios">
                <div class="modal-body">
                    <input type="hidden" id="idUsuario" name="idUsuario"> <!-- Campo oculto para el ID en edici贸n -->
                    <div class="mb-3">
                        <label for="nombre" class="form-label">Nombre:</label>
                        <input type="text" class="form-control" id="nombre" name="nombre" required>
                    </div>
                    <div class="mb-3">
                        <label for="apellido" class="form-label">Apellido:</label>
                        <input type="text" class="form-control" id="apellido" name="apellido" required>
                    </div>
                    <div class="mb-3">
                        <label for="email" class="form-label">Email:</label>
                        <input type="email" class="form-control" id="email" name="email" required>
                    </div>
                    <div class="mb-3">
                        <label for="password" class="form-label">Contrase帽a:</label>
                        <input type="password" class="form-control" id="password" name="password">
                        <small class="form-text text-muted">Dejar en blanco para mantener la contrase帽a actual al editar.</small>
                    </div>
                    <div class="mb-3">
                        <label for="selectIdRol" class="form-label">Rol:</label>
                        <select class="form-select" id="selectIdRol" name="idRol" required>
                            <option value="">Seleccionar Rol</option>
                            <!-- Las opciones de roles se cargar谩n din谩micamente aqu铆 -->
                        </select>
                    </div>
                    <div class="mb-3 form-check">
                        <input type="checkbox" class="form-check-input" id="activo" name="activo">
                        <label class="form-check-label" for="activo">Activo</label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                    <button type="submit" class="btn btn-primary" id="btnGuardarUsuario">Guardar</button>
                </div>
            </form>
        </div>
    </div>
</div>


Explicaci贸n de la estructura del modal:

  • <div class="modal fade" id="modalUsuarios" ...>: Contenedor principal del modal. El ID modalUsuarios se usa para controlar su visualizaci贸n. fade a帽ade animaci贸n.
  • <div class="modal-dialog">: Centra el contenido del modal.
  • <div class="modal-content">: Contiene las partes del modal (header, body, footer).
  • <div class="modal-header">: T铆tulo (modalUsuariosLabel) y bot贸n de cerrar.
  • <form id="formUsuarios">: Formulario con ID para manipulaci贸n con JavaScript.
    • <input type="hidden" id="idUsuario" name="idUsuario">: Campo oculto para ID en edici贸n.
    • <div class="mb-3"> ... </div>: Contenedores para los campos del formulario (nombre, apellido, email, password, rol, activo) con etiquetas y controles de Bootstrap.
  • <div class="modal-footer">: Botones "Cerrar" y "Guardar".


Ejemplo visual del formulario (dentro del modal)

Dejar en blanco para mantener la contrase帽a actual al editar.

Inicializaci贸n de DataTables para la tabla de usuarios con funcionalidades avanzadas

Para mostrar la lista de usuarios con funcionalidades como paginaci贸n, b煤squeda, ordenaci贸n, botones de exportaci贸n y un bot贸n para agregar nuevos usuarios, utilizaremos la librer铆a DataTables de jQuery junto con su extensi贸n Buttons. Aseg煤rate de tener la tabla HTML con el ID tablaUsuarios como se defini贸 anteriormente.

Inclusi贸n de los CDN necesarios para DataTables y Buttons

Debes incluir los siguientes CDN en las secciones <head> y antes del cierre de <body> de tu archivo HTML:


<head>
    <!-- Otros metadatos y enlaces CSS -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.dataTables.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQmQa7TBCLF9vYgpjUMJHno2D4IvTnoKoMx2fUYJyg5jgOBQY55PdG1PGvII0mjbj76W34MqEOE9iQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- (Opcional) Si usas Bootstrap para los estilos de los botones -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
    <!-- Contenido de tu p谩gina -->

    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.print.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous">
</body>

Explicaci贸n de los CDN:

  • jquery-3.7.0.js: Librer铆a jQuery, necesaria para DataTables.
  • jquery.dataTables.min.js y jquery.dataTables.min.css: Archivos principales de DataTables.
  • buttons.dataTables.min.js y buttons.dataTables.min.css: Extensi贸n Buttons para DataTables, que permite la creaci贸n de botones personalizados y de exportaci贸n.
  • jszip.min.js y pdfmake.min.js, vfs_fonts.js: Librer铆as necesarias para la exportaci贸n a Excel y PDF.
  • buttons.html5.min.js y buttons.print.min.js: Funcionalidades para los botones de exportaci贸n HTML5 (Excel, CSV) e impresi贸n.
  • font-awesome/css/all.min.css: (Opcional) Para los iconos de los botones (como l谩piz y papelera).
  • bootstrap.min.css y bootstrap.bundle.min.js: (Opcional) Si deseas usar los estilos de Bootstrap para los botones y otros elementos.


Script JavaScript para inicializar DataTables con botones y columnas espec铆ficas

A continuaci贸n, el script JavaScript que debes incluir para inicializar DataTables con la configuraci贸n que proporcionaste. Aseg煤rate de que este script se ejecute despu茅s de que se carguen los CDN de jQuery y DataTables.


$(document).ready(function() {
    var table = $('#tablaUsuarios').DataTable({
        dom: 'Bfrtip',
        buttons: [{
                text: 'Agregar usuario',
                className: 'btn btn-success addNewRecord', // Clases de Bootstrap para el bot贸n
                action: function(e, dt, node, config) {
                    // Evento para levantar la ventana Modal (debes tener un modal con este ID)
                    $('#modalUsuarios').modal('show');
                }
            },
            'copy', 'excel', 'pageLength',
        ],
        ajax: {
            url: "ajax/usuario.php", // Reemplaza con la URL correcta de tu archivo PHP
            type: "POST",
            data: {
                accion: "1" // Dato enviado al servidor para indicar la acci贸n de listar usuarios
            },
            dataSrc: "", // Indica que los datos se encuentran directamente en la ra铆z de la respuesta JSON
        },
        columns: [{
                data: "idUsuario"
            },
            {
                data: "nombreRol" // Aseg煤rate de que este campo exista en tu respuesta JSON
            },
            {
                data: "usuario" // Aseg煤rate de que este campo exista en tu respuesta JSON
            },
            {
                data: "nombre" // Aseg煤rate de que este campo exista en tu respuesta JSON
            },
            {
                data: "apellidos" // Aseg煤rate de que este campo exista en tu respuesta JSON
            },
            {
                data: "correo" // Aseg煤rate de que este campo exista en tu respuesta JSON
            },
            {
                data: "telefono" // Aseg煤rate de que este campo exista en tu respuesta JSON
            },
            {
                data: 'imagen',
                render: function(data, type, full, meta) {
                    if (type === 'display') {
                        if (data === null || data === '') {
                            return 'Imagen Predeterminada';
                        } else {
                            return 'Imagen';
                        }
                    }
                    return data;
                }
            },
            {
                targets: 8, // Ajusta el 铆ndice de la columna de acciones seg煤n tu n煤mero de columnas
                orderable: false,
                render: function(data, type, full, meta) {
                    return "
" +
                        "" +
                        "" +
                        "" +
                        "" +
                        "" +
                        "" +
                        "
";
                }
            }
        ],
        order: [
            [2, 'asc'] // Ordenar por la columna "usuario" (铆ndice 2) de forma ascendente
        ]
    });
});

Importante:

  • Aseg煤rate de que los nombres de los campos en la propiedad data de la configuraci贸n de columns coincidan exactamente con los nombres de los campos que devuelve tu archivo ajax/usuario.php en formato JSON.
  • He asumido que tienes un modal con el ID modalUsuarios que se mostrar谩 al hacer clic en el bot贸n "Agregar usuario".
  • He a帽adido clases de Bootstrap (btn btn-success) al bot贸n "Agregar usuario" para darle un estilo visual.
  • He ajustado el targets de la columna de acciones a 8 asumiendo que tienes 9 columnas en total (desde idUsuario hasta las acciones). Rev铆salo y aj煤stalo si es necesario seg煤n la definici贸n de tus columnas.


Ejemplo visual de la tabla de usuarios renderizada por DataTables

Esta es una representaci贸n de c贸mo se ver铆a la tabla de usuarios con las funcionalidades de DataTables y los botones configurados:

ID Rol Usuario Nombre Apellidos Correo Tel茅fono Imagen Acciones
1 Administrador admin123 Ana Garc铆a L贸pez ana.garcia@example.com 912345678 Imagen
2 Editor editor456 Carlos P茅rez Ruiz carlos.perez@example.com 918765432 Imagen
3 Usuario user789 Sof铆a Mart铆nez Sanz sofia.martinez@example.com 911223344 Imagen

Carga din谩mica de roles en el select del modal de usuarios

Para permitir la selecci贸n del rol de un usuario al insertar o editar, necesitamos cargar din谩micamente las opciones desde nuestra base de datos y mostrarlas en el elemento <select> dentro del modal de usuarios.

Funci贸n JavaScript para obtener los roles

La siguiente funci贸n JavaScript, obtenerRoles(), realiza una llamada AJAX al servidor para obtener la lista de roles y luego actualiza los elementos <select> correspondientes en nuestro modal.


// Funci贸n para obtener los roles
function obtenerRoles() {
    $.ajax({
        type: "POST",
        url: "ajax/rol.php", // Reemplaza con la URL correcta de tu archivo PHP para roles
        data: {
            accion: 10 // Acci贸n en el archivo PHP para listar los roles
        },
        dataType: "json", // Esperamos una respuesta en formato JSON
        success: function(roles) {
            // Limpiar los selects donde se mostrar谩n los roles
            $("#selectIdRol").empty(); // Select en el modal de usuarios (insertar/editar)

            // Agregar la opci贸n "Seleccione un Rol" al principio
            $("#selectIdRol").append('');

            // Recorrer los roles recibidos y agregar las opciones al select
            $.each(roles, function(index, rol) {
                $("#selectIdRol").append('');
            });
        },
        error: function(error) {
            console.error("Error en la solicitud AJAX para obtener roles:", error);
        }
    });
}

// Llamar a la funci贸n para cargar los roles cuando el documento est茅 listo
$(document).ready(function() {
    obtenerRoles();
});

Explicaci贸n del script:

  • function obtenerRoles() { ... }: Define una funci贸n llamada obtenerRoles que encapsula la l贸gica para la llamada AJAX.
  • $.ajax({ ... });: Utiliza la funci贸n $.ajax de jQuery para realizar una petici贸n HTTP as铆ncrona al servidor.
    • type: "POST": Especifica el m茅todo HTTP POST para enviar los datos al servidor.
    • url: "ajax/rol.php": Define la URL del archivo PHP en el servidor que manejar谩 la petici贸n de los roles. Debes asegurarte de que esta ruta sea correcta.
    • data: { accion: 10 }: Env铆a un objeto con un par谩metro accion con el valor 10 al servidor. Este valor le indica al archivo rol.php que debe realizar la acci贸n de listar los roles.
    • dataType: "json": Indica a jQuery que esperamos una respuesta del servidor en formato JSON.
    • success: function(roles) { ... }: Funci贸n que se ejecuta si la llamada AJAX es exitosa. El par谩metro roles contiene los datos JSON recibidos del servidor.
      • $("#selectIdRol").empty();: Limpia cualquier opci贸n que pudiera haber previamente en el elemento <select> con el ID selectIdRol (que se encuentra en el modal de usuarios).
      • $("#selectIdRol").append('');: Agrega una opci贸n por defecto al principio del <select> para guiar al usuario.
      • $.each(roles, function(index, rol) { ... });: Itera sobre el array de roles recibido del servidor. Para cada rol, se crea una nueva opci贸n <option> con el ID del rol como valor y el nombre del rol como texto visible, y se agrega al <select>.
    • error: function(error) { ... }: Funci贸n que se ejecuta si hay un error en la llamada AJAX. Muestra un mensaje de error en la consola para ayudar en la depuraci贸n.
  • $(document).ready(function() { obtenerRoles(); });: Asegura que la funci贸n obtenerRoles() se llame una vez que el DOM de la p谩gina est茅 completamente cargado, garantizando que el elemento <select id="selectIdRol"> est茅 disponible.

Con esta funci贸n y la llamada al cargar la p谩gina, el <select> en tu modal de usuarios se llenar谩 autom谩ticamente con los roles disponibles desde el servidor, permitiendo a los usuarios seleccionar el rol deseado al crear o editar un usuario.

Script JavaScript para la inserci贸n de nuevos usuarios

Este script es esencial para permitir a los usuarios a帽adir nuevos registros a nuestra base de datos. Se activa cuando se hace clic en el bot贸n con el ID registrarUsuario (ubicado dentro del modal de registro de usuarios). Al activarse, el script recopila todos los datos del formulario, incluyendo cualquier imagen seleccionada, y los env铆a al servidor mediante una petici贸n AJAX para su procesamiento.

C贸digo del script para insertar usuarios

A continuaci贸n, se presenta el c贸digo JavaScript completo que manejar谩 la inserci贸n de usuarios. Debes copiar este bloque de c贸digo y a帽adirlo a tu archivo JavaScript principal (por ejemplo, main.js o scripts.js), asegur谩ndote de que se cargue despu茅s de jQuery y SweetAlert.


$("#registrarUsuario").click(function() {
    // Captura los valores de los campos del formulario utilizando jQuery y sus IDs
    var rol = $("#selectRoles").val();
    var usuario = $("#usuario").val();
    var nombre = $("#nombre").val();
    var apellidos = $("#apellidos").val();
    var correo = $("#correo").val();
    var telefono = $("#telefono").val();
    var contrasena = $("#contrasena").val();
    var morada = $("#morada").val();
    var imagen = $("#imagen")[0].files[0]; // Obtiene el objeto de archivo de la primera imagen seleccionada

    // Crea un objeto FormData para preparar los datos para el env铆o, incluyendo archivos
    var formData = new FormData();
    formData.append("rol", rol);
    formData.append("usuario", usuario);
    formData.append("nombre", nombre);
    formData.append("apellidos", apellidos);
    formData.append("correo", correo);
    formData.append("telefono", telefono);
    formData.append("contrasena", contrasena);
    formData.append("morada", morada);
    formData.append("imagen", imagen);
    formData.append("accion", 2); // Env铆a un par谩metro de acci贸n al servidor (2 para insertar)

    // Realiza la solicitud AJAX al servidor
    $.ajax({
        type: "POST", // M茅todo de env铆o de datos
        url: "ajax/usuario.php", // URL del script PHP que procesar谩 la inserci贸n
        data: formData, // Datos a enviar, en formato FormData para manejar archivos
        processData: false, // Importante: evita que jQuery procese los datos (necesario para FormData)
        contentType: false, // Importante: evita que jQuery establezca el tipo de contenido (necesario para FormData)
        success: function(data) {
            // Cierra el modal de registro despu茅s de una respuesta exitosa
            $("#mdlRegistrarUsuarios").modal("hide");

            // Muestra una alerta SweetAlert basada en la respuesta del servidor
            // Se asume que 'data' es un objeto JSON con 'mensaje' o 'error'.
            if (data && data.mensaje) {
                if (data.mensaje === "El autor ya est谩 registrado.") {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Advertencia',
                        text: data.mensaje,
                        timer: 3500 // La alerta se cierra autom谩ticamente despu茅s de 3.5 segundos
                    });
                } else {
                    Swal.fire({
                        icon: 'success',
                        title: '脡xito',
                        text: data.mensaje,
                        timer: 3500
                    });
                }
            } else if (data && data.error) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: data.error,
                    timer: 3500
                });
            }
            // Recarga la tabla de DataTables para mostrar los cambios
            // 'table' debe ser la variable global que guarda tu instancia de DataTable.
            table.ajax.reload();
        },
        error: function(jqXHR, textStatus, errorThrown) {
            // Esta funci贸n se ejecuta si hay un error en la solicitud AJAX.
            console.error("Error en la solicitud AJAX:", textStatus, errorThrown, jqXHR);
            Swal.fire({
                icon: 'error',
                title: 'Error de Conexi贸n',
                text: 'Hubo un problema al intentar conectar con el servidor. Por favor, int茅ntalo de nuevo.',
                timer: 3500
            });
        }
    });
});

Explicaci贸n detallada del funcionamiento:

Este script ejecuta un proceso paso a paso al hacer clic en el bot贸n de registro:

  1. Captura de Datos del Formulario

    Las primeras l铆neas se encargan de recopilar los valores de todos los campos del formulario de registro de usuario. Esto se logra utilizando los selectores de ID de jQuery ($()) y el m茅todo .val() para obtener el contenido de inputs de texto y selects.

    Para la imagen, que es un campo de tipo file ($("#imagen")), accedemos directamente a la propiedad nativa del DOM [0].files[0]. Esto nos permite obtener el objeto File que representa el archivo seleccionado por el usuario, necesario para la subida.

  2. Preparaci贸n de Datos con FormData

    El objeto FormData es crucial aqu铆 porque nos permite enviar archivos (como la imagen) junto con otros datos de texto en una 煤nica petici贸n AJAX. Internamente, FormData formatea los datos como multipart/form-data, que es el tipo de codificaci贸n que los servidores esperan para procesar subidas de archivos.

    Con formData.append("clave", valor), cada dato capturado (rol, usuario, nombre, etc., y la imagen) se a帽ade al objeto. Notar谩s la l铆nea formData.append("accion", 2);. Este par谩metro accion es una estrategia com煤n para indicar al script PHP del servidor (ajax/usuario.php) qu茅 operaci贸n espec铆fica debe realizar; en este caso, el valor 2 podr铆a significar "insertar nuevo usuario".

  3. Env铆o de la Petici贸n AJAX al Servidor

    Aqu铆 es donde se produce la comunicaci贸n as铆ncrona con el servidor a trav茅s de la funci贸n $.ajax() de jQuery. Esta funci贸n es altamente configurable:

    • type: "POST": Define que los datos se enviar谩n usando el m茅todo HTTP POST, adecuado para enviar grandes vol煤menes de datos y para operaciones que modifican el estado en el servidor.
    • url: "ajax/usuario.php": Indica la direcci贸n del script PHP en tu servidor que se encargar谩 de recibir estos datos, validar la informaci贸n, procesar la subida de la imagen y guardar el nuevo usuario en la base de datos.
    • data: formData: Los datos que se env铆an al servidor son nuestro objeto formData ya preparado.
    • processData: false: Muy importante cuando se usa FormData. Indica a jQuery que no intente procesar ni codificar los datos, permitiendo que FormData haga su trabajo al formatearlos para la subida de archivos.
    • contentType: false: Tambi茅n crucial para FormData. Evita que jQuery establezca la cabecera Content-Type, lo que permite al navegador establecer autom谩ticamente multipart/form-data, que es el formato correcto para enviar archivos.
    • success: function(data) { ... }: Esta es la funci贸n que se ejecuta si la petici贸n al servidor se completa con 茅xito.
      • $("#mdlRegistrarUsuarios").modal("hide");: Una vez que el servidor ha respondido, el modal de registro se cierra.
      • Gesti贸n de Respuestas con SweetAlert: El script inspecciona la respuesta (data) que se recibe del servidor (se espera que sea un objeto JSON con propiedades como mensaje o error). Bas谩ndose en esta respuesta, se utiliza la librer铆a SweetAlert (Swal.fire()) para mostrar notificaciones al usuario, ya sea de 茅xito ("Usuario registrado"), advertencia ("El usuario ya existe") o error.
      • table.ajax.reload();: Finalmente, esta l铆nea recarga los datos de tu tabla de usuarios (DataTable). Esto asegura que el nuevo usuario a帽adido aparezca instant谩neamente en la lista sin necesidad de recargar la p谩gina, proporcionando una experiencia de usuario fluida. Se asume que table es la variable JavaScript que almacena la instancia de tu DataTable.
    • error: function(jqXHR, textStatus, errorThrown) { ... }: Esta funci贸n se ejecuta si hay alg煤n problema durante la comunicaci贸n AJAX (por ejemplo, un error de red o un problema del servidor que impida una respuesta exitosa). Ayuda en la depuraci贸n y proporciona un mensaje de error al usuario.

Con la implementaci贸n de este script, tu aplicaci贸n podr谩 manejar de forma eficiente la inserci贸n de nuevos usuarios, incluyendo la gesti贸n de archivos de imagen, y ofrecer谩 una clara retroalimentaci贸n visual al usuario.

Script JavaScript para la edici贸n de usuarios (Recuperaci贸n de datos)

Este script se encarga de preparar el modal de edici贸n de usuarios, cargando los datos del usuario seleccionado desde la base de datos. Se activa cuando se hace clic en el **bot贸n de "Editar"** (identificado con la clase .btnEditarUsuario) en la tabla de usuarios. El objetivo es que el usuario vea sus datos actuales precargados en el formulario de edici贸n.

C贸digo del script para recuperar datos del usuario

Copia el siguiente bloque de c贸digo JavaScript. Este segmento es crucial para rellenar autom谩ticamente el formulario de edici贸n del modal con la informaci贸n del usuario seleccionado.


$(document).on('click', '.btnEditarUsuario', function() {
    // Se recoge el ID del usuario que se va a editar desde la fila de la tabla DataTables
    var data = table.row($(this).parents('tr')).data();

    // Realiza una solicitud AJAX para obtener los detalles completos del usuario
    $.ajax({
        type: "POST",
        url: "ajax/usuario.php",
        data: {
            accion: 3, // Acci贸n para obtener datos de un usuario por su ID
            id: data['idUsuario'] // ID del usuario obtenido de la tabla
        },
        dataType: "json", // Esperamos una respuesta en formato JSON
        success: function(respuesta) {
            // Llena los campos del formulario de edici贸n directamente desde la respuesta JSON
            $('#idUsuario_ed').val(respuesta.idUsuario);
            $('#selectRoles_ed').val(respuesta.idRol);
            $('#usuario_ed').val(respuesta.usuario);
            $('#nombre_ed').val(respuesta.nombre);
            $('#apellidos_ed').val(respuesta.apellidos);
            $('#correo_ed').val(respuesta.correo);
            $('#telefono_ed').val(respuesta.telefono);
            $('#morada_ed').val(respuesta.morada);

            // Gestiona la visualizaci贸n de la imagen actual del usuario
            if (respuesta.imagen) {
                // Si el usuario tiene una imagen, muestra la imagen real
                $('#imagen_ed_actual').attr('src', 'img_usuarios/' + respuesta.imagen);
            } else {
                // Si no hay imagen, muestra una imagen predeterminada
                $('#imagen_ed_actual').attr('src', 'img_usuarios/sin_imagen.jpg');
            }

            // Abre el modal de edici贸n con los campos ya llenados
            $('#mdlEditarUsuarios_ed').modal('show');
        },
        error: function(xhr, status, error) {
            // Manejo de errores en caso de que la solicitud AJAX falle
            console.error("Error en la solicitud Ajax para obtener datos de usuario: " + error);
            // Podr铆as a帽adir un SweetAlert aqu铆 para notificar al usuario
            Swal.fire({
                icon: 'error',
                title: 'Error de Carga',
                text: 'No se pudieron cargar los datos del usuario. Int茅ntalo de nuevo.',
                timer: 3500
            });
        }
    });
});

Explicaci贸n detallada del funcionamiento:

Este script se ejecuta cuando el usuario hace clic en el bot贸n de edici贸n de cualquier fila de la tabla de usuarios. Su flujo de trabajo es el siguiente:

  1. Activaci贸n por Clic y Obtenci贸n del ID

    El c贸digo se activa mediante $(document).on('click', '.btnEditarUsuario', function() { ... });. Esto significa que cuando se haga clic en cualquier elemento con la clase .btnEditarUsuario (nuestro bot贸n de editar en la tabla), se ejecutar谩 la funci贸n. La l铆nea var data = table.row($(this).parents('tr')).data(); es clave: utiliza la instancia de DataTables (`table`) para obtener todos los datos asociados a la fila (<tr>) donde se hizo clic en el bot贸n. De este objeto `data`, extraemos el `idUsuario` del usuario para saber cu谩l queremos editar.

  2. Petici贸n AJAX para Obtener Detalles del Usuario

    Se realiza una petici贸n AJAX (m茅todo POST) al archivo ajax/usuario.php. En esta petici贸n, enviamos dos par谩metros importantes:

    • accion: 3: Este valor le indica al script PHP en el servidor que la operaci贸n solicitada es la de **"obtener los datos de un usuario espec铆fico"** (o "leer" un solo registro).
    • id: data['idUsuario']: Pasamos el ID del usuario que obtuvimos en el paso anterior. El script PHP utilizar谩 este ID para buscar el registro correspondiente en la base de datos.

    Esperamos una respuesta en formato JSON (`dataType: "json"`), que contendr谩 todos los detalles del usuario.

  3. Relleno del Formulario de Edici贸n y Visualizaci贸n de Imagen

    Si la petici贸n AJAX es exitosa, la funci贸n success: function(respuesta) { ... } se ejecuta, y el objeto `respuesta` contendr谩 los datos del usuario. El script procede a rellenar cada campo del modal de edici贸n con los valores correspondientes:

    • $('#idUsuario_ed').val(respuesta.idUsuario);: El ID del usuario se guarda en un campo oculto (o no editable) para poder referenciarlo al guardar los cambios.
    • $('#selectRoles_ed').val(respuesta.idRol);, $('#usuario_ed').val(respuesta.usuario);, etc.: Cada campo del formulario de edici贸n (identificado con su ID terminado en `_ed`) se llena con el valor correspondiente de la `respuesta` recibida.
    • Manejo de la Imagen: Se verifica si la `respuesta.imagen` contiene un nombre de archivo. Si es as铆, la ruta de la imagen actual (`$('#imagen_ed_actual').attr('src', ...)` se actualiza para mostrar la imagen del usuario. Si no hay imagen, se carga una imagen predeterminada (`sin_imagen.jpg`) para indicar que no hay una imagen asignada.
  4. Apertura del Modal de Edici贸n

    Finalmente, $('#mdlEditarUsuarios_ed').modal('show'); se encarga de abrir el modal de edici贸n. En este punto, el usuario ver谩 el formulario precargado con la informaci贸n actual del usuario seleccionado, listo para realizar las modificaciones.

Con esta primera parte, tu aplicaci贸n ya puede "leer" los datos de un usuario y presentarlos de forma interactiva en un formulario para su posterior edici贸n.

Script JavaScript para la edici贸n de usuarios (Actualizaci贸n de datos)

Una vez que el usuario ha modificado los datos en el modal de edici贸n, este script se encarga de recopilar esos cambios y enviarlos al servidor para que el registro del usuario sea actualizado en la base de datos. Se activa cuando se hace clic en el **bot贸n de "Actualizar"** dentro del modal de edici贸n, identificado con el ID #ActualizarUsuario_ed.

C贸digo del script para actualizar usuarios

Copia el siguiente bloque de c贸digo JavaScript. Este es el encargado de tomar los datos editados y enviarlos al servidor para su persistencia.


$(document).on('click', '#ActualizarUsuario_ed', function() {
    // Recoge todos los datos del formulario de edici贸n
    var idUsuario = $('#idUsuario_ed').val();
    var idRol = $('#selectRoles_ed').val();
    var usuario = $('#usuario_ed').val();
    var nombre = $('#nombre_ed').val();
    var apellidos = $('#apellidos_ed').val();
    var correo = $('#correo_ed').val();
    var telefono = $('#telefono_ed').val();
    var morada = $('#morada_ed').val();
    var imagen = $('#imagen_ed')[0].files[0]; // Obtiene el objeto de la nueva imagen seleccionada (si la hay)

    // Crea un objeto FormData para enviar datos del formulario, incluida la imagen
    var formData = new FormData();
    formData.append('accion', 4); // Indica que es una acci贸n de actualizaci贸n al script PHP
    formData.append('idUsuario', idUsuario); // Env铆a el ID del usuario para saber cu谩l actualizar
    formData.append('idRol', idRol);
    formData.append('usuario', usuario);
    formData.append('nombre', nombre);
    formData.append('apellidos', apellidos);
    formData.append('correo', correo);
    formData.append('telefono', telefono);
    formData.append('morada', morada);

    // Verifica si se ha seleccionado una nueva imagen antes de a帽adirla a FormData
    if (imagen) {
        formData.append('imagen', imagen);
    }
    
    // Realiza la solicitud AJAX para actualizar el usuario
    $.ajax({
        type: "POST",
        url: "ajax/usuario.php",
        data: formData,
        contentType: false, // Crucial para enviar FormData con archivos
        processData: false, // Crucial para enviar FormData con archivos
        dataType: "json", // Esperamos una respuesta JSON del servidor
        success: function(response) {
            $("#mdlEditarUsuarios_ed").modal("hide"); // Cierra el modal de edici贸n

            // Muestra una alerta SweetAlert basada en la respuesta del servidor
            if (!response.error) { // Si no hay error en la respuesta
                Swal.fire({
                    icon: 'success',
                    title: '脡xito',
                    text: response.mensaje,
                    showConfirmButton: false, // Oculta el bot贸n de confirmaci贸n
                    timer: 3500 // Alerta se cierra autom谩ticamente
                }).then(function() {
                    table.ajax.reload(); // Recarga la tabla DataTables al cerrar la alerta de 茅xito
                });
            } else { // Si la respuesta indica un error
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: response.error, // Muestra el mensaje de error del servidor
                    timer: 3500
                });
            }

            // Aunque ya se recarga en el success de SweetAlert, aseg煤ramos que la tabla se actualiza.
            // Puede que esta l铆nea sea redundante si la recarga ya est谩 en el .then() de Swal.fire.
            // table.ajax.reload(); 
        },
        error: function(xhr, status, error) {
            // Manejo de errores de la solicitud AJAX
            console.error("Error en la solicitud Ajax para actualizar usuario: " + error);
            Swal.fire({
                icon: 'error',
                title: 'Error de Conexi贸n',
                text: 'Hubo un problema al intentar actualizar el usuario. Por favor, int茅ntalo de nuevo.',
                timer: 3500
            });
        }
    });
});

Explicaci贸n detallada del funcionamiento:

Este script se activa al hacer clic en el bot贸n de "Actualizar" del formulario de edici贸n. Sus pasos clave son:

  1. Recolecci贸n de Datos del Formulario de Edici贸n

    En este primer paso, el script recopila todos los valores actuales de los campos dentro del modal de edici贸n. Esto incluye el **idUsuario** (que suele estar en un campo oculto) y todos los dem谩s datos que el usuario pudo haber modificado, como el rol, nombre, correo, etc. Al igual que en la inserci贸n, si se ha seleccionado una nueva imagen en el campo #imagen_ed, se obtiene el objeto del archivo.

  2. Preparaci贸n de Datos con `FormData` para la Actualizaci贸n

    Similar al proceso de inserci贸n, se utiliza el objeto `FormData` para empaquetar todos los datos del formulario, incluyendo la imagen si se ha seleccionado una nueva. Se a帽ade un par谩metro `accion` con el valor `4`, indicando al script `usuario.php` en el servidor que la operaci贸n que debe realizar es una **actualizaci贸n de un usuario existente**. Es crucial enviar tambi茅n el `idUsuario` para que el servidor sepa qu茅 registro espec铆fico debe modificar.

    Se incluye una comprobaci贸n `if (imagen) { formData.append('imagen', imagen); }` para asegurarse de que la nueva imagen solo se adjunte a `formData` si el usuario realmente ha seleccionado un archivo diferente.

  3. Env铆o de la Petici贸n AJAX para Actualizar

    Se realiza otra petici贸n AJAX `$.ajax()` con las siguientes configuraciones:

    • `type: "POST"`: Se sigue utilizando el m茅todo POST para enviar los datos modificados.
    • `url: "ajax/usuario.php"`: La URL apunta al mismo script PHP que maneja la inserci贸n y la recuperaci贸n de datos, ya que este script centralizado se encarga de todas las operaciones CRUD.
    • `data: formData`: Se env铆a el objeto `formData` con los datos actualizados y la posible nueva imagen.
    • `contentType: false` y `processData: false`: Estos par谩metros son **fundamentales** cuando se env铆a `FormData`, ya que permiten que el navegador gestione correctamente el tipo de contenido (`multipart/form-data`) necesario para subir archivos y evitan que jQuery interfiera en este proceso.
    • `success: function(response) { ... }`: Esta funci贸n se ejecuta si la actualizaci贸n en el servidor es exitosa.
      • `$("#mdlEditarUsuarios_ed").modal("hide");`: El modal de edici贸n se cierra.
      • **Retroalimentaci贸n con SweetAlert:** Se verifica la `response` del servidor. Si no hay un `error` en la respuesta (es decir, la actualizaci贸n fue exitosa), se muestra un `Swal.fire` con un mensaje de 茅xito. Si la `response` contiene un `error`, se muestra una alerta de error.
      • `table.ajax.reload();`: **Crucialmente, se recarga la tabla DataTables** despu茅s de un 茅xito para mostrar los datos actualizados del usuario sin necesidad de recargar la p谩gina completa. Esto asegura que los cambios sean visibles de inmediato para el usuario.
    • `error: function(xhr, status, error) { ... }`: Maneja cualquier fallo en la comunicaci贸n AJAX, proporcionando informaci贸n en la consola y una alerta al usuario.

Con esta segunda parte, tu aplicaci贸n ya puede actualizar los datos de los usuarios de forma din谩mica y eficiente, ofreciendo una experiencia de usuario completa para la gesti贸n de usuarios.

Script JavaScript para la eliminaci贸n de usuarios

La funcionalidad de eliminaci贸n permite retirar usuarios de la base de datos de forma segura. Para evitar borrados accidentales, implementaremos un cuadro de di谩logo de confirmaci贸n. Este script se activa cuando se hace clic en el **bot贸n de "Eliminar"** (identificado con la clase .btnEliminarUsuario) en la tabla de usuarios.

C贸digo del script para eliminar usuarios

Copia el siguiente bloque de c贸digo JavaScript. Este script manejar谩 la confirmaci贸n y la posterior eliminaci贸n del usuario en el servidor.


$(document).on('click', '.btnEliminarUsuario', function() {
    // Se recoge el ID del usuario que se va a eliminar desde la fila de la tabla DataTables
    var data = table.row($(this).parents('tr')).data();
    var idUsuario = data['idUsuario']; // Aseg煤rate de que 'idUsuario' es la clave correcta en tus datos

    // Muestra un cuadro de di谩logo de confirmaci贸n con SweetAlert
    Swal.fire({
        title: '¿Est谩s seguro?',
        text: "¡No podr谩s revertir esto!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'S铆, eliminar',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        // Si el usuario confirma la eliminaci贸n
        if (result.isConfirmed) {
            // Realiza la solicitud AJAX para eliminar el usuario
            $.ajax({
                type: "POST",
                url: "ajax/usuario.php",
                data: {
                    accion: 5, // Acci贸n para eliminar un usuario
                    idUsuario: idUsuario // Env铆a el ID del usuario a eliminar
                },
                dataType: "json", // Esperamos una respuesta JSON del servidor
                success: function(response) {
                    if (!response.error) { // Si la eliminaci贸n fue exitosa
                        Swal.fire(
                            '¡Eliminado!',
                            response.mensaje, // Muestra el mensaje de 茅xito del servidor
                            'success'
                        );
                        table.ajax.reload(); // Recarga la tabla DataTables
                    } else { // Si hubo un error en la eliminaci贸n
                        Swal.fire(
                            'Error',
                            response.error, // Muestra el mensaje de error del servidor
                            'error'
                        );
                    }
                },
                error: function(xhr, status, error) {
                    // Manejo de errores de la solicitud AJAX
                    console.error("Error en la solicitud Ajax para eliminar usuario: " + error);
                    Swal.fire({
                        icon: 'error',
                        title: 'Error de Conexi贸n',
                        text: 'Hubo un problema al intentar eliminar el usuario. Por favor, int茅ntalo de nuevo.',
                        timer: 3500
                    });
                }
            });
        }
    });
});

Explicaci贸n detallada del funcionamiento:

Este script se encarga de la eliminaci贸n de usuarios de manera segura, solicitando una confirmaci贸n previa al usuario:

  1. Activaci贸n por Clic y Obtenci贸n del ID

    El script se activa cuando se hace clic en cualquier elemento que tenga la clase .btnEliminarUsuario (el bot贸n de eliminar en cada fila de la tabla). Al igual que en la edici贸n, table.row($(this).parents('tr')).data() se usa para obtener todos los datos de la fila de DataTables asociada al bot贸n. De estos datos, extraemos el idUsuario del registro que se desea eliminar.

  2. Confirmaci贸n del Usuario con SweetAlert

    Antes de proceder con la eliminaci贸n, se muestra un cuadro de di谩logo de confirmaci贸n utilizando **SweetAlert** (`Swal.fire`). Este di谩logo informa al usuario sobre la acci贸n irreversible y le da la opci贸n de "S铆, eliminar" o "Cancelar". Esto es crucial para prevenir eliminaciones accidentales y mejorar la experiencia de usuario.

    La l贸gica principal del script se ejecuta dentro del m茅todo .then((result) => { ... }) de SweetAlert, que se dispara una vez que el usuario interact煤a con la alerta. Si `result.isConfirmed` es `true`, significa que el usuario ha confirmado la eliminaci贸n.

  3. Env铆o de la Petici贸n AJAX para Eliminar

    Si el usuario confirma, se realiza una petici贸n AJAX (m茅todo POST) al script ajax/usuario.php. En esta petici贸n, se env铆an los siguientes datos:

    • accion: 5: Este valor le indica al script PHP en el servidor que la operaci贸n solicitada es la de **"eliminar un usuario"**.
    • idUsuario: idUsuario: Se pasa el ID del usuario que debe ser eliminado de la base de datos.

    Se espera una respuesta JSON (`dataType: "json"`) del servidor que indicar谩 si la eliminaci贸n fue exitosa o si hubo alg煤n error.

  4. Retroalimentaci贸n y Recarga de la Tabla

    Dentro de la funci贸n success: function(response) { ... }, se maneja la respuesta del servidor:

    • Si la `response` no contiene un `error` (es decir, la eliminaci贸n fue exitosa), se muestra una alerta de 茅xito con SweetAlert (`Swal.fire('¡Eliminado!', ..., 'success')`).
    • Si la `response` s铆 contiene un `error`, se muestra una alerta de error (`Swal.fire('Error', ..., 'error')`).
    • Finalmente, y lo m谩s importante, table.ajax.reload(); se llama para **recargar los datos de la tabla DataTables**. Esto actualiza la lista de usuarios, eliminando visualmente el registro que acaba de ser borrado sin necesidad de refrescar toda la p谩gina.
  5. Manejo de Errores de Conexi贸n

    La funci贸n `error: function(xhr, status, error) { ... }` captura cualquier problema en la comunicaci贸n con el servidor (como errores de red), mostrando un mensaje de error en la consola y una alerta amigable al usuario.

Con este script, has implementado una forma robusta y amigable para el usuario de eliminar registros de usuarios, completando as铆 las operaciones esenciales de tu CRUD.

Script JavaScript para la previsualizaci贸n de im谩genes

Para mejorar la experiencia del usuario al subir o editar una imagen de perfil, es muy 煤til mostrar una **vista previa** de la imagen seleccionada antes de que el formulario se env铆e. Esto permite al usuario confirmar que ha elegido la imagen correcta. Este script se encarga de leer el archivo de imagen seleccionado y mostrarlo en un elemento <img> designado.

C贸digo del script para previsualizar im谩genes

Copia el siguiente bloque de c贸digo JavaScript. Este script incluye la funci贸n principal para la previsualizaci贸n y la forma de activarla en tu formulario de edici贸n.


// Funci贸n principal para previsualizar una imagen
function previewImage(input, previewId, currentImageId) {
    var preview = document.getElementById(previewId); // Elemento  donde se mostrar谩 la vista previa
    var currentImage = currentImageId ? document.getElementById(currentImageId) : null; // Imagen actual del usuario (para ocultarla si se sube una nueva)
    var file = input.files[0]; // El archivo de imagen seleccionado por el usuario
    var reader = new FileReader(); // Objeto FileReader para leer el contenido del archivo

    // Cuando el lector de archivos termine de cargar la imagen
    reader.onloadend = function() {
        preview.src = reader.result; // Establece la fuente de la imagen de vista previa
        preview.style.display = 'block'; // Muestra la imagen de vista previa
        if (currentImage) {
            currentImage.style.display = 'none'; // Oculta la imagen actual si se selecciona una nueva
        }
    };

    // Si se ha seleccionado un archivo
    if (file) {
        reader.readAsDataURL(file); // Lee el archivo como una URL de datos (Base64)
    } else {
        // Si no se selecciona ning煤n archivo (por ejemplo, se borra la selecci贸n)
        preview.src = '#'; // Limpia la fuente de la vista previa
        preview.style.display = 'none'; // Oculta la vista previa
        if (currentImage) {
            currentImage.style.display = 'block'; // Vuelve a mostrar la imagen actual si exist铆a
        }
    }
}

// Escucha el cambio en el campo de selecci贸n de imagen para mostrar la vista previa en el modal de edici贸n
$("#imagen_ed").change(function() {
    // Llama a la funci贸n previewImage pasando el input, el ID del elemento de vista previa y el ID de la imagen actual
    previewImage(this, "imagenPreview_ed", "imagen_ed_actual");
});

// Nota: La funci贸n 'readURL' parece ser una funci贸n auxiliar o duplicada de 'previewImage'.
// Si 'previewImage' ya maneja la l贸gica, 'readURL' podr铆a no ser necesaria o podr铆a ser un vestigio de desarrollo previo.
// Sin embargo, si tienes un caso de uso espec铆fico para 'readURL', aqu铆 est谩 su implementaci贸n:
/*
function readURL(input, previewId) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            $("#" + previewId).attr("src", e.target.result);
            $("#" + previewId).show();
        };
        reader.readAsDataURL(input.files[0]);
    }
}
*/

Explicaci贸n detallada del funcionamiento:

Este script se compone de una funci贸n principal y un evento que la activa, dise帽ados para ofrecer una previsualizaci贸n interactiva de las im谩genes:

  1. La funci贸n previewImage(input, previewId, currentImageId)

    Esta es la funci贸n central. Toma tres par谩metros:

    • input: Es el elemento de entrada de tipo `file` (donde el usuario selecciona la imagen).
    • previewId: Es el ID del elemento `` donde se mostrar谩 la vista previa de la nueva imagen.
    • currentImageId: (Opcional) Es el ID del elemento `` que muestra la imagen actual del usuario (煤til en el modal de edici贸n). Si se proporciona, esta imagen se ocultar谩 cuando se seleccione una nueva.

    Dentro de la funci贸n:

    • Se utiliza el objeto `FileReader` para leer el contenido del archivo de imagen seleccionado por el usuario.
    • El evento `reader.onloadend` se dispara cuando el `FileReader` termina de leer el archivo. En este punto, la propiedad `reader.result` contiene la imagen como una URL de datos (Base64), que se asigna directamente al atributo `src` del elemento de vista previa (`preview.src = reader.result;`).
    • Se ajusta la visibilidad: la vista previa se muestra (`preview.style.display = 'block';`) y, si existe una imagen actual (`currentImageId`), esta se oculta (`currentImage.style.display = 'none';`).
    • Si el usuario borra la selecci贸n de un archivo, la imagen de vista previa se oculta y, si exist铆a una imagen actual, esta se vuelve a mostrar, dando una experiencia fluida.
  2. Activaci贸n de la previsualizaci贸n en el formulario de edici贸n

    La l铆nea $("#imagen_ed").change(function() { ... }); es un evento de jQuery que escucha cada vez que el contenido del campo de entrada de archivo con el ID `imagen_ed` (el input de imagen en el modal de edici贸n) cambia (es decir, cuando el usuario selecciona una imagen nueva o la borra).

    Cuando este evento ocurre, se llama a la funci贸n `previewImage()`, pas谩ndole el propio elemento `input` (`this`), el ID del `` donde queremos que se muestre la vista previa (`"imagenPreview_ed"`), y el ID del `` que muestra la imagen actual (`"imagen_ed_actual"`).

Nota sobre `readURL` : El c贸digo que proporcionaste incluye otra funci贸n `readURL`. Esta funci贸n parece ser una versi贸n m谩s simple o una alternativa a `previewImage`, con una funcionalidad similar. En el contexto de este tutorial, si `previewImage` ya maneja los requisitos de previsualizaci贸n y ocultamiento/visualizaci贸n de la imagen actual, `readURL` podr铆a ser redundante. Sin embargo, se mantiene su c贸digo comentado para que puedas entender su prop贸sito en caso de que decidas utilizarla en un contexto diferente o combinarlas.

Con este script, tus formularios de inserci贸n y edici贸n de usuarios ahora ofrecer谩n una experiencia visual mucho m谩s intuitiva al manejar im谩genes.





Tags:
Jorge Catalao

Posted by: Jorge Catalao

Bienvenido a mi blog de cocina, un espacio donde comparto recetas sencillas que celebran tanto los sabores de hoy como los de ayer. Aqu铆 encontrar谩s platos f谩ciles de preparar, con ingredientes accesibles y explicaciones paso a paso, pensadas para quienes disfrutan cocinar sin complicarse. Me inspiro en la cocina tradicional, esos sabores que nos conectan con la infancia y la memoria, pero tambi茅n en recetas modernas, r谩pidas y pr谩cticas para el ritmo actual. Desde guisos caseros hasta ideas frescas para todos los d铆as, este blog es para quienes aman el sabor aut茅ntico, sin importar el nivel de experiencia en la cocina. ¡Cocinar puede ser simple, delicioso y hasta divertido! Gracias por estar ac谩 y compartir conmigo esta pasi贸n por la buena comida.

Publicar un comentario

0 Comentarios

Si desea contactar comigo, lo puede hacer atravez deste formulario gracias