El Profe Arci – Mtro. Fernando Arciniega –

Menú
LOGOTIPO FERNANDO ARCINIEGA
Whatsapp X-twitter Icon-facebook-1 Youtube Linkedin Instagram
logo Mi invitacion

Agregar el Módulo CRUD de Usuarios para el ejercicio: Crea un carrito de compras con PHP, MySQL y Bootstrap

Agregar el Módulo CRUD de Usuarios para el ejercicio: Crea un carrito de compras con PHP, MySQL y Bootstrap

Publicado el 4 diciembre, 2024
por Mtro. Fernando Omar Arciniega Martínez

Agregar el Módulo CRUD de Usuarios para el ejercicio: Crea un carrito de compras con PHP, MySQL y Bootstrap

Continuando con el ejercicio: Crea un carrito de compras con PHP, MySQL y Bootstrap

Agregaremos un módulo CRUD para gestionar los usuarios que tendrán acceso al BackEnd.

Explicación de los cambios realizados para agregar el módulo CRUD de usuarios al archivo panel_control.php

Aquí detallo los pasos y modificaciones que se realizaron para integrar el módulo de gestión de usuarios al panel de control, permitiendo el acceso al CRUD de usuarios:

1. Añadir una nueva tarjeta en el panel de control

Código agregado:

<div class="col-md-4 mb-4">
    <div class="card">
        <div class="card-body text-center">
            <h5 class="card-title">Gestionar Usuarios</h5>
            <p class="card-text">Agregar, editar y eliminar usuarios administrativos.</p>
            <a href="gestion_usuarios.php" class="btn btn-primary">Ir a Gestión de Usuarios</a>
        </div>
    </div>
</div>

Explicación del cambio:

  • Estructura de la tarjeta:
    • Título (h5): “Gestionar Usuarios” para indicar claramente el propósito de la sección.
    • Texto descriptivo (p): Breve explicación de lo que se puede hacer: agregar, editar y eliminar usuarios administrativos.
    • Botón (a): Enlace con la clase btn btn-primary que redirige al archivo gestion_usuarios.php, donde se gestionará el CRUD de usuarios.
  • Ubicación:
    • La nueva tarjeta se coloca dentro de un div con la clase col-md-4 mb-4, asegurando que ocupe un tercio de la fila en pantallas medianas o grandes y que sea responsiva.

2. Crear el enlace funcional hacia gestion_usuarios.php

Código:

<a href="gestion_usuarios.php" class="btn btn-primary">Ir a Gestión de Usuarios</a>

Explicación del cambio:

  • Propósito: Redirigir a un archivo específico (gestion_usuarios.php) que contendrá la lógica del CRUD para usuarios.
  • Interfaz visual: El botón utiliza estilos de Bootstrap para mantener una apariencia uniforme con otros elementos del panel de control.
  • Acceso: Al hacer clic, el administrador será llevado a la página de gestión de usuarios.

3. Planificación y coherencia

Para integrar este nuevo módulo, fue necesario pensar en:

  • Ubicación en el diseño:
    • El nuevo botón se colocó junto al botón existente para gestionar productos, manteniendo la coherencia visual.
  • Rutas claras:
    • Se agregó el enlace hacia gestion_usuarios.php, que es el archivo que manejará la lógica del CRUD de usuarios.

4. Resultado en el panel de control

El módulo o botón de CRUD de usuarios aparece en el panel de control con una estructura y funcionalidad similares al botón para gestionar productos. Esto asegura:

  • Consistencia visual: La nueva funcionalidad se integra perfectamente en el diseño existente del panel de control.
  • Facilidad de uso: Los administradores ahora tienen acceso directo a la gestión de usuarios, igual que con los productos.

Cambios generales realizados para agregar el módulo CRUD de usuarios

  1. Añadir la tarjeta de “Gestionar Usuarios” en el diseño del panel_control.php.
  2. Enlace funcional al archivo gestion_usuarios.php, donde se implementará el CRUD completo.
  3. Mantener la coherencia visual y funcional con la tarjeta de gestión de productos.

El siguiente cambio para implementar el CRUD de usuarios sería crear el archivo gestion_usuarios.php, donde se mostrará la lista de usuarios administrativos y se permitirán las acciones de:

  1. Visualizar los usuarios.
  2. Agregar nuevos usuarios.
  3. Editar información de usuarios existentes.
  4. Eliminar usuarios.

Pasos a seguir para el archivo gestion_usuarios.php:

1. Diseñar la interfaz de gestión

  • Crear una tabla para listar los usuarios registrados con las columnas necesarias: ID, Nombre de Usuario, y Acciones.
  • Agregar botones de acción para Editar y Eliminar cada usuario.
  • Incluir un botón Agregar Usuario que redirija a un formulario para añadir nuevos usuarios.

2. Integrar la funcionalidad de listar usuarios

  • Conectar a la base de datos para recuperar todos los registros de la tabla usuarios.
  • Mostrar estos registros en la tabla de usuarios.

3. Incluir acciones CRUD

  • Añadir enlaces para redirigir a los archivos:
    • agregar_usuario.php (para agregar usuarios).
    • editar_usuario.php (para editar usuarios).
    • Acción directa para eliminar un usuario en el mismo archivo.

4. Proteger las acciones

  • Validar que solo los administradores autenticados puedan acceder a esta página.
  • Añadir confirmaciones al eliminar un usuario.

Código para gestion_usuarios.php:

<?php
session_start();
if (!isset($_SESSION['admin'])) {
    header("Location: inicio_sesion.php");
    exit();
}
include '../incluir/conexion.php';

if (isset($_GET['accion']) && $_GET['accion'] == 'eliminar' && isset($_GET['id'])) {
    $id_usuario = (int)$_GET['id'];
    $conexion->query("DELETE FROM usuarios WHERE id_usuario = $id_usuario");
    header("Location: gestion_usuarios.php?mensaje=Usuario eliminado con éxito.");
    exit();
}
?>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gestión de Usuarios</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container mt-5">
        <h2 class="text-center">Gestión de Usuarios</h2>
        <?php if (isset($_GET['mensaje'])) { echo '<div class="alert alert-success">' . $_GET['mensaje'] . '</div>'; } ?>
        <div class="text-right mb-3">
            <a href="agregar_usuario.php" class="btn btn-success">Agregar Usuario</a>
            <a href="panel_control.php" class="btn btn-secondary">Volver al Panel</a>
        </div>
        <table class="table table-bordered">
            <thead class="thead-dark">
                <tr>
                    <th>ID</th>
                    <th>Usuario</th>
                    <th>Acciones</th>
                </tr>
            </thead>
            <tbody>
                <?php
                $consulta = "SELECT * FROM usuarios";
                $resultado = $conexion->query($consulta);
                if ($resultado->num_rows > 0) {
                    while ($usuario = $resultado->fetch_assoc()) {
                        echo '
                        <tr>
                            <td>' . $usuario['id_usuario'] . '</td>
                            <td>' . $usuario['usuario'] . '</td>
                            <td>
                                <a href="editar_usuario.php?id=' . $usuario['id_usuario'] . '" class="btn btn-warning btn-sm">Editar</a>
                                <a href="gestion_usuarios.php?accion=eliminar&id=' . $usuario['id_usuario'] . '" class="btn btn-danger btn-sm" onclick="return confirm(\'¿Estás seguro de que quieres eliminar este usuario?\')">Eliminar</a>
                            </td>
                        </tr>
                        ';
                    }
                } else {
                    echo '<tr><td colspan="3" class="text-center">No hay usuarios registrados.</td></tr>';
                }
                ?>
            </tbody>
        </table>
    </div>
</body>
</html>

Explicación del archivo gestion_usuarios.php:

  1. Verificación de sesión:
    • Asegura que solo los administradores autenticados puedan acceder a la página.
  2. Eliminar usuarios:
    • Maneja la acción de eliminación mediante el parámetro accion=eliminar en la URL.
  3. Visualización de usuarios:
    • Recupera y muestra todos los registros de la tabla usuarios en una tabla HTML.
  4. Acciones CRUD:
    • Botón Editar: Redirige a editar_usuario.php con el ID del usuario a modificar.
    • Botón Eliminar: Ejecuta una consulta SQL para borrar el usuario seleccionado tras confirmar la acción.
  5. Botón Agregar Usuario:
    • Redirige a agregar_usuario.php para registrar un nuevo usuario.

Siguientes pasos:

Después de crear gestion_usuarios.php, los archivos que siguen son:

  1. agregar_usuario.php: Para agregar nuevos usuarios.
  2. editar_usuario.php: Para editar usuarios existentes.

Archivo agregar_usuario.php: Explicación y funcionalidad

El archivo agregar_usuario.php permite a los administradores registrar nuevos usuarios en el sistema, añadiendo entradas a la tabla usuarios de la base de datos. Este archivo incluye un formulario para capturar la información del nuevo usuario y la lógica para insertar los datos en la base de datos.

¿Qué incluye este archivo?

  1. Verificación de sesión:
    • Asegura que solo los administradores autenticados puedan acceder a esta página.
  2. Formulario para capturar datos:
    • Recoge información como el nombre de usuario y la contraseña.
  3. Inserción en la base de datos:
    • Valida los datos enviados por el formulario y los inserta en la tabla usuarios utilizando password_hash() para proteger la contraseña.
  4. Mensajes de éxito o error:
    • Muestra un mensaje de confirmación si el usuario se agregó correctamente o un mensaje de error en caso contrario.

Código para agregar_usuario.php:

