Afreen KhalfeBefore we begin with the Laravel Livewire CRUD tutorial, let us first grasp what Livewire is and how it is utilised.
What is Livewire?
Laravel Livewire allows you to create interfaces with the ease of Laravel. Livewire is a full-stack framework that reduces the complexity introduced by Vue or React. In February 2020, the first livewire version was launched.
In this blog, we will cover CRUD operations utilising Laravel Livewire, as well as all of the procedures required to install livewire in Laravel 9. Before that, you should consider upgrading from Laravel 8 to 9.
Setup and Prerequisites for Laravel Livewire CRUD Operations
Composer installed on your system (Just hit the “composer” command in the terminal to check whether the composer is properly installed or not). You may get Composer here (https://getcomposer.org/) if you don’t already have it.
How to Execute CRUD Operations Using Laravel Livewire?
We’ve seen how to use the Livewire package with the most recent Laravel version (v 9.19), and how to use it to perform the create, update, and delete operations in sequence.
1.Create a laravel Application
As you are already familiar with using a terminal to construct a laravel application, open a terminal and enter the following command to create a new laravel application in your directory.
composer create-project –prefer-dist laravel/laravel
<application_name_here>
2.Configure Database Details
Open the.env file in the root folder; if.env does not exist, use the following command to create a copy from the.env-example.
cp .env .env-example
You must establish a new database with the same name as the one specified in DB DATABASE, as well as change the remainder of the.env variable with your system’s values.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=< DATABASE NAME >
DB_USERNAME=< DATABASE USERNAME >
DB_PASSWORD=< DATABASE PASSWORD >
3.To Install the Livewire Package
To install the livewire package, navigate to your application’s root directory and run the command below.
composer require livewire/livewire
We must include the livewire aesthetic and script (on every page that will be using Livewire).
<head>
# other styles here
@livewireStyles
</head>
<body>
# other body parts here
@livewire(‘<component name here>’)/You can include component anywhere in your app
@livewireScripts
<script src=”https://www.talent500.com/blog/wp-content/cache/min/1/c868d3b844e68cd780d4811c46215c40.js” data-minify=”1″ defer></script></body>
4.Create Migration and Model
We will develop a migration for the “posts” database as well as a model for the posts table.
Please execute the command below to create a migration file. After running the command below, a new file will be generated in the database/migrations folder.
php artisan make:migration create_posts_table
In the create_posts_table migration file replace the below code:
<?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’)->nullable();
$table->text(‘description’)->nullable();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists(‘posts’);
}
};
Run the following command to create a table in the database with the specified fields in migration. After performing the below command, you should notice a new “posts” table in the database.
php artisan migrate
Now, using the command below, we will construct a post model. After completing the following steps, you should be able to see a new model file in the app/Models folder:
php artisan make:model Post
Open app/Models/Post.php and replace with below code
<?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’
]; public $timestamps = true;
}
5.Create Post component
Now, using the command below, we will construct a post component.
php artisan make:livewire post
After running the above script, you should notice a new Livewire folder under app/Http and resources/views.The Output for the above command is:
COMPONENT CREATED
CLASS: app/Http/Livewire/Post.php
VIEW: resources/views/livewire/post.blade.php
Now, open appHttpLivewirePost.php and add the following code to it:
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Post as Posts;
class Post extends Component
{
public $posts, $title, $description, $postId, $updatePost = false, $addPost = false;
/**
* delete action listener
*/
protected $listeners = [
‘deletePostListner’=>’deletePost’
];
/**
* List of add/edit form rules
*/
protected $rules = [
‘title’ => ‘required’,
‘description’ => ‘required’
];
/**
* Reseting all inputted fields
* @return void
*/
public function resetFields(){
$this->title = ”;
$this->description = ”;
}
/**
* render the post data
* @return \Illuminate\Contracts\View\Factory|\Illuminate\Contracts\View\View
*/
public function render()
{
$this->posts = Posts::select(‘id’, ‘title’, ‘description’)->get();
return view(‘livewire.post’);
}
/**
* Open Add Post form
* @return void
*/
public function addPost()
{
$this->resetFields();
$this->addPost = true;
$this->updatePost = false;
}
/**
* store the user inputted post data in the posts table
* @return void
*/
public function storePost()
{
$this->validate();
try {
Posts::create([
‘title’ => $this->title,
‘description’ => $this->description
]);
session()->flash(‘success’,’Post Created Successfully!!’);
$this->resetFields();
$this->addPost = false;
} catch (\Exception $ex) {
session()->flash(‘error’,’Something goes wrong!!’);
}
}
/**
* show existing post data in edit post form
* @param mixed $id
* @return void
*/
public function editPost($id){
try {
$post = Posts::findOrFail($id);
if( !$post) {
session()->flash(‘error’,’Post not found’);
} else {
$this->title = $post->title;
$this->description = $post->description;
$this->postId = $post->id;
$this->updatePost = true;
$this->addPost = false;
}
} catch (\Exception $ex) {
session()->flash(‘error’,’Something goes wrong!!’);
}
}
/**
* update the post data
* @return void
*/
public function updatePost()
{
$this->validate();
try {
Posts::whereId($this->postId)->update([
‘title’ => $this->title,
‘description’ => $this->description
]);
session()->flash(‘success’,’Post Updated Successfully!!’);
$this->resetFields();
$this->updatePost = false;
} catch (\Exception $ex) {
session()->flash(‘success’,’Something goes wrong!!’);
}
}
/**
* Cancel Add/Edit form and redirect to post listing page
* @return void
*/
public function cancelPost()
{
$this->addPost = false;
$this->updatePost = false;
$this->resetFields();
}
/**
* delete specific post data from the posts table
* @param mixed $id
* @return void
*/
public function deletePost($id)
{
try{
Posts::find($id)->delete();
session()->flash(‘success’,”Post Deleted Successfully!!”);
}catch(\Exception $e){
session()->flash(‘error’,”Something goes wrong!!”);
}
}
}
Create resources/views/home.blade.php and add the following code to it:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Livewire Crud</title>
<link data-minify=”1″ href=”https://www.talent500.com/blog/wp-content/cache/min/1/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css?ver=1675427062″ rel=”stylesheet” crossorigin=”anonymous”>
@livewireStyles
</head>
<body>
<nav class=”navbar navbar-expand-lg navbar-dark bg-dark”>
<div class=”container-fluid”>
<a class=”navbar-brand” href=”/”>Livewire CRUD Blog</a>
</div>
</nav>
<div class=”container”>
<div class=”row justify-content-center mt-3″>
@livewire(‘post’)
</div>
</div>
@livewireScripts
<script src=”https://www.talent500.com/blog/wp-content/cache/min/1/c868d3b844e68cd780d4811c46215c40.js” data-minify=”1″ defer></script></body>
</html>
Now, open resources/views/livewire/post.blade.php and insert the following code:
<div>
<div class=”col-md-8 mb-2″>
@if(session()->has(‘success’))
<div class=”alert alert-success” role=”alert”>
{{ session()->get(‘success’) }}
</div>
@endif
@if(session()->has(‘error’))
<div class=”alert alert-danger” role=”alert”>
{{ session()->get(‘error’) }}
</div>
@endif
@if($addPost)
@include(‘livewire.create’)
@endif
@if($updatePost)
@include(‘livewire.update’)
@endif
</div>
<div class=”col-md-8″>
<div class=”card”>
<div class=”card-body”>
@if(!$addPost)
<button wire:click=”addPost()” class=”btn btn-primary btn-sm float-right”>Add New Post</button>
@endif
<div class=”table-responsive”>
<table class=”table”>
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@if (count($posts) > 0)
@foreach ($posts as $post)
<tr>
<td>
{{$post->title}}
</td>
<td>
{{$post->description}}
</td>
<td>
<button wire:click=”editPost({{$post->id}})” class=”btn btn-primary btn-sm”>Edit</button>
<button onclick=”deletePost({{$post->id}})” class=”btn btn-danger btn-sm”>Delete</button>
</td>
</tr>
@endforeach
@else
<tr>
<td colspan=”3″ align=”center”>
No Posts Found.
</td>
</tr>
@endif
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
We’ll need to add two additional files to resources/views/livewire/. The first one is create.blade.php, and the second is update.blade.php.
You can change the content in create.blade.php with the following
<div class=”card”>
<div class=”card-body”>
<form>
<div class=”form-group mb-3″>
<label for=”title”>Title:</label>
<input type=”text” class=”form-control @error(‘title’) is-invalid @enderror” id=”title” placeholder=”Enter Title” wire:model=”title”>
@error(‘title’)
<span class=”text-danger”>{{ $message }}</span>
@enderror
</div>
<div class=”form-group mb-3″>
<label for=”description”>Description:</label>
<textarea class=”form-control @error(‘description’) is-invalid @enderror” id=”description” wire:model=”description” placeholder=”Enter Description”></textarea>
@error(‘description’)
<span class=”text-danger”>{{ $message }}</span>
@enderror
</div>
<div class=”d-grid gap-2″>
<button wire:click.prevent=”storePost()” class=”btn btn-success btn-block”>Save</button>
<button wire:click.prevent=”cancelPost()” class=”btn btn-secondary btn-block”>Cancel</button>
</div>
</form>
</div>
</div>
You can replace it with following after creating update.blade.php
<div class=”card”>
<div class=”card-body”>
<form>
<div class=”form-group mb-3″>
<label for=”title”>Title:</label>
<input type=”text” class=”form-control @error(‘title’) is-invalid @enderror” id=”title” placeholder=”Enter Title” wire:model=”title”>
@error(‘title’)
<span class=”text-danger”>{{ $message }}</span>
@enderror
</div>
<div class=”form-group mb-3″>
<label for=”description”>Description:</label>
<textarea class=”form-control @error(‘description’) is-invalid @enderror” id=”description” wire:model=”description” placeholder=”Enter Description”></textarea>
@error(‘description’)
<span class=”text-danger”>{{ $message }}</span>
@enderror
</div>
<div class=”d-grid gap-2″>
<button wire:click.prevent=”updatePost()” class=”btn btn-success btn-block”>Update</button>
<button wire:click.prevent=”cancelPost()” class=”btn btn-secondary btn-block”>Cancel</button>
</div>
</form>
</div>
</div>
6.Define Routes
Open routes/web.php and add the following code to it:
Route::get(‘/’,function(){
return view(‘home’);
});
7.Run Project
Now that you’ve seen the above sample in the browser, open your terminal and run the following command from the project root directory.
php artisan serve
The following is the output of the preceding command:
Starting Laravel development server: http://127.0.0.1:8000
So, run your browser and go to the above-mentioned website.
Conclusion
We finished the laravel jetstream lesson, which detailed how to create crud operations with the livewire package. We also learned how to handle crud operations with the MySQL database.
Laravel Livewire is a powerful library that makes it easier for developers to create contemporary and dynamic interfaces with Laravel Blade. This stack is suitable for your next dynamic and interactive project.
Add comment