Curso y Libro primeros pasos con Laravel 11 Livewire 3 + Alpine.js y Tailwind.css - 2025

 

Tambien tengo recursos gratuitos para el Curso en el Blog

Es importante mencionar, que el curso tambien tiene el formato en libro con el 100% del contenido del mismo, es decir, el curso es equivalente al libro.

 

En este curso vas a aprender Laravel Livewire desde cero, hasta conocer sus detalles más importantes; recuerda que debes de saber programar en Laravel para ver este curso.

Laravel es un framework fascinante, inmenso y con una curva de aprendizaje algo elevada y con múltiples opciones; este libro no es para iniciales y da por hecho de que ya sabes programar en Laravel.

Laravel Livewire lleva el desarrollo de Laravel un poco más allá; automatizando procesos rutinarios en esquemas muy flexibles en base a componentes, los componentes de Livewire que nos permite comunicar cliente y servidor de una manera muy simple, eficiente y sencilla.

Laravel Livewire no es un framework, es solamente una capa o scaffolding que agrega ciertas características extras al framework que podemos utilizar para crear grandes aplicaciones, con menos esfuerzo y tiempo de desarrollo.

 

 

¿Qué es Laravel Livewire?

Livewire es un scaffolding para Laravel, el cual no es más que un esqueleto o capa que agregan ciertas funcionalidades extras en Laravel mediante el uso de componentes de Livewire; los mismos componentes de Laravel básico, pero con añadidos muy interesantes que son los que conforman a Livewire.

Además de esto, un proyecto en Livewire ya nos trae configurados Tailwind.css y Alpine.js

Con todo estos conocimientos podrás emplearlos para crear tus propias aplicaciones en Flutter.

¿Qué nos ofrece Livewire?

Crear aplicaciones web modernas es difícil, herramientas como Vue y React son extremadamente poderosas, pero la complejidad que agregan al flujo de trabajo de un desarrollador de pila completa es una locura.

Pensando en lo anterior, Laravel Livewire es un marco completo para Laravel que simplifica la creación de interfaces dinámicas, sin dejar la comodidad de Laravel; en pocas palabras nos permite usar esquemas similares a los de Vue y React directamente en Laravel.

Podemos trabajar con esquemas similares a los de Laravel y Vue, pero de una manera más directa y simple; el desarrollo de Laravel está fuertemente ligado al uso de componentes; los mismos componentes de Laravel pero con agregados importante de Laravel Livewire lo que permite escalar enormemente el uso de componentes:

  1. Vincular mediante el archivo de rutas.
  2. Comunicación sencilla basada en acciones, eventos y funciones entre el cliente y el servidor.
  3. Agrega funcionalidades como paginación, carga de archivos, query string entre otras.

En definitiva, con Livewire, podemos hacer lo mismo que hacemos con Laravel y sus controladores, pero de una manera más sencilla en la cual podemos usar los componentes y reutilizar piezas de código que nos ofrece Livewire para hacer una comunicación muy sencilla entre el servidor con el cliente.

Aparte de que, dependiendo como decidas instalar a Laravel Livewire, puedes habilitar opciones que ya vienen de gratis como:

  1. Sistema de autenticación con registro, recuperación de credenciales.
  2. Vista de perfil con carga de usuario.
  3. Manejo de roles mediante equipos.
  4. Manejo de la API Tokens mediante Laravel Breeze con una interfaz administrable.

En definitiva, Livewire no es un framework, lo puedes ver como un paquete más que agrega funcionalidades extras a algunos elementos de Laravel que en definitiva lo convierten en un scaffolding o esqueleto para nuestras aplicaciones.

Para esta tecnología, tenemos que emplear dos documentaciones aparte (sin contar con la de Laravel).

La que nos ofrece la estructura del proyecto:

https://jetstream.laravel.com/2.x/stacks/livewire.html

Y la que nos ofrece Laravel Livewire al momento de desarrollar:

https://laravel-livewire.com/

 

 

Prólogo

Laravel es un framework fascinante, inmenso y con una curva de aprendizaje algo elevada y con múltiples opciones; este libro no es para iniciales y da por hecho de que ya sabes programar en Laravel.

Laravel Livewire lleva el desarrollo de Laravel un poco más allá; automatizando procesos rutinarios en esquemas muy flexibles en base a componentes, los componentes de Livewire que nos permite comunicar cliente y servidor de una manera muy simple, eficiente y sencilla.

Laravel Livewire no es un framework, es solamente una capa o scaffolding que agrega ciertas características extras al framework que podemos utilizar para crear grandes aplicaciones, con menos esfuerzo y tiempo de desarrollo.
 

Para quien es este libro

Este curso está dirigido a cualquiera que quiera comenzar a desarrollar con Laravel Livewire en el desarrollo de aplicaciones basadas en componentes de Laravel con algunos agregados que permiten la comunicación directa entre el servidor y el cliente.

  • Este curso no se recomienda a aquellas personas que no hayan trabajado con otros Laravel, si es tu caso, te aconsejo que primero conozcas y practiques con Laravel antes de comenzar; en mi sitio web encontrarás cursos, libros, publicaciones, vídeos y en general más información sobre Laravel.
  • Para aquellas personas que quieran aprender algo nuevo, conocer sobre una herramienta con poca documentación y la mayoría de ella está en inglés.
  • Para las personas que quieran mejorar una habilidad en el desarrollo web, que quieran crecer como desarrollador.
  • Con que te identifiques al menos con alguno de los puntos señalados anteriormente, este libro es para ti.

 

 

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 con Livewire

  • 1 Introducción

  • 2 ¿Qué es Laravel Livewire?

  • 3 Windows y MacOS: Crear un proyecto con el instalador de Laravel y Laragon/Herd

    Vamos a crear un proyecto Laravel Livewire en entorno Windows (MacOS).

  • 4 Características de un proyecto Livewire

    Vamos a presentar que es lo que tenemos en detalle, el proyecto, sus características y cómo funciona.

Conociendo los componentes

  • 1 Creas las migraciones

    ​Vamos a crear las migraciones para el proyecto.​

  • 2 Crear los modelos

    Vamos a crear los modelos.

  • 3 Crear los componentes

    Vamos a crear los componentes iniciales.

  • 4 Configurar las rutas

    ​Vamos a crear las rutas para las categorías.​

  • 5 Corregir error view not found: [components.layouts.app]

    Veremos como solucionar el error anterior en caso de que te ocurra.

  • 6 Corrección en las rutas

  • 7 Save: Crear una categoría

    ​Vamos a crear el proceso para crear una categoría.​

  • 8 Atributos wire:x

    ​Vamos a presentar otros atributos que tenemos disponibles.​

  • 9 Save: Aplicar validaciones

    ​Vamos a realizar validaciones del lado del servidor y mostrar las mismas en la vista.​

  • 10 Mostrar errores de formulario

    Vamos a mostrar los errores de formulario.

  • 11 Pruebas con componentes .live

    ​Vamos a realizar algunas pruebas para entender cómo Livewire mantiene actualizado su estado.​

  • 12 Ciclo de vida de un componente

    ​Explicaremos el ciclo de vida de los componentes de Livewire.​

  • 13 Save: Actualizar una categoría

    Trabajaremos en el apartado de actualizar un registro existente

  • 14 Index: Crear listado básico

    ​Vamos a crear un componente de listado.​

  • 15 Index: Listado paginado

    ​Vamos a adaptar la paginación.​

  • 16 Index: Eliminar

    ​Vamos a eliminar una categoría mediante un botón.​

  • 17 Index: Eliminar con diálogo de confirmación

    ​Vamos a crear un diálogo de confirmación para eliminar.​

  • 18 Mensajes de confirmación

    ​Vamos a mostrar un componente para mostrar información sobre las operaciones CRUDs.​

  • 19 Carga de imagen

    Vamos a hacer el upload de una imagen

  • 20 Mostrar imagen

    Vamos a mostrar la imagen por pantalla cargada

  • 21 Publicar en github

    Código fuente del capítulo: https://github.com/libredesarrollo/book-course-laravel-livewire/releases/tag/v0.1

Componentes y estilos

  • 1 Presentación

    ​Vamos a presentar el uso de componentes para reutilizar en nuestro propios componentes.​t

  • 2 Formulario

    Vamos a adaptar el diseño del formulario con el componente de Livewire.​<br /> ​

  • 3 Carta

    ​Vamos a crear un componente de carta.​

  • 4 Header del layout

    ​Vamos a definir el header para el layout.​

  • 5 Container

    ​Vamos a crear un contenedor.​

  • 6 Diálogo de alerta para eliminar: Componente de confirmación

    ​Vamos a trabajar en un componente de alerta.​

  • 7 Mensaje de acción realizada

    Vamos a hacer un box para los diálogos de confirmación.

  • 8 Menú: Modo PC

    Vamos a colocar la opción para el menú.

  • 9 Menú: Modo Móvil

    ​Vamos a colocar la opción para el menú.​

  • 10 Menú: Componente Dropdown (Modo PC) Responsive

    ​Vamos a crear el menú para los CRUD de tipo Dropdown.​

  • 11 Menú: Mover menú Dropdown

    Vamos a mover el menú anterior del lado izquierdo al derecho del navbar.

  • 12 Enlace para crear una categoría

    Vamos a crear la opción para crear el enlace para la categoría.

  • 13 Publicar en github

    Código fuente del capítulo: https://github.com/libredesarrollo/book-course-laravel-livewire/releases/tag/v0.2

Componentes comunicar: Formulario paso por paso

  • 1 Introducción

    Introduccion de la seccion

  • 2 Presentación

  • 3 Crear migraciones principales

    Vamos a crear las migraciones para los formularios.

  • 4 Crear componentes principales

    Vamos a crear los componentes de Livewire para los formularios.

  • 5 Crear modelos principales

    Vamos a crear los modelos.

  • 6 Crear formulario general

    Vamos a crear el formulario para crear el contacto general.

  • 7 Validaciones a nivel de propiedad

    Vamos a aplicar las validaciones mediante atributos

  • 8 Tarea: Crear formulario persona

    Vamos a crear el formulario para crear el contacto por persona.

  • 9 Tarea: Crear formulario empresa

    Vamos a crear el formulario para crear el contacto por empresa.

  • 10 Tarea: Crear formulario detalle

    Vamos a crear el formulario para crear el contacto por detalle.

  • 11 Lógica inicial del formulario paso por paso

    Vamos a crear los condicionales para manejar un paso o el otro.

  • 12 Directiva @livewire para renderizar componentes

    Vamos a aprender a renderizar componentes de Livewire desde un archivo blade.

  • 13 Eventos: Comunicación de los componentes hijos al componente padre

    Vamos a conocer la comunicación entre componentes.

  • 14 Crear layout base

    Vamos a crear el layout base para la sección de contacto.

  • 15 Crear componente de los step

    Vamos a crear el diseño para mostrar el paso actual.

  • 16 Alpine JS y Livewire

    Vamos a dar una introducción a Alpine y su importancia con Livewire.

  • 17 Objeto $wire

    Vamos a conocer el objeto $wire para trabajar desde el bloque de script en Livewire.

  • 18 Enviar el id del contacto general a los componentes hijos

    Vamos a definir el PK del componente padre (general) y se lo pasamos a los hijos.

  • 19 Habilitar la actualización

    Vamos a realizar el proceso para guardar los comentarios en la base de datos.

  • 20 Habilitar el guardado

    Vamos a habilitar el proceso de actualización.

  • 21 Varios cambios

    Hablaremos sobre los eventos padre a hijos y el uso de propiedades en los componentes

  • 22 Regresar a los pasos anteriores

    Vamos a crear el botón para paso atrás.

  • 23 Actualizar contacto general existente

    Vamos a crear una ruta para poder actualizar el formulario desde el paso general.

  • 24 Redireccionar al crear el contacto general

    Vamos a implementar una redirección a editar al momento de crear un formulario general

  • 25 Detalles finales

    Pequeños detalles de CSS.

  • 26 Publicar en github

    Código fuente del capítulo: https://github.com/libredesarrollo/book-course-laravel-livewire/releases/tag/v0.3

Práctica: Crear CRUD para los Post

  • 1 Introducción

  • 2 Post Save: Crear formulario de creación y actualizaci n

    Vamos a crear el proceso de crear y actualizar

  • 3 Post Index: Crear listado

    Vamos a crear el listado de los posts y la opción de eliminar

  • 4 Publicar en github

    Código fuente del capítulo: https://github.com/libredesarrollo/book-course-laravel-livewire/releases/tag/v0.4

Filtros y campos de búsqueda

  • 1 Introducción

  • 2 Seeders para los post

    Vamos a crear seeders para generar datos de pruebas para los posts

  • 3 Cambios en la tabla

    Aplicaremos algunos cambios a la tabla

  • 4 Filtros: Controlador

    Vamos a crear la opción de los filtros para los seleccionables

  • 5 Filtros: HTML

    Crearemos los campos HTML y aplicaremos el filtro.

  • 6 Campo de búsqueda

    Vamos a crear un campo de búsqueda para varios campos.

  • 7 Filtrar por rango de fecha

    Vamos a crear un filtro por fechas.

  • 8 Query String: Parámetros en la URL

    Vamos a implementar el queryString de los filtros y campo de búsqueda.

  • 9 Publicar en github

    Código fuente del capítulo: https://github.com/libredesarrollo/book-course-laravel-livewire/releases/tag/v0.5

  • 10 Extra: new Post

    Vamos a ver una demostración de empleando new Post en vez de una consulta con el where.

  • 11 Extra: cláusulas condicionales con el when

    Vamos a reemplazar el filtro actual con el uso de los when.

Ordenación

  • 1 Introducción

  • 2 Presentación

  • 3 Ordenación por definición de columnas

    Vamos a crear la estructura para la ordenación de las columnas del listado.

  • 4 trait: Extender el esquema de ordenación a otros componentes

    Vamos a crear reutilizable el componente de ordenación.

  • 5 Publicar en github

    Código fuente del capítulo: https://github.com/libredesarrollo/book-course-laravel-livewire/releases/tag/v0.6

  • 6 Extra: Limpiar filtro

    Vamos a crear un enlace para limpiar el filtro.

JavaScript en Livewire

  • 1 Introducción

  • 2 Introducción al JS de Livewire

  • 3 Hooks en JavaScript

    Vamos a presentar el uso de los hooks en JavaScript.

  • 4 CKeditor: Configuración y descarga

    Vamos a conocer el plugin y obtenerlo.

  • 5 CKeditor Node: Instalación inicial

  • 6 CKeditor: wire:ignore

    Vamos a evitar que el CKEditor se vea afectado por las actualizaciones de Livewire.

  • 7 Ckeditor: Detectar cambios al escribir

    Vamos a conocer como obtener el HTML generado por CKEditor y un evento para los cambios.

  • 8 Ckeditor: Registrar cambios en una propiedad de Livewire

    Vamos a registrar el HTML generado en el CKEditor en una propiedad.

  • 9 Ckeditor: Establecer contenido inicial

    Vamos a establecer el contenido por defecto al CKEditor.

  • 10 Ckeditor: Aplicar CSS al editor

    Vamos a aplicar un CSS al editor para que que se distinga los elementos Hx y listados.

  • 11 Node y JavaScript de Livewire

    Vamos a hablar de si podemos usar Node con el JavaScript de Livewire.

  • 12 Publicar en github

    Código fuente del capítulo: https://github.com/libredesarrollo/book-course-laravel-livewire/releases/tag/v0.7

Propiedades en Livewire

  • 1 Introducción

  • 2 Opciones en las propiedades wire:model

    Hablaremos sobre algunas propiedades antiguas para diferir la actualización de las propiedades desde la vista.

  • 3 Propiedades computadas

    Vamos a presentar las propiedades computadas.

  • 4 Otros datos sobre las propiedades

    Vamos a conocer otras características de las propiedades

  • 5 Publicar en github

    Código fuente del capítulo: https://github.com/libredesarrollo/book-course-laravel-livewire/releases/tag/v0.8

Blog: Listado y detalle de post

  • 1 Introducción

  • 2 Cambios iniciales

  • 3 Página de listado: Estructura inicial

    Vamos a crear el esqueleto de la app.

  • 4 Página de listado: Diseño

    amos a trabajar en el diseño de la página de listado.

  • 5 Layout

    Vamos a crear y configurar un layout para el módulo de blog.

  • 6 Página de detalle

    Vamos a crear la página de detalle.

  • 7 Botón de navegación

    Vamos a crear el botón de navegación.

  • 8 Colocar formulario paso por paso en detalle

    Vamos a colocar el formulario paso por paso en el detalle del post.

  • 9 Publicar en github

    Código fuente del capítulo: https://github.com/libredesarrollo/book-course-laravel-livewire/releases/tag/v0.9

Carrito de compras

  • 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 componente y estructura inicial de un ítem del carrito.

  • 4 CRUD en sesión: Agregar un producto

    Vamos a implementar la opción de agregar un producto al carrito.

  • 5 CRUD en sesión: Eliminar un producto

    Vamos a implementar la opción de eliminar un producto al carrito.

  • 6 Formulario para agregar un producto

    Vamos a crear un formulario para poder agregar post de tipo publicidad.

  • 7 Formulario para agregar un producto: Eventos

    Vamos a corregir la implementación en el uso de los eventos.

  • 8 Implementación hasta entonces

  • 9 Crear migración y modelo

    Vamos a crear la estructura para trabajar con la base de datos.

  • 10 Registrar cambios en la base de datos

    Vamos a guardar la sesión del carrito en la base de datos.

  • 11 Replicar de la base de datos a la sesión en el login

    Vamos a escuchar cuando ocurre el login y replicar en la sesión el carrito.

  • 12 Demo: Listener login mediante módulo aparte

    Vamos a conocer como implementar un listener mediante comandos de artisan.

  • 13 Plugin de mensajes toast

    Vamos a instalar y configurar un plugin de toast.

  • 14 Definir y escuchar eventos personalizados de Livewire

    Vamos a escuchar los eventos desde el ítem del carrito desde JS.

  • 15 Correcciones y actualizar cantidades del ítem en el carrito

    Voy a mostrarte los cambios realizados para reparar el error que aparecía al momento de agregar el item y de modificar cantidades.

  • 16 Calcular total de ítems

    Vamos a calcular el total de elementos en el carrito.

  • 17 Mostrar carrito con el total

    Vamos a mostrar el total en una vista y crear el botón de carrito mostrando el total.

  • 18 Publicar en github

    Código fuente del capítulo: https://github.com/libredesarrollo/book-course-laravel-livewire/releases/tag/v0.10

Alpine JS: Introducción

  • 1 Introducción

  • 2 Introducción a Alpine.js

    Vamos a hablar un poco sobre el framework.

  • 3 Livewire y Alpine

    Vamos a comparar ambos frameworks.

  • 4 Preparar un proyecto

    Vamos a crear un proyecto para trabajar con Alpine.

  • 5 Mostrar contenido HTML con variables reactivas: x-data, click y x-show

    Vamos a conocer el esquema básico, con un componente para mostrar u ocultar bajo demanda.

  • 6 Campos de textos y variables: x-model y x-text

    Vamos a mapear una variable a un campo de texto.

  • 7 Atributos: x-bind

    Vamos a presentar el bind de atributos.

  • 8 Atributos: clases

    Vamos a mostrar el bind de clases.

  • 9 Atributos: style

    Vamos a trabajar con el atributo de estilos.

  • 10 Ciclos: x-for

    Vamos a conocer el uso del for.

  • 11 Condicionales: x-if

    Vamos a conocer el uso del condicional.

  • 12 Ciclo for con objetos y condicionales

    Ejemplo en donde empleamos los objetos y con condicionales.

  • 13 Bloque de script

    Vamos a organizar el código anterior en un bloque de script.

  • 14 x-ref

    Conoceremos cómo crear una referencia a cualquier elemento HTML.

  • 15 Aplicación de todo: Listado

    Vamos a crear el listado para los TODO.

  • 16 Aplicación de todo: Búsqueda

    Vamos a crear una aplicación tipo TODO, primero, el campo de búsqueda.

  • 17 Aplicación de todo: Crear Todos

    Vamos a crear todos.

  • 18 Marcar todo completada

    Vamos a realizar la opción marcar una tarea como completada.

  • 19 Eliminar todo

    Vamos a realizar la opción de eliminar un todo.

  • 20 Borrar todos los todos

    Vamos a realizar la opción de borrar todos los todos.

  • 21 Modificar un todo

    Vamos a realizar la opción de modificar un todo.

  • 22 Configurar Bootstrap 5

    Vamos a adaptar el estilo de B5 en la app.

  • 23 Extra: Guardar de manera persistente

  • 24 Sortable: Ordenable

    Vamos a instalar y configurar un plugin para hacer ordenable el listado.

Aplicación de To Do con Livewire y Alpine

  • 1 Introducción

  • 2 Adaptar la app de Todo de Alpine en Livewire

    Vamos a clonar el proyecto de Alpine en Livewire.

  • 3 Crear migración y modelo

    Vamos a crear el modelo  y migración de los to do.

  • 4 Crear to do desde Livewire

    Vamos a crear un to do desde Livewire y la clase componente.

  • 5 Popular listado de todos desde Livewire

    Vamos a mostrar el listado de to do desde la base de datos en Alpine.

  • 6 Reordenación: Actualizar arrays en el cliente y servidor

    Vamos a presentar un esquema de ordenación el clásico de construir el array desde cero.

  • 7 Reordenación: Actualizar en la base de datos con un evento

    Vamos a guardar los to do en la base de datos.

  • 8 $wire.get $wire.entangle

  • 9 Eliminar un to do

    Vamos a eliminar un to do en la base de datos.

  • 10 Eliminar todos los to do

    Vamos a eliminar todos los to do.

  • 11 Editar un todo

    Vamos a actualizar un to do.

  • 12 Marcar completado un to do

    Vamos a marcar como completado un to do.

  • 13 Sincronizar Array de Todos en la creación

    Vamos a arreglar el problema de sincronizar el listado al momento de crear.

  • 14 Reparar error en el drag and drop

    Vamos a reparar un error que cuando reordenamos se dispara el evento de update sobre el todo.

  • 15 Extra: Reordenacion de los to do por axios

    Vamos a hablar sobre la reordenacion mediante una petici n en axios

  • 16 Múltiples instancias de alpine

    Vamos a hablar sobre la instancia doble de Alpine.

  • 17 Migrar de Bootstrap a Tailwind

    Vamos a migrar la app de Bootstrap a Tailwind.

  • 18 Publicar en github

    Código fuente del capítulo: https://github.com/libredesarrollo/book-course-laravel-livewire/releases/tag/v0.11

Pruebas

  • 1 Repaso

    Presentamos conceptos claves e importancias de las pruebas.

  • 2 Pruebas en Livewire

    Daremos una introducción a las pruebas específicas para Laravel Livewire presentando sus métodos de aserción principales.

  • 3 Creando la primera prueba

    Vamos a crear la primera PHPUnit para la aplicación.

  • 4 Primeros pasos

    Hablaremos sobre elementos importantes que tenemos que tener en cuenta para implementar la prueba.

  • 5 Pruebas en Livewire

    Daremos una introducción a las pruebas específicas para Laravel Livewire presentando sus métodos de aserción principales.

  • 6 De Laravel a Livewire

    Vamos a conocer el método de aserción de Livewire.

  • 7 Blog: Prueba para el detalle

    Crearemos la prueba para el detalle de un post en el blog.

  • 8 Dashboard: Prueba para listado

    Prueba para el dashboard del listado.

  • 9 Autenticación

    Vamos a autenticar un usuario para los módulos protegidos por autenticación.

  • 10 Dashboard, Categoría: Prueba para crear, GET

    Prueba para el formulario de creación de una categoría.

  • 11 Configurar base de datos

    Vamos a configurar una base de datos de prueba.

  • 12 Factories y adaptar pruebas anteriores

    Vamos a crear unos factories para generar datos de prueba.

  • 13 Dashboard: Prueba para crear la categoría

    Vamos a crear la prueba para crear una categoría.

  • 14 Tarea Dashboard Prueba para editar categor a

    Tarea Dashboard Prueba para editar categor a

  • 15 Dashboard: Prueba para eliminar categoría

    Vamos a crear la prueba para eliminar una categoría.

  • 16 Dashboard: Pruebas para el Post

    Crearemos las pruebas para el post, partiendo de las pruebas de las categorías.

  • 17 Dashboard: Pruebas para el Post, aserciones adicionales

    Vamos a implementar algunos métodos de aserciones adicionales.

  • 18 Paso por Paso: Primer paso, Get

    Vamos a crear las pruebas para el primer paso del formulario paso por paso, el get.

  • 19 Paso por Paso: Primer paso, enviar petición

    Vamos a crear las pruebas para el primer paso del formulario paso por paso, el post.

  • 20 Paso por Paso: Segundo paso, Company, Get

    Vamos a crear las pruebas para el segundo paso del formulario paso por paso, el get.

  • 21 Implementar Factories para los pasos

    Implementamos los facades de los pasos por pasos.

  • 22 Paso por Paso: Segundo paso, Company, enviar petición

    Vamos a crear las pruebas para el segundo paso del formulario paso por paso, enviar el evento.

  • 23 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 enviar petición.

  • 24 Paso por Paso: Tercer paso, Detail

    Vamos a crear las pruebas para el tercer paso del formulario paso por paso, GET y enviar petición.

  • 25 assertDispatched para Step

    Presentamos un nuevo método de aserción para evaluar parámetros de los eventos despachados.

  • 26 Paso por Paso: Primer paso, Editar

    Vamos a crear las pruebas para el primer paso del formulario paso por paso, para editar.

  • 27 Paso por Paso: Segundo paso, Editar, Company

    Vamos a crear las pruebas para el segundo paso, el de company del formulario paso por paso, editar en Get.

Primeros pasos con Livewire - Laravel 9/10

  • 1 Introducción

  • 2 Mac y Linux: Crear un proyecto con el instalador de Laravel y Sail

    Vamos a crear un proyecto en Laravel.

  • 3 Mac y Linux: Ejecutar el proyecto son Laravel Sail y Docker

    Vamos a preparar todo para poder usar Sail con Docker para nuestro proyecto.

  • 4 Windows: Crear un proyecto con el instalador de Laravel y Laragon

    Vamos a crear un proyecto Laravel Livewire en entorno Windows.

  • 5 Crear un proyecto en Laravel Sail, desde un proyecto base

    Vamos a crear un proyecto en Livewire partiendo de un proyecto base de Laravel.

  • 6 Crear un proyecto en git

    Vamos a subir el proyecto a git.

  • 7 Características de un proyecto Livewire

    Vamos a presentar que es lo que tenemos en detalle, el proyecto, sus características y cómo funciona.

Conociendo los componentes - Laravel 9/10

  • 1 Introducción

  • 2 Creas las migraciones

    Vamos a crear las migraciones para el proyecto.

  • 3 Crear los componentes

    Vamos a crear los componentes iniciales.

  • 4 Configurar las rutas

    Vamos a crear las rutas para las categorías.

  • 5 Crear los modelos

    Vamos a crear los modelos.

  • 6 Save: Crear una categoría

    Vamos a crear el proceso para crear una categoría.

  • 7 Pantallas de errores

    Vamos a conocer la pantalla de errores de Livewire.

  • 8 Atributos wire:x

    Vamos a presentar otros atributos que tenemos disponibles.

  • 9 Más pruebas con Livewire

    Vamos a realizar pruebas con Livewire.

  • 10 Save: Aplicar validaciones

    Vamos a realizar validaciones del lado del servidor y mostrar las mismas en la vista.

  • 11 Usar componentes de Livewire corrección

  • 12 Usar componentes de Livewire

    Vamos a usar los componentes de Livewire del lado de nuestro componente.

  • 13 Ciclo de vida de un componente

    Explicaremos el ciclo de vida de los componentes de Livewire.

  • 14 Save: Actualizar una categoría

    Trabajaremos en el apartado de actualizar un registro existente.

  • 15 Index: Crear listado básico

    Vamos a crear un componente de listado.

  • 16 Index: Listado paginado

    Vamos a adaptar la paginación.

  • 17 Index: Eliminar

    Vamos a eliminar una categoría mediante un botón.

  • 18 Index: Eliminar con diálogo de confirmación

    Vamos a crear un diálogo de confirmación para eliminar.

  • 19 Diálogo de Mensaje

    Vamos a mostrar un componente para mostrar información sobre las operaciones CRUDs.

  • 20 Carga de imagen

    Vamos a hacer el upload de una imagen.

  • 21 Publicar en git

Componentes y estilos - Laravel 9/10

  • 1 Introducción

  • 2 Formulario

    Vamos a adaptar el diseño del formulario con el componente de Livewire.

  • 3 Carta

    Vamos a crear un componente de carta.

  • 4 Header del layout

    Vamos a definir el header para el layout.

  • 5 Container

    Vamos a crear un contenedor.

  • 6 Tabla

    Vamos a mejorar la presencia de la tabla.

  • 7 Diálogo de alerta para eliminar: Componente de confirmación

    Vamos a trabajar en un componente de alerta.

  • 8 Mensaje de acción realizada

    Vamos a hacer un box para los diálogos de confirmación.

  • 9 Menú: Componente Dropdown (Modo PC)

    Vamos a colocar la opción para el menú.

  • 10 Ajuste del menú anterior

    Vamos a realizar un pequeño cambio en el menú anterior.

  • 11 Menú: Componente Dropdown (Modo Móvil)

    Vamos a crear el menú para el modo móvil.

  • 12 Enlace para crear una categoría

    Vamos a crear la opción para crear el enlace para la categoría.

  • 13 Publicar en git

Componentes comunicar: Formulario paso por paso - Laravel 9/10

  • 1 Introducción

  • 2 Crear migraciones principales

    Vamos a crear las migraciones para los formularios.

  • 3 Crear componentes principales

    Vamos a crear los componentes de Livewire para los formularios

  • 4 Crear modelos principales

    Vamos a crear los modelos.

  • 5 Crear formulario general

    Vamos a crear el formulario para crear el contacto general.

  • 6 Tarea: Crear formulario persona

    Vamos a crear el formulario para crear el contacto por persona.

  • 7 Probar relaciones generales y personas

    Vamos a probar la relación entre general y persona y su inversa.

  • 8 Tarea: Crear formulario empresa

    Vamos a crear el formulario para crear el contacto por empresa.

  • 9 Probar relaciones generales y empresas

    Vamos a probar la relación entre general y empresa y su inversa.

  • 10 Tarea: Crear formulario detalle

    Vamos a crear el formulario para crear el contacto por detalle.

  • 11 Probar relaciones generales y detalles

    Vamos a probar la relación entre general y detalle y su inversa.

  • 12 Lógica inicial del formulario paso por paso

    Vamos a crear los condicionales para manejar un paso o el otro.

  • 13 Directiva @livewire para renderizar componentes

    Vamos a aprender a renderizar componentes de Livewire desde un archivo blade.

  • 14 Eventos: Comunicación de los componentes hijos al componente padre

    Vamos a conocer la comunicación entre componentes.

  • 15 Crear layout base

    Vamos a crear el layout base para la sección de contacto.

  • 16 Definir step en clases

    Vamos a pasar el diseño a clases.

  • 17 Objeto $wire

    Vamos a conocer el objeto $wire para trabajar desde el bloque de script en Livewire.

  • 18 Demo: evento click con $wire

    Vamos a realizar una demostración del evento click en Alpine.js y su uso con Livewire.

  • 19 Regresar a los pasos anteriores

    Vamos a crear el botón para paso atrás.

  • 20 Enviar el id del contacto general a los componentes hijos

    Vamos a definir el PK del componente padre (general) y se lo pasamos a los hijos.

  • 21 Habilitar el guardado

    Vamos a realizar el proceso para guardar los comentarios en la base de datos.

  • 22 Habilitar la actualización

    Vamos a habilitar el proceso de actualización.

  • 23 Detalles finales

    Pequeños detalles de CSS.

  • 24 Publicar en git

    Publicar en git

Práctica: Crear CRUD para los Post - Laravel 9/10

  • 1 Introducción

  • 2 Post/Save: Crear formulario de creación y actualización

    Vamos a crear el proceso de crear y actualizar.

  • 3 Post/Index: Crear listado

    Vamos a crear el listado de los posts y la opción de eliminar.

  • 4 Publicar en git