<?php
session_start();
if (!isset($_SESSION['admin'])) {
    header("Location: inicio_sesion.php");
    exit();
}
include '../incluir/conexion.php';

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $usuario = $_POST['usuario'];
    $password = password_hash($_POST['password'], PASSWORD_BCRYPT);

    // Validación y consulta
    $consulta = "INSERT INTO usuarios (usuario, password) VALUES ('$usuario', '$password')";
    if ($conexion->query($consulta)) {
        header("Location: gestion_usuarios.php?mensaje=Usuario agregado con éxito.");
        exit();
    } else {
        $error = "Error al agregar el usuario: " . $conexion->error;
    }
}
?>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Agregar Usuario</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container mt-5">
        <h2 class="text-center">Agregar Nuevo Usuario</h2>
        <?php if (isset($error)) { echo '<div class="alert alert-danger">' . $error . '</div>'; } ?>
        <form action="" method="POST">
            <div class="form-group">
                <label for="usuario">Usuario:</label>
                <input type="text" class="form-control" id="usuario" name="usuario" required>
            </div>
            <div class="form-group">
                <label for="password">Contraseña:</label>
                <input type="password" class="form-control" id="password" name="password" required>
            </div>
            <button type="submit" class="btn btn-success">Agregar Usuario</button>
            <a href="gestion_usuarios.php" class="btn btn-secondary">Volver</a>
        </form>
    </div>
</body>
</html>

Archivo editar_usuario.php: Explicación y funcionalidad

El archivo editar_usuario.php permite a los administradores modificar los datos de un usuario existente en la tabla usuarios de la base de datos. Este archivo incluye:

  1. Verificación de sesión:
    • Asegura que solo los administradores autenticados puedan acceder.
  2. Carga de datos del usuario:
    • Recupera los datos actuales del usuario seleccionado para mostrarlos en el formulario.
  3. Formulario para editar:
    • Permite al administrador modificar el nombre de usuario y, opcionalmente, la contraseña.
  4. Actualización en la base de datos:
    • Procesa los cambios enviados y actualiza la información en la base de datos.
  5. Mensajes de éxito o error:
    • Informa si la actualización fue exitosa o si hubo problemas.

Código para editar_usuario.php

<?php
session_start();
if (!isset($_SESSION['admin'])) {
    header("Location: inicio_sesion.php");
    exit();
}
include '../incluir/conexion.php';

if (isset($_GET['id'])) {
    $id_usuario = (int)$_GET['id'];

    // Recuperar datos del usuario
    $consulta = "SELECT * FROM usuarios WHERE id_usuario = $id_usuario";
    $resultado = $conexion->query($consulta);

    if ($resultado->num_rows == 1) {
        $usuario = $resultado->fetch_assoc();
    } else {
        header("Location: gestion_usuarios.php?mensaje=Usuario no encontrado.");
        exit();
    }
} else {
    header("Location: gestion_usuarios.php");
    exit();
}

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $usuario_nuevo = $_POST['usuario'];
    $password_nueva = !empty($_POST['password']) ? password_hash($_POST['password'], PASSWORD_BCRYPT) : $usuario['password'];

    // Actualizar datos del usuario
    $consulta = "UPDATE usuarios SET usuario = '$usuario_nuevo', password = '$password_nueva' WHERE id_usuario = $id_usuario";
    if ($conexion->query($consulta)) {
        header("Location: gestion_usuarios.php?mensaje=Usuario actualizado con éxito.");
        exit();
    } else {
        $error = "Error al actualizar el usuario: " . $conexion->error;
    }
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Editar Usuario</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container mt-5">
        <h2 class="text-center">Editar Usuario</h2>
        <?php if (isset($error)) { echo '<div class="alert alert-danger">' . $error . '</div>'; } ?>
        <form action="" method="POST">
            <div class="form-group">
                <label for="usuario">Usuario:</label>
                <input type="text" class="form-control" id="usuario" name="usuario" value="<?php echo $usuario['usuario']; ?>" required>
            </div>
            <div class="form-group">
                <label for="password">Nueva Contraseña (opcional):</label>
                <input type="password" class="form-control" id="password" name="password">
                <small class="form-text text-muted">Deja en blanco si no deseas cambiar la contraseña.</small>
            </div>
            <button type="submit" class="btn btn-primary">Actualizar Usuario</button>
            <a href="gestion_usuarios.php" class="btn btn-secondary">Volver</a>
        </form>
    </div>
</body>
</html>

Resultados esperados

  1. Edición exitosa:
    • Los datos del usuario se actualizan correctamente en la base de datos.
    • Se redirige a gestion_usuarios.php con un mensaje de éxito.
  1. Error en la actualización:
    • Si ocurre un error en la consulta, se muestra un mensaje explicando el problema.

Etiquetado , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

2 respuestas

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *