🛠️ Proyecto: Sistema Básico de Inventario
📌 Explicación general de la arquitectura
Este proyecto combina HTML, CSS y JavaScript para la interfaz y la interacción en el navegador (frontend), PHP para manejar la lógica y conexión con la base de datos (backend), y SQL para almacenar y consultar los datos de los productos en una base MySQL.
El flujo es el siguiente:
- Frontend: El usuario ve la página web, llena formularios para agregar productos, solicita mostrar o eliminar productos.
- Backend (PHP): Recibe las peticiones del frontend, procesa la información, realiza consultas o actualizaciones en la base de datos.
- Base de datos (SQL): Guarda la información de productos en una tabla para que pueda ser consultada, modificada o eliminada.
- Git y GitHub: Usamos control de versiones para guardar los archivos y permitir colaboración y seguimiento de cambios.
- Figma: Herramienta de diseño para planificar y prototipar la interfaz antes de programar.
En resumen, el frontend y backend se comunican por peticiones HTTP (usando formularios o fetch en JS), el backend accede a la base de datos, y todo el código se controla con Git.
💡 ¿Dónde se programa cada parte?
- HTML, CSS, JS: en archivos con extensión
.html,.cssy.js. Puedes probarlos en tu navegador local o subirlos a tu hosting. - PHP: en archivos con extensión
.php, deben estar en un servidor con PHP instalado (como XAMPP, WAMP o un hosting real). - SQL: en scripts o consola de MySQL para crear tablas y administrar la base de datos.
- Git: desde la terminal o herramientas gráficas, para guardar versiones de todo el proyecto.
👨💻 Código paso a paso
Este código es la interfaz donde el usuario puede agregar productos, verlos en una tabla y eliminar productos con botones. Incluye un poco de CSS para estilo básico.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Sistema Básico de Inventario</title>
<style>
body { font-family: Arial, sans-serif; background: #f9f9f9; padding: 20px; }
h1 { color: #2c3e50; }
form { margin-bottom: 20px; }
label { display: block; margin: 8px 0 4px; }
input[type="text"], input[type="number"] { width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #ccc; }
button { margin-top: 10px; padding: 10px 15px; border: none; background: #007BFF; color: white; border-radius: 5px; cursor: pointer; }
button:hover { background: #0056b3; }
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th, td { padding: 10px; border: 1px solid #ccc; text-align: left; }
.btn-eliminar { background: #dc3545; }
.btn-eliminar:hover { background: #a71d2a; }
</style>
</head>
<body>
<h1>Sistema Básico de Inventario</h1>
<form id="formProducto">
<label for="nombre">Nombre del producto:</label>
<input type="text" id="nombre" name="nombre" required />
<label for="cantidad">Cantidad:</label>
<input type="number" id="cantidad" name="cantidad" min="1" required />
<label for="precio">Precio unitario:</label>
<input type="number" id="precio" name="precio" min="0.01" step="0.01" required />
<button type="submit">Agregar producto</button>
</form>
<table id="tablaInventario">
<thead>
<tr>
<th>Nombre</th>
<th>Cantidad</th>
<th>Precio unitario</th>
<th>Acciones</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script src="app.js"></script>
</body>
</html>
Este JavaScript controla la interacción: agrega productos al inventario (local en memoria), muestra la tabla y permite eliminar productos. En un proyecto real estas operaciones se hacen vía backend.
const inventario = [];
const formProducto = document.getElementById('formProducto');
const tablaCuerpo = document.querySelector('#tablaInventario tbody');
formProducto.addEventListener('submit', function(e) {
e.preventDefault();
const nombre = this.nombre.value.trim();
const cantidad = parseInt(this.cantidad.value);
const precio = parseFloat(this.precio.value);
if(nombre === '' || cantidad <= 0 || precio <= 0) {
alert('Por favor, ingresa datos válidos.');
return;
}
const producto = { nombre, cantidad, precio };
inventario.push(producto);
mostrarInventario();
this.reset();
});
function mostrarInventario() {
tablaCuerpo.innerHTML = '';
inventario.forEach((prod, index) => {
const fila = document.createElement('tr');
fila.innerHTML = `
<td>${prod.nombre}</td>
<td>${prod.cantidad}</td>
<td>$${prod.precio.toFixed(2)}</td>
<td><button class="btn-eliminar" onclick="eliminarProducto(${index})">Eliminar</button></td>
`;
tablaCuerpo.appendChild(fila);
});
}
function eliminarProducto(indice) {
inventario.splice(indice, 1);
mostrarInventario();
}
Este es un ejemplo simple de PHP que conecta con la base de datos, recibe datos por POST para agregar un producto y devuelve un JSON con el resultado. Cada acción tendría un archivo similar.
<?php
// db.php - conectar a la base de datos MySQL
$host = "localhost";
$usuario = "tu_usuario";
$clave = "tu_contraseña";
$bd = "inventario_db";
$conn = new mysqli($host, $usuario, $clave, $bd);
if ($conn->connect_error) {
die("Conexión fallida: " . $conn->connect_error);
}
// agregar_producto.php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$nombre = $_POST['nombre'] ?? '';
$cantidad = intval($_POST['cantidad'] ?? 0);
$precio = floatval($_POST['precio'] ?? 0);
if ($nombre === '' || $cantidad <= 0 || $precio <= 0) {
echo json_encode(['error' => 'Datos inválidos']);
exit;
}
$stmt = $conn->prepare("INSERT INTO productos (nombre, cantidad, precio) VALUES (?, ?, ?)");
$stmt->bind_param("sid", $nombre, $cantidad, $precio);
if ($stmt->execute()) {
echo json_encode(['success' => 'Producto agregado']);
} else {
echo json_encode(['error' => 'Error al guardar']);
}
$stmt->close();
$conn->close();
exit;
}
?>
Este script crea la base de datos y la tabla para almacenar los productos.
CREATE DATABASE inventario_db;
USE inventario_db;
CREATE TABLE productos (
id INT AUTO_INCREMENT PRIMARY KEY,
nombre VARCHAR(100) NOT NULL,
cantidad INT NOT NULL,
precio DECIMAL(10,2) NOT NULL
);
Comandos para iniciar control de versiones, agregar archivos, hacer commits y subir a GitHub.
git init # Inicializa repositorio local
git add . # Agrega todos los archivos
git commit -m "Primer commit del sistema de inventario"
git branch -M main # Cambia nombre de rama principal a main
git remote add origin https://github.com/tu_usuario/tu_repositorio.git
git push -u origin main # Sube los cambios a GitHub
Figma es la herramienta para diseñar la interfaz visual antes de programar. Puedes crear prototipos, flujos y UI/UX sin escribir código.
https://www.figma.com/file/tu-prototipo-inventario
- Crea pantallas para agregar, eliminar y mostrar productos.
- Define colores, tipografías y botones.
- Comparte el diseño con el equipo o para revisión.
No hay comentarios:
Publicar un comentario