Volver a Proyectos

🛍️ Tienda Online

E-commerce en PHP y MySQL construido desde cero en siete versiones, con catálogo, carrito y checkout

Proyecto académico 7 versiones Diagramas E-R

Escala del Proyecto

7Versiones
5Páginas
2Tipos de diagrama

Descripción General

Proyecto de la asignatura de programación en el lado del servidor: construir una tienda online completa en PHP y MySQL desde cero, avanzando en siete versiones documentadas.

El recorrido cubre el flujo completo de una compra: página de inicio, catálogo leído de base de datos, ficha de producto con selector de unidades, carrito y finalización del pedido con inserción en MySQL. La última versión añade el trabajo estético sobre lo ya funcional.

Lo que hace este ejercicio más valioso que el código en sí es la documentación que lo acompaña: el repositorio incluye el diagrama entidad-relación y el diagrama de flujo en SVG y JSON, más los scripts SQL de creación, alteraciones y datos de muestra.

Tecnologías Utilizadas


PHP

MySQL / mysqli

CSS3

Diagramas E-R

SQL

Arquitectura

Estructura PHP clásica con inclusión de cabecera y pie compartidos, y una página por paso del proceso de compra. El estado del pedido se propaga entre páginas mediante formularios POST con campos ocultos.

V0.7-Ajustes esteticos/
├── Creamos BD.sql              # creación del esquema
├── datosdemuestra.sql          # datos de prueba
├── alter descripciones largas.sql · alterar ids.sql
├── diagrama entidad relacion.svg # + .json y .sql
├── diagrama de flujo.svg       # + .json y .html
└── front/
    ├── index.php               # hero y razones de compra
    ├── catalogo.php            # productos desde la BD
    ├── producto.php            # ficha y selector de unidades
    ├── carrito.php             # datos del cliente
    ├── finalizacion.php        # resumen e inserción del pedido
    └── inc/                     # cabecera y pie compartidos

Flujo de Compra

  1. Inicio: página de aterrizaje con la propuesta de valor y el acceso al catálogo.
  2. Catálogo: catalogo.php consulta la tabla de productos y genera una tarjeta por cada uno.
  3. Ficha de producto: producto.php muestra el detalle y permite elegir entre 1 y 10 unidades.
  4. Carrito: carrito.php recibe producto y unidades y pide los datos del cliente.
  5. Finalización: finalizacion.php recupera el producto de la base de datos, calcula el total y registra el pedido.

Progresión del Ejercicio

Cada versión es una carpeta completa, lo que permite ver el estado del proyecto en cada etapa en lugar de solo el resultado final.

  • V0.1Inicio. Estructura base del proyecto.
  • V0.2Contenido. Maquetación de las páginas con datos estáticos.
  • V0.3BBDD. Diseño del esquema y conexión: el catálogo pasa a leerse de MySQL.
  • V0.4Pasamos artículo. Propagación del producto seleccionado entre páginas.
  • V0.5Vamos al carrito. Recogida de unidades y datos del cliente.
  • V0.6Vamos a finalizar. Cierre del pedido con inserción en base de datos.
  • V0.7Ajustes estéticos. Trabajo visual sobre la funcionalidad ya terminada.

Qué Aprendí

  • Que sin base de datos no hay catálogo: la V0.3 es la versión donde el proyecto deja de ser una maqueta.
  • Que mantener el estado entre páginas en PHP obliga a decidir cómo propagarlo — formularios con campos ocultos, sesión o URL — y que cada opción tiene sus consecuencias.
  • Que dibujar el diagrama entidad-relación antes de escribir el SQL evita rehacer las tablas a mitad del proyecto.
  • Que dejar la estética para el final fue la decisión correcta: en la V0.7 el proyecto ya funcionaba.
  • Y lo más importante: este código construye las consultas concatenando variables de $_GET y $_POST, que es una vulnerabilidad de inyección SQL de libro, y guarda las credenciales dentro de cada fichero. Es lo que se enseñaba en ese punto del curso. En todos los proyectos posteriores del portafolio uso PDO con sentencias preparadas y la configuración fuera del código; contrastar este ejercicio con TinoProp CRM o RoomManager es la mejor forma de ver esa diferencia.

Mi Rol

Autor del ejercicio. Práctica individual de la asignatura de programación en el lado del servidor.

Estado del Proyecto

Ejercicio académico completado, con las siete versiones y los diagramas en el repositorio de apuntes.

Código y Enlaces

Ruta dentro del repositorio: Apuntes/010-Programción en el lado del servidor/010-Tienda online/