Laravel 9 Livewire Crud Example

In this tutorial you will learn about the Laravel 9 Livewire Crud Example and its application with practical example.

In this Laravel 9 Livewire Crud Example tutorial I will show you how to create simple CRUD Application using livewire in laravel 9. In this tutorial, you will learn to create a simple CRUD (Create, Read, Update and Delete) application with livewire in Laravel 9. In this Laravel 9 CRUD example tutorial I’ll show you how to create a simple crud application using livewire in laravel 9. In this example we will learn how to create a simple crud operation application in laravel 9. In this article, you will learn how to create fully functional CRUD (Create, Read, Update and Delete) application using livewire in laravel 9.

Table Of Contents−

Laravel 9 Livewire Crud Example

In this step by step tutorial I will demonstrate you with example to create livewire crud in laravel 9 application. Please follow the instruction given below:

Install Laravel 9

Configuring Database
Create Post Model & Migration
Create Routes

Installing Livewire Package
Build Livewire Components
Create Blade Views

Start Development Server
Run This App On Browser

Install Laravel 9

First of all we need to create a fresh laravel project, download and install Laravel 9 using the below command

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

1	composer create-project --prefer-dist laravel/laravel Laravel9CRUD

Configuring Database

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

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

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=database-name

DB_USERNAME=database-user-name

DB_PASSWORD=database-password

Create Post Model & Migration

Now, in this step we will create model and migration file. Please run the following command:

php artisan make:model Post -m

1	php artisan make:model Post -m

Now, open create_posts_table.php file inside database/migrations/ directory. Then put the function up() with following code:

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

public function up()

{

Schema::create('posts', function (Blueprint $table) {

$table->id();

$table->string('title');

$table->text('description');

$table->timestamps();

});

}

Then add the fillable property in Post.php, which is placed on app/models direcotry:

<?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'
    ];
}

<?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'

];

}

Then, Execute the following command on the terminal to create tables into the database:

php artisan migrate

1	php artisan migrate

Create Routes

After this, we need to define routes for crud operations in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

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

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

Install Livewire Package

In this step, we will install livewire Package via the composer dependency manager. Use the following command to install livewire Package.

composer require livewire/livewire

1	composer require livewire/livewire

Install Npm Packages

npm install

1	npm install

Then type the following command on cmd to run npm:

npm run dev

1	npm run dev

Run following command on the terminal to create tables into the database:

php artisan migrate

1	php artisan migrate

Build Livewire Components

In this step we will create a component using following command:

php artisan make:livewire posts

1	php artisan make:livewire posts

The above command will create the following component files on the following path:

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

1 2	app/Http/Livewire/Posts.php resources/views/livewire/posts.blade.php

Now, go to app/Http/Livewire folder and open Posts.php file. Then add the following code into your Posts.php file:

<?php
  
namespace App\Http\Livewire;
  
use Livewire\Component;
use App\Models\Post;
  
class Posts extends Component
{
    public $posts, $title, $description, $post_id;
    public $isOpen = 0;
  
