Laravel 9 Livewire CRUD Application Tutorial Example

by

Throughtout this Laravel 9 Livewire CRUD example tutorial, we will learn step by step on how to buide CRUD application operation with bootstrap UI and search funcationality in the Laravel application using Livewire package.

This tutorial will guide you from scratch about step by step how to implement CRUD operation using the help of the livewire package in the laravel application. You can use livewire CRUD Example in laravel 6, laravel 7, laravel 8 and laravel 9 apps.

Laravel Livewire CRUD Operation Example

This quick and simple tutorial offers you a facile example of a CRUD operation using bootstrap UI design in laravel app with livewire library.

Use to the following steps to implement pagination example with search funcationality in laravel 9 app with livewire:

  • Step 1: Install Laravel App
  • Step 2: Connect App to Database
  • Step 3: Create Model & Migration
  • Step 4: Install Livewire Package
  • Step 5: Create Post Component
  • Step 6: Make Routes
  • Step 7: Create Blade file and Render
  • Step 8: Run Development Server

Install Laravel App

First run the following command in terminal to install laravel fresh app for laravel livewire pagination with search example app.

composer create-project --prefer-dist laravel/laravel laravel-livewire

Go into the app:

cd laravel-livewire

Configure Database Credentials

Open the .env file and add your database credentials such as database name, username equally important password:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db name
DB_USERNAME=db user name
DB_PASSWORD=db password

Create Model & Migration

Now generate model and migration file just adding the below command in your terminal which is generate a model file and migration which will show your database table after running the migration command.

php artisan make:model Post -m

Now you can see in your database migration directory created a new file same as below, here you need to add you database columns.

database\migrations\2020_09_13_071913_create_projects_table.php

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title')->nullable();
            $table->longText('description')->nullable();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

After adding the columns now run the below command which is generate table in your database.

php artisan migrate

Add Fillable Property: In your app/models inside generated a new file Post.php file where you need to add fillable properties.

app\Models\Post.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    use HasFactory;

    protected $fillable = [
      'title', 'description'
    ];
}

Install Livewire Package

In this step, we need to install livewire package to laravel project using the following command:

composer require livewire/livewire

Create Post Component for Laravel Livewire CRUD Operation

Go to console run the artisan command to create the livewire components for laravel livewire CRUD operation:

php artisan make:livewire posts

The above command generated two files on the following path:

app/Http/Livewire/Post.php
resources/views/livewire/posts.blade.php

Go ahead and place the below code in the app/Http/Livewire/Post.php file:

<?php
  
namespace App\Http\Livewire;
  
use Livewire\Component;
use App\Post;
  
class Posts extends Component
{
    public $posts, $title, $description, $post_id;
    public $updateMode = false;
   
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    public function render()
    {
        $this->posts = Post::all();
        return view('livewire.posts');
    }
  
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    private function resetInputFields(){
        $this->title = '';
        $this->description = '';
    }
   
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    public function store()
    {
        $validatedDate = $this->validate([
            'title' => 'required',
            'description' => 'required',
        ]);
  
        Post::create($validatedDate);
  
        session()->flash('message', 'Post Created Successfully.');
  
        $this->resetInputFields();
    }
  
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    public function edit($id)
    {
        $post = Post::findOrFail($id);
        $this->post_id = $id;
        $this->title = $post->title;
        $this->description = $post->description;
  
        $this->updateMode = true;
    }
  
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    public function cancel()
    {
        $this->updateMode = false;
        $this->resetInputFields();
    }
  
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    public function update()
    {
        $validatedDate = $this->validate([
            'title' => 'required',
            'description' => 'required',
        ]);
  
        $post = Post::find($this->post_id);
        $post->update([
            'title' => $this->title,
            'description' => $this->description,
        ]);
  
        $this->updateMode = false;
  
        session()->flash('message', 'Post Updated Successfully.');
        $this->resetInputFields();
    }
   
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    public function delete($id)
    {
        Post::find($id)->delete();
        session()->flash('message', 'Post Deleted Successfully.');
    }
}

Next, open posts.blade.php, which is located inside resources/views/livewire/ directory and add the following code into it:

<div>
    @if($updateMode)
        @include('livewire.update')
    @else
        @include('livewire.create')
    @endif
    <table class="table table-bordered mt-5">
        <thead>
            <tr>
                <th>No.</th>
                <th>Title</th>
                <th>Description</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            @foreach($posts as $value)
            <tr>
                <td>{{ $value->id }}</td>
                <td>{{ $value->title }}</td>
                <td>{{ $value->description }}</td>
                <td>
                <button wire:click="edit({{ $value->id }})" class="btn btn-primary btn-sm">Edit</button>
                <button wire:click="delete({{ $value->id }})" class="btn btn-danger btn-sm">Delete</button>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

Make Routes

Open routes/web.php file and define the route to access the laravel livewire post crud view file:

use App\Http\Livewire\Posts;
Route::get('posts', Posts::class);

Create Blade Views & Render

Go to resources/views/livewire directory and create the following blade views:

  • Create.blade.php
  • Update.blade.php

Then add the following code into this files:

First open the Create.blade.php file and put the below code on it:

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

Next, open Update.blade.php file and sequencelly update the following code inside;

<form>
    <div class="form-group">
        <input type="hidden" wire:model="post_id">
        <label for="exampleFormControlInput1">Title</label>
        <input type="text" class="form-control" wire:model="title" id="exampleFormControlInput1" placeholder="Enter Title">
        @error('title') <span class="text-danger">{{ $message }}</span>@enderror
    </div>
    <div class="form-group">
        <label for="exampleFormControlInput2">Description</label>
        <input type="text" class="form-control" wire:model="description" id="exampleFormControlInput2" placeholder="Enter Description">
        @error('description') <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>

In last open the welcome.blade.php file and update the below code on it;

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Livewire CRUD Example- codingdriver.com</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/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 Livewire CRUD Example - codingdriver.com</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>

Start Development Server

Execute the following command on the command prompt to start the development server for laravel 9 livewire crud app:

php artisan serve

Last, open browser and fire the following url into browser:

http://127.0.0.1:8000/posts

The Laravel Livewire CRUD operation Example Tutorial is over; in this tutorial, we learned the easiest way to buid CRUD operation example in laravel application using the livewire library.