07 – PANTALLA PRINCIPAL de VISTA de Vehículos ( 👨💻 PHP y MYSQL 💻)
Duración: 18 min
Módulo: 🎨 Interfaz de Usuario, Bootstrap y Funcionalidades Básicas
Lección 3 de
7
Descripción
🚗 Pantalla Principal: Vista de Vehículos en el Sistema de Parqueo
Lección 07 – PANTALLA PRINCIPAL de VISTA de Vehículos ( 👨💻 PHP y MYSQL 💻)
En esta lección crucial, comenzarás a construir la pantalla principal de tu Sistema de Parqueo, la interfaz que los usuarios verán al ingresar a la página web. 🌐 Tu instructor te guiará para crear un entorno visual que represente la gestión de los cubículos y vehículos, sentando las bases para una administración eficiente.
En esta Lección Estratégica Aprenderás a:
- Entender el Contexto del Sistema de Parqueo 💡
- Comprenderás la importancia de una vista principal clara para administrar y visualizar el estado de los cubículos (disponibles/ocupados) en tiempo real, con el apoyo de tu base de datos y un sistema de roles [00:27].
- Se presentará un ejemplo de un sistema de parqueo con múltiples pisos y más de 200 cubículos, destacando la necesidad de un sistema robusto para grandes volúmenes de vehículos [00:55].
- Se establecerá el objetivo de diseñar un sistema para más de 100 cubículos, distribuidos en dos pisos (50 en el primero y 50 en el segundo) [02:05].
- Visualización Conceptual del Flujo de Parqueo 📊
- Estilizar el Fondo con una Imagen de Parqueo 🖼️
- Introducirás una imagen de fondo (piso.jpg) en el <body> de tu index.php para simular un estacionamiento [04:11].
- Crearás una nueva carpeta imagenes dentro de public para almacenar los recursos gráficos del proyecto (imágenes de pisos y autos) [04:54].
- Aprenderás a ajustar el estilo del fondo con propiedades CSS como background-repeat: no-repeat, z-index, background-size: 100% 100% [06:45], para que la imagen se adapte correctamente y sea responsiva [07:49].
- Creación de Cubículos Estáticos en HTML 🅿️
- Utilizarás un contenedor (<div class="container">) [08:24] y una tabla HTML para representar los primeros 10 cubículos de forma estática en una fila [08:47].
- A cada cubículo le asignarás un título (ej. "Cubículo 1") [12:24] y le insertarás una imagen de un vehículo (auto.png) con un tamaño reducido (50px de ancho) [13:02].
- Ajustarás el estilo para centrar el texto y la imagen dentro de cada cubículo [14:06].
- Duplicarás estos cubículos para visualizar hasta 20 espacios (cubículo 1 al 10, y luego del 11 al 20) [15:51], entendiendo que esto es una representación estática que luego se dinamizará con la base de datos.
Al finalizar esta lección, habrás construido la primera capa visual de tu Sistema de Parqueo, un entorno que, aunque inicialmente estático, ya te permite visualizar la futura gestión dinámica de vehículos. ¡Estás un paso más cerca de un sistema completo! 💪
Lecciones
🚀 Introducción y Configuración Inicial del Proyecto
🎨 Interfaz de Usuario, Bootstrap y Funcionalidades Básicas
👤 Módulo de Usuarios, Login y Control de Sesiones
👥 Roles de Usuario y Control de Acceso Detallado
Lección 1. 29 – Añadiendo en el MENU opción ROLES al sistema con BASE de DATOS (👨💻PHP y MYSQL💻)
9 min
🅿️ Módulo de Parqueo y Gestión de Cubículos
Lección 2. 42 – FORMULARIO PARA CREAR CUVICULOS, tabla mapeo en el sistema con(👨💻PHP y MYSQL💻)
10 min
Lección 7. 47 – IDENTIFICANDO EL ESTADO DE LOS CUVICULOS en el sistema con BD (👨💻PHP y MYSQL💻)
13 min
🚗 Registro de Vehículos y Gestión de Clientes
Lección 2. 49 – FORMULARIO para REGISTRAR los VEHICULOS en el sistema con BD (👨💻PHP y MYSQL💻)
10 min
Lección 3. 50 – CARGAR FECHA ACTUAL CON PHP EN EL FORMULARIO en el sistema con BD (👨💻PHP y MYSQL💻)
7 min
Lección 4. 51 – CARGAR HORA ACTUAL CON PHP EN EL FORMULARIO en el sistema con BD (👨💻PHP y MYSQL💻)
5 min
Lección 5. 52 – CREACIÓN DE LA TABLA CLIENTES en el sistema con Base de Datos (👨💻PHP y MYSQL💻)
5 min
🖨️ Generación de Tickets y Reportes
Lección 1. 58 – como INSTALAR LA LIBRERIA TCPDF para REPORTES del sistema con BD (👨💻PHP y MYSQL💻)
9 min
Lección 5. 62 – DATOS DEL CLIENTE EN EL TICKET para imprimir desde el SISTEMA con BD(👨💻PHP y MYSQL💻)
12 min
⚙️ Configuraciones del Sistema y Control de Versiones
Lección 1. 63 – AÑADIENDO EL MÓDULO CONFIGURACIONES EN EL MENU DEL SISTEMA con BD(👨💻PHP y MYSQL💻)
9 min
Lección 16. 78 – HACIENDO COMMITS AL REPOSITORIO DE GITHUB en el sistema con BD (👨💻PHP y MYSQL💻)
9 min
Lección 17. 79 – GENERANDO EL TICKET DESDE LA BASE DE DATOS en el sistema con BD (👨💻PHP y MYSQL💻)
14 min
Lección 18. 80 – CAMBIANDO EL ESTADO DEL VEHICULO A OCUPADO en el sistema con BD (👨💻PHP y MYSQL💻)
13 min
Gestión y Flujo de Clientes
Lección 2. 82 – VISTA MODAL PARA RE-IMPRIMIR DATOS DEL CLEINTE en el sistema con BD (👨💻PHP y MYSQL💻)
16 min
Lección 5. 85 – RE-IMPRIMIR TICKET DEL CLIENTE en el sistema con BD y GitHub (👨💻PHP y MYSQL💻)
11 min
Lección 6. 86 – CANCELAR TICKET GENERADO DEL CLIENTE en el sistema con BD y GitHub (👨💻PHP y MYSQL💻)
8 min
Validación Avanzada y CRUD de Clientes
Lección 7. 94 – SCRIPT PARA EDITAR DATOS DEL CLIENTE en el sistema con BD y GITHUB (👨💻PHP y MYSQL💻)
8 min
Generación del Modelo de Facturación
Módulo de Facturación: CRUD y Lógica 🧾
Módulo de Precios y Lógica de Cálculo 💰
Lección 5. 117 – ESTABLECIENDO LOS PRECIOS DEL PARQUEO en el sistema con BD y GITHUB(👨💻PHPyMYSQL💻)
8 min
Lección 6. 118 – ACTUALIZAR LOS PRECIOS DEL PARQUEO en el sistema con BD y GITHUB(👨💻PHPyMYSQL💻)
8 min
Finalización del Documento de Factura y Lógica de Estado 📄
Lección 5. 130 – READ - LECTURA DE DATOS DE LA FACTURA en el sistema con BD yGITHUB(👨💻PHPyMYSQL💻)
8 min
Lección 6. 131 – CONCATENANDO LOS DATOS DE LA FACTURA en el sistema con BD yGITHUB(👨💻PHPyMYSQL💻)
8 min
Mejoras, Despliegue y Control de Versiones 🌐
Lección 2. 134 – PREGUNTAS Y RESPUESTAS SOBRE EL SITEMA DE PARQUEO CON BD yGITHUB(👨💻PHPyMYSQL💻)
61 min
Lección 7. 139 – CAMBIANDO EL ESTADO DEL TICKET (a libre) en el sistema con BD yGITHUB(👨💻PHPyMYSQL💻)
8 min
Lección 10. 142 – Como INSTALAR DATATABLES EN EL PROYECTO del sistema con BD y GITHUB(👨💻PHPyMYSQL💻)
11 min
Generación de Reportes en PDF (TCPDF) 🖨️
Lección 3. 147 – CREANDO TABLA CON LA LIBRERIA TCPDF PARA LOS REPORTES con BDyGITHUB(👨💻PHPyMYSQL💻)
8 min
Seguridad del Sistema y Control de Acceso 🔐 Actualización Final y Conclusión del Curso 🎉
Apoya este proyecto
Si te gusta nuestro contenido, ¡apóyanos con una donación!
Donar por Airtm Donar por Binance¡Gracias por tu apoyo! ❤️