    /**
     * 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
     */
    public function create()
    {
        $this->resetInputFields();
        $this->openModal();
    }
  
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    public function openModal()
    {
        $this->isOpen = true;
    }
  
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    public function closeModal()
    {
        $this->isOpen = false;
    }
  
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    private function resetInputFields(){
        $this->title = '';
        $this->description = '';
        $this->post_id = '';
    }
     
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    public function store()
    {
        $this->validate([
            'title' => 'required',
            'description' => 'required',
        ]);
   
        Post::updateOrCreate(['id' => $this->post_id], [
            'title' => $this->title,
            'description' => $this->description
        ]);
  
        session()->flash('message', 
            $this->post_id ? 'Post Updated Successfully.' : 'Post Created Successfully.');
  
        $this->closeModal();
        $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->openModal();
    }
     
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    public function delete($id)
    {
        Post::find($id)->delete();
        session()->flash('message', 'Post Deleted Successfully.');
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

<?php

namespace App\Http\Livewire;

use Livewire\Component;

use App\Models\Post;

class Posts extends Component

{

public $posts, $title, $description, $post_id;

public $isOpen = 0;

/**

* 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

public function create()

{

$this->resetInputFields();

$this->openModal();

}

/**

* The attributes that are mass assignable.

* @var array

public function openModal()

{

$this->isOpen = true;

}

/**

* The attributes that are mass assignable.

* @var array

public function closeModal()

{

$this->isOpen = false;

}

/**

* The attributes that are mass assignable.

* @var array

private function resetInputFields(){

$this->title = '';

$this->description = '';

$this->post_id = '';

}

/**

* The attributes that are mass assignable.

* @var array

public function store()

{

$this->validate([

'title' => 'required',

'description' => 'required',

]);

Post::updateOrCreate(['id' => $this->post_id], [

'title' => $this->title,

'description' => $this->description

]);

session()->flash('message',

$this->post_id ? 'Post Updated Successfully.' : 'Post Created Successfully.');

$this->closeModal();

$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->openModal();

}

/**

* The attributes that are mass assignable.

* @var array

public function delete($id)

{

Post::find($id)->delete();

session()->flash('message', 'Post Deleted Successfully.');

}

Now, 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>

<div>

@if($updateMode)

@include('livewire.update')

@else

@include('livewire.create')

@endif

<thead>

<tr>

<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>

Create Blade Views

In this step, go to resources/views/livewire folder and create some view files as following:

Create.blade.php

<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>

<form>

<label for="exampleFormControlInput1">Title</label>

@error('title') <span class="text-danger">{{ $message }}</span>@enderror

</div>

<label for="exampleFormControlInput2">Description</label>

@error('description') <span class="text-danger">{{ $message }}</span>@enderror

</div>

</form>

Update.blade.php

<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>

<form>

<label for="exampleFormControlInput1">Title</label>

@error('title') <span class="text-danger">{{ $message }}</span>@enderror

</div>

<label for="exampleFormControlInput2">Description</label>

@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>

Home.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel 9 Livewire CRUD Operation Tutorial From Scratch</title>
        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css">
        <!-- Styles -->
        <style>
            html, body {
                background-color: #fff;
                color: #636b6f;
                font-family: 'Nunito', sans-serif;
                font-weight: 200;
                height: 100vh;
                margin: 0;
            }
            .full-height {
                height: 100vh;
            }
            .flex-center {
                align-items: center;
                display: flex;
                justify-content: center;
            }
            .position-ref {
                position: relative;
            }
            .top-right {
                position: absolute;
                right: 10px;
                top: 18px;
            }
            .content {
                text-align: center;
            }
            .title {
                font-size: 84px;
            }
            .links > a {
                color: #636b6f;
                padding: 0 25px;
                font-size: 13px;
                font-weight: 600;
                letter-spacing: .1rem;
                text-decoration: none;
                text-transform: uppercase;
            }
            .m-b-md {
                margin-bottom: 30px;
            }
        </style>
    </head>
<body>
    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h2>Laravel 9 Livewire Crud</h2>
                    </div>
                    <div class="card-body">
                        @livewire('posts')
                    </div>
                </div>
            </div>
        </div>
    </div>
    @livewireScripts
</body>
</html>

<!DOCTYPE html>

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>

<title>Laravel 9 Livewire CRUD Operation Tutorial From Scratch</title>

<style>

html, body {

background-color: #fff;

color: #636b6f;

font-family: 'Nunito', sans-serif;

font-weight: 200;

height: 100vh;

margin: 0;

}

.full-height {

height: 100vh;

}

.flex-center {

align-items: center;

display: flex;

justify-content: center;

}

.position-ref {

position: relative;

}

.top-right {

position: absolute;

right: 10px;

top: 18px;

}

.content {

text-align: center;

}

.title {

font-size: 84px;

}

.links > a {

color: #636b6f;

padding: 0 25px;

font-size: 13px;

font-weight: 600;

letter-spacing: .1rem;

text-decoration: none;

text-transform: uppercase;

}

.m-b-md {

margin-bottom: 30px;

}

</style>

</head>

<body>

<h2>Laravel 9 Livewire Crud</h2>

</div>

@livewire('posts')

</div>

@livewireScripts

</body>

</html>

Start Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

http://127.0.0.1:8000/posts

1	http://127.0.0.1:8000/posts

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Laravel 9 Livewire Crud Example