BD_Practica_1_inventario_web_Primer Registro Con HTML5 PHP y MySQL

Tutorial: Primer Registro Web de Inventario con HTML5, PHP y MySQL

Crear un sistema de inventario web básico es un excelente punto de partida para entender la interacción entre el frontend (HTML), el backend (PHP) y la base de datos (MySQL). Este tutorial te guiará a través de la configuración y el código necesario para un formulario de registro simple.

1. Requisitos Previos

Antes de empezar, asegúrate de tener instalado y configurado un entorno de desarrollo web local. Las opciones más comunes son:

XAMPP: (Windows, macOS, Linux) Incluye Apache, MySQL y PHP.
WAMP: (Windows) Similar a XAMPP pero solo para Windows.
MAMP: (macOS, Windows) Para macOS y Windows.

Una vez instalado, verifica que Apache y MySQL estén corriendo.

2. Configuración de la Base de Datos (MySQL)

Primero, necesitamos crear una base de datos y una tabla para almacenar la información de nuestro inventario.

Paso 1: Acceder a phpMyAdmin

Abre tu navegador y ve a http://localhost/phpmyadmin. Esta es la interfaz gráfica para gestionar tus bases de datos MySQL.

Paso 2: Crear la Base de Datos

En la columna izquierda, haz clic en "Nueva" o en la pestaña "Bases de datos".
En el campo "Nombre de la base de datos", escribe inventario_db.
Selecciona utf8_general_ci como la "Cotejamiento" para asegurar el correcto manejo de caracteres.
Haz clic en "Crear".

Paso 3: Crear la Tabla `productos`

Una vez creada inventario_db, selecciónala en la columna izquierda.
En la sección "Crear tabla", escribe productos como nombre de la tabla y establece el número de columnas a 5.
Haz clic en "Crear" o "Continuar".
Define las columnas de la siguiente manera:
| Nombre de Columna | Tipo | Longitud/Valores | Índice | A_I (Auto Increment) | | :---------------- | :-------- | :--------------- | :-------- | :------------------- | | id | INT | 11 | PRIMARY | ✅ | | nombre | VARCHAR | 100 | | | | descripcion | TEXT | | | | | cantidad | INT | 11 | | | | precio | DECIMAL | 10,2 | | |
- Asegúrate de marcar la casilla "A_I" (Auto Increment) para id. Esto hará que MySQL genere automáticamente un ID único para cada nuevo producto.
- La longitud de DECIMAL 10,2 significa 10 dígitos en total, con 2 de ellos después del punto decimal.
Haz clic en "Guardar".

¡Listo! Tu base de datos y tabla están preparadas.

3. Creación de los Archivos del Proyecto

Necesitarás tres archivos principales: uno para la conexión a la base de datos, otro para el formulario HTML y otro para procesar los datos con PHP.

Crea una nueva carpeta dentro del directorio htdocs de tu instalación de XAMPP (o www en WAMP/MAMP). Por ejemplo, C:\xampp\htdocs\inventario_web. Dentro de esta carpeta, crea los siguientes archivos:

db_config.php
index.html
registrar_producto.php

4. Código Fuente

4.1. `db_config.php` (Configuración de la Base de Datos)

Este archivo contendrá la lógica para conectarse a tu base de datos MySQL.

PHP
<?php

// Definir las constantes de conexión a la base de datos
define('DB_SERVER', 'localhost'); // La mayoría de las veces es 'localhost'
define('DB_USERNAME', 'root');   // Usuario predeterminado de XAMPP/WAMP/MAMP
define('DB_PASSWORD', '');       // Contraseña predeterminada de XAMPP/WAMP/MAMP es vacía
define('DB_NAME', 'inventario_db'); // Nombre de la base de datos que creaste

// Intentar establecer la conexión con MySQL
$conn = new mysqli(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);

// Verificar la conexión
if ($conn->connect_error) {
    die("ERROR: No se pudo conectar a la base de datos. " . $conn->connect_error);
}

// Opcional: Establecer el juego de caracteres a UTF-8 para asegurar compatibilidad
$conn->set_charset("utf8");

?>

Explicación:

define(): Define constantes para la conexión, lo que hace el código más legible y fácil de mantener.
new mysqli(): Crea una nueva instancia de la clase mysqli, que es la forma recomendada de interactuar con MySQL en PHP.
$conn->connect_error: Verifica si hubo un error al intentar la conexión.
die(): Termina la ejecución del script y muestra un mensaje de error si la conexión falla.
set_charset("utf8"): Muy importante para evitar problemas con caracteres especiales (ñ, tildes, etc.) al guardar y recuperar datos.

4.2. `index.html` (Formulario de Registro)

Este archivo contendrá el formulario HTML5 que los usuarios llenarán para registrar un producto.

HTML
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registro de Producto - Inventario Web</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
        }
        .container {
            background-color: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            width: 100%;
            max-width: 400px;
        }
        h2 {
            text-align: center;
            color: #333;
            margin-bottom: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            color: #555;
            font-weight: bold;
        }
        input[type="text"],
        input[type="number"],
        textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box; /* Para incluir el padding y el border en el ancho */
        }
        textarea {
            resize: vertical; /* Permite redimensionar verticalmente */
            min-height: 80px;
        }
        input[type="submit"] {
            background-color: #007bff;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            width: 100%;
            font-size: 16px;
            transition: background-color 0.3s ease;
        }
        input[type="submit"]:hover {
            background-color: #0056b3;
        }
        .message {
            text-align: center;
            margin-top: 20px;
            padding: 10px;
            border-radius: 5px;
        }
        .success {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Registrar Nuevo Producto</h2>
        <form action="registrar_producto.php" method="POST">
            <div class="form-group">
                <label for="nombre">Nombre del Producto:</label>
                <input type="text" id="nombre" name="nombre" required>
            </div>

            <div class="form-group">
                <label for="descripcion">Descripción:</label>
                <textarea id="descripcion" name="descripcion" required></textarea>
            </div>

            <div class="form-group">
                <label for="cantidad">Cantidad:</label>
                <input type="number" id="cantidad" name="cantidad" required min="0">
            </div>

            <div class="form-group">
                <label for="precio">Precio ($):</label>
                <input type="number" id="precio" name="precio" step="0.01" required min="0">
            </div>

            <input type="submit" value="Registrar Producto">
        </form>

        <?php
        // Mostrar mensajes de éxito o error si vienen de la página de registro
        if (isset($_GET['status'])) {
            if ($_GET['status'] == 'success') {
                echo '<div class="message success">Producto registrado exitosamente.</div>';
            } elseif ($_GET['status'] == 'error') {
                echo '<div class="message error">Error al registrar el producto. Por favor, inténtelo de nuevo.</div>';
            }
        }
        ?>
    </div>
</body>
</html>

Explicación:

<!DOCTYPE html>: Define el documento como HTML5.
<form action="registrar_producto.php" method="POST">: Indica que los datos del formulario se enviarán al archivo registrar_producto.php usando el método HTTP POST.
name="...": Los atributos name son cruciales porque PHP los usará para acceder a los datos enviados por el formulario (ej. $_POST['nombre']).
required: Atributo HTML5 que indica que el campo debe ser llenado antes de enviar el formulario.
type="number": Asegura que el navegador solo permita números en estos campos.
step="0.01": Para el precio, permite números decimales con dos lugares.
min="0": Asegura que las cantidades y precios no puedan ser negativos.
Sección PHP al final: Esta pequeña sección PHP verifica si hay un parámetro status en la URL (enviado desde registrar_producto.php) y muestra un mensaje al usuario.

4.3. `registrar_producto.php` (Procesamiento PHP)

Este archivo recibirá los datos del formulario, los validará y los insertará en la base de datos.

PHP
<?php
// Incluir el archivo de configuración de la base de datos
require_once 'db_config.php';

// Verificar si el formulario ha sido enviado usando el método POST
if ($_SERVER["REQUEST_METHOD"] == "POST") {

    // Validar y sanear los datos de entrada
    // mysqli_real_escape_string previene inyecciones SQL escapando caracteres especiales
    $nombre = $conn->real_escape_string(trim($_POST['nombre']));
    $descripcion = $conn->real_escape_string(trim($_POST['descripcion']));
    $cantidad = (int) $_POST['cantidad']; // Convertir a entero
    $precio = (float) $_POST['precio']; // Convertir a flotante

    // Validaciones básicas adicionales
    if (empty($nombre) || empty($descripcion) || $cantidad < 0 || $precio < 0) {
        // Redirigir de vuelta al formulario con un mensaje de error si hay campos vacíos o valores inválidos
        header("Location: index.html?status=error&message=Campos vacíos o valores inválidos.");
        exit(); // Terminar la ejecución del script
    }

    // Preparar la consulta SQL para insertar los datos
    // Usamos sentencias preparadas para mayor seguridad (previene inyecciones SQL)
    $sql = "INSERT INTO productos (nombre, descripcion, cantidad, precio) VALUES (?, ?, ?, ?)";

    if ($stmt = $conn->prepare($sql)) {
        // Enlazar los parámetros a la sentencia preparada
        // 's' para string, 's' para string, 'i' para integer, 'd' para double/float
        $stmt->bind_param("ssid", $nombre, $descripcion, $cantidad, $precio);

        // Ejecutar la sentencia
        if ($stmt->execute()) {
            // Redirigir de vuelta al formulario con un mensaje de éxito
            header("Location: index.html?status=success");
        } else {
            // Si hay un error en la ejecución
            header("Location: index.html?status=error&message=" . urlencode($stmt->error));
        }

        // Cerrar la sentencia
        $stmt->close();
    } else {
        // Si hay un error al preparar la sentencia
        header("Location: index.html?status=error&message=" . urlencode($conn->error));
    }

    // Cerrar la conexión a la base de datos
    $conn->close();

} else {
    // Si se intenta acceder a este archivo directamente sin enviar el formulario
    header("Location: index.html?status=error&message=Acceso no autorizado.");
    exit();
}
?>

3DSON

Buscar este blog