Creación de CRUD de Roles con HTML, AJAX, jQuery, JavaScript, Bootstrap y PHP

📑Creación de CRUD de Roles con HTML, AJAX, jQuery, JavaScript, Bootstrap y PHP

Creación de las carpetas del sistema
Creación de tablas (roles y usuarios)
Creación de tablas para roles
Creación del modal para roles (insertar)
Creación del modal para editar los Roles
Creación de un modal unificado (insertar/editar) para roles
Creación del JS para roles en DataTable
Creación de JS para insertar roles
Creación del JS para editar los roles
Creación del JS para eliminar roles
Creación del PHP para los roles

Una buena organización desde el inicio es clave para mantener nuestro proyecto ordenado y facilitar el desarrollo.

Estructura de Carpetas Sugerida:

Para este proyecto, te propongo la siguiente estructura de carpetas. Esta es una estructura común y funcional para proyectos web pequeños y medianos:


mi_proyecto_crud/
├── css/
├── js/
├── php/
├── index.html
└── README.md (opcional)

Visualización:

Imagina que abres tu explorador de archivos. Dentro de la carpeta principal que llamaremos mi_proyecto_crud, crearemos las siguientes subcarpetas y un archivo principal:


mi_proyecto_crud
├── 📂 css
├── 📂 js
├── 📂 php
├── 📄 index.html
└── 📄 README.md

Explicación de cada carpeta y archivo:

css/ (Carpeta): Aquí guardaremos todos nuestros archivos de hojas de estilo en cascada (CSS). Utilizaremos Bootstrap para darle estilo a nuestra interfaz, por lo que es probable que tengamos archivos CSS de Bootstrap aquí, así como cualquier archivo CSS personalizado que necesitemos para nuestro proyecto.
- Ejemplo: css/bootstrap.min.css, css/estilos.css
js/ (Carpeta): Esta carpeta contendrá todos nuestros archivos de JavaScript. Aquí irán las bibliotecas como jQuery y los scripts que escribamos para manejar la lógica de la interfaz de usuario, las peticiones AJAX y la interacción con el servidor.
- Ejemplo: js/jquery-3.7.1.min.js, js/bootstrap.bundle.min.js, js/roles.js
php/ (Carpeta): Dentro de esta carpeta almacenaremos todos nuestros archivos PHP. Estos archivos serán los encargados de interactuar con la base de datos, procesar las peticiones del cliente (enviadas mediante AJAX) y devolver las respuestas necesarias.
- Ejemplo: php/conexion.php, php/roles.php
index.html (Archivo): Este será el archivo HTML principal de nuestra aplicación. Contendrá la estructura de la interfaz de usuario para la gestión de roles (y eventualmente usuarios). Aquí incluiremos las referencias a nuestros archivos CSS y JavaScript.
README.md (Opcional): Este es un archivo de texto en formato Markdown que se utiliza comúnmente para proporcionar información sobre el proyecto, como una descripción, instrucciones de instalación, etc. Es útil si planeas compartir tu proyecto o mantener un registro detallado.

Código de ejemplo para index.html (estructura básica):

Para que nuestra aplicación funcione correctamente, necesitamos definir la estructura de las tablas que almacenarán la información de los roles y los usuarios.

Base de Datos:

Asumiremos que estás utilizando una base de datos relacional como MySQL (que suele venir con XAMPP). Si estás utilizando otra base de datos, la sintaxis puede variar ligeramente, pero los conceptos serán los mismos.

Tabla `roles`

Esta tabla almacenará la información sobre los diferentes roles que pueden tener los usuarios en nuestro sistema (ej: Administrador, Editor, Usuario Registrado, etc.).

Estructura:

Columna	Tipo de Dato	Atributos	Descripción	Ejemplo
`idRol`	`INT`	`AUTO_INCREMENT, PRIMARY KEY`	Identificador único para cada rol.	1, 2, 3
`rol`	`VARCHAR(50)`	`NOT NULL, UNIQUE`	Nombre del rol. Debe ser único y no nulo.	Administrador

Código SQL para crear la tabla roles:


CREATE TABLE roles (
    idRol INT AUTO_INCREMENT PRIMARY KEY,
    rol VARCHAR(50) NOT NULL UNIQUE
);

Explicación del código:

CREATE TABLE roles: Indica que vamos a crear una nueva tabla llamada roles.
idRol INT AUTO_INCREMENT PRIMARY KEY: Define una columna llamada idRol de tipo entero (INT).
- AUTO_INCREMENT: Esto hace que el valor de idRol se genere automáticamente cada vez que se inserta una nueva fila.
- PRIMARY KEY: Esto indica que la columna idRol será la clave primaria de la tabla.
rol VARCHAR(50) NOT NULL UNIQUE: Define una columna llamada rol de tipo cadena de caracteres variable (VARCHAR).
- NOT NULL: Esto asegura que esta columna no puede dejarse vacía.
- UNIQUE: Esto garantiza que no puede haber dos roles con el mismo nombre.

Tabla `usuarios`

Esta tabla almacenará la información de los usuarios de nuestro sistema.

Estructura:

Columna	Tipo de Dato	Atributos	Descripción	Ejemplo	Clave Foránea	Referencia
`idUsuario`	`INT`	`AUTO_INCREMENT, PRIMARY KEY`	Identificador único para cada usuario.	101, 102, 103
`nombre`	`VARCHAR(100)`	`NOT NULL`	Nombre completo del usuario.	Juan Pérez
`email`	`VARCHAR(100)`	`NOT NULL, UNIQUE`	Dirección de correo electrónico del usuario.	juan.perez@ejemplo.com
`password`	`VARCHAR(255)`	`NOT NULL`	Contraseña del usuario (se recomienda usar hash).	`$2y$10$...`
`idRol`	`INT`	`NOT NULL`	Identificador del rol al que pertenece el usuario.	1, 2	SI	`roles(idRol)`
`fechaCreacion`	`TIMESTAMP`	`DEFAULT CURRENT_TIMESTAMP`	Fecha y hora en que se creó el usuario.	`2025-05-18 10:50:00`

Código SQL para crear la tabla usuarios:


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

Explicación del código:

CREATE TABLE usuarios: Indica que vamos a crear una nueva tabla llamada usuarios.
idUsuario INT AUTO_INCREMENT PRIMARY KEY: Identificador único para cada usuario.
nombre VARCHAR(100) NOT NULL: Nombre completo del usuario (no puede ser nulo).
email VARCHAR(100) NOT NULL UNIQUE: Dirección de correo electrónico (no nula y única).
password VARCHAR(255) NOT NULL: Contraseña del usuario (se recomienda usar hash).
idRol INT NOT NULL: Clave foránea que relaciona al usuario con un rol.
fechaCreacion TIMESTAMP DEFAULT CURRENT_TIMESTAMP: Fecha y hora de creación.
FOREIGN KEY (idRol) REFERENCES roles(idRol): Define la clave foránea que referencia a la tabla roles.

Implementación de la tabla dinámica para mostrar los roles utilizando DataTables

Un DataTable es una forma muy útil y dinámica de mostrar información en una tabla en la interfaz de usuario, ofreciendo funcionalidades como paginación, búsqueda, ordenamiento y más. Utilizaremos la librería jQuery DataTables para esto.

Requisitos

Para implementar DataTables, necesitamos incluir los archivos CSS y JavaScript de la librería en nuestro archivo index.html. Asegúrate de tener jQuery incluido también, ya que DataTables depende de él.

Dentro de la etiqueta `<head>` de tu `index.html`:


<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">

Antes de la etiqueta `<body>` de tu `index.html`:


<script type="text/javascript" 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>

Estructura HTML para la tabla de roles en `index.html`

Dentro del div con la clase container en tu index.html, vamos a añadir la estructura básica de la tabla que DataTables convertirá en una tabla dinámica.


<table id="tablaRoles" class="table table-striped table-bordered" style="width:100%">
    <thead>
        <tr>
            <th>ID</th>
            <th>Rol</th>
            <th>Acciones</th>
        </tr>
    </thead>
    <tbody>
        </tbody>
    <tfoot>
        <tr>
            <th>ID</th>
            <th>Rol</th>
            <th>Acciones</th>
        </tr>
    </tfoot>
</table>

Explicación del HTML:

<table id="tablaRoles" class="table table-striped table-bordered" style="width:100%">: Creamos una tabla HTML con el ID tablaRoles. Las clases table, table-striped, y table-bordered son clases de Bootstrap para darle un estilo básico a la tabla. style="width:100%" hace que la tabla ocupe todo el ancho de su contenedor.
<thead>: Define la fila de encabezado de la tabla.
- <th>ID</th>, <th>Rol</th>, <th>Acciones</th>: Son las celdas de encabezado para cada columna. La columna "Acciones" la utilizaremos para los botones de editar y eliminar cada rol.
<tbody>: Aquí es donde se insertarán dinámicamente las filas con los datos de los roles que obtendremos de nuestra base de datos a través de PHP y AJAX. Inicialmente estará vacío.
<tfoot>: Define el pie de la tabla. A menudo se utiliza para mostrar la misma información del encabezado o para mostrar resúmenes. En este caso, repetimos las columnas del encabezado.

Inicialización de DataTables con JavaScript (en `js/roles.js`)

Ahora, vamos a escribir el código JavaScript que se encargará de inicializar DataTables en nuestra tabla cuando la página se cargue. Asegúrate de que este archivo (js/roles.js) esté vinculado correctamente en tu index.html (como vimos en el ejemplo básico anterior).


$(document).ready(function() {
    $('#tablaRoles').DataTable({
        "ajax": {
            "url": "php/roles.php?accion=1", // La URL del script PHP que devolverá los datos de los roles en formato JSON (Case 1: Ver datos)
            "dataSrc": "" // Los datos JSON están en la raíz de la respuesta
        },
        "columns": [
            { "data": "idRol" },
            { "data": "rol" },
            {
                "data": null,
                "defaultContent": "<button class='btn btn-sm btn-warning btnEditarRol'>Editar</button> <button class='btn btn-sm btn-danger btnEliminarRol'>Eliminar</button>"
            }
        ],
        "language": {
            "url": "//cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json" // Opcional: para poner DataTables en español
        }
    });
});

Explicación del JavaScript:

$(document).ready(function() { ... });: Asegura que el código dentro se ejecute solo cuando el documento HTML esté completamente cargado.
$('#tablaRoles').DataTable({ ... });: Inicializa DataTables en la tabla con el ID tablaRoles.
"ajax": { ... }: Configura la fuente de datos para DataTables mediante una petición AJAX.
- "url": "php/roles.php?accion=1": Especifica la URL del archivo PHP (roles.php) que se encargará de obtener los datos de los roles de la base de datos. Le pasamos un parámetro accion=1 para indicar que queremos obtener todos los roles (este "case 1" lo definiremos en nuestro archivo php/roles.php).
- "dataSrc": "": Indica que los datos JSON que devuelva el script PHP estarán directamente en la raíz de la respuesta (es decir, un array de objetos).
"columns": [ ... ]: Define cómo se mostrarán los datos en cada columna de la tabla.
- { "data": "idRol" }: La primera columna mostrará el valor de la propiedad idRol de cada objeto en los datos JSON.
- { "data": "rol" }: La segunda columna mostrará el valor de la propiedad rol.
- { "data": null, "defaultContent": "<button class='btn btn-sm btn-warning btnEditarRol'>Editar</button> <button class='btn btn-sm btn-danger btnEliminarRol'>Eliminar</button>" }: La tercera columna no está directamente ligada a una propiedad específica de los datos. En su lugar, defaultContent define el HTML que se mostrará en cada celda de esta columna. Aquí incluimos los botones para "Editar" y "Eliminar" cada rol. Les asignamos clases (btnEditarRol, btnEliminarRol) para poder manejar sus eventos con JavaScript posteriormente.
"language": { ... }: Opcional. Permite configurar el idioma de DataTables (etiquetas, mensajes, etc.). Aquí se carga el archivo de idioma español desde un CDN.

Creación del Modal para Roles (Insertar)

Este modal de Bootstrap se utilizará para crear nuevos roles en nuestro sistema.

Estructura HTML del Modal para Insertar

A continuación, se presenta la estructura HTML del modal para insertar. Este código debe ir dentro del <body> de tu archivo index.html, preferiblemente después de la tabla de roles.


<!-- Modal para Insertar Roles -->
<div class="modal fade" id="mdlInsertarRol" tabindex="-1" aria-labelledby="insertarRolModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title" id="insertarRolModalLabel">Nuevo Rol</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="frmInsertarRol">
                    <div class="mb-3">
                        <label for="rol" class="form-label">Nombre del Rol:</label>
                        <input type="text" class="form-control" name="rol" id="rol" placeholder="Escribe el nombre del rol" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer bg-success">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                <button type="submit" class="btn btn-primary" id="btnGuardarNuevoRol" form="frmInsertarRol">Guardar Rol</button>
            </div>
        </div>
    </div>
</div>

Explicación del HTML del Modal para Insertar:

El ID del modal es mdlInsertarRol y el del formulario es frmInsertarRol.
El encabezado y el pie de página tienen un fondo verde (`bg-success`).
No incluye el campo oculto idRol, ya que estamos creando un nuevo registro.

Creación del Modal para Roles (Editar)

Este modal de Bootstrap se utilizará para editar roles existentes en nuestro sistema.

Estructura HTML del Modal para Editar

A continuación, se presenta la estructura HTML del modal para editar. Este código debe ir dentro del <body> de tu archivo index.html, preferiblemente después del modal de inserción.


<!-- Modal para Editar Roles -->
<div class="modal fade" id="mdlEditarRol" tabindex="-1" aria-labelledby="editarRolModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-warning text-dark">
                <h5 class="modal-title" id="editarRolModalLabel">Editar Rol</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="frmEditarRol">
                    <div class="mb-3">
                        <label for="idRolEditar" class="form-label">ID del Rol:</label>
                        <input type="text" class="form-control" name="idRol" id="idRolEditar" readonly>
                    </div>
                    <div class="mb-3">
                        <label for="rolEditar" class="form-label">Nombre del Rol:</label>
                        <input type="text" class="form-control" name="rol" id="rolEditar" placeholder="Escribe el nuevo nombre del rol" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer bg-warning">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                <button type="submit" class="btn btn-primary" id="btnActualizarRol" form="frmEditarRol">Actualizar Rol</button>
            </div>
        </div>
    </div>
</div>

Explicación del HTML del Modal para Editar:

El ID del modal es mdlEditarRol y el del formulario es frmEditarRol.
El encabezado y el pie de página tienen un fondo amarillo (`bg-warning`).
Incluye un campo de texto para el idRol con el atributo readonly.
El campo para el nombre del rol tiene el ID rolEditar.
El botón de guardar tiene el ID btnActualizarRol.

Creación del Modal Unificado para Roles (Insertar/Editar con ID Readonly)

Este modal unificado de Bootstrap servirá tanto para insertar nuevos roles como para editar los existentes. Incluye un campo idRol que estará visible y en modo solo lectura durante la edición.

Estructura HTML del Modal Unificado con ID Readonly

A continuación, se presenta la estructura HTML del modal unificado. Este código debe ir dentro del <body> de tu archivo index.html.


<!-- Modal Unificado para Registrar/Editar Roles con ID Readonly -->
<div class="modal fade" id="mdlGestionRolesUnificado" tabindex="-1" aria-labelledby="gestionRolesModalLabelUnificado" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-info text-white">
                <h5 class="modal-title" id="gestionRolesModalLabelUnificado">Gestión de Rol</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="frmGestionRolesUnificado">
                    <div class="mb-3">
                        <label for="idRolUnificado" class="form-label">ID del Rol:</label>
                        <input type="text" class="form-control" name="idRol" id="idRolUnificado" readonly>
                    </div>
                    <div class="mb-3">
                        <label for="rolUnificado" class="form-label">Nombre del Rol:</label>
                        <input type="text" class="form-control" name="rol" id="rolUnificado" placeholder="Escribe el nombre del rol" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer bg-info">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
                <button type="submit" class="btn btn-primary" id="btnGuardarRolUnificado" form="frmGestionRolesUnificado">Guardar Rol</button>
            </div>
        </div>
    </div>
</div>

Explicación del HTML del Modal Unificado con ID Readonly:

El ID del modal es mdlGestionRolesUnificado y el del formulario es frmGestionRolesUnificado.
Incluye un campo de texto para el idRol con el atributo readonly, visible tanto en la creación como en la edición (aunque solo se llenará al editar).
El campo para el nombre del rol tiene el ID rolUnificado.
El botón de guardar tiene el ID btnGuardarRolUnificado.

Creación del script JavaScript para el DataTable de Roles

Este script JavaScript se encargará de inicializar la librería DataTables en nuestra tabla de roles y cargar los datos desde el servidor utilizando AJAX. Configuraremos los aspectos básicos para mostrar la información de los roles en un formato de tabla interactivo, incluyendo la estructura para las acciones de editar y eliminar.

Inclusión de los CDN necesarios

Para que el DataTable se visualice correctamente, es necesario incluir los siguientes CDN en la sección <head> de tu archivo index.html:


<!-- CDN de DataTables CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">

Y antes de la etiqueta </body>, asegúrate de tener el CDN de JavaScript necesario:


<!-- CDN de jQuery (necesario para DataTables) -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.7.0.js"></script>

<!-- CDN de DataTables JS -->
<script type="text/javascript" src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>

Código JavaScript para inicializar el DataTable


$(document).ready(function() {
    var table = $('#tablaRoles').DataTable({
        ajax: {
            url: "php/roles.php?accion=1", // La URL del script PHP que devuelve los datos (Case 1: Ver datos)
            type: "GET", // O "POST" según tu configuración en PHP
            dataSrc: "" // Los datos JSON están en la raíz de la respuesta
        },
        columns: [{
            data: "idRol"
        },
        {
            data: "rol"
        },
        {
            targets: -1, // Última columna
            orderable: false, // No permitir ordenar esta columna
            render: function(data, type, full, meta) {
                return "<center>" +
                    "<span class='btnEditarRol text-primary px-1' style='cursor:pointer'>" +
                        "<i class='fas fa-pencil-alt fs-5'></i>" +
                    "</span>" +
                    "<span class='btnEliminarRol text-danger px-1' style='cursor:pointer'>" +
                        "<i class='fas fa-trash fs-5'></i>" +
                    "</span>" +
                "</center>";
            }
        }],
        language: {
            url: "//cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json"
        }
    });

    // Los eventos para los botones de Editar y Eliminar se manejarán en otros acordeones.
    // $('#tablaRoles tbody').on('click', '.btnEditarRol', function() { ... });
    // $('#tablaRoles tbody').on('click', '.btnEliminarRol', function() { ... });
});

Explicación del Código JavaScript del DataTable:

$(document).ready(function() { ... });: Asegura que el código se ejecute cuando el DOM esté completamente cargado.
$('#tablaRoles').DataTable({ ... });: Inicializa DataTables en la tabla con el ID tablaRoles.
ajax: { ... }: Configura la fuente de datos AJAX para cargar la información de los roles desde el servidor.
columns: [...]: Define las columnas del DataTable.
- { data: "idRol" }: Muestra el ID del rol.
- { data: "rol" }: Muestra el nombre del rol.
- { targets: -1, orderable: false, render: function(...) }: Define la última columna para las acciones.
  - targets: -1: Indica que esta configuración aplica a la última columna.
  - orderable: false: Evita que esta columna pueda ser ordenada.
  - render: function(...): Función que define el HTML que se mostrará en cada celda de esta columna. El código HTML generado es:
```
<center>
    <span class='btnEditarRol text-primary px-1' style='cursor:pointer'>
        <i class='fas fa-pencil-alt fs-5'></i>
    </span>
    <span class='btnEliminarRol text-danger px-1' style='cursor:pointer'>
        <i class='fas fa-trash fs-5'></i>
    </span>
</center>
                                    
```
    Este HTML crea dos elementos `<span>` que actuarán como botones. Cada uno tiene clases de Bootstrap para el estilo (`text-primary`, `text-danger`, `px-1`) y una clase personalizada (`btnEditarRol`, `btnEliminarRol`) que usaremos en el futuro para capturar los eventos de clic. Dentro de cada `<span>` se incluye un icono de Font Awesome para representar las acciones de editar (`fa-pencil-alt`) y eliminar (`fa-trash`). El estilo `cursor:pointer` hace que el cursor del ratón cambie al pasar sobre ellos, indicando que son interactivos. El elemento `<center>` se utiliza para centrar los botones dentro de la celda.
language: { url: "//cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json" }: Configura el idioma a español.
Los comentarios al final del script indican que la lógica para los eventos de clic en los botones "Editar" y "Eliminar" se implementará en secciones posteriores (otros acordeones).

Código JavaScript para Insertar Roles

Este script JavaScript se encarga de capturar los datos del formulario de inserción de roles (frmInsertarRol) cuando se hace clic en el botón de "Guardar Rol" dentro del modal mdlInsertarRol. Es importante recordar que el modal de inserción, tal como lo definimos, **no incluye el campo `idRol`**, ya que este se generará automáticamente al crear un nuevo registro en la base de datos. Los datos capturados del formulario (en este caso, solo el nombre del rol) se envían al servidor mediante una petición AJAX.

Código JavaScript para la Inserción de Roles


$(document).ready(function() {
    // Evento submit del formulario de inserción de roles
    $('#frmInsertarRol').submit(function(event) {
        event.preventDefault(); // Evitar la recarga de la página

        // Capturar los datos del formulario
        var formData = $(this).serialize();

        // Realizar la petición AJAX para insertar el nuevo rol
        $.ajax({
            url: "php/roles.php?accion=2", // La URL del script PHP para la inserción (Case 2: Insertar)
            type: "POST",
            data: formData,
            dataType: "json", // Esperamos una respuesta JSON del servidor
            success: function(response) {
                if (response.success) {
                    $('#mdlInsertarRol').modal('hide'); // Ocultar el modal
                    $('#tablaRoles').DataTable().ajax.reload(); // Recargar el DataTable
                    Swal.fire({
                        icon: 'success',
                        title: 'Rol Registrado',
                        text: response.message
                    });
                    $('#frmInsertarRol')[0].reset(); // Limpiar el formulario
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: response.message
                    });
                }
            },
            error: function(xhr, status, error) {
                console.error("Error en la petición AJAX:", error);
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Hubo un problema al registrar el rol.'
                });
            }
        });
    });
});

Explicación del Código JavaScript para la Inserción:

$(document).ready(function() { ... });: Asegura que el código se ejecute cuando el DOM esté completamente cargado.
$('#frmInsertarRol').submit(function(event) { ... });: Asigna un evento al envío (submit) del formulario con el ID frmInsertarRol.
event.preventDefault();: Evita la recarga de la página.
var formData = $(this).serialize();: Captura los datos del formulario (solo el campo rol en este caso, ya que no hay idRol en el modal de inserción).
$.ajax({ ... });: Realiza una petición AJAX al servidor.
- url: "php/roles.php?accion=2": Especifica la ruta para la inserción.
- type: "POST": Método HTTP para enviar los datos.
- data: formData: Los datos del formulario (solo el nombre del rol).
- dataType: "json": Esperamos una respuesta JSON.
- success: function(response) { ... }: Maneja la respuesta exitosa del servidor, ocultando el modal, recargando el DataTable, mostrando un mensaje de éxito y limpiando el formulario.
- error: function(xhr, status, error) { ... }: Maneja los errores en la petición AJAX.

Código JavaScript para Editar Roles

Este script JavaScript se encarga de dos acciones principales relacionadas con la edición de roles:

Cargar los datos del rol seleccionado en el modal de edición (mdlEditarRol) cuando se hace clic en el botón "Editar" del DataTable.
Enviar los datos actualizados del formulario de edición (frmEditarRol) al servidor mediante una petición AJAX.

Recuerda que el modal de edición (mdlEditarRol) contiene un campo idRol que es de tipo texto y tiene el atributo readonly, además del campo para el nombre del rol.

Código JavaScript para la Edición de Roles


$(document).ready(function() {
    var tablaRoles = $('#tablaRoles').DataTable(); // Obtener la instancia del DataTable

    // Evento clic en el botón "Editar Rol" del DataTable
    $('#tablaRoles tbody').on('click', '.btnEditarRol', function() {
        var data = tablaRoles.row($(this).parents('tr')).data();
        var idRol = data.idRol;

        // Realizar la petición AJAX para obtener los datos del rol a editar
        $.ajax({
            url: "php/roles.php?accion=3&idRol=" + idRol, // La URL para obtener los datos del rol (Case 3: Obtener datos para editar)
            type: "GET",
            dataType: "json",
            success: function(response) {
                if (response) {
                    $('#idRolEditar').val(response.idRol); // Llenar el campo idRol del modal de edición
                    $('#rolEditar').val(response.rol); // Llenar el campo nombre del rol del modal de edición
                    $('#mdlEditarRol').modal('show'); // Mostrar el modal de edición
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'No se pudieron cargar los datos del rol.'
                    });
                }
            },
            error: function(xhr, status, error) {
                console.error("Error en la petición AJAX:", error);
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Hubo un problema al cargar los datos del rol.'
                });
            }
        });
    });

    // Evento submit del formulario de edición de roles
    $('#frmEditarRol').submit(function(event) {
        event.preventDefault(); // Evitar la recarga de la página

        // Capturar los datos del formulario de edición
        var formData = $(this).serialize();

        // Realizar la petición AJAX para actualizar el rol
        $.ajax({
            url: "php/roles.php?accion=4", // La URL del script PHP para la actualización (Case 4: Actualizar)
            type: "POST",
            data: formData,
            dataType: "json", // Esperamos una respuesta JSON del servidor
            success: function(response) {
                if (response.success) {
                    $('#mdlEditarRol').modal('hide'); // Ocultar el modal de edición
                    $('#tablaRoles').DataTable().ajax.reload(); // Recargar el DataTable
                    Swal.fire({
                        icon: 'success',
                        title: 'Rol Actualizado',
                        text: response.message
                    });
                    $('#frmEditarRol')[0].reset(); // Limpiar el formulario de edición
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: response.message
                    });
                }
            },
            error: function(xhr, status, error) {
                console.error("Error en la petición AJAX:", error);
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Hubo un problema al actualizar el rol.'
                });
            }
        });
    });
});

Explicación del Código JavaScript para la Edición:

$(document).ready(function() { ... });: Asegura que el código se ejecute cuando el DOM esté completamente cargado.
var tablaRoles = $('#tablaRoles').DataTable();: Obtiene la instancia del DataTable que ya hemos inicializado.
$('#tablaRoles tbody').on('click', '.btnEditarRol', function() { ... });: Asigna un evento de clic a los botones con la clase .btnEditarRol que se encuentran dentro del cuerpo de la tabla.
- var data = tablaRoles.row($(this).parents('tr')).data();: Obtiene los datos de la fila correspondiente al botón "Editar" que se ha clickeado.
- var idRol = data.idRol;: Extrae el ID del rol de los datos de la fila.
- $.ajax({ ... });: Realiza una petición AJAX al servidor para obtener los datos del rol específico que se va a editar.
  - url: "php/roles.php?accion=3&idRol=" + idRol: La URL del script PHP para obtener los datos (asumimos una acción 3 para esto). Se envía el idRol como parámetro.
  - type: "GET": Método HTTP para la petición.
  - dataType: "json": Esperamos una respuesta JSON del servidor con los datos del rol.
  - success: function(response) { ... }: Si la petición es exitosa y se reciben datos, se llenan los campos del modal de edición (#idRolEditar y #rolEditar) con los valores recibidos y se muestra el modal ($('#mdlEditarRol').modal('show');).
  - error: function(xhr, status, error) { ... }: Maneja los errores en la petición AJAX.
$('#frmEditarRol').submit(function(event) { ... });: Asigna un evento al envío (submit) del formulario con el ID frmEditarRol (el formulario dentro del modal de edición).
- event.preventDefault();: Evita la recarga de la página.
- var formData = $(this).serialize();: Serializa los datos del formulario de edición, que incluirán el idRol (aunque sea `readonly`) y el nuevo nombre del rol.
- $.ajax({ ... });: Realiza una petición AJAX al servidor para actualizar el rol.
  - url: "php/roles.php?accion=4": La URL del script PHP para la actualización (asumimos una acción 4 para esto).
  - type: "POST": Método HTTP para enviar los datos actualizados.
  - data: formData: Los datos del formulario de edición.
  - dataType: "json": Esperamos una respuesta JSON del servidor.
  - success: function(response) { ... }: Si la actualización es exitosa, se oculta el modal de edición, se recarga el DataTable, se muestra un mensaje de éxito y se limpia el formulario.
  - error: function(xhr, status, error) { ... }: Maneja los errores en la petición AJAX.

Código JavaScript para Eliminar Roles

Este script JavaScript se encarga de la lógica para eliminar un rol existente en el sistema. Al hacer clic en el botón "Eliminar" de una fila del DataTable, se solicitará una confirmación al usuario antes de enviar una petición AJAX al servidor para eliminar el rol de la base de datos.

Código JavaScript para la Eliminación de Roles


$(document).ready(function() {
    var tablaRoles = $('#tablaRoles').DataTable(); // Obtener la instancia del DataTable

    // Evento clic en el botón "Eliminar Rol" del DataTable
    $('#tablaRoles tbody').on('click', '.btnEliminarRol', function() {
        var data = tablaRoles.row($(this).parents('tr')).data();
        var idRol = data.idRol;

        // Mostrar una ventana de confirmación utilizando SweetAlert2
        Swal.fire({
            title: '¿Estás seguro?',
            text: "Esta acción eliminará el rol permanentemente.",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Sí, eliminar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                // Realizar la petición AJAX para eliminar el rol
                $.ajax({
                    url: "php/roles.php?accion=5&idRol=" + idRol, // La URL para eliminar el rol (Case 5: Eliminar)
                    type: "POST",
                    dataType: "json",
                    success: function(response) {
                        if (response.success) {
                            $('#tablaRoles').DataTable().ajax.reload(); // Recargar el DataTable
                            Swal.fire({
                                icon: 'success',
                                title: 'Rol Eliminado',
                                text: response.message
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: response.message
                            });
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error("Error en la petición AJAX:", error);
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Hubo un problema al eliminar el rol.'
                        });
                    }
                });
            }
        });
    });
});

Explicación del Código JavaScript para la Eliminación:

$(document).ready(function() { ... });: Asegura que el código se ejecute cuando el DOM esté completamente cargado.
var tablaRoles = $('#tablaRoles').DataTable();: Obtiene la instancia del DataTable.
$('#tablaRoles tbody').on('click', '.btnEliminarRol', function() { ... });: Asigna un evento de clic a los botones con la clase .btnEliminarRol dentro del cuerpo de la tabla.
- var data = tablaRoles.row($(this).parents('tr')).data();: Obtiene los datos de la fila correspondiente al botón "Eliminar" clickeado.
- var idRol = data.idRol;: Extrae el ID del rol que se va a eliminar.
- Swal.fire({ ... }).then((result) => { ... });: Utiliza SweetAlert2 para mostrar una ventana de confirmación al usuario.
  - title: '¿Estás seguro?', text: "...", icon: 'warning': Configuran el título, el texto y el icono de la ventana de confirmación.
  - showCancelButton: true, confirmButtonColor: '#d33', cancelButtonColor: '#3085d6', confirmButtonText: 'Sí, eliminar', cancelButtonText: 'Cancelar': Personalizan los botones de confirmación y cancelación.
  - .then((result) => { ... }): Esta función se ejecuta después de que el usuario interactúa con la ventana de confirmación.
  - if (result.isConfirmed) { ... }: Verifica si el usuario hizo clic en el botón de confirmación ("Sí, eliminar"). Si es así, se procede con la eliminación mediante AJAX.
- $.ajax({ ... });: Realiza una petición AJAX al servidor para eliminar el rol.
  - url: "php/roles.php?accion=5 & idRol=" + idRol: La URL del script PHP para la eliminación (asumimos una acción 5 para esto). Se envía el idRol como parámetro.
  - type: "POST": Método HTTP para la petición de eliminación.
  - dataType: "json": Esperamos una respuesta JSON del servidor.
  - success: function(response) { ... }: Si la eliminación es exitosa, se recarga el DataTable y se muestra un mensaje de éxito.
  - error: function(xhr, status, error) { ... }: Maneja los errores en la petición AJAX.

Implementación del archivo PHP para Roles (`php/roles.php`)

Este archivo PHP recibe las peticiones AJAX desde nuestro script JavaScript y utiliza PDO (PHP Data Objects) para interactuar con la base de datos. Se manejan diferentes acciones basadas en el parámetro accion enviado en la petición, implementando validaciones y devolviendo respuestas en formato JSON.

Estructura del archivo `php/roles.php`


<?php

require_once("../../conexion.php"); // Conexión a la base de datos

// print_r($_POST);
// exit;

$accion = isset($_POST['accion']) ? $_POST['accion'] : '';


switch ($accion) {
    case '1': // Listar Roles
        try {
            // Ejecuta el procedimiento almacenado prc_registrosRol
            $sql = "SELECT * FROM roles ORDER BY rol ASC";
            $stmt = $pdo->query($sql);

            $data = array(); // Array para almacenar los datos de los Roles

            // Verifica si se obtuvieron resultados
            if ($stmt) {
                while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
                    // Agrega los datos de cada Rol al array
                    $data[] = $row;
                }
            }

            // Devuelve los datos en formato JSON
            echo json_encode($data);
        } catch (PDOException $e) {
            // Manejo de errores en caso de una excepción
            echo "Error: " . $e->getMessage();
        } finally {
            // Cierra la conexión (esto se hace automáticamente con PDO al finalizar el script)
            $pdo = null;
        }
        break;

    case '2': // Agregar rol
        if (isset($_POST['rol'])) {
            $rol = $_POST['rol'];

            // Verificar si la rol ya existe en la base de datos
            $consulta = "SELECT COUNT(*) FROM Roles WHERE rol = :rol";
            $stmt = $pdo->prepare($consulta);
            $stmt->bindParam(':rol', $rol, PDO::PARAM_STR);
            $stmt->execute();
            $existeRol = $stmt->fetchColumn();

            if ($existeRol > 0) {
                // El rol ya está registrada, mostrar mensaje con SweetAlert
                echo json_encode(["mensaje" => "El rol ya está registrado."]);
            } else {
                // El rol no existe, proceder a agregarla

                $sql = "INSERT INTO Roles (rol) VALUES (:rol)";
                $stmt = $pdo->prepare($sql);
                $stmt->bindParam(':rol', $rol, PDO::PARAM_STR);

                if ($stmt->execute()) {
                    // Obtener la lista de rols actualizada
                    $consultaRoles = "SELECT * FROM roles ORDER BY rol";
                    $stmtRoles = $pdo->prepare($consultaRoles);
                    $stmtRoles->execute();
                    $Roles = $stmtRoles->fetchAll(PDO::FETCH_ASSOC);

                    // Devolver la lista de rols en la respuesta JSON
                    echo json_encode(["mensaje" => "rol registrada exitosamente", "Roles" => $Roles]);
                } else {
                    echo json_encode(["error" => "Error al registrar la rol: " . $stmt->errorInfo()[2]]);
                }
            }
        } else {
            echo json_encode(["error" => "Datos incompletos para registrar la rol."]);
        }
        break;

    case '3': // Editar Rol
        // Verifica si se ha proporcionado un ID válido en la solicitud
        if (isset($_POST['idRol'])) {
            $idDelRol = $_POST['idRol'];

            // Realiza la consulta SQL para obtener los datos del Rol según el ID
            $sql = "SELECT * FROM Roles WHERE idRol = ?";
            $stmt = $pdo->prepare($sql);
            $stmt->execute([$idDelRol]);

            // Obtiene los datos del Rol
            $Rol = $stmt->fetch(PDO::FETCH_ASSOC);

            // Verifica si se encontraron datos
            if ($Rol) {
                // Formatea los datos en formato JSON y los envía como respuesta
                echo json_encode($Rol);
            } else {
                // Si no se encontraron datos, puedes enviar un mensaje de error
                echo json_encode(array('error' => 'No se encontraron datos para el ID proporcionado.'));
            }
        } else {
            // Si no se proporcionó un ID válido, puedes enviar un mensaje de error
            echo json_encode(array('error' => 'ID de Rol no válido.'));
        }
        break;


    case '4': // Actualizar usuario

        // Verifica si se han proporcionado los datos necesarios para la actualización
        if (isset($_POST['idRol'], $_POST['rol'])) {
            // Obtén los datos enviados desde el cliente
            $idRol = $_POST['idRol'];
            $rol = $_POST['rol'];

            // Realiza una consulta para verificar si el Rol ya existe
            $sqlVerificarExistencia = "SELECT COUNT(*) FROM Roles WHERE rol = ? AND idRol <> ?";
            $stmtVerificarExistencia = $pdo->prepare($sqlVerificarExistencia);
            $stmtVerificarExistencia->execute([$rol, $idRol]);
            $existeRol = (int) $stmtVerificarExistencia->fetchColumn();

            if ($existeRol > 0) {
                // El Rol ya existe, devuelve un mensaje de advertencia
                echo json_encode(["error" => "El Rol ya está registrado."]);
            } else {
                // El Rol no existe, procede con la actualización

                // Actualiza la Rol sin cambiar la imagen
                $sqlActualizarRol = "UPDATE roles SET rol = ? WHERE idRol = ?";
                $stmtActualizarRol = $pdo->prepare($sqlActualizarRol);

                if ($stmtActualizarRol->execute([$rol, $idRol])) {
                    echo json_encode(["mensaje" => "Rol actualizada exitosamente."]);
                } else {
                    echo json_encode(["error" => "Error al actualizar la Rol: " . $stmtActualizarRol->errorInfo()[2]]);
                }
            }
        } else {
            echo json_encode(["error" => "Datos incompletos para actualizar la Rol."]);
        }
        break;

    case '5': // Eliminar rol
        if (isset($_POST['idRol'])) {
            $idRol = $_POST['idRol'];

            // Realizar la eliminación del rol en la base de datos
            $sql = "DELETE FROM roles WHERE idRol = :idRol";
            $stmt = $pdo->prepare($sql);
            $stmt->bindParam(':idRol', $idRol, PDO::PARAM_INT);

            if ($stmt->execute()) {
                echo json_encode(["success" => true, "message" => "El rol se eliminó correctamente."]);
            } else {
                echo json_encode(["success" => false, "message" => "Error al eliminar el rol."]);
            }
        } else {
            echo json_encode(["success" => false, "message" => "Datos incompletos para eliminar el rol."]);
        }
        break;



    case '10':
        try {
            // Realiza la consulta para obtener las categorías
            $sql = "SELECT * FROM roles ORDER BY rol ASC";
            $stmt = $pdo->prepare($sql);
            $stmt->execute();

            // Obtiene los resultados en un array asociativo
            $response = $stmt->fetchAll(PDO::FETCH_ASSOC);

            // Devuelve los resultados como JSON al cliente
            header('Content-Type: application/json');
            echo json_encode($response);
        } catch (PDOException $e) {
            error_log('Error en rol.php: ' . $e->getMessage());
            error_log('Número de error: ' . $e->getCode());
            error_log('Archivo: ' . $e->getFile());
            error_log('Línea: ' . $e->getLine());
            http_response_code(500); // Establece el código de respuesta a 500 (Internal Server Error)
            echo 'Error interno del servidor';
        }
        break;

    default:
        echo "Acción no válida";
}

Explicación del Código PHP:

require_once("../../conexion.php");: Incluye el archivo que contiene la conexión a la base de datos utilizando PDO. La ruta ../../conexion.php sugiere que el archivo de conexión está dos niveles arriba del directorio actual.
$accion = $_POST['accion'] ?? '';: Obtiene el valor del parámetro accion enviado por POST desde JavaScript, utilizando el operador null coalesce para asignar un valor predeterminado en caso de que no esté definido.
switch ($accion) { ... }: Estructura de control que ejecuta diferentes bloques de código según el valor de $accion.
Case '1': Listar Roles
- $sql = "SELECT * FROM roles ORDER BY rol ASC";: Consulta SQL para seleccionar todos los roles ordenados alfabéticamente.
- Se utiliza PDO para ejecutar la consulta y obtener los resultados como un array asociativo en $data.
- echo json_encode($data);: Devuelve los datos de los roles en formato JSON.
- Se incluye un bloque try...catch para manejar posibles errores de la base de datos.
Case '2': Agregar rol
- Se verifica si se recibió el parámetro rol por POST.
- Se realiza una consulta para verificar si el rol ya existe en la base de datos antes de insertarlo.
- Si el rol no existe, se ejecuta la inserción utilizando una consulta preparada para prevenir inyección SQL.
- En caso de éxito, se obtiene la lista actualizada de roles y se devuelve en formato JSON junto con un mensaje.
- Se manejan errores en caso de problemas con la inserción o datos incompletos.
Case '3': Editar Rol (obtener datos)
- Se verifica si se recibió el idRol por POST.
- Se realiza una consulta preparada para seleccionar los datos del rol con el ID proporcionado.
- Los datos del rol se devuelven en formato JSON si se encuentran, o un mensaje de error si no.
Case '4': Actualizar rol
- Se verifica si se recibieron idRol y rol por POST.
- Se verifica si el nuevo nombre del rol ya existe para otro ID de rol.
- Se realiza la actualización utilizando una consulta preparada.
- Se devuelve un mensaje de éxito o error en formato JSON.
Case '5': Eliminar rol
- Se verifica si se recibió el idRol por POST.
- Se realiza la eliminación utilizando una consulta preparada.
- Se devuelve un mensaje de éxito o error en formato JSON.
Case '10': Listar Roles (duplicado)
- Similar al caso '1', pero utiliza prepare y execute. Se devuelve la lista de roles en JSON. También incluye manejo de errores y configuración del encabezado Content-Type.
default: ...: Maneja cualquier valor de accion no reconocido, devolviendo un mensaje de error.
La conexión a la base de datos se cierra automáticamente al finalizar el script con PDO.

Importante: Este código PHP utiliza PDO para interactuar con la base de datos de forma segura mediante consultas preparadas, lo que ayuda a prevenir ataques de inyección SQL. También incluye validaciones para la inserción y actualización de roles, verificando si el nombre del rol ya existe.

Ir al indice

Creación de CRUD de Roles con HTML, AJAX, jQuery, JavaScript, Bootstrap y PHP