Filtros y campos de búsqueda - Laravel 9/10

  • 1 Introducción

  • 2 Seeders para los post

  • 3 Filtros

    Vamos a crear la opción de los filtros para los seleccionables.

  • 4 Campo de búsqueda

    Vamos a crear un campo de búsqueda para varios campos.

  • 5 Query String

    Vamos a implementar el queryString de los filtros y campo de búsqueda.

  • 6 Filtrar por rango de fecha

    Vamos a crear un filtro por fechas.

  • 7 Publicar en git

Ordenación - Laravel 9/10

  • 1 Introducción

  • 2 Ordenación manual

    Vamos a crear el esquema para la ordenación.

  • 3 Ordenación por definición de columnas

    Vamos a crear la estructura para la ordenación de las columnas del listado.

  • 4 Acomodar CSS de las columnas, recomendaciones

    Vamos a acomodar unos aspectos de alineación de los th en la columna.

  • 5 trait: Extender el esquema de ordenación a otros componentes

    Vamos a crear reutilizable el componente de ordenación.

  • 6 Tarea: Replicar ordenación para las categorías

    Vamos a replicar el esquema de ordenación para las categorías.

  • 7 Publicar en git

JavaScript en Livewire - Laravel 9/10

  • 1 Introducción

  • 2 Hooks en JavaScript

    Vamos a presentar el uso de los hooks en JavaScript.

  • 3 Extender Livewire con plugins de JavaScript, CKeditor

    Vamos a instalar y configurar CKEditor.

  • 4 Comunicación inversa: De la propiedad a CKEditor

    Vamos a realizar la actualización desde la propiedad a CKEditor.

  • 5 Otras funciones de Livewire en JavaScript

    Vamos a conocer otras funciones de JavaScript útiles para el desarrollo.

  • 6 Node y JavaScript de Livewire

    Vamos a hablar de si podemos usar Node con el JavaScript de Livewire.

  • 7 Publicar en git

Propiedades en Livewire - Laravel 9/10

  • 1 Introducción

  • 2 Personalizar la actualización de las propiedades en el wire:model

    Vamos a trabajar con las propiedades del lado del wire:model para diferir las actualizaciones al servidor.

  • 3 Propiedades computadas

    Vamos a presentar las propiedades computadas.

  • 4 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 Página de listado: Diseño

    Vamos a trabajar en el diseño de la página de listado.

  • 4 Layout

    Vamos a crear y configurar un layout para el módulo de blog.

  • 5 Página de listado: Reducir tamaño y alineado

    Vamos a realizar un acomodo extra.

  • 6 Página de detalle

    Vamos a crear la página de detalle.

  • 7 Botón de navegación

    Vamos a crear el botón de navegación.

  • 8 Colocar formulario paso por paso en detalle

    Vamos a colocar el formulario paso por paso en el detalle del post.

  • 9 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 implementar la opción de agregar un producto al carrito.

  • 4 Agregar un producto

    Vamos a implementar la opción de agregar un producto al carrito.

  • 5 Gestión del ítem

    Vamos a crear la gestión del ítem.

  • 6 Detalles finales

    Vamos a definir los detalles finales del carrito de compras.

  • 7 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: Eventos y mensajes - Laravel 9/10

  • 1 Introducción

  • 2 Plugin de mensajes toast

    Vamos a instalar y configurar un plugin de toast.

  • 3 Escuchar eventos en Livewire JavaScript

    Vamos a escuchar los eventos desde el ítem del carrito desde JS.

  • 4 Múltiples escuchadores

    Vamos a escuchar en varios lugares los eventos.

  • 5 Publicar en git

Carrito de compras: Total de items - Laravel 9/10

  • 1 Introducción

  • 2 Calcular total

    Vamos a calcular el total de elementos en el carrito.

  • 3 Issue o Bug

  • 4 Mostrar carrito con el total

    Vamos a mostrar el total en una vista y crear el botón de carrito mostrando el total.

  • 5 Publicar en git

Extra: Alpine JS, Introducción - Laravel 9/10

  • 1 Introducción a Alpine.js

    Vamos a hablar un poco sobre el framework.

  • 2 Livewire y Alpine

    Vamos a comparar ambos frameworks.

  • 3 Preparar un proyecto

    Vamos a crear un proyecto para trabajar con Alpine.

  • 4 Mostrar contenido HTML con variables reactivas: x-data, click y x-show

    Vamos a conocer el esquema básico, con un componente para mostrar u ocultar bajo demanda.

  • 5 Campos de textos y variables: x-model y x-text

    Vamos a mapear una variable a un campo de texto.

  • 6 Atributos: x-bind

    Vamos a presentar el bind de atributos.

  • 7 Atributos: múltiples valores

    Vamos a trabajar con múltiples valores para los atributos.

  • 8 Atributos: style

    Vamos a trabajar con el atributo de estilos.

  • 9 Ciclos y condicionales: x-for y x-if

    Vamos a conocer el uso del for y condicional.

  • 10 Bloque de script

    Vamos a organizar el código anterior en un bloque de script.

  • 11 Introducción

    Introducción

  • 12 Aplicación de todo: Búsqueda

    Vamos a crear una aplicación tipo TODO, primero, el campo de búsqueda.

  • 13 Aplicación de todo: Crear Todos

    Vamos a crear todos.

  • 14 Marcar todo completada

    Vamos a realizar la opción marcar una tarea como completada.

  • 15 Eliminar todo

    Vamos a realizar la opción de eliminar un todo.

  • 16 Borrar todos los todos

    Vamos a realizar la opción de borrar todos los todos.

  • 17 Modificar un todo

    Vamos a realizar la opción de modificar un todo.

  • 18 Configurar Bootstrap 5

    Vamos a adaptar el estilo de B5 en la app.

  • 19 Extra: Guardar de manera persistente

    Extra: Guardar de manera persistente

  • 20 Publicar en git

  • 21 Atributo ref

Alpine y plugins externos: Sortable - Laravel 9/10

  • 1 Introducción

  • 2 Sortable: Ordenable

    Vamos a instalar y configurar un plugin para hacer ordenable el listado.

  • 3 Publicar en git

Aplicación de TODO con Livewire y Alpine - Laravel 9/10

  • 1 Introducción

  • 2 Adaptar la app de Todo de Alpine en Livewire

    Vamos a clonar el proyecto de Alpine en Livewire.

  • 3 Crear migración y modelo

    Vamos a crear el modelo y migración de los to do.

  • 4 Crear to do desde Livewire

    Vamos a crear un to do desde Livewire y la clase componente.

  • 5 Popular listado de todos desde Livewire

    Vamos a mostrar el listado de to do desde la base de datos en Alpine.

  • 6 Reordenación: Actualizar arrays en el cliente y servidor

    Vamos a presentar un esquema de ordenación el clásico de construir el array desde cero.

  • 7 Reordenación: Actualizar en la base de datos con un evento

    Vamos a guardar los to do en la base de datos.

  • 8 Reordenación: Segundo esquema, splice

    Vamos a presentar un esquema de ordenación, el de quitar y colocar el todo.

  • 9 Bug en Livewire y Alpine parte 1

    Hablaremos sobre un bug actualmente.

  • 10 Reordenación: Tercer esquema, solo IDs

    Vamos a presentar un esquema de ordenación.

  • 11 Bug en Livewire y Alpine parte 2

    Seguiremos hablando del bug.

  • 12 Eliminar un to do

    Vamos a eliminar un to do en la base de datos.

  • 13 Editar un todo

    Vamos a actualizar un to do.

  • 14 Marcar completado un to do

    Vamos a marcar como completado un to do.

  • 15 Eliminar todos los to do

    Vamos a eliminar todos los to do.

  • 16 Extra: Reordenación de los to do por axios

    Vamos a realizar la reordenación mediante una petición en axios.

  • 17 Publicar en git

Migrar de Bootstrap a Tailwind - Laravel 9/10

  • 1 Introducción

  • 2 Migrar HTML

    Vamos a convertir el contenido de Bootstrap 5 a Tailwind.css.

  • 3 Publicar en git

Alpine JS: Otras características - Laravel 9/10

  • 1 Introducción

  • 2 x-ignore, ignorar un bloque de HTML

    Veremos cómo ignorar un bloque de HTML.

  • 3 x-teleport, transportar un template

    Veremos cómo copiar el contenido de un componente en otra parte del DOM.

  • 4 x-effect, observar cambios en variables

    Veremos cómo detectar cambios en variables.

  • 5 $watch, observar propiedades

    Veremos cómo crear un observable.

  • 6 x-html, renderizar variables con HTML

    Veremos cómo imprimir contenido HTML.

  • 7 $id, crea IDs dinámicos y organizados

    Veremos cómo generar IDs dinámicos.

  • 8 $el, referencia al elemento

    Veremos cómo referenciar un elemento como si fuera un selector.

  • 9 $store, almacenar datos de manera global

    Veremos cómo almacenar datos en el store.

  • 10 $nextTick, Script luego de aplicar cambios en el DOM

    Veremos cómo verificar si los cambios fueron realizados por Alpine en el DOM.

  • 11 $dispatch, eventos personalizados

    Vamos a conocer como manejar eventos personalizados.

  • 12 $root, acceder atributos en el root

    Vamos a conocer como acceder a atributos del root del componente.

  • 13 Plugin, máscaras

    Vamos a conocer un nuevo plugin para manejar la máscara de los inputs.

  • 14 Publicar en git

Proyectos en Alpine.js con Tailwind.css - Laravel 9/10

  • 1 Cart Api Rest

    Presentación

  • 2 Cards Api: Estructura inicial

    Crearemos el listado de usuarios.

  • 3 Cards Api: Tailwind

    Aplicaremos el estilo con Tailwind.css.

  • 4 Cards Api: Búsqueda

    Vamos a crear un campo de búsqueda para las cartas.

  • 5 Cards Api: Variar cantidad de cartas, estructura

    Vamos a crear la estrVamos a crear la parte funcional para variar las cantidades.uctura básica para variar las cantidades.

  • 6 Cards Api: Hover

    Vamos a crear un efecto hover.

  • 7 Cards Api: Variar cantidad de cartas, script

    Vamos a crear la parte funcional para variar las cantidades.

  • 8 Cards Api: Loading

  • 9 Cards Api: Deshabilitar input range

    Vamos a deshabilitar el input de tipo rango al momento de realizar una petición.

  • 10 Accordion: Estructura inicial

    Vamos a crear un nuevo componente, el cuerpo básico.

  • 11 Acordeón

  • 12 Accordion: Animación

    Vamos a desplegar y contraer el acordeón de manera animada.

Videos generales sobre el desarrollo en Laravel Livewire - Sección Free exclusiva

  • 1 Eliminar caracteres y HTML de CKEditor Laravel Livewire

  • 2 Eliminar caracteres y HTML de CKEditor + Laravel Livewire

    Te voy a dar mi experiencia en un problema que tiene CKEditor que genera HTML innecesario y como eliminarlo.

- Andrés Cruz

Laravel Livewire Alpine.js PHP tailwind CSS
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 4d 10:59!

Udemy

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
¡Hazte afiliado en Gumroad!
© 2024 Copyright | Contacto | Acerca de | Versión PC