👥 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