21 🎨 Creando la Vista del Formulario de Nuevo Producto | Diseño y Estilos en Laravel 12 FullStack

Duración: 30 min
Módulo: 📦 Módulos Esenciales (Categorías y Productos) 17-24 Lección 5 de 8
Anterior
20 📦 MÓDULO PRODUCTOS: Modelos y Relaciones (One-to-Many Imágenes) | Laravel 12 E-commerce
Siguiente
22 💾 STORE Productos y Vista Detalle (Show) | Validación y Almacenamiento en Laravel 12 E-commerce

Descripción

Lección 21: 🎨 Diseño del Formulario de Creación de Nuevo Producto

Este capítulo se enfoca en la implementación del listado de productos y el diseño detallado del formulario de creación (Create), asegurando una interfaz completa y enriquecida para la gestión de inventario en el e-commerce.

🗺️ Configuración Inicial y Listado (Index)

Se comienza con la configuración de las rutas, la creación de vistas y la generación de datos de prueba:

  • 🛣️ Rutas y Navegación: Se definen las rutas para el módulo Productos [00:26] y se añade la opción "Productos" al menú de navegación lateral [01:18], usando el ícono box-seam [02:18].
  • 📂 Estructura de Vistas: Se crean las vistas básicas del módulo: index.blade.php, create.blade.php, show.blade.php, y edit.blade.php [03:32].
  • 🔎 Búsqueda Amplia: Se configura la funcionalidad de búsqueda en el listado, permitiendo filtrar productos por Nombre, Código, Descripción Corta y Descripción Larga [05:51].
  • 🧪 Datos de Prueba (Seeders): Se utiliza un Factory y un Seeder para generar 50 productos falsos (fake) [12:43] en la base de datos, lo que facilita la visualización y prueba inmediata del listado con paginación [13:50].

📝 Diseño Avanzado del Formulario de Creación (Create)

El foco principal es crear un formulario de producto completo, utilizando una estructura de columnas flexible:

  • 🔗 Selección de Categoría: El primer campo es un select que carga todas las categorías registradas [17:01] para asignar el producto a su respectiva clasificación.
  • 🏷️ Campos Principales: Se definen los campos para Nombre del Producto [18:41] y Código del Producto [19:35], con una distribución en columnas para optimizar el espacio.
  • 📑 Descripción Corta: Se implementa un campo de texto para una Descripción Breve del producto [21:35].
  • ✍️ Descripción Larga Enriquecida: Se integra la librería CheckEditor [26:31] al campo de Descripción Larga, lo que convierte un simple textarea en un editor de texto enriquecido (WYSIWYG) [27:15], permitiendo formatear detalles como negritas, listas, tablas y más.
  • 💰 Precios y Stock: Finalmente, se añaden los campos para ingresar el Precio de Compra, el Precio de Venta [28:41] y la cantidad en Stock [29:26].
$10.00
Iniciar sesión para inscribirse

Lecciones

🚀 Configuración Inicial y Sistema de Administración 1-6
Lección 1. 01 🚀 Inicio del Curso Ecommerce con Laravel 12 FullStack | ¡Hola Mundo y Configuración Inicial! 18 min
Lección 2. 02 🔐 Autenticación Login y Registro de Usuarios | Ecommerce con Laravel 12 FullStack Profesional 17 min
Lección 3. 03 🎨 Instalación y Personalización del Menú con Plantilla Mazer | Ecommerce Laravel 12 FullStack 29 min
Lección 4. 04 ⚙️ Módulo de Ajustes del Sistema | Modelo, Migración, Controlador y Vista en Laravel 12 FullStack 30 min
Lección 5. 05 🧩 Vista Completa del Formulario de Ajustes del Sistema | Laravel 12 FullStack Ecommerce 36 min
Lección 6. 06 ⚙️ Guardar y Actualizar los Ajustes del Sistema con Imágenes | Ecommerce Laravel 12 FullStack 42 min
🛡️ Roles, Permisos y Gestión de Usuarios (Spatie) 7-16
Lección 1. 07 🔐 Instalación y Configuración de Laravel Spatie Roles y Permisos | Ecommerce Laravel 12 FullStack 12 min
Lección 2. 08 🧩 Creación y Registro de Roles | Controlador, Rutas y Formulario | Ecommerce Laravel 12 FullStack 19 min
Lección 3. 09 📋 Listado y Paginación de Roles | Spatie Roles & Permisos | Ecommerce Laravel 12 FullStack 25 min
Lección 4. 10 ⚙️ CRUD Completo de Roles | Spatie Roles & Permisos | Ecommerce Laravel 12 FullStack 25 min
Lección 5. 11 💬 Instalación y Configuración de SweetAlert2 | Alertas Dinámicas en el Sistema Ecommerce Laravel 15 min
Lección 6. 12 🔐 Ajustes en el Login y Seeder de Usuarios | Sistema Ecommerce Laravel 12 FullStack 40 min
Lección 7. 13 👥 Nuevo Módulo de Usuarios | Listado y Creación de Usuarios | Ecommerce Laravel 12 FullStack 18 min
Lección 8. 14 🔍 Buscador y Detalle de Usuarios (Acción Show) | Ecommerce Laravel 12 FullStack 32 min
Lección 9. 15 🗑️ SOFT DELETES: Editar y Eliminar Usuarios en Laravel 12 | CRUD Completo E-commerce FullStack 21 min
Lección 10. 16 ♻️ RESTAURAR Usuarios Eliminados | Papelera de Reciclaje (Trashing) en Laravel 12 CRUD FullStack 15 min
📦 Módulos Esenciales (Categorías y Productos) 17-24
Lección 1. 17 🛍️ MÓDULO CATEGORÍAS: Modelo, Migración y Listado | Laravel 12 Ecommerce CRUD FullStack 20 min
Lección 2. 18 ✍️ CREAR CATEGORÍAS (Formulario y Store) y Ver Detalle (Show) | Laravel 12 CRUD E-commerce 19 min
Lección 3. 19 🔥 CRUD COMPLETO de Categorías: Editar, Actualizar y Eliminar + Mejora al Dashboard | Laravel 12 21 min
Lección 4. 20 📦 MÓDULO PRODUCTOS: Modelos y Relaciones (One-to-Many Imágenes) | Laravel 12 E-commerce 20 min
Lección 5. 21 🎨 Creando la Vista del Formulario de Nuevo Producto | Diseño y Estilos en Laravel 12 FullStack 30 min
Lección 6. 22 💾 STORE Productos y Vista Detalle (Show) | Validación y Almacenamiento en Laravel 12 E-commerce 21 min
Lección 7. 23 🖼️ GALERÍA de Productos: Subida y Eliminación de Imágenes | File Upload en Laravel 12 E-commerce 30 min
Lección 8. 24 💥 CRUD COMPLETO Productos: Editar, Eliminar y Limpieza Total de Imágenes | Laravel 12 E-commerce 18 min
🛒 Tienda Online (Frontend Shop) y Funcionalidades 25-33
Lección 1. 25 🎨 INTEGRACIÓN DE PLANTILLA SHOP | Diseño Profesional para la Tienda Online | Laravel E-commerce 20 min
Lección 2. 26 🛒 PRODUCTOS DINÁMICOS: Carga desde BD y Visualización en la Tienda | Laravel 12 E-commerce 27 min
Lección 3. 27 📚 Paginación Frontend y DETALLE de Producto | Mostrar Galería de Fotos en la Tienda | Laravel 12 22 min
Lección 4. 28 🛒 Vista Show Dinámica del Producto | Descripción y Datos Relacionados | Laravel 12 15 min
Lección 5. 29 🔐 LOGIN y AUTENTICACIÓN de Clientes | Implementando el Sistema en la Tienda Online | Laravel 12 29 min
Lección 6. 30 📝 CREAR CUENTA de Cliente | Formulario, Validación y Almacenamiento de Usuarios | Laravel 12 25 min
Lección 7. 31 🚫 ERROR 404 Personalizado | Diseñando la Página de No Encontrado (Admin y Shop) | Laravel 12 16 min
Lección 8. 32 🔍 BUSCADOR de Productos | Lógica de Filtro y Queries Dinámicas en Laravel 12 E-commerce 17 min
Lección 9. 33 ⭐ MÓDULO FAVORITOS (Wishlist): Migración, Modelos y Relación Many-to-Many | Laravel 12 E-commerce 45 min
💳 Carrito, Checkout y Pasarela de Pagos 34-42
Lección 1. 34 🛒 INICIO MÓDULO CARRITO | Migración, Modelo y Acción Add to Cart | Laravel 12 E-commerce 37 min
Lección 2. 35 🛒 VISTA DEL CARRITO | Resumen, Subtotal y Total Dinámico para el Usuario | Laravel 12 E-commerce 24 min
Lección 3. 36 🧹 GESTIÓN TOTAL del Carrito | Actualizar Cantidad, Eliminar Producto y Vaciar Carrito | Laravel 22 min
Lección 4. 37 💳 PASARELA DE PAGOS PayPal | Integración y Lógica de Checkout en Laravel 12 E-commerce 27 min
Lección 5. 38 ✅ PAGO COMPLETADO y REGISTRO de Pedido | Lógica Final de Venta con PayPal y Laravel 12 11 min
Lección 6. 39 📦 MÓDULO ÓRDENES: Estructura de BD, Modelos y Relación de Detalles (Order Items) | Laravel 12 31 min
Lección 7. 40 ✅ Finalizando la Venta: Guardando Detalles de Orden y Actualizando el Stock de Productos 17 min
Lección 8. 41 🏆 CONFIRMACIÓN de Pedido: Diseño de la Vista Compra Exitosa y Detalles de la Orden | Laravel 12 16 min
Lección 9. 42 📧 CORREO de Confirmación de Pedido | Creando la Plantilla Mailable y Envío PostPago en Laravel 12 24 min
⚙️ Gestión de Órdenes, Perfiles y Características Avanzadas 43-61
Lección 1. 43 📊 LISTADO DE PEDIDOS (Órdenes) en el Admin Panel | Vista General de Ventas | Laravel 12 20 min
Lección 2. 44 📝 DETALLE de la Orden | Productos, Envío y Gestión de Pedido para Envío al Cliente | Laravel 12 27 min
Lección 3. 45 ⚙️ PROCESAMIENTO de la Orden | Cambio de Estado, Notas de Gestión y Fulfillment del Pedido 21 min
Lección 4. 46 🚚 NOTIFICACIÓN de Envío al Cliente | Automatización de Email al Cambiar Estado en el Admin 17 min
Lección 5. 47 🔗 BUSCADOR AVANZADO: Filtrando Tablas Relacionadas con WHERE HAS y Joins en Laravel 12 10 min
Lección 6. 48 🌐 Traduciendo Errores de Validación de Laravel a Español | Carpeta lang/es en Laravel 12 7 min
Lección 7. 49 📈 DASHBOARD Creando Widgets con Estadísticas de Pedidos y Ventas | Laravel 12 E-commerce 14 min
Lección 8. 50 👤 DASHBOARD del CLIENTE: Vista Mi Cuenta, Menú y Listado de Pedidos Frontend | Laravel 12 14 min
Lección 9. 51 👤 DASHBOARD del CLIENTE: Cargar Detalles de la Orden, Seguimiento | Laravel 12 25 min
Lección 10. 52 ⚙️ AJUSTES de Cuenta: Vista Perfil y Seguridad (Cambio de Nombre/Email y Contraseña) | Laravel 12 18 min
Lección 11. 53 🔒 LÓGICA CRUD de Perfil: Actualizar Nombre/Email y Cambiar Contraseña Segura | Laravel 12 18 min
Lección 12. 54 🛡️ Roles y Permisos: Creación de Roles y Seeder de Permisos con Spatie | Laravel 12 E-commerce 13 min
Lección 13. 55 🔗 Sincronización de Permisos: Asignando Todos los Privilegios al Rol SUPER ADMIN | Laravel Spatie 17 min
Lección 14. 56 📊 Interfaz de Permisos: Agrupando Permisos por Módulo y Marcando los Asignados (Spatie UI) 12 min
Lección 15. 57 🔄 Sincronización de Permisos a cada Rol: Lógica de Guardado con sync() en Spatie | Laravel 12 13 min
Lección 16. 58 🛑 Manejo de Errores: Personalizando la Página 403 (Acceso Denegado) con Laravel y Spatie 12 min
Lección 17. 59 🔑 Seguridad de UI: Ocultando y Mostrando Componentes con la Directiva @can de Laravel Blade 15 min
Lección 18. 60 👤 Diseño de Perfil: Creando la Vista de Ajustes de Cuenta y Mostrar Datos de Usuario | Laravel 14 min
Lección 19. 61 🔐 Cambio de Contraseña Segura: Implementando el Formulario de Verificación de Contraseña Actual 22 min
📊 Análisis de Datos, Despliegue y Conclusión 62-68
Lección 1. 62 📈 Dashboard con Gráficos: Instalación de ApexCharts y Primer Gráfico de Muestra | Laravel 12 9 min
Lección 2. 63 📊 Analytics: Generando Gráfico de Usuarios Registrados Mensualmente con DB Raw y ApexCharts 12 min
Lección 3. 64 💰 Gráfico de Ventas Mensuales: Calculando el SUM(total) de Órdenes y Usando un Gráfico de Barras 12 min
Lección 4. 65 🥧 Gráfico de Pastel: Visualizando la Distribución de Pedidos (Nuevos vs. Enviados) con ApexCharts 9 min
Lección 5. 66 🎯 Gráfico de Barra Radial: Visualizando el Progreso de Metas (KPIs) con ApexCharts 15 min
Lección 6. 67 💾 Backup y Control de Versiones: Subiendo el Proyecto Completo a GitHub | Laravel E-commerce 12 min
Lección 7. 68 🎉 ¡FIN DEL CURSO! Review Final del Sistema de E-commerce con Laravel (Módulos Completos) 12 min

Apoya este proyecto

Si te gusta nuestro contenido, ¡apóyanos con una donación!

Donar por Airtm Donar por Binance

¡Gracias por tu apoyo! ❤️

Volver al curso