Livewire : CRUD Tutorial in Laravel

Before we begin, you should have the following installed on your system:

• PHP 7.4 or later
• Laravel 8 or later
• Composer
• Node.js
• NPM

Before we get started, you'll need to make sure you have Laravel installed on your system. You can install Laravel using Composer by running the following command:

composer global require laravel/installer

Once you have Laravel installed, you can create a new Laravel project by running the following command:

laravel new project-name

After the project is created, navigate to the project directory and run the following command to install Livewire:

composer require livewire/livewire

First, we'll create a Product model that we'll use to store our product data. Run the following command to create the model:

php artisan make:model Product -m

The -m option will create a migration file for the model.

Next, open the migration file located in database/migrations and add the following columns to the up method:

$table->id();
$table->string('name');
$table->text('description');
$table->integer('price');
$table->timestamps();

Once you have added the columns, run the migration to create the products table in your database:

php artisan migrate

Next, we'll create a Livewire component that will handle the creation, reading, updating, and deleting of products. Run the following command to create the component:

php artisan make:livewire Products

This will create a Products class in the app/Http/Livewire directory. Open the Products class and add the following code:

namespace AppHttpLivewire;
use LivewireComponent;
use AppModelsProduct;
class Products extends Component
{
public $products, $name, $description, $price, $product_id;
public $isOpen = 0;
public function render()
{
$this->products = Product::all();
return view('livewire.products.index');
}
public function create()
{
$this->resetInputFields();
$this->openModal();
}
public function openModal()
{
$this->isOpen = true;
}
public function closeModal()
{
$this->isOpen = false;
}
private function resetInputFields(){
$this->name = '';
$this->description = '';
$this->price = '';
$this->product_id = '';
}
public function store()
{
$this->validate([
'name' => 'required',
'description' => 'required',
'price' => 'required',
]);
Product::create([
'name' => $this->name,
'description' => $this->description,
'price' => $this->price,
]);
$this->closeModal();
$this->resetInputFields();
}
public function edit($id)
{
$product = Product::findOrFail($id);
$this->product_id = $id;
$this->name = $product->name;
$this->description = $product->description;
$this->price = $product->price;
$this->openModal();
}
public function update()
{
$this->validate([
'name' => 'required',
'description' => 'required',
'price' => 'required',
]);
$product = Product::find($this->product_id);
$product->update([
'name' => $this->name,
'description' => $this->description,
'price' => $this->price,
]);
$this->closeModal();
$this->resetInputFields();
}
public function delete($id)
{
Product::find($id)->delete();
}
}

In this code, we're defining some public properties that we'll use to store data, as well as the render method which will return the Livewire view that we'll create later. We're also using the Product model that we created earlier to retrieve all of the products from the database.

Next, we'll create a Livewire view that will display our products and allow us to add, edit, and delete products. Create a new file called index.blade.php in the resources/views/livewire/products directory, and add the following code:

@if($isOpen)
@include('livewire.products.create')
@endif
Add Product
ID
Name
Description
Price
Action
@foreach($products as $product)
{{ $product->id }}
{{ $product->name }}
{{ $product->description }}
{{ $product->price }}
Edit
Delete
@endforeach

In this code, we're displaying a table of products, with an "Add Product" button that will open a modal dialog when clicked. We're also using Livewire directives to wire up the "Edit" and "Delete" buttons to their respective methods on the Products class.

Finally, we'll create the modal dialog that will allow us to add and edit products. Create a new file called modal.blade.php in the resources/views/livewire/products directory, and add the following code:

##### Add Product
×
Name
@error('name') {{ $message }}@enderror
Description
@error('description') {{ $message }}@enderror
Price
@error('price') {{ $message }}@enderror
Close
Save

This file defines a modal form that is used to create a new product. It includes three input fields for the name, description, and price of the product, along with error messages that will be displayed if the user submits invalid data. It also includes buttons to close the modal and save the new product.

Now that we have the component and views set up, we need to update the routes to point to the Products component. Open the web.php file and update it with the following code: