- Creación de la tabla usuarios con SQL
- Creación de la tabla para ver los usuarios (HTML)
- Creación del modal para Insertar y Editar Usuarios (HTML)
- Creación del script JS para ver el DataTable de Usuarios
- Creación del script JS para insertar usuarios
- Creación del script JS para buscar roles y mostrar en el select (para editar usuarios)
- Creación del script JS para editar usuarios
- Creación del script JS para eliminar usuarios
- Creación del PHP de los usuarios
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 tablaroles
. Es de tipo entero y es obligatoria. La restricciónFOREIGN 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 deTRUE
(activo).fechaCreacion
: Marca de tiempo automática que registra la fecha y hora en que se creó el usuario. Utiliza el valor predeterminadoCURRENT_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 | 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 IDtablaUsuarios
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 IDmodalUsuarios
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)
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
yjquery.dataTables.min.css
: Archivos principales de DataTables.buttons.dataTables.min.js
ybuttons.dataTables.min.css
: Extensión Buttons para DataTables, que permite la creación de botones personalizados y de exportación.jszip.min.js
ypdfmake.min.js
,vfs_fonts.js
: Librerías necesarias para la exportación a Excel y PDF.buttons.html5.min.js
ybuttons.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
ybootstrap.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 '
';
} else {
return '
';
}
}
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 decolumns
coincidan exactamente con los nombres de los campos que devuelve tu archivoajax/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 a8
asumiendo que tienes 9 columnas en total (desdeidUsuario
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 | ![]() |
|
2 | Editor | editor456 | Carlos | Pérez Ruiz | carlos.perez@example.com | 918765432 | ![]() |
|
3 | Usuario | user789 | Sofía | Martínez Sanz | sofia.martinez@example.com | 911223344 | ![]() |
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 llamadaobtenerRoles
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ámetroaccion
con el valor10
al servidor. Este valor le indica al archivorol.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ámetroroles
contiene los datos JSON recibidos del servidor.$("#selectIdRol").empty();
: Limpia cualquier opción que pudiera haber previamente en el elemento<select>
con el IDselectIdRol
(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 deroles
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ónobtenerRoles()
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:
-
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 objetoFile
que representa el archivo seleccionado por el usuario, necesario para la subida. -
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 comomultipart/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íneaformData.append("accion", 2);
. Este parámetroaccion
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 valor2
podría significar "insertar nuevo usuario". -
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 objetoformData
ya preparado.processData: false
: Muy importante cuando se usaFormData
. Indica a jQuery que no intente procesar ni codificar los datos, permitiendo queFormData
haga su trabajo al formatearlos para la subida de archivos.contentType: false
: También crucial paraFormData
. Evita que jQuery establezca la cabeceraContent-Type
, lo que permite al navegador establecer automáticamentemultipart/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 comomensaje
oerror
). 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 quetable
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:
-
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íneavar 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. -
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.
-
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.
-
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:
-
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. -
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.
-
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:
-
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 elidUsuario
del registro que se desea eliminar. -
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. -
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.
-
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.
-
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:
-
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.
-
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.
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias