120 Diseñando los DATOS del CLIENTE en la FACTURA en el SISTEMA DE VENTAS (PHP y MySql) FullStack
Duración: 13 minDescripció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:
- Diseño de Encabezado:
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].
Lecciones
Apoya este proyecto
Si te gusta nuestro contenido, ¡apóyanos con una donación!
Donar por Airtm Donar por Binance¡Gracias por tu apoyo! ❤️