Gestión de Productos: Crear, Modificar, Listar y Eliminar

En esta entrada, exploraremos una aplicación web sencilla para la gestión de productos usando PHP y MySQL. Este sistema permitirá realizar operaciones básicas como crear, modificar, listar y eliminar productos. A continuación, detallaremos el código y el diseño de cada componente.

Configurar la base de datos

Lo primero que necesitamos es una base de datos MySQL donde almacenaremos nuestros productos. Aquí te dejo el script SQL que puedes ejecutar para crearla.

CREATE DATABASE ejcrud3;

USE ejcrud3;

CREATE TABLE categorias (
    id INT AUTO_INCREMENT PRIMARY KEY,
    nombre VARCHAR(100) NOT NULL
);

CREATE TABLE productos (
    id INT AUTO_INCREMENT PRIMARY KEY,
    nombre VARCHAR(100) NOT NULL,
    descripcion TEXT,
    precio DECIMAL(10, 2) NOT NULL,
    categoria_id INT,
    FOREIGN KEY (categoria_id) REFERENCES categorias(id)
);

1. Listado de Productos (index.php)

Este archivo muestra una tabla con todos los productos en la base de datos, incluyendo opciones para modificar o eliminar cada uno.

<?php
include 'conexion.php';

$sql = "SELECT p.id, p.nombre, p.descripcion, p.precio, c.nombre AS categoria FROM productos p LEFT JOIN categorias c ON p.categoria_id = c.id";
$resultado = $conn->query($sql);
?>

<!DOCTYPE html>
<html>
<head>
    <title>Listado de Productos</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }

        header {
            background-color: #000;
            color: #fff;
            padding: 20px;
            text-align: center;
        }

        h1 {
            margin: 0;
            font-size: 2em;
        }

        .container {
            width: 80%;
            margin: 20px auto;
            background: #fff;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            border: 1px solid #ddd;
            padding: 10px;
            text-align: left;
        }

        th {
            background-color: #333;
            color: #fff;
        }

        tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        a {
            text-decoration: none;
            color: #007bff;
        }

        a:hover {
            text-decoration: underline;
        }

        .actions {
            text-align: center;
        }
    </style>
</head>
<body>
    <header>
        <h1>Gestión de Productos</h1>
    </header>
    <div class="container">
        <center><a href="crear.php">Crear Nuevo Producto</a></center>
        <table>
            <tr>
                <th>ID</th>
                <th>Nombre</th>
                <th>Descripción</th>
                <th>Precio</th>
                <th>Categoría</th>
                <th>Acciones</th>
            </tr>
            <?php while ($fila = $resultado->fetch_assoc()) { ?>
            <tr>
                <td><?php echo $fila['id']; ?></td>
                <td><?php echo $fila['nombre']; ?></td>
                <td><?php echo $fila['descripcion']; ?></td>
                <td><?php echo $fila['precio']; ?></td>
                <td><?php echo $fila['categoria']; ?></td>
                <td class="actions">
                    <a href="modificar.php?id=<?php echo $fila['id']; ?>">Modificar</a> |
                    <a href="eliminar.php?id=<?php echo $fila['id']; ?>" onclick="return confirm('¿Estás seguro?');">Eliminar</a>
                </td>
            </tr>
            <?php } ?>
        </table>
    </div>
</body>
</html>

2. Crear Producto (crear.php)

Este archivo proporciona un formulario para añadir nuevos productos a la base de datos.

<?php
include 'conexion.php';

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $nombre = $_POST['nombre'];
    $descripcion = $_POST['descripcion'];
    $precio = $_POST['precio'];
    $categoria_id = $_POST['categoria_id'];

    $sql = "INSERT INTO productos (nombre, descripcion, precio, categoria_id) VALUES ('$nombre', '$descripcion', '$precio', '$categoria_id')";
    if ($conn->query($sql) === TRUE) {
        header('Location: index.php');
    } else {
        echo "Error: " . $conn->error;
    }
}

// Obtener categorías para el formulario
$sql = "SELECT * FROM categorias";
$categorias = $conn->query($sql);
?>

