Laravel Livewire Course Process to create CRUD
Lets start showing the potential of the components in Livewire The first thing were going to do is create the component in our CRUDs always keeping in mind the comparison with the controllers in basic Laravel
Minimal implementation to create a record
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,
]
);
}
}
This is all the code we need to create a category its very clean just an extra function which can have any name that creates a category with the properties defined above in this case we are not passing the content and image since they are optional and the idea is to show a minimal implementation
And its view
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>A basic or typical form that shouldnt be surprising but with two changes to consider
- The wiresubmitprevent that allows you to intercept and stop a submit request by the browser and invoke a method a method that we dont have defined in our PHP view this function name will invoke the function that is in the Livewire component class that is from a clientside view we can invoke a serverside function based on HTML events without having to use ajax fetch axios or similar Livewire already takes care of this process for us
- The wiremodel that are similar to Vues vmodel but using Livewire and that is following the previous scheme indicating the name of the properties of the component class we can reference them from here from a view
All these features are free when using the magic attribute called wire, along with some of the many options we can use; finally, from the form, we pass some data and hit send.
Video Transcript
As always we are going to start with our CRUD always starting with the creation phase which would be the category one which would be simpler and then we replicate it for the tags and the publications So at this point you have to be able to come here dashboard category create and be able to see This nice blank page according to what we did in the previous classes then How is the process to create really is very simple it does not have much of a difference from what we do in Laravel but even though it is like that we have several differences especially the part you could say of the view since here the creation part itself is simply this Although here notice that we have some differences which is precisely How the Data is handled since what would be the basic abel would be directly from the request here it is not like that as you can see here we declare a couple of properties in this case based on the fields that we are going to create title and text and here we reference them we will see where we fill them we create the category and that would be practically everything and well here we manipulate the Data a little to generate the slot based on the title So if we review here what we do On the Blade view side notice that we have a form
Here things change quite a bit and that is why I comment that if you already know how to work in Vue which would be Laravel Inertia it would be the easiest way to get into these stacks but if you do not know Vue I consider that this is simpler so here we also have a slightly different syntax notice that we do not have a method to send the request to a route that we did not configure By the way again we do not configure a route to receive the data via post as you can see they are all via get since the data is going to be passed via an event a Livewire event and in this case to use this event we put wire and from here the name of the event which can be a clit event but in this case as who says by convention since it is a form we use this one You can see that it is a very similar syntax at this point to what we have in javascript for example View where we place the submit event and point pren to prevent the normal operation of the form and to be sent through the HTML API when we click on the submit button then what this does is precisely prevent that sending of the of the form through the html API since all this is handled by Livewire then here notice that we use a syntax also similar to what would be Vue and similar frameworks such as re in which we place model in the case of View it would be a bmel And in this case it would be a wire model but its operation is similar in which we have a full duplex communication between what would be the declared properties that this if you know vi again you can see it as if it were the Script block in which we declare the Data and what would be the template block which in this case is our Blade in which we use these attributes or these properties that we define here Then the changes that we make here will be automatically reflected here and vice versa well in this case we will do that later but what we are doing is that we are changing are the attributes well sorry properties that we have here defined at the class level the title and the text So when we fill it out and we hit send here in a few words by having that duality that or rather that full duplex communication as it exists in View we will have here the title that we have written Here then you can see a little of whats new in all this Were going to see exactly how all this works and here Ill explain a little of what Ive said so you can pause the video and you can read it in case you didnt understand any of the previous explanations And thats all then Lets go
Implementation
Here we are going to start by making the form I am going to place the form here I am going to remove all of this because it does not have to be here We place wire and the event that we want to use at the moment we only know the submit point prevent and here we place I did not tell you just now in the explanation a name This name is the name of a method that has to be defined here Note that I placed submit by convention and it is where we are going to receive the Data It can have any other name but well it is the name that I like to put here When we are going to receive a form I place submit I remove this and here we do anything I am going to place a dd of true here to see what we do
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>So in order to send this form just like in HTML we put a submit button and here Im going to put it for example and were going to see what happens with this simple exercise that we did here By the way I recommend that you have your developer console open so that you can see whats happening and here I activate the Network Im going to reload I think I have a lot of zoom there they are and Im going to give it a no Look here appears the message that we configured and here it tells you the comment in the component on line 15 which would be exactly the Debug that I left here on line 15 So now you can see that direct communication Look what it does internally is send a request here Remember that a request of type 500 appears when we use Debug If I put an echo here for example notice that it already appears as a 200 type and if we enter it here you can see all this Its a packaging that it has and somewhere what is the Data appears Although right now I cant find it but the Data is around there So well I think it appears with the return so there you can see a little the operation That is the first part a direct communication you could say at least direct for us since usually to do this we would have to make a request via axios fetch or a similar API in this case we have it directly when using Livewire So now we are going to do something a little more useful or learn about another feature that again is not only this direct communication but also being able to use these properties as if they were B models to have full duplex communication again with full duplex communication I mean changes made here are reflected here and the changes made here are reflected here to the properties here I put public which has to be by the way public properties title and in this case they would be a reference to the fields that we are going to manage for the categories So as it is a property Remember that you have to reference those above with a tias and here the name for example title well you know that here the parenthesis is not necessary but here we are going to create or we are going to consume that in quotes here I put title Notice that nothing appears because it is empty here I could initialize it and here you will see that the text appears then you can see that there is no need or rather you do not have to pass anything through the compat or similar thing that you could do if you are going to handle them here directly But initially with this it would not be necessary since for these primitives you can clarify them as properties that is to say if you are following a Boolean or String integer you can clarify it like that but if it were an object It is not allowed and we will see this later when we work with pagination so well here you can see a little bit at least the communication between what would be the server with the client to continue a little bit with the exercise here I am going to put for example this equal to Hello we save I am going to reload I give an s here above I did not put anything to see I already deleted it and Well right now we do not see Nothing here we have to do something else but we will see that later to see here I have an error lets see what happened here
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,
]
);
}
}Okay well continue with this exercise later were going to get down to business because if not were not going to finish here Were going to create the label here Im going to put title here Im going to put a War model type input in this case again instead of bmel Ill put title here which is the name of the property and here the same thing but with the text for now at least Im going to handle it with a text type input since this would be for longer content so we save it here Note that it automatically references the value that we have here so you can see that when we go to create the edit one its very simple Well here were going to remove this were going to see something here I give anything and here Note that it doesnt appear Im going to put a dd here this is better since the wait is a return there and here you can see it it takes the changes that Im passing to it so there you can see the communication and therefore what we do with this data is up to us In this case were going to create a category to close this video in the traditional way and here we go back a little to what we did when we created the edit one Its Laravel basics So now you know a couple of key features in inertia
On the one hand what is the use of events except for the first one we saw and on the other hand what is this communication at least for the moment in a single direction as you can see we are creating a category based on these properties that we have defined here So here we have the title now Im going with the slot in which Im going to use the method here the str help function to convert it to an object that can be manipulated and with this I can do some operations use the rest of the help functions for the texts and with this specifically this one that allows us to generate a slot well Ive used this many times in the same way I summarize it
Remember that you can search here for slot helper Laravel and there you will find more information but what it does is convert this text for example this with capital letters and so on to a clean URL or a slot that would be something like the following
So those are the first steps that we have to see and at this point I hope you have completed the exercise and you see right here at least your created category of course you can click here again and it will create another one I am going to change the content here to have at least two and here the other category will appear of course it takes a little while sometimes to reload this visual it has some problems or I dont know how to reload it I close it and open it again and here you will see the next category created so with this we finish this class lets go to the next class
- Andrés Cruz
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter