Curso primeros pasos con Laravel Inertia + Vue.js y Tailwind.css
- Andrés Cruz
El curso actualizado en udemy:
El curso Legacy en udemy lo puedes encontrar aqui:
Este es un curso en el cual daremos los primeros pasos con Laravel Inertia, conoceremos cómo podemos usar Vue directamente desde Laravel, sin intermedios molestos por lo tanto en vez de usar vistas con blade, usamos componentes en Vue.
Esta guía ofrece múltiples tutoriales en base a pequeñas aplicaciones con alcances limitados en los cuales conoceremos en detalle cómo funciona Laravel Inertia, realizaremos comparaciones con el curso de Laravel Livewire el cual es hermano de este curso y comparar tecnologías.
Con este tipo de integración, que suena a poco, pero que facilita mucho el desarrollo y maximiza el tiempo de la elaboración del proyecto, no hay necesidad de usar peticiones axios, fetch o similares ya que, la estructura o scaffolding que nos trae Inertia se encarga de todo; trayendo un mundo de posibilidades infinitas y un desarrollo rápido en comparación de otras soluciones similares con el esquema clásico de:
Laravel + Rest Api + Vue
Este curso al ser de nivel intermedio, da por hecho que tienes conocimientos en Laravel básico.
En definitiva, aprenderás a conocer Laravel inertia, qué cambios trae en un proyecto en Laravel básico, el uso de los componentes en Vue como característica principal y mucho más.
Finalmente, la estructura del curso:
Por aquí tienes el listado completo de clases que vamos a cubrir en el libro y curso:
Introducción
-
1 Introducción al curso
Primeros pasos
-
1 Introduccion
-
2 ¿Qué es Laravel Inertia?
-
3 Windows y MacOS: Crear un proyecto con el instalador de Laravel y Laragon/Herd
Vamos a crear un proyecto Laravel Inertia en entorno Windows (MacOS).
-
4 Características de un proyecto Inertia
Vamos a presentar que es lo que tenemos en detalle, el proyecto, sus características y cómo funciona.
-
5 Rutas definidas por Inertia
Daremos una presentación al funcionamiento y uso de las rutas.
Integración con Inertia
-
1 Introduccion
-
2 Crear controladores y modelos
Vamos a crear los modelos y controladores que usaremos a lo largo de las secciones.
-
3 Create: Crear un formulario
Vamos a crear el primer formulario.
-
4 Create: Crear una categoría en la base de datos
Vamos a crear la categoría en la base de datos
-
5 Create: Crear una categoría en la base de datos
Vamos a crear la categoría en la base de datos
-
6 Create: Aplicar validaciones y mostrar errores
Vamos a realizar validaciones sobre el formulario.
-
7 Usar el layout de la aplicación
Vamos a configurar el layout de la aplicación.
-
8 Usar componentes Vue de Inertia
Vamos a reutilizar componentes existentes para mejorar el diseño de la aplicación.
-
9 Detalles del formulario
Últimos detalles del formulario, grid y padding.
-
10 Create: Terminar implementación
Vamos a terminar la implementación.
-
11 Editar registro: Crear un formulario
Vamos a crear el apartado de edición.
-
12 Editar registro: Actualizar una categoría
Vamos a actualizar un registro en la base de datos desde Laravel.
-
13 Generar SLUG de manera automática
Vamos a generar el slug desde de validación.
-
14 Listado: Todos los registros
Vamos a crear un listado inicial de registros.
-
15 Link: Enlace para crear y editar
Vamos a crear enlaces para crear y editar.
-
16 Listado: Paginación
Vamos a crear un listado paginado.
-
17 Crear un componente de paginación en Vue
Vamos a crear un componente de paginación personalizado.
-
18 ProgressBar
Vamos a conocer el funcionamiento de la barra de progreso.
-
19 ProgressBar, props array en Paginación y advertencia de Component en Vue
Vamos a tratar varios temas que quedaron pendientes.
-
20 Crear Container
Vamos a crear un contenedor para la aplicación.
-
21 Crear componente de carta
Crearemos el componente típico de carta.
-
22 Enlaces de acción
Vamos a mejorar el diseño de los enlaces del listado
-
23 Paginación
Componente de paginación y botones de acción.
-
24 Eliminar registro
Vamos a realizar el proceso de eliminar el registro desde el listado.
-
25 Eliminar registro: Renderizar el enlace como un botón
Vamos a cambiar de un enlace a un botón en el enlace de eliminar.
-
26 Publicar en github
https://github.com/libredesarrollo/book-course-laravel-inertia/releases/tag/v0.1
Redirecciones y mensajes por sesión
-
1 Introducción
-
2 Redirecciones
Vamos a conocer cómo emplear las redirecciones junto con Inertia.
-
3 Mensajes Flash en Inertia
Vamos a crear un mensaje flash para mostrar en inertia.
-
4 Extra: transiciones
Vamos a colocar un bloque de transition para los mensajes flash.
-
5 Publicar en github
Puedes consultar el código fuente en: https://github.com/libredesarrollo/book-course-laravel-inertia/releases/tag/v0.2
CRUD para los post
-
1 Introduccion
-
2 Replicar CRUD de las categorías
Vamos a replicar el esquema existente para crear categorías, para los post.
-
3 Crear: Formulario base
Vamos a terminar el proceso de creación.
-
4 Crear: Popular categoría de crear post
Vamos a obtener el listado de post.
-
5 Editar
Vamos a terminar el proceso de edición.
-
6 Extra: Fusionar creación y actualización en un solo componente de Vue
Vamos a fusionar el proceso de editar y crear en un solo componente de vista.
-
7 Publicar en github
https://github.com/libredesarrollo/book-course-laravel-inertia/releases/tag/v0.3
Upload
-
1 Introducción
-
2 Implementar en el servidor
Vamos a ver el esquema por defecto al momento de hacer un upload.
-
3 Upload en el componente de Save
Vamos a combinar el upload con la carga de archivos.
-
4 Carga de archivos manejada desde el formulario de crear o editar
Vamos a adaptar el formulario de upload para crear y editar.
-
5 Vía componente de Oruga UI: Configuración básica
Vamos a definir las configuraciones para usar Oruga UI en el proyecto.
-
6 Vía componente de Oruga UI: Upload
Vamos a conocer cómo extender Inertia con otros frameworks.
-
7 Vía Drag and Drop de Oruga UI
Vamos a conocer el proceso de upload.
-
8 Mostrar imagen cargada
Vamos a mostrar la imagen cargada.
-
9 Eliminar imagen cargada
Vamos a crear una función de upload.
-
10 Descargar imagen cargada
Vamos a mostrar el proceso de descarga.
-
11 Publicar en github
Puedes consultar el código fuente en: https://github.com/libredesarrollo/book-course-laravel-inertia/releases/tag/v0.4
CKEditor
-
1 Introducción
-
2 Instalar y configurar CKEditor
Instalaremos y usaremos CKEditor en el proyecto.
-
3 Acomodar CSS
Vamos a agregar un CSS para el CKEditor.
-
4 Publicar en git
Diálogos de confirmación
-
1 Introducción
-
2 List: Configurar esquema inicial para eliminación
Creamos un sencillo esquema de eliminación para las categorías.
-
3 Tarea: Replicar en Post
Replicamos el esquema de eliminación anterior para los posts.
-
4 Modals de Inertia
Presentaremos los modales de Inertia.
-
5 Publicar en github
Puedes consultar el código fuente en: https://github.com/libredesarrollo/book-course-laravel-inertia/releases/tag/v0.6
Formulario paso por paso
-
1 Introducción
Introducción
-
2 Presentación
-
3 Crear migraciones principales
Vamos a crear las migraciones para los formularios.
-
4 Crear modelos principales
Vamos a crear los modelos.
-
5 Formulario General: Estructura
Crear controlador, validaciones y ruta.
-
6 Formulario General: Crear
Vamos a crear el esquema para poder crear el contacto.
-
7 Formulario General: Actualizar
Vamos a crear el esquema para poder actualizar el contacto.
-
8 Formulario Company: Crear y Actualizar
Vamos a crear el esquema para poder crear el contacto para el paso 2.
-
9 Formulario Company: Crear y Actualizar
Vamos a crear el esquema para poder crear el contacto para el paso 2.
-
10 Formulario Person: Crear y Actualizar
Vamos a crear el esquema para poder crear el contacto para el paso 2.
-
11 Formulario Detail: Crear y Actualizar
Vamos a crear el esquema para poder crear el contacto para el paso 3.
-
12 Integrando el formulario: Presentación
Vamos a presentar como vamos a aplicar el formulario paso por paso.
-
13 Integrando el formulario de General en el paso por paso
Vamos a integrar el primer paso en el componente de Step.
-
14 Integrando el formulario de Empresa en el paso por paso
Vamos a integrar el segundo paso en el componente de Step.
-
15 Integrando el formulario de Persona en el paso por paso
Vamos a integrar el segundo paso en el componente de Step.
-
16 Integrando el formulario de Detalle en el paso por paso
Vamos a integrar el tercer paso en el componente de Step.
-
17 Experimentar con las propiedades globales
Vamos a conocer algunos mecanismos para crear propiedades globales.
-
18 Compartir datos, Implementar helper para indicar el paso actual
Vamos a crear la función de ayuda que genera el paso actual.
-
19 Errores de validaciones
Vamos a ver el problema que existe que al existir campos en el paso por paso con el mismo nombre, aparecen los errores en los formularios que tengan el mismo nombre.
-
20 Compartir datos propiedad de step actualizar
Vamos a definir los valores que debe de tener la propiedad de step.
-
21 Crear estilo para el paso por paso
Vamos a crear un sencillo estilo para mostrar el paso por paso.
-
22 Renderizar un paso por vez
Vamos a mostrar el formulario que corresponde al paso.
-
23 Paso anterior
Vamos a crear la opción de paso anterior.
-
24 Parametro de contacto general para los paso por paso
Par metro de contacto general para los paso por paso
-
25 Detalles finales
Detalles finales
-
26 Publicar en github
Código fuente en: https://github.com/libredesarrollo/book-course-laravel-inertia/releases/tag/v0.7
Filtros y campos de búsqueda
-
1 Introducción
-
2 Cambios en la tabla
Vamos a colocar algunas columnas adicionales para la tabla del listado de publicaciones.
-
3 Seeders para los posts
Vamos a crear seeders para generar datos de pruebas para los posts.
-
4 Campo de búsqueda
Vamos a crear un campo de búsqueda para varios campos.
-
5 Campo de búsqueda HTML
Vamos a crear los selects en el componente de Vue para los elementos del formulario para el filtro.
-
6 Implementar funcionalidad del filtro
Vamos a terminar de implementar del filtro
-
7 Filtrar por rango de fecha
Vamos a crear un filtro por fechas
-
8 Valores aplicados en los filtros desde el componente en Vue
Vamos a colocar los valores de los props en el componente de Vue.
-
9 Campo de búsqueda: HTML
Vamos a crear los selects en el componente de Vue para los elementos del formulario para el filtro.
-
10 Aplicar filtros sin usar un botón
Vamos a enviar los datos sin usar un botón.
-
11 debounce, retardo en los eventos
Vamos a realizar un retardo al momento de escribir en el campo de tipo búsqueda.
-
12 Extra: Filtros con cláusulas condicionales, when
Vamos a aplicar los filtros definidos antes empleando los whens, que es la manera predefinida en Laravel.
-
13 Publicar en github
Código fuente: https://github.com/libredesarrollo/book-course-laravel-inertia/releases/tag/v0.8
Ordenación
-
1 Introducción
-
2 Presentación
Vamos a hablar sobre el desarrollo a implementar.
-
3 Ordenación: Controlador
Vamos a crear la estructura necesaria para la ordenación desde el controlador.
-
4 Ordenación: HTML y pruebas
Vamos a crear la estructura para la ordenación de las columnas del listado.
-
5 Limpiar filtros
-
6 Publicar en github
Puedes consultar el código fuente en: https://github.com/libredesarrollo/book-course-laravel-inertia/releases/tag/v0.9
Blog: Listado y detalle de post
-
1 Introducción
-
2 Layout
Definimos el layout.
-
3 Página de listado: Diseño
Vamos a trabajar en el diseño de la página de listado.
-
4 Página de listado: Diseño
Vamos a trabajar en el diseño de la página de listado.
-
5 Página de detalle
Vamos a crear la página de detalle.
-
6 Colocar formulario paso por paso en detalle
Vamos a colocar el formulario paso por paso en el detalle del post.
-
7 Publicar en github
Puedes consultar el código fuente en: https://github.com/libredesarrollo/book-course-laravel-inertia/releases/tag/v0.10
Carrito de compras
-
1 Listado de productos: Esquema inicial
Vamos a crear el esqueleto del módulo.
-
2 Item de carrito
Vamos a crear el controlador y estructura inicial para administrar un item del carrito.
-
3 Componente de Vue para administrar un Item del carrito
Vamos a implementar la opción de agregar un producto al carrito.
-
4 Compartir datos del carrito mediante la sesión a Vue
Vamos a realizar la adaptación para compartir la sesión en los componentes de Vue.
-
5 Listado de Post en el carrito: Adaptar
Adaptamos el listado de post del carrito al nuevo esquema.
-
6 Vista de detalle del carrito
Vamos a crear una página para el detalle del carrito.
-
7 BD: Crear migración y modelo
Vamos a crear la estructura para trabajar con la base de datos.
-
8 BD: Registrar cambios en la base de datos
Vamos a guardar la sesión del carrito en la base de datos.
-
9 BD: Replicar carrito de la base de datos a sesión al momento del login
Vamos a escuchar cuando ocurre el login y replicar en la sesión el carrito.
-
10 Componente de Toast de Oruga UI
Vamos a utilizar el componente de Toast cada vez que realicemos un cambio en el carrito.
-
11 Calcular total
Vamos a calcular el total de elementos en el carrito.
-
12 Crear botón flotante
Vamos a mostrar el total en una vista y crear el botón de carrito mostrando el total.
-
13 Palabras finales
-
14 Publicar en github
Puedes consultar el código fuente en: https://github.com/libredesarrollo/book-course-laravel-inertia/releases/tag/v.10
Aplicación de To Do
-
1 Introducción
-
2 Crear el esqueleto de la aplicación de to do: Controlador y componente Vue
Vamos a crear la estructura base de la app to do.
-
3 Crear el esqueleto de la aplicación de to do: Listado y Formulario
Vamos a crear la estructura base de la app to do para el listado de to do.
-
4 Crear migración y modelo
Vamos a crear el modelo y migración de los to do.
-
5 Crear to do
Vamos a crear un to do desde en el servidor.
-
6 Crear to do: Errores y validaciones
Vamos a aplicar validaciones y mostrar errores al momento de crear un to to.
-
7 Popular listado de todos
Vamos a mostrar el listado de to do de la base de datos.
-
8 Editar un todo
Vamos a actualizar un to do.
-
9 Editar un todo: Mostrar errores
Vamos a aplicar validaciones y mostrar errores al momento de actualizar un to to.
-
10 Eliminar un to do
Vamos a eliminar un to do en la base de datos.
-
11 Marcar completado un to do
Vamos a marcar como completado un to do.
-
12 Eliminar todos los to do
Vamos a eliminar todos los to do.
-
13 Reordenación, e instalar el plugin
Vamos a instalar el plugin de Drag and Drop para reordenar los todos.
-
14 Reordenación, configuración inicial con los To Do en Vue
Vamos a configurar nuestro listado de To Do con el plugin de reordenar.
-
15 Reordenación, crear listado de To Dos ordenados
-
16 Reordenación, aplicar cambios en el servidor
Vamos a reordenar los to do desde el servidor.
-
17 Problemas con la sincronización de las operaciones
Hablaremos sobre los problemas que tenemos al momento de sincronizar los datos.
-
18 Publicar en github
Código fuente del capitulo en: https://github.com/libredesarrollo/book-course-laravel-inertia/releases/tag/v0.11
-
19 Extra: Problemas de Sync, Otras soluciones
Pruebas
-
1 Repaso
Presentamos conceptos claves e importancias de las pruebas.
-
2 Prueba base
Vamos a crear la prueba básica como lo haríamos en Laravel básico.
-
3 De Laravel a Inertia
Vamos a conocer el método de aserción de inertia.
-
4 Objeto $page
Vamos a crear la prueba básica como lo haríamos en Laravel básico.
-
5 Método has
Vamos a conocer cómo emplear el método de has.
-
6 Método where
Vamos a conocer el método de where para comprobar por valores.
-
7 has y where: Anidaciones
Vamos a conocer cómo inspeccionar datos anidados.
-
8 Terminar la prueba
Palabras finales sobre la prueba actual.
-
9 Blog: Prueba para el detalle
Crearemos la prueba para el detalle de un post en el blog.
-
10 Dashboard: Prueba para listado
Prueba para el dashboard del listado.
-
11 Dashboard, Categoría: Prueba para crear, GET
Prueba para el formulario de creación de una categoría.
-
12 Configurar base de datos
Vamos a configurar una base de datos de prueba.
-
13 Facades y adaptar pruebas anteriores
Vamos a crear unos factories para generar datos de prueba.
-
14 Autenticación
Vamos a autenticar un usuario para los módulos protegidos por autenticación.
-
15 Dashboard: Prueba para crear, POST
Vamos a crear la prueba para crear una categoría.
-
16 Tarea: Dashboard: Prueba para editar
Vamos a crear la prueba para editar una categoría.
-
17 Dashboard: Prueba para eliminar
Vamos a crear la prueba para eliminar una categoría.
-
18 Dashboard: Pruebas para el Post
Crearemos las pruebas para el post, partiendo de las pruebas de las categorías.
-
19 Dashboard: Pruebas para el Post
Crearemos las pruebas para el post, partiendo de las pruebas de las categorías.
-
20 Dashboard: Pruebas para el Post, upload
Vamos a realizar una corrección en el módulo de dashboard sobre el upload.
-
21 Dashboard: Pruebas para el Post, aserciones adicionales
Vamos a implementar algunos métodos de aserciones adicionales.
-
22 Paso por Paso: Primer paso, Get
Vamos a crear las pruebas para el primer paso del formulario paso por paso, el get.
-
23 Paso por Paso: Primer paso, Post
Vamos a crear las pruebas para el primer paso del formulario paso por paso, el post.
-
24 Paso por Paso: Segundo paso, Company, Get
Vamos a crear las pruebas para el segundo paso del formulario paso por paso, el get.
-
25 Verificar step
Verificar la propiedad de step.
-
26 Implementar Facades para los pasos
Implementamos los facades de los pasos por pasos.
-
27 Paso por Paso: Segundo paso, Company, Post
Vamos a crear las pruebas para el segundo paso del formulario paso por paso, el post.
-
28 Paso por Paso: Segundo paso, Person
Vamos a crear las pruebas para el segundo paso del formulario paso por paso, el de personas el GET y POST.
-
29 Paso por Paso: Tercer paso, Detail
Vamos a crear las pruebas para el tercer paso del formulario paso por paso, GET y POST.
-
30 Paso por Paso: Primer paso, Editar, Get
Vamos a crear las pruebas para el primer paso del formulario paso por paso, el GET para editar.
Integración con Inertia - Laravel 9/10
-
1 Introducción
-
2 Crear controladores y modelos
Vamos a crear los modelos y controladores que usaremos a lo largo de las secciones.
-
3 Crear migraciones
Vamos a crear las migraciones que usaremos a lo largo de las secciones.
-
4 Demo: Rutas Inertia y Rutas Laravel
Vamos a crear realizar una demostración sobre las rutas en Inertia y su funcionamiento con las rutas de Laravel.
-
5 Create: Crear un formulario y proceso de crear
Vamos a crear el primer formulario que cree una categoría
-
6 Sobre los siguientes videos - Router e importación
-
7 Create: Crear una categoría
Vamos a crear el proceso para crear una categoría.
-
8 Create: Aplicar validaciones y mostrar errores
Vamos a realizar validaciones sobre el formulario.
-
9 Usar el layout de la aplicación
Vamos a configurar el layout de la aplicación.
-
10 Usar componentes Vue de Inertia
Vamos a ver cuales son los componentes de Inertia disponibles.
-
11 Usar componentes Vue de Inertia
Vamos a reutilizar componentes existentes para mejorar el diseño de la aplicación.
-
12 Componentes y siguientes videos
-
13 Detalles del formulario
Últimos detalles del formulario.
-
14 Editar registro: Crear un formulario
Vamos a crear el apartado de edición.
-
15 Editar registro: Actualizar una categoría
Vamos a actualizar un registro en la base de datos desde Laravel.
-
16 Generar SLUG de manera automática
Vamos a generar el slug desde el validation.
-
17 Link: Enlace para crear y editar
Vamos a crear enlaces para crear y editar.
-
18 Listado: Todos los registros
Vamos a crear un listado inicial de registros.
-
19 Listado: Paginación
Vamos a crear un listado paginado.
-
20 ProgressBar
Vamos a conocer el funcionamiento de la barra de progreso.
-
21 Listado: Mejorar diseño
Vamos a agregar un poco más de estilo para el listado.
-
22 Crear Container
Vamos a crear un contenedor para la aplicación.
-
23 Crear componente de carta
Crearemos el componente típico de carta.
-
24 Mejorar el aspecto de la paginación
Vamos a mejorar el diseño del componente de paginación y botones de acción.
-
25 Botones de acción, estilo
Vamos a dar algo de estilo para los enlaces de acción del listado.
-
26 Eliminar registro
Vamos a realizar el proceso de eliminar el registro desde el listado.
-
27 Eliminar registro: Renderizar el enlace como un botón
Vamos a cambiar de un enlace a un botón en el enlace de eliminar.
-
28 Publicar en git
Redirecciones y mensajes por sesión - Laravel 9/10
-
1 Introducción
-
2 Redirecciones
Vamos a conocer cómo emplear las redirecciones junto con Inertia.
-
3 Mensajes Flash en Inertia
Vamos a crear un mensaje flash para mostrar en inertia.
-
4 Extra: Estilo para el contenedor del mensaje Flash
Vamos a dar algo de estilo a la caja del componente de flash message.
-
5 Publicar en git
CRUD para los post - Laravel 9/10
-
1 Aplicar con el código actual
-
2 Introducción
-
3 Replicar CRUD de las categorías
Vamos a replicar el esquema existente para crear categorías, para los post.
-
4 Crear: Formulario base
Vamos a terminar el proceso de creación.
-
5 Crear: Popular categoría de crear post
Vamos a obtener el listado de post.
-
6 Editar: Formulario base
Vamos a terminar el proceso de edición.
-
7 Extra: Fusionar creación y actualización en un solo componente de Vue
Vamos a fusionar el proceso de editar y crear en un solo componente de vista.
-
8 Publicar en git
Upload de archivos - Laravel 9/10
-
1 Introducción
-
2 Simple
Vamos a ver el esquema por defecto al momento de hacer un upload.
-
3 Vía componente de Oruga UI
Vamos a conocer cómo extender Inertia con otros frameworks.
-
4 Vía Drag and Drop de Oruga UI - dropFiles constante
-
5 Vía Drag and Drop de Oruga UI
Vamos a conocer el proceso de upload.
-
6 Extra: Mostrar imagen cargada
Vamos a mostrar la imagen cargada.
-
7 Extra: Eliminar imagen cargada
Vamos a crear una función de upload.
-
8 Extra: Descargar imagen cargada
Vamos a mostrar el proceso de descarga.
-
9 Publicar en git
CKEditor - Laravel 9/10
-
1 Introducción
-
2 Instalar y configurar CKEditor
Instalaremos y usaremos CKEditor en el proyecto.
-
3 Acomodar CSS
Definimos un CSS para acomodar el diálogo de Oruga.
-
4 Publicar en git
Diálogos de confirmación - Laravel 9/10
-
1 Introduccion
-
2 List: Configurar esquema inicial para eliminación
Creamos un sencillo esquema de eliminación para los post.
-
3 Tarea: Replicar en Categoría
Replicamos el esquema de eliminación anterior para las categorías.
-
4 Acomodar CSS
Vamos a agregar un CSS para el CKEditor.
-
5 Modals de Inertia
Presentaremos los modales de Inertia.
Formulario paso por paso - Laravel 9/10
-
1 Introducción
-
2 Crear migraciones principales
Vamos a crear las migraciones para los formularios.
-
3 Crear modelos principales
Vamos a crear los modelos.
-
4 Formulario General: Estructura
Crear controlador, validaciones y ruta.
-
5 Formulario General: Crear
Vamos a crear el esquema para poder crear el contacto.
-
6 Formulario General: Actualizar
Vamos a crear el esquema para poder actualizar el contacto.
-
7 Formulario Company: Crear y Actualizar
Vamos a crear el esquema para poder crear el contacto para el paso 2.
-
8 Crear layout
Vamos a crear el layout del formulario paso por paso.
-
9 Formulario Person: Crear y Actualizar
Vamos a crear el esquema para poder crear el contacto para el paso 2.
-
10 Formulario Detail: Crear y Actualizar
Vamos a crear el esquema para poder crear el contacto para el paso 2.
-
11 Integrando el formulario de Empresa en el paso por paso
Vamos a integrar el segundo paso en el componente de Step.
-
12 Integrando el formulario de Persona en el paso por paso
Vamos a integrar el segundo paso en el componente de Step.
-
13 Integrando el formulario de General en el paso por paso
Vamos a integrar el primer paso en el componente de Step.
-
14 Integrando el formulario de Detalle en el paso por paso
Vamos a integrar el tercer paso en el componente de Step.
-
15 Demo: Experimentar con las propiedades globales
Vamos a conocer algunos mecanismos para crear propiedades globales.
-
16 Compartir datos, propiedad de step, primeros pasos
Vamos a realizar pruebas con el mecanismo que permite generar datos globales.
-
17 Compartir datos, Implementar helper para indicar el paso actual
Vamos a crear la función de ayuda que genera el paso actual.
-
18 Crear estilo para el paso por paso
Vamos a crear un sencillo estilo para mostrar el paso por paso.
-
19 Renderizar un paso por vez
Vamos a mostrar el formulario que corresponde al paso.
-
20 Paso anterior
Vamos a crear la opción de paso anterior.
-
21 Parámetro de contacto general para los paso por paso
Vamos a pasar el contacto general al resto de los pasos.
-
22 Paso 2 en el back, empresa o compañía
Vamos a pasar un parámetro adicional para manejar el back desde detalle al formulario correcto.
-
23 Publicar en git
Filtros y campos de búsqueda - Laravel 9/10
-
1 Introducción
-
2 Seeders para los post
Vamos a crear seeders para generar datos de pruebas para los posts.
-
3 Filtros
Vamos a crear la opción de los filtros para los seleccionables.
-
4 Cambios realizados al código anterior
-
5 Campo de búsqueda
Vamos a crear un campo de búsqueda para varios campos.
-
6 Filtrar por rango de fecha
Vamos a crear un filtro por fechas.
-
7 Valores aplicados en los filtros desde el componente en Vue
Vamos a colocar los valores de los props en el componente de Vue.
-
8 Cambios en la tabla
Vamos a realizar algunos cambios en la tabla.
-
9 Aplicar filtros sin usar un botón
Vamos a enviar los datos sin usar un botón.
-
10 debounce, retardo en los eventos
Vamos a realizar un retardo al momento de escribir en el campo de tipo búsqueda.
-
11 Publicar en git
Ordenación - Laravel 9/10
-
1 Introducción
-
2 Ordenación
Vamos a crear la estructura para la ordenación de las columnas del listado.
-
3 Corrección al código anterior
-
4 Publicar en git
-
5 Quinto Proyecto: Efectos del toast al remover, definir efectos en CSS
Quinto Proyecto: Efectos del toast al remover, definir efectos en CSS
Filtros y campos de búsqueda: Detalles finales - Laravel 9/10
-
1 Introducción
-
2 Foco campo de texto
Vamos a implementar el foco automático para el campo de búsqueda.
-
3 Definir un texto para la opción por defecto en los SELECT y Placeholder
Vamos a mostrar un labels para los SELECT.
-
4 Botón submit largo
Vamos a acomodar el diseño para el botón de filtrar.
-
5 Limpiar filtros
Vamos a crear un botón para limpiar el filtro.
-
6 Publicar en git
Blog: Listado y detalle de post - Laravel 9/10
-
1 Introducción
-
2 Página de listado: Estructura inicial
Vamos a crear el esqueleto de la app.
-
3 Cambios en el código anterior
-
4 Página de listado: Diseño
Página de listado: Diseño
-
5 Página de detalle
Vamos a crear la página de detalle.
-
6 Colocar formulario paso por paso en detalle
Vamos a colocar el formulario paso por paso en el detalle del post.
-
7 Publicar en git
Carrito de compras: Estructura inicial - Laravel 9/10
-
1 Introducción
-
2 Listado de productos: Esquema inicial
Vamos a crear el esqueleto del módulo.
-
3 Item de carrito
Vamos a crear el controlador y estructura inicial para administrar un item del carrito.
-
4 Agregar un producto
Vamos a implementar la opción de agregar un producto al carrito.
-
5 Compartir sesión
Vamos a realizar la adaptación para compartir la sesión en los componentes de Vue.
-
6 Listado de productos: Adaptar
Adaptamos el listado de post del carrito al nuevo esquema.
-
7 Item de carrito: Detalles finales
Vamos a definir los detalles finales en el uso del item del carrito.
-
8 Vista de detalle del carrito
Vista de detalle del carrito
-
9 Vista de detalle del carrito
Vamos a crear una página para el detalle del carrito.
-
10 Publicar en git
Carrito de compras: Replicar en la base de datos - Laravel 9/10
-
1 Introducción
-
2 Crear migración y modelo
Vamos a crear la estructura para trabajar con la base de datos.
-
3 Registrar cambios en la base de datos
Vamos a guardar la sesión del carrito en la base de datos.
-
4 Establecer sesión en el login
Vamos a escuchar cuando ocurre el login y replicar en la sesión el carrito.
-
5 Publicar en git
Carrito de compras: Mensajes - Laravel 9/10
-
1 Introducción
-
2 Componente de Toast de Oruga UI
-
3 Publicar en git
Carrito de compras: Total de ítems - Laravel 9/10
-
1 Introducción
-
2 Calcular total
Vamos a calcular el total de elementos en el carrito.
-
3 Crear botón flotante
Vamos a mostrar el total en una vista y crear el botón de carrito mostrando el total.
-
4 Publicar en git
Aplicación de To Do - Laravel 9/10
-
1 Introducción
-
2 Crear el esqueleto de la aplicación de to do: Controlador y componente Vue
Vamos a crear la estructura base de la app to do.
-
3 Crear el esqueleto de la aplicación de to do: Listado
Vamos a crear la estructura base de la app to do para el listado de to do.
-
4 Crear el esqueleto de la aplicación de to do: Formulario
Vamos a crear la estructura base de la app to do para el formulario de crear to do.
-
5 Crear migración y modelo
Vamos a crear el modelo y migración de los to do.
-
6 Crear to do
Vamos a crear un to do desde en el servidor
-
7 Crear to do: Errores y validaciones
Vamos a aplicar validaciones y mostrar errores al momento de crear un to to.
-
8 Popular listado de todos
Vamos a mostrar el listado de to do de la base de datos.
-
9 Editar un todo
Vamos a actualizar un to do.
-
10 Editar un todo: Mostrar errores
Vamos a aplicar validaciones y mostrar errores al momento de actualizar un to to.
-
11 Eliminar un to do
Vamos a eliminar un to do en la base de datos.
-
12 Marcar completado un to do
Vamos a marcar como completado un to do.
-
13 Eliminar todos los to do
Vamos a eliminar todos los to do.
-
14 Reordenación, instalar plugin y configuración inicial
Vamos a instalar el plugin de Drag and Drop para reordenar los todos
-
15 Revisión al código anterior
-
16 Reordenación, aplicar cambios en el servidor
Vamos a reordenar los to do desde el servidor.
-
17 Cambios finales
-
18 Validaciones
-
19 Publicar en git
Videos Legacy
-
1 2 - Create: Crear un formulario
Vamos a crear el primer formulario.
-
2 2 - Create: Crear una categoría
Vamos a crear el proceso para crear una categoría.
-
3 2 - Usar componentes Vue de Inertia
Vamos a reutilizar componentes existentes para mejorar el diseño de la aplicación.
-
4 2 - ProgressBar
Vamos a conocer el funcionamiento de la barra de progreso.
-
5 9 - Filtrar por rango de fecha
Vamos a crear un filtro por fechas.
-
6 9 - Valores aplicados en los filtros desde el componente en Vue244
Vamos a colocar los valores de los props en el componente de Vue.
Videos generales sobre el desarrollo en Laravel Inertia - Sección Free exclusiva
-
1 Emplear Laravel Inertia o crear una app en Laravel Rest Api Vue React
Te doy MIS motivos de cuando debes de emplear una Rest API o Laravel Inertia y adicionalmente comento la importancia de conocer como funciona la herramienta Inertia para poder aprovecharla y evitar confusiones implementando hibridos Inertia Rest API
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter