120 Diseñando los DATOS del CLIENTE en la FACTURA en el SISTEMA DE VENTAS (PHP y MySql) FullStack

Duración: 13 min
Módulo: 📄 Facturación Profesional (TCPDF) y Dashboard Final Lección 3 de 13

Descripción

Lección 120: Diseño de la Sección de Datos del Cliente en la Factura 👤

Esta lección se dedicó a finalizar el diseño de la sección de datos del cliente y a iniciar la maquetación de la tabla de detalle de productos dentro del documento PDF, utilizando la librería TCPDF.

1. Finalización de la Sección del Cliente

Se realizaron ajustes de maquetación y estilo a la tabla que contiene los datos del cliente (Fecha, NIT/CI y Nombre):

  • Estructura de Fila Única: Se consolidaron los datos del cliente (NIT/CI y Señor/Nombre) para que aparecieran en una única celda (<td>) por fila, lo que facilita la combinación de columnas [00:18], [01:07].
  • Combinación de Columnas (colspan): Se aplicó colspan="3" a las celdas de datos del cliente para que se extendieran a lo ancho de la tabla (cubriendo las tres columnas), asegurando que los nombres largos quepan sin problemas [04:00], [05:06].
  • Diseño con Borde: Se utilizó un bloque de división (<div>) alrededor de la tabla para aplicar un borde sólido [02:02] y simular un recuadro que enmarque los datos del cliente.
  • Espaciado Interno (cellpadding): Se utilizó la propiedad cellpadding="5" en la tabla para dar un espacio interno de 5 píxeles, evitando que el texto quede muy pegado al borde y mejorando la legibilidad [05:40], [06:25].

2. Posicionamiento del Código QR 🛰️

Se ajustó la ubicación del Código QR para que estuviera en el lugar adecuado dentro del documento, lejos del encabezado y la información del cliente, pero listo para usarse.

  • Se manipularon las coordenadas X y Y del código QR para moverlo hacia la parte inferior derecha de la factura (Eje Y: 220, Eje X: 175, Tamaño: 40x40) [07:09] - [08:40].

3. Maquetación del Detalle de Productos 🛒

Se comenzó la estructura para mostrar los productos vendidos, la parte central de la factura:

  • Estructura de la Tabla: Se creó una nueva tabla (<table>) para el detalle de productos [09:46].
  • Encabezados: Se utilizaron etiquetas <th> para definir los títulos de las columnas, asegurando que se muestren en negrita. Los campos definidos son:
    • Producto
    • Descripción
    • Cantidad
    • Precio Unitario
    • Subtotal [09:57] - [10:55].
  • Diseño de Encabezado:
    • Se agregó un borde a la tabla (border="1") y se usó cellpadding="5" para espaciado interno [11:08].
    • Se centró el texto de todos los encabezados (text-align: center) [11:49].
    • Se aplicó un color de fondo (bgcolor) a la fila de encabezados [12:37].

Finalmente, se comenzó a llenar manualmente la primera fila de datos (<tr> con <td>) como modelo, preparando el código para la carga de datos dinámicos en la siguiente lección [11:59].