Curso primeros pasos con Laravel Inertia + Vue.js y Tailwind.css

- Andrés Cruz

Curso primeros pasos con Laravel Inertia + Vue.js y Tailwind.css

Precio mínimo:

$8.0

Condiciones:

  • Todo el curso de por vida y descarga individual
  • Un único pago para todo el curso
  • Actualizaciones más frecuentes que en Udemy para agregar más y más clases al curso.
  • Contacto por mensajes

El curso actualizado en udemy:

Precio mínimo:

$9.9

Hasta el --/--

Condiciones:

  • Todo el curso de por vida
  • Un único pago para todo el curso
  • Actualizaciones frecuentes para agregar más y más clases al curso.
  • Contacto por mensajes

El curso Legacy en udemy lo puedes encontrar aqui:

Precio mínimo:

$9.9

Hasta el --/--

Condiciones:

  • Todo el curso de por vida
  • Un único pago para todo el curso
  • Actualizaciones frecuentes para agregar más y más clases al curso.
  • Contacto por mensajes

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:

  • 2 Primeros pasos con Inertia

    En este primer capítulo nos enfocaremos en mencionar el ecosistema empleado para Windows, Mac y Linux, crearemos el proyecto en Laravel Inertia, conoceremos su estructura, que trae cada módulo principal del scaffolding y conoceremos qué estructura trae por defecto.

    CRUD Categorías
    CRUD Categorías
  • 3 Redirecciones y mensajes tipo flash

    Otro elemento fundamental que debemos conocer, es el uso de redirecciones para poder recargar los componentes de Vue en la vista, también el uso de mensajes de tipo flash, que al usar en la vista un cliente como Vue en vez de blade, perdemos este tipo de integraciones que vienen desde Laravel básico y en su lugar usamos la funcionalidad para compartir datos de Inertia.

    • Práctica: Crear CRUD para los Post.
    • En este apartado, vamos a crear un CRUD para los post, poniendo en práctica parte de los conocimientos que aprendimos en secciones anteriores.
    • Formulario paso por paso.
  • 4 Práctica: Crear CRUD para los Post

    En este apartado, vamos a crear un CRUD para los post, poniendo en práctica parte de los conocimientos que aprendimos en secciones anteriores, en este apartado, incluiremos plugins de terceros como CKEditor.

    CRUD post
    CRUD post
  • 5 Formulario paso por paso

    En este apartado, vamos a crear un formulario paso por paso empleando las características de Inertia; aprenderemos a:

    • Incluir componentes de Inertia (Vue) dentro de componentes.
    • Manejo de eventos en Vue.
    • Comunicar componentes.
    • Registrar eventos.
    • Usar la funcionalidad para compartir datos desde los controladores.
    Formulario paso por paso
    Formulario paso por paso
  • 6 Definir filtros y campo de búsqueda

      En este capítulo vamos a usar la combinación de eventos de Vue con peticiones para realizar la búsqueda y filtrado.

    • Manejo de eventos en Vue.
    • Comunicar componentes.
    • Registrar eventos.
    • Definir campos de ordenación para las tablas.
    • Trabajar en definir la ordenación para las columnas bajo demanda del usuario de manera ascendente o descendente, en la práctica, el usuario podrá escoger si ordenar por el id, título y demás columnas.
    Filtros y campo de busqueda
    Filtros y campo de busqueda
  • 7 Carrito de compras

    Siguiendo con la creación de pequeños proyecto para la aplicación y poniendo en práctica y conociendo variaciones sobre el uso de eventos, comunicación entre componentes y componentes padres e hijos, entre otras lógicas aplicadas, vamos a crear un carrito de compras para las publicaciones de tipo publicidad.

    También en varias secciones, vamos a extender el componente de shopping cart para replicar en la base de datos, comunicación vía mensajes para mostrar actualizaciones y definir un botón para mostrar el total de ítems en el carrito.

  • Extra: Introducción a Vue

    Al ser Vue una tecnología imprescindible, traemos la introducción a Vue que forma parte de mi curso gratuito sobre Vue que está disponible en YouTube.

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

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy

Acepto recibir anuncios de interes sobre este Blog.

!Cursos desde!

10$

En Udemy

Quedan 3d 16:38!


Udemy

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
¡Hazte afiliado en Gumroad!