Implementación de un CRUD con Bootstrap y JavaScript
Introducción:
En este post, exploraremos cómo crear un CRUD (Create, Read, Update, Delete) utilizando Bootstrap y JavaScript. Un CRUD es una operación básica en la mayoría de las aplicaciones web, que permite crear, leer, actualizar y eliminar datos. Utilizaremos las funcionalidades proporcionadas por Bootstrap para diseñar la interfaz de usuario y JavaScript para la lógica del lado del cliente.
Contenido:
Preparación del Entorno:
Breve introducción sobre Bootstrap y su integración en proyectos web.
Enlaces a los archivos de Bootstrap que se utilizarán en el proyecto.
Diseño de la Interfaz de Usuario:
Uso de la grilla de Bootstrap para organizar los elementos en la página.
Creación de una tabla para mostrar los datos del CRUD.
Implementación de un modal de Bootstrap para la edición de registros.
Lógica del Lado del Cliente con JavaScript:
Creación de un array de datos de muestra para simular una base de datos.
const datos = [
{
id: 1,
registro: 'Registro 1',
pdf: 'a',
},
{
id: 2,
registro: 'Registro 2',
pdf: 'a',
}
];
Funciones para cargar datos en la tabla y abrir el modal de edición.
Manejo del evento de envío del formulario de edición para actualizar los datos.
$(modal).modal('hide');: Esta línea de código utiliza jQuery para ocultar un modal. $() es una función de jQuery que selecciona un elemento del DOM por su identificador o clase. En este caso, modal es el identificador del modal que queremos ocultar. .modal('hide') es un método de jQuery que oculta el modal seleccionado.
datos.find: datos es un array que contiene objetos, y find es un método propio de los arrays en JavaScript. En este contexto, find se utiliza para buscar un elemento en el array que cumpla con cierta condición especificada en una función de callback. En el código proporcionado, se utiliza para encontrar un objeto en el array datos cuyo atributo id coincida con el id pasado como argumento a la función abrirModalEditar.
document.getElementById: Esta es una función nativa de JavaScript que se utiliza para obtener un elemento del DOM mediante su identificador. Devuelve una referencia al elemento especificado por su ID.
addEventListener: addEventListener es un método de los elementos del DOM que se utiliza para adjuntar un evento a un elemento HTML. En el código proporcionado, se utiliza para escuchar el evento de envío del formulario de edición y ejecutar una función cuando ocurre ese evento.
event.preventDefault(): preventDefault es un método de los objetos de evento en JavaScript. Se utiliza para detener el comportamiento por defecto de un evento, en este caso, para evitar que el formulario se envíe y la página se recargue.
Conclusión:
En este post, hemos aprendido cómo crear un CRUD utilizando Bootstrap y JavaScript. Esta combinación de herramientas nos permite desarrollar aplicaciones web con una interfaz de usuario atractiva y funcionalidad dinámica del lado del cliente. ¡Espero que esta guía te haya sido útil para tus proyectos futuros!
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CRUD con Bootstrap y JavaScript</title>
<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<table id="tablaDatos" class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Registro</th>
<th>PDF</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
<!-- Aquí se cargarán los datos dinámicamente -->
</tbody>
</table>
</div>
<!-- Modal para la edición -->
<div id="modalEditar" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Editar Registro</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form id="formularioEditar">
<input type="hidden" name="id" id="id" >
<div class="form-group">
<label for="editRegistro">Registro:</label>
<input type="text" class="form-control" id="editRegistro" name="editRegistro">
</div>
<div class="form-group">
<label for="editPDF">PDF:</label>
<input type="text" class="form-control" id="editPDF" name="editPDF">
</div>
<button type="submit" class="btn btn-primary">Guardar Cambios</button>
</form>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS y jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
const datos = [
{
id: 1,
registro: 'Registro 1',
pdf: 'a',
},
{
id: 2,
registro: 'Registro 2',
pdf: 'a',
}
];
// Función para cargar los datos en la tabla
function cargarDatos() {
const tablaBody = document.querySelector("#tablaDatos tbody");
tablaBody.innerHTML = ""; // Limpiar la tabla antes de cargar los datos
datos.forEach(dato => {
const fila = `
<tr>
<td>${dato.id}</td>
<td>${dato.registro}</td>
<td>${dato.pdf}</td>
<td><button class="btn btn-primary" onclick="abrirModalEditar(${dato.id})">Editar</button></td>
</tr>
`;
tablaBody.innerHTML += fila;
});
}
// Función para abrir la modal de edición
function abrirModalEditar(id) {
const modal = document.getElementById("modalEditar");
$(modal).modal('show'); // Mostrar modal usando jQuery
// Buscar el dato correspondiente al ID
const dato = datos.find(item => item.id === id);
// Rellenar el formulario de edición con los datos del registro
document.getElementById("id").value = dato.id;
document.getElementById("editRegistro").value = dato.registro;
document.getElementById("editPDF").value = dato.pdf;
}
// Cuando se envía el formulario de edición
document.getElementById("formularioEditar").addEventListener("submit", function(event) {
event.preventDefault(); // Prevenir el comportamiento por defecto del formulario
// Imprimir valores del formulario en la consola
console.log("id:", document.getElementById("id").value);
console.log("Registro editado:", document.getElementById("editRegistro").value);
console.log("PDF editado:", document.getElementById("editPDF").value);
// Aquí puedes manejar la actualización de los datos
// Por ahora, simplemente cerraremos la modal
const modal = document.getElementById("modalEditar");
$(modal).modal('hide'); // Ocultar modal usando jQuery
// Puedes acceder a los valores actualizados usando document.getElementById("editRegistro").value, etc.
// Volver a cargar los datos en la tabla
cargarDatos();
});
// Cargar los datos al cargar la página
cargarDatos();
</script>
</body>
</html>
Comentarios
Publicar un comentario