<!DOCTYPE html>
<html>
<head>
    <title>Crear Producto</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }

        header {
            background-color: #000;
            color: #fff;
            padding: 20px;
            text-align: center;
        }

        h1 {
            margin: 0;
            font-size: 2em;
        }

        .container {
            width: 60%;
            margin: 20px auto;
            background: #fff;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #333;
        }

        input[type="text"], textarea, select {
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        textarea {
            resize: vertical;
        }

        input[type="submit"] {
            background-color: #000;
            color: #fff;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            border-radius: 4px;
            display: block;
            margin: 0 auto;
        }

        input[type="submit"]:hover {
            background-color: #333;
        }
    </style>
</head>
<body>
    <header>
        <h1>Gestión de Productos</h1>
    </header>
    <div class="container">
        <h1>Crear Producto</h1>
        <form method="post">
            <label>Nombre:</label>
            <input type="text" name="nombre" required><br>
            <label>Descripción:</label>
            <textarea name="descripcion"></textarea><br>
            <label>Precio:</label>
            <input type="text" name="precio" required><br>
            <label>Categoría:</label>
            <select name="categoria_id">
                <?php while ($categoria = $categorias->fetch_assoc()) { ?>
                    <option value="<?php echo $categoria['id']; ?>"><?php echo $categoria['nombre']; ?></option>
                <?php } ?>
            </select><br>
            <input type="submit" value="Crear">
        </form>
    </div>
</body>
</html>

3. Modificar Producto (modificar.php)

Este archivo muestra un formulario para editar un producto existente. Los campos están pre-rellenados con los datos actuales del producto.

<?php
include 'conexion.php';

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $id = $_POST['id'];
    $nombre = $_POST['nombre'];
    $descripcion = $_POST['descripcion'];
    $precio = $_POST['precio'];
    $categoria_id = $_POST['categoria_id'];

    $sql = "UPDATE productos SET nombre='$nombre', descripcion='$descripcion', precio='$precio', categoria_id='$categoria_id' WHERE id=$id";
    if ($conn->query($sql) === TRUE) {
        header('Location: index.php');
    } else {
        echo "Error: " . $conn->error;
    }
}

// Obtener el producto a modificar
$id = $_GET['id'];
$sql = "SELECT * FROM productos WHERE id=$id";
$resultado = $conn->query($sql);
$producto = $resultado->fetch_assoc();

// Obtener categorías para el formulario
$sql = "SELECT * FROM categorias";
$categorias = $conn->query($sql);
?>

<!DOCTYPE html>
<html>
<head>
    <title>Modificar Producto</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }

        header {
            background-color: #000;
            color: #fff;
            padding: 20px;
            text-align: center;
        }

        h1 {
            margin: 0;
            font-size: 2em;
        }

        .container {
            width: 60%;
            margin: 20px auto;
            background: #fff;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #333;
        }

        input[type="text"], textarea, select {
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        textarea {
            resize: vertical;
        }

        input[type="submit"] {
            background-color: #000;
            color: #fff;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            border-radius: 4px;
            display: block;
            margin: 0 auto;
        }

        input[type="submit"]:hover {
            background-color: #333;
        }
    </style>
</head>
<body>
    <header>
        <h1>Gestión de Productos</h1>
    </header>
    <div class="container">
        <h1>Modificar Producto</h1>
        <form method="post">
            <input type="hidden" name="id" value="<?php echo $producto['id']; ?>">
            <label>Nombre:</label>
            <input type="text" name="nombre" value="<?php echo $producto['nombre']; ?>" required><br>
            <label>Descripción:</label>
            <textarea name="descripcion"><?php echo $producto['descripcion']; ?></textarea><br>
            <label>Precio:</label>
            <input type="text" name="precio" value="<?php echo $producto['precio']; ?>" required><br>
            <label>Categoría:</label>
            <select name="categoria_id">
                <?php while ($categoria = $categorias->fetch_assoc()) { ?>
                    <option value="<?php echo $categoria['id']; ?>" <?php echo ($categoria['id'] == $producto['categoria_id']) ? 'selected' : ''; ?>>
                        <?php echo $categoria['nombre']; ?>
                    </option>
                <?php } ?>
            </select><br>
            <input type="submit" value="Modificar">
        </form>
    </div>
</body>
</html>

4. Eliminar Producto (eliminar.php)

Este archivo elimina un producto de la base de datos según el ID proporcionado en la URL.

<?php
include 'conexion.php';

$id = $_GET['id'];

$sql = "DELETE FROM productos WHERE id=$id";
if ($conn->query($sql) === TRUE) {
    header('Location: index.php');
} else {
    echo "Error: " . $conn->error;
}
?>

5. Conexión a la base de datos (conexion.php)

Este archivo se encargará de conectarnos a la base de datos. Es importante que lo incluyamos en todos los archivos PHP que interactúan con la base de datos.

<?php
$host = "localhost";
$user = "root";
$password = "";
$dbname = "ejcrud3";

$conn = new mysqli($host, $user, $password, $dbname);

if ($conn->connect_error) {
    die("Conexión fallida: " . $conn->connect_error);
}
?>

Explicación de la Estructura

  1. Listado de Productos (index.php): Muestra todos los productos con opciones para editar o eliminar cada uno. Utiliza una tabla con estilos para asegurar que la interfaz sea clara y accesible.
  2. Crear Producto (crear.php): Proporciona un formulario para añadir nuevos productos a la base de datos. Incluye un select para elegir la categoría del producto.
  3. Modificar Producto (modificar.php): Permite la edición de un producto existente. El formulario se llena con los datos actuales del producto para facilitar la actualización.
  4. Eliminar Producto (eliminar.php): Elimina un producto de la base de datos basado en el ID pasado por la URL. Se redirige al listado después de la eliminación.

Descargar los archivos PHP

Facebook
Twitter
LinkedIn

Dejá un comentario

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

Instagram
Nexo IA Youtube