▷Proyecto Práctico 4: Dashboard de Administración

« Anterior Siguiente »

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.

Te recomendamos leer: Configuración del entorno Bootstrap

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>