En este proyecto, crearemos un Dashboard de administración utilizando Bootstrap 5. Este panel incluirá tablas para la gestión de datos, gráficos para mostrar estadísticas, y modals para interactuar con los usuarios.
Ver índice del contenido
1. Estructura del Proyecto
1.1. Objetivo del Proyecto
- Diseñar un panel de administración con:
- Tablas: Para gestionar datos de manera estructurada.
- Gráficos: Para mostrar estadísticas de forma visual.
- Modals: Para realizar acciones como agregar o editar datos.
1.2. Archivos Necesarios
dashboard.html: Página principal del Dashboard.style.css: Opcional, para personalizar el diseño.- Librerías adicionales para gráficos:
- Chart.js (para los gráficos).
2. Configuración Inicial
2.1. Estructura HTML y Dependencias
Incluimos el CDN de Bootstrap 5 y Chart.js.
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dashboard de Administración</title> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Chart.js --> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <link rel="stylesheet" href="style.css"> </head> <body> </body> </html>
2.2. Estructura del Dashboard
Dividimos el Dashboard en tres secciones principales:
- Barra de navegación.
- Sección de estadísticas con gráficos.
- Gestión de datos con tablas y modals.
3. Barra de Navegación
Creamos una barra de navegación fija en la parte superior.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Admin Panel</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#">Inicio</a></li>
<li class="nav-item"><a class="nav-link" href="#">Configuración</a></li>
<li class="nav-item"><a class="nav-link" href="#">Cerrar Sesión</a></li>
</ul>
</div>
</div>
</nav>4. Sección de Estadísticas con Gráficos
4.1. Contenedor para los Gráficos
Creamos un contenedor con tarjetas para organizar los gráficos.
<div class="container mt-4">
<div class="row">
<!-- Gráfico 1 -->
<div class="col-md-6">
<div class="card">
<div class="card-header bg-primary text-white">Usuarios Activos</div>
<div class="card-body">
<canvas id="chartUsuarios"></canvas>
</div>
</div>
</div>
<!-- Gráfico 2 -->
<div class="col-md-6">
<div class="card">
<div class="card-header bg-success text-white">Ventas Mensuales</div>
<div class="card-body">
<canvas id="chartVentas"></canvas>
</div>
</div>
</div>
</div>
</div>4.2. Scripts para los Gráficos
Usamos Chart.js para crear los gráficos.
<script>
// Gráfico de Usuarios Activos
const ctxUsuarios = document.getElementById('chartUsuarios').getContext('2d');
new Chart(ctxUsuarios, {
type: 'line',
data: {
labels: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo'],
datasets: [{
label: 'Usuarios Activos',
data: [50, 60, 70, 80, 90],
borderColor: 'blue',
tension: 0.4
}]
},
options: {
responsive: true
}
});
// Gráfico de Ventas Mensuales
const ctxVentas = document.getElementById('chartVentas').getContext('2d');
new Chart(ctxVentas, {
type: 'bar',
data: {
labels: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo'],
datasets: [{
label: 'Ventas',
data: [100, 200, 300, 400, 500],
backgroundColor: 'green'
}]
},
options: {
responsive: true
}
});
</script>5. Gestión de Datos con Tablas
Creamos una tabla para listar datos y un botón para abrir un modal.
5.1. Tabla de Datos
<div class="container mt-4">
<div class="card">
<div class="card-header bg-secondary text-white d-flex justify-content-between align-items-center">
<span>Gestión de Usuarios</span>
<button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#modalUsuario">Agregar Usuario</button>
</div>
<div class="card-body">
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Nombre</th>
<th>Email</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Juan Pérez</td>
<td>juan@example.com</td>
<td>
<button class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#modalUsuario">Editar</button>
<button class="btn btn-danger btn-sm">Eliminar</button>
</td>
</tr>
<tr>
<td>2</td>
<td>Ana López</td>
<td>ana@example.com</td>
<td>
<button class="btn btn-warning btn-sm" data-bs-toggle="modal" data-bs-target="#modalUsuario">Editar</button>
<button class="btn btn-danger btn-sm">Eliminar</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>5.2. Modal para Agregar/Editar Usuario
Creamos un modal reutilizable para agregar o editar usuarios.
<div class="modal fade" id="modalUsuario" tabindex="-1" aria-labelledby="modalUsuarioLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalUsuarioLabel">Agregar/Editar Usuario</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="nombreUsuario" class="form-label">Nombre</label>
<input type="text" class="form-control" id="nombreUsuario" required>
</div>
<div class="mb-3">
<label for="emailUsuario" class="form-label">Email</label>
<input type="email" class="form-control" id="emailUsuario" required>
</div>
<button type="submit" class="btn btn-primary">Guardar</button>
</form>
</div>
</div>
</div>
</div>6. Resultado Final
El Dashboard incluye:
- Gráficos interactivos para visualizar estadísticas clave.
- Tablas funcionales con opciones para agregar, editar y eliminar datos.
- Modals dinámicos para interactuar con los usuarios.
Este diseño puede expandirse con integraciones a bases de datos y autenticación para gestionar usuarios y datos en tiempo real.