Laravel 11 Livewire CRUD Example Tutorial

Executing CRUD operations within a Laravel 11 application is straightforward when using the Livewire package. Here’s a step-by-step guide on how to set up a CRUD application with Laravel and Livewire:

Step 1: Generate Migration and Model

Begin by creating a model along with a migration file for handling CRUD operations. Use this command:

php artisan make:model Post -m

Modify the migration file located at database/migrations/posts.php by adding the following schema definition:

Schema::create('posts', function (Blueprint $table) {
    $table->id();
    $table->string('title');
    $table->text('body');
    $table->timestamps();
});

Update the Post model found at app/Models/Post.php to include the fillable property:

protected $fillable = [
    'title', 'body'
];

Step 2: Install Livewire

To include Livewire in your Laravel project, run the following command:

composer require livewire/livewire

Step 3: Generate Livewire Component for CRUD

Create a new Livewire component for CRUD operations using this command:

php artisan make:livewire posts

Step 4: Implement CRUD Logic in Livewire Component

Edit the app/Http/Livewire/Posts.php file to include CRUD functionalities:

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Post;

class Posts extends Component
{
    public $posts, $title, $body, $postId;
    public $isUpdating = false;

    public function render()
    {
        $this->posts = Post::all();
        return view('livewire.posts');
    }

    private function clearInputFields()
    {
        $this->title = '';
        $this->body = '';
    }

    public function create()
    {
        $validatedData = $this->validate([
            'title' => 'required',
            'body' => 'required',
        ]);

        Post::create($validatedData);

        session()->flash('message', 'Post successfully created.');

        $this->clearInputFields();
    }

    public function edit($id)
    {
        $post = Post::findOrFail($id);
        $this->postId = $id;
        $this->title = $post->title;
        $this->body = $post->body;

        $this->isUpdating = true;
    }

    public function cancel()
    {
        $this->isUpdating = false;
        $this->clearInputFields();
    }

    public function update()
    {
        $validatedData = $this->validate([
            'title' => 'required',
            'body' => 'required',
        ]);

        $post = Post::find($this->postId);
        $post->update($validatedData);

        $this->isUpdating = false;

        session()->flash('message', 'Post successfully updated.');
        $this->clearInputFields();
    }

    public function delete($id)
    {
        Post::find($id)->delete();
        session()->flash('message', 'Post successfully deleted.');
    }
}

Update the view for Livewire in resources/views/livewire/posts.blade.php to reflect CRUD operations:

<div>

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

    @if($isUpdating)
        @include('livewire.update')
    @else
        @include('livewire.create')
    @endif

    <table class="table table-bordered mt-5">
        <thead>
            <tr>
                <th>ID</th>
                <th>Title</th>
                <th>Body</th>
                <th width="150px">Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach($posts as $post)
            <tr>
                <td>{{ $post->id }}</td>
                <td>{{ $post->title }}</td>
                <td>{{ $post->body }}</td>
                <td>
                    <button wire:click="edit({{ $post->id }})" class="btn btn-primary btn-sm">Edit</button>
                    <button wire:click="delete({{ $post->id }})" class="btn btn-danger btn-sm">Delete</button>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

Create a view create.blade.php under resources/views/livewire/ for adding new posts:

<form>
    <div class="form-group">
        <label for="title">Title:</label>
        <input type="text" class="form-control" id="title" placeholder="Enter Title" wire:model="title">
        @error('title') <span class="text-danger">{{ $message }}</span> @enderror
    </div>
    <div class="form-group">
        <label for="body">Body:</label>
        <textarea class="form-control" id="body" wire:model="body" placeholder="Enter Body"></textarea>
        @error('body') <span class="text-danger">{{ $message }}</span> @enderror
    </div>
    <button wire:click.prevent="create()" class="btn btn-success">Save</button>
</form>

Create an update.blade.php file under resources/views/livewire/ for updating posts:

<form>
    <input type="hidden" wire:model="postId">
    <div class="form-group">
        <label for="title">Title:</label>
        <input type="text" class="form-control" id="title" placeholder="Enter Title" wire:model="title">
        @error('title') <span class="text-danger">{{ $message }}</span> @enderror
    </div>
    <div class="form-group">
        <label for="body">Body:</label>
        <textarea class="form-control" id="body" wire:model="body" placeholder="Enter Body"></textarea>
        @error('body') <span class="text-danger">{{ $message }}</span> @enderror
    </div>
    <button wire:click.prevent="update()" class="btn btn-dark">Update</button>
    <button wire:click.prevent="cancel()" class="btn btn-danger">Cancel</button>
</form>

Step 5: Embed Livewire Component in Main View

Include the Livewire component in your main view located at resources/views/welcome.blade.php:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 11 Livewire CRUD Application</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    @livewireStyles
</head>
<body>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h2>Laravel 11 Livewire CRUD Example</h2>
                    </div>
                    <div class="card-body">
                        @if (session()->has('message'))
                            <div class="alert alert-success">
                                {{ session('message') }}
                            </div>
                        @endif
                        @livewire('posts')
                    </div>
                </div>
            </div>
        </div>
    </div>
    @livewireScripts
</body>
</html>

Step 6: Run and Test the Application

Start the Laravel development server by running:

php artisan serve

Visit http://localhost:8000/ in your browser to see and test the CRUD functionality.