Laravel 12 Livewire CRUD Example with Validation

@livewireStyles

And just before the </body> tag, add this:

@livewireScripts

Step 3: Create the Livewire Component

Now we will create a Livewire component that will handle the CRUD operations. Run the following command to create a component:

php artisan make:livewire ProductCrud

This creates two files:

• app/Http/Livewire/ProductCrud.php (the Livewire component)
• resources/views/livewire/product-crud.blade.php (the corresponding view)

Step 4: Create the Product Model and Migration

Next, we will create a Product model and migration file:

php artisan make:model Product -m

This generates a Product model and a migration file in the database/migrations folder. Open the migration file and define the schema for the products table:

public function up()
{
    Schema::create('products', function (Blueprint $table) {
        $table->id();
        $table->string('name');
        $table->decimal('price', 8, 2);
        $table->timestamps();
    });
}

Step 5: Create CRUD Operations in Livewire Component

Now, we will add the CRUD operations inside the ProductCrud.php Livewire component.

Edit app/Http/Livewire/ProductCrud.php:

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Product;
use Livewire\WithFileUploads;

class ProductCrud extends Component
{
    use WithFileUploads;

    public $name, $price, $productId;
    public $isEditMode = false;

    protected $rules = [
        'name' => 'required|string|max:255',
        'price' => 'required|numeric|min:0',
    ];

    public function render()
    {
        return view('livewire.product-crud', [
            'products' => Product::all(),
        ]);
    }

    public function store()
    {
        $this->validate();

        Product::create([
            'name' => $this->name,
            'price' => $this->price,
        ]);

        session()->flash('message', 'Product Created Successfully!');
        $this->reset();
    }

    public function edit($id)
    {
        $this->isEditMode = true;
        $product = Product::find($id);
        $this->productId = $product->id;
        $this->name = $product->name;
        $this->price = $product->price;
    }

    public function update()
    {
        $this->validate();

        $product = Product::find($this->productId);
        $product->update([
            'name' => $this->name,
            'price' => $this->price,
        ]);

        session()->flash('message', 'Product Updated Successfully!');
        $this->reset();
        $this->isEditMode = false;
    }

    public function delete($id)
    {
        Product::find($id)->delete();
        session()->flash('message', 'Product Deleted Successfully!');
    }
}

Step 6: Create the Livewire Component View

Next, we will create the view for the Livewire component in resources/views/livewire/product-crud.blade.php:

<div>
    @if (session()->has('message'))
        <div class="alert alert-success">
            {{ session('message') }}
        </div>
    @endif

    <form wire:submit.prevent="{{ $isEditMode ? 'update' : 'store' }}">
        <div class="form-group">
            <label for="name">Product Name</label>
            <input type="text" wire:model="name" class="form-control" id="name" placeholder="Enter Product Name">
            @error('name') <span class="text-danger">{{ $message }}</span> @enderror
        </div>

        <div class="form-group">
            <label for="price">Product Price</label>
            <input type="text" wire:model="price" class="form-control" id="price" placeholder="Enter Product Price">
            @error('price') <span class="text-danger">{{ $message }}</span> @enderror
        </div>

        <button type="submit" class="btn btn-primary">{{ $isEditMode ? 'Update' : 'Create' }} Product</button>
    </form>

    <hr>

    <h3>Products</h3>
    <table class="table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Price</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach($products as $product)
                <tr>
                    <td>{{ $product->name }}</td>
                    <td>${{ $product->price }}</td>
                    <td>
                        <button wire:click="edit({{ $product->id }})" class="btn btn-warning btn-sm">Edit</button>
                        <button wire:click="delete({{ $product->id }})" class="btn btn-danger btn-sm">Delete</button>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
</div>

Step 7: Add Route and View

Now, you need to add a route to display the Livewire component. Open routes/web.php and add:

use App\Http\Livewire\ProductCrud;

Route::get('/products', ProductCrud::class);

Step 8: Testing the CRUD Operations

To test the CRUD functionality, visit http://your-app.local/products in the browser. You should be able to:

• Create products
• View products in a table
• Edit products
• Delete products

Conclusion

In this tutorial, we have created a simple Livewire CRUD application in Laravel 12, with validation. We used Livewire components to manage the frontend and backend interactions for creating, reading, updating, and deleting products. Validation rules were applied to ensure correct data input, and feedback was displayed to users upon successful or failed operations.

Livewire makes it easy to build dynamic applications without writing much JavaScript, and its seamless integration with Laravel makes it a powerful tool for modern web development.