This tutorial will give you an example of Laravel 9 livewire crud so that you can understand the concept of crud application. Livewire is defined as a full-stack framework for Laravel framework, which makes building dynamic interfaces simple, without leaving the comfort of Laravel. In case, you are using livewire with Laravel then you don’t have to worry about writing jQuery ajax code.
In this example, we will be creating a post insert update delete module. We will take the title and post-field can create a post, update the post and delete that post.
So, let’s follow the below step:
List View:
Create View:
Update View:
Step 1: Install Laravel
We will get a fresh Laravel 9 version application using the below command.
composer create-project laravel/laravel livewire
Step 2: Create Migration and Model
Create database migration for the “posts” table and also, we will create a model for the files table.
php artisan make:migration create_posts_table
Migration
<?php use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; return new class extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('posts', function (Blueprint $table) { $table->id(); $table->string('title'); $table->text('body'); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('posts'); } };
php artisan migrate
Now, we will create the “Post” model by using the following command:
php artisan make:model Post
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; /** * The attributes that are mass assignable. * * @var array */ protected $fillable = [ 'title', 'body' ]; }
Step 3: Install Livewire
Install the livewire to the Laravel application using the below command:
composer require livewire/livewire
Step 4: Create Post Component
Create a Livewire component using their command. Run the below command to create the post-crud application component.
php artisan make:livewire posts
Now, we have created files on both paths:
app/Http/Livewire/Posts.php
resources/views/livewire/posts.blade.php
Step 5: Update Component File
We will write render(), resetInputFields(), store(), edit(), cancel(), update() and delete() method for our crud app.
So, let‘s update the following file.
app/Http/Livewire/Posts.php
<?php namespace App\Http\Livewire; use Livewire\Component; use App\Models\Post; class Posts extends Component { public $posts, $title, $body, $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->body = ''; } /** * The attributes that are mass assignable. * * @var array */ public function store() { $validatedDate = $this->validate([ 'title' => 'required', 'body' => '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->body = $post->body; $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', 'body' => 'required', ]); $post = Post::find($this->post_id); $post->update([ 'title' => $this->title, 'body' => $this->body, ]); $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.'); } }
Step 6: Update Blade Files
Here, we will update the following list of files for our listing page, create a page and update the page.
So, let’s update all the files as below:
resources/views/livewire/posts.blade.php
<div> @if (session()->has('message')) <div class="alert alert-success"> {{ session('message') }} </div> @endif @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>Body</th> <th width="150px">Action</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>
resources/views/livewire/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">Body:</label> <textarea type="email" class="form-control" id="exampleFormControlInput2" wire:model="body" placeholder="Enter Body"></textarea> @error('body') <span class="text-danger">{{ $message }}</span>@enderror </div> <button wire:click.prevent="store()" class="btn btn-success">Save</button> </form> resources/views/livewire/update.blade.php <form> <input type="hidden" wire:model="post_id"> <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">Body:</label> <textarea type="email" class="form-control" id="exampleFormControlInput2" 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 7: Update Welcome Blade File
Update the Laravel welcome blade file, so it will load the crud example on our main URL.
here, we will update the welcome.blade.php file. in this file, we will use @livewireStyles, @livewireScripts, and @livewire(‘contact-form’). so let’s add it.
resources/views/welcome.blade.php
<!DOCTYPE html> <html> <head> <title>Laravel Livewire CRUD </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</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>
Run Laravel App
Type the given below command and hit enter to run the Laravel app:
php artisan serve
Now, navigate to your web browser, type the given URL and view the app output: