Curso Laravel Livewire - Proceso para crear - CRUD
Vamos a empezar a mostrar los potenciales de los componentes en Livewire; lo primero que vamos a hacer es el componente para crear en nuestros CRUDs, siempre teniendo presente, la comparación con los controladores en Laravel básico.
Implementación mínima para crear un registro:
app/Http/Livewire/Dashboard/Category/Save.php
<?php
namespace App\Http\Livewire\Dashboard\Category;
use App\Models\Category;
use Livewire\Component;
class Save extends Component
{
public $title;
public $text;
public function render()
{
return view('livewire.dashboard.category.save');
}
public function submit()
{
Category::create(
[
'title' => $this->title,
'slug' => str($this->title)->slug(),
'text' => $this->text,
]
);
}
}
Esto es todo el código que necesitamos para crear una categoría; es muy limpio; apenas una función extra, que puede tener cualquier nombre, que crea una categoría con las propiedades definidas anteriormente; en este caso, no le estamos pasando el contenido e imagen, ya que son opcionales y la idea es mostrar una implementación mínima.
Y su vista:
resources/views/livewire/dashboard/category/save.blade.php
<div>
<form wire:submit.prevent='submit'>
<label for="">Title</label>
<input type="text" wire:model='title'>
<label for="">Text</label>
<input type="text" wire:model='text'>
<button type="submit">Send</button>
</form>
</div>Un formulario básico o típico que no debe de causar mayor asombro, pero con dos cambios a considerar:
- El wire:submit.prevent que permite interceptar y detener una petición submit por el navegador e invocar un método, un método que no tenemos definido en nuestra vista PHP; este nombre de la función va a invocar a la función que se encuentra en la clase componente de Livewire; es decir, desde una vista del lado del cliente, podemos invocar en base a eventos HTML a una función del lado del servidor sin necesidad de usar ajax, fetch, axios o similares; ya Livewire se encarga de este proceso por nosotros.
- El wire:model que son similares a los v-model de Vue, pero usando Livewire; y es que, siguiendo el esquema anterior, indicando el nombre de las propiedades de la clase componente, podemos referenciarlos desde aquí, desde una vista.
Todas estas características las tenemos de gratis al emplear el atributo mágico llamado wire, junto con alguna opción de las muchas que podemos usar; finalmente, sí desde el formulario, pasamos algunos datos y damos a enviar.
Transcripción del vídeo
Al igual que siempre, ya vamos a comenzar con nuestro CRUD comenzando siempre por la fase de creación que sería la de categoría que sería más sencillo y luego lo replicamos para el de etiquetas y el de publicaciones Entonces en este punto tienes que poder venir aquí dashboard categoría create y poder ver Esta bonita página en blanco según lo que hicimos en las anteriores clases entonces Cómo es el proceso para para crear realmente es muy sencillo no tiene mucho de diferente a lo que hacemos en laravel pero por más que sea así tenemos varias diferencias sobre todo la parte se podría decir de la vista ya que aquí la parte en sí de creación Es simplemente esto Aunque por aquí fíjate que tenemos algunas diferencias que es precisamente Cómo se maneja la Data ya que lo que sería el ábel básico sería directamente desde el request aquí no es así tal cual puedes ver aquí declaramos un par de propiedades en en este caso en base a los campos que vamos a crear título y texto y por aquí los referenciamos ya vamos a ver dónde los llenamos lo creamos la categoría y eso sería prácticamente todo y bueno aquí manipulamos un poquito la Data para generar el slot en base al título Entonces si revisamos aquí qué es lo que hacemos del lado de la vista de Blade fíjate que tenemos un formulario.
Ya por aquí cambia bastante la cosa y es por eso que comento de que si ya tú sabes es cómo trabajar en Vue lo que sería laravel inertia sería la forma más sencilla de adentrarte en estos en estos stack pero si no conoces Vue Considero que esta es más sencilla entonces aquí también tenemos una sintaxis ligeramente distinta, fíjate que no tenemos un método para enviar la petición a una ruta que no configuramos Por cierto otra vez no configuramos una ruta para recibir los datos vía post tal cual puedes ver todas son vía get ya que los datos se van a pasar vía un evento un evento del Livewire y en este caso para emplear este evento colocamos wire Y a partir de aquí el nombre del evento que puede ser un evento clit pero en este caso como quien dice por convención ya que es un formulario empleamos este este puedes ver que es una sintaxis muy similar en este punto a lo que tenemos en javascript por ejemplo View que colocamos el evento submit y punto pren para prevenir el funcionamiento normal del formulario y que se envíe mediante de El API html cuando damos click al botón de submit entonces lo que hace esto es prevenir precisamente ese envío del del formulario mediante el API de html ya que todo esto es manejado por Livewire entonces por aquí fíjate que empleamos una sintaxis también similar a lo que sería Vue y framework similares como re en la cual colocamos model en el caso de View sería un bmel Y en este caso sería un wire model pero su funcionamiento es similar en la cual tenemos una comunicación full duplex entre lo que sería las propiedades declaradas que esto si otra vez conoces vi lo puedes ver como si fuera el bloque de Script en la cual declaramos la Data y lo que sería el bloque del template que en este caso es nuestro Blade en la cual utilizamos estos atributos o estas propiedades que definimos acá Entonces los cambios que hagamos por aquí se van a reflejar automáticamente por acá y viceversa bueno en este caso ya eso lo hacemos más adelante pero lo que estamos haciendo es que estamos cambiando son los atributos bueno perdón propiedades que tenemos aquí definidas a nivel de la clase el título y el texto Entonces cuando lo llenemos y le demos aquí enviar en pocas palabras al tener esa dualidad que o mejor dicho esa comunicación full duplex como existe en View vamos a tener aquí el título que hayamos escrito por acá entonces ahí puedes verle un poco lo novedoso todo esto ya vamos a ver exactamente cómo funciona todo esto y por aquí te explico un poco lo comentado entonces puedes pausar el video y puedes leerlo en caso de que no me hayas entendido alguna de las explicaciones anteriores Y esto es todo entonces Vamos allá
Implementación
Por aquí vamos a comenzar haciendo el formulario voy a colocar aquí formulario todo esto lo voy a quitar porque no tiene que estar aquí colocamos wire y el evento que queramos emplear de momento solamente conocemos el de submit punto prevent, y por aquí colocamos que no te lo dije ahorita en la explicación un nombre este nombre es el nombre de un método que tiene que estar aquí definido Que fíjate que le coloqué por convención submit y es donde vamos a recibir la Data puede tener cualquier otro nombre pero bueno es el nombre que me gusta colocarle aquí cuando vamos a recibir un formulario coloco submit quito esto y por aquí hacemos cualquier cosa voy a colocar aquí un dd de true para ver qué es lo que hacemos:
resources/views/livewire/dashboard/category/save.blade.php
<div>
<form wire:submit.prevent='submit'>
<label for="">Title</label>
<input type="text" wire:model='title'>
<label for="">Text</label>
<input type="text" wire:model='text'>
<button type="submit">Send</button>
</form>
</div>Entonces para poder enviar este formulario al igual que en html colocamos un button de tipo submit y aquí voy a colocar por ejemplo y vamos a ver qué pasa con este sencillo ejercicio que hicimos aquí por cierto te recomiendo que tengas abierta tu consola de desarrolladores para que vayas viendo qué va pasando y por aquí activo el Red voy a recargar creo que tengo mucho zoom ahí están y voy a darle aquí un sin fíjate que por aquí aparece el mensaje que configuramos y aquí te lo dice el comentario en el componente de la línea 15 que sería justamente el Debug que dejé por aquí en la línea 15 entonces ya puedes ver esa comunicación directa y Fíjate lo que hace internamente es enviar una petición aquí Recuerda que aparece una petición de tipo 500 cuando utilizamos el Debug si coloco aquí un ecoo por ejemplo Fíjate que ya aparece de tipo 200 y si entramos en ella aquí puedes ver todo esto es un empaquetado que tiene y en alguna parte aparece lo que es la Data Aunque ahorita no la encuentro pero por ahí está la Data entonces Bueno creo que aparece con el retorno entonces ahí puedes ver un poco el funcionamiento Esa es la primera parte una comunicación directa se pudiera decir al menos directa para nosotros ya que usualmente para hacer esto tuviéramos que hacer una petición vía axios fetch o una API similar en este caso la tenemos directa al emplear Livewire Entonces ahora vamos a hacer algo un poco más útil o conocer otra característica que otra vez no es solamente esta comunicación directa sino también poder emplear estas propiedades como si fueran B models para tener una comunicación full duplex otra vez con comunicación full duplex me refiero a cambio realizados acá se reflejan por aquí y los cambios realizados por aquí se reflejan por acá a las propiedades por aquí coloco public que tiene que ser por por cierto propiedades públicas title y en este caso serían referente a los campos que vamos a administrar para las categorías Entonces como es una propiedad Recuerda que tienes que referenciar las de arriba con un tias y por aquí el nombre por ejemplo title bueno sabes que aquí el paréntesis no hace falta pero por aquí vamos a crear o vamos a consumir ese entre comillas por aquí coloco title Fíjate que no aparece nada porque está vacío por aquí lo pudiera inicializar y por aquí vas a ver que aparece el texto entonces puedes ver que no hay necesidad o mejor dicho no tienes que pasarle nada mediante el compat o similar cosa que pudieras hacer si vas a manejarlos aquí directamente Pero inicialmente con esto no sería necesario ya que para estas primitivas puedes aclararlas como propiedades es decir si está siguiendo un entero Boolean o String lo puedes aclarar así pero si fuera un objeto No es permitido ya esto lo vemos más adelante cuando trabajemos con la paginación entonces bueno por aquí ya puedes ver un poquito al menos la comunicación entre lo que sería el servidor con el cliente para seguir un poquito con el ejercicio por aquí voy a colocar por ejemplo esto igual a Hola guardamos voy a recargar doy un s aquí arriba no coloqué nada para ver ya lo borré y Bueno ahorita no vemos Nada aquí tenemos que hacer otra cosita pero ya eso lo vemos luego para ver aquí tengo un error a ver qué pasó aquí.
app/Http/Livewire/Dashboard/Category/Save.php
<?php
namespace App\Http\Livewire\Dashboard\Category;
use App\Models\Category;
use Livewire\Component;
class Save extends Component
{
public $title;
public $text;
public function render()
{
return view('livewire.dashboard.category.save');
}
public function submit()
{
Category::create(
[
'title' => $this->title,
'slug' => str($this->title)->slug(),
'text' => $this->text,
]
);
}
}Bueno este ejercicio lo Seguimos más adelante vamos a ir al rollo porque si no no vamos a terminar por aquí vamos a crear el lbel por aquí voy a colocar title por aquí voy a colocar un input de tipo War model en este caso otra vez en vez de bmel coloco aquí title que es el nombre de de la propiedad y por aquí lo mismo pero con el text de momento al menos voy a manejarlo también con un input de tipo texto ya que este Sería para contenido más largo entonces guardamos aquí Fíjate que ya automáticamente referencia el valor que le tenemos por acá entonces puedes ver que cuando vayamos a crear el de editar es muy sencillo bien por aquí vamos a quitar esto vamos a ver algo aquí Cualquier cosa doy y por aquí Fíjate que no aparece voy a colocar aquí un dd esto mejor ya que le esper es un retorno ahí y aquí lo puedes ver toma los cambios que le estoy pasando entonces ahí puedes ver la comunicación y por lo tanto qué es lo que hacemos con esta Data ya depende de nosotros En este caso vamos a crear una categoría para ya cerrar con este video de la manera tradicional y aquí volvemos un poquito a lo que es Laravel básico Entonces ya con esto conoces un par de características claves en inercia:
Por una parte lo que es el uso de los eventos menos el primero que vimos y por otra parte lo que es esta comunicación al menos de momento en una sola dirección tal cual puedes apreciar que estamos creando una categoría en base a estas propiedades que tenemos aquí definidas Entonces ya aquí tenemos el título voy ahora con el slot en el cual voy a emplear aquí el método la función de ayuda de str para convertirlo a un objeto que pueda ser manipulable y con esto ya pueda hacer algunas operaciones emplear el resto de las funciones de ayuda para los textos y con esto específicamente esta que nos permite generar un slot bueno esto ya lo he empleado muchas veces de igual manera lo resumen:
Recuerda que puedes buscar aquí es slot helper Laravel y por ahí vas a encontrar más información pero lo que hace es convertir este texto por ejemplo esto así con mayúsculas y demás a una URL limpia o un slot que sería algo como lo siguiente.
entonces Esos son los primeros pasos que tenemos que ver y en este punto espero que hayas completado el ejercicio y veas justamente por aquí al menos tu categoría creada por supuesto puedes darle aquí otra vez un click y te va a crear otra voy a cambiar aquí el contenido para tener al menos dos y por aquí va a aparecer la otra categoría claro tarda un poquito a veces en recargar este visual tiene algunos problemas o no sé cómo recargarlo yo lo cierro y lo abro otra vez y por aquí vas a ver la siguiente categoría creada así que ya con esto terminamos esta clase vamos para la siguiente clase.
- Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter