Hello Dev.
In this article, i would like to share with you the way carry out crud opeartion livewire in laravel utility. i can display you a entire step by step Laravel Livewire CRUD operation.
Livewire is a full-stack framework for Laravel that makes building dynamic interfaces easy, without leaving the consolation of Laravel. Livewire relies totally on AJAX requests to do all its server communicaton.
Here i will deliver complete instance for crud opertaion livewire in laravel, So shall we follow the bellow step.
Step 1: Install Laravel App
In First step, We need to get fresh laravel version application using bellow command. So Let's open terminal and run bellow command.
composer create-project --prefer-dist laravel/laravel blog
Step 2: Database Configuration
After successfully install laravel app then configure databse setup. We will open ".env" file and change the database name, username and password in the env file.
.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name
DB_USERNAME=Enter_Your_Database_Username
DB_PASSWORD=Enter_Your_Database_Password
Step 3: Install Livewire
In this step, You will simply install livewire to our laravel application using bellow command:
composer require livewire/livewire
Step 4: Create Component
Now, You can create livewire component using bellow command, So Let's run bellow command to create user form component:
php artisan make:livewire users
Now they created fies on both path:
app/Http/Livewire/Users.php
resources/views/livewire/users.blade.php
resources/views/livewire/users.blade.php
Now first file we will update as bellow for Users.php file.
app/Http/Livewire/Users.php
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\User;
class Users extends Component
{
public $users, $name, $email, $user_id;
public $updateMode = false;
public function render()
{
$this->users = User::all();
return view('livewire.users');
}
private function resetInputFields(){
$this->name = '';
$this->email = '';
}
public function store()
{
$validatedDate = $this->validate([
'name' => 'required',
'email' => 'required|email',
]);
User::create($validatedDate);
session()->flash('message', 'Users Created Successfully.');
$this->resetInputFields();
}
public function edit($id)
{
$this->updateMode = true;
$user = User::where('id',$id)->first();
$this->user_id = $id;
$this->name = $user->name;
$this->email = $user->email;
}
public function cancel()
{
$this->updateMode = false;
$this->resetInputFields();
}
public function update()
{
$validatedDate = $this->validate([
'name' => 'required',
'email' => 'required|email',
]);
if ($this->user_id) {
$user = User::find($this->user_id);
$user->update([
'name' => $this->name,
'email' => $this->email,
]);
$this->updateMode = false;
session()->flash('message', 'Users Updated Successfully.');
$this->resetInputFields();
}
}
public function delete($id)
{
if($id){
User::where('id',$id)->delete();
session()->flash('message', 'Users Deleted Successfully.');
}
}
}
Step 5: Add Route
now, we need to add route for image form in laravel application. so open your "routes/web.php" file and add following route.
routes/web.php
Route::view('users','livewire.home');
Step 6: Create View
Here, we will create blade file for call crud opertaion route. in this file we will use @livewireStyles, @livewireScripts and @livewire('users'). so let's add it.
resources/views/livewire/users.blade.php
<div>
@if($updateMode)
@include('livewire.update')
@else
@include('livewire.create')
@endif
<table class="table table-bordered mt-5">
<thead>
<tr>
<th>No.</th>
<th>Name</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach($users as $value)
<tr>
<td>{{ $value->id }}</td>
<td>{{ $value->name }}</td>
<td>{{ $value->email }}</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>
resources/views/livewire/home.blade.php
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="{{ asset('js/app.js') }}" defer></script>
<link href="{{ asset('css/app.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 - meaningarticles.com</h2>
</div>
<div class="card-body">
@if (session()->has('message'))
<div class="alert alert-success">
{{ session('message') }}
</div>
@endif
@livewire('users')
</div>
</div>
</div>
</div>
</div>
@livewireScripts
</body>
</html>
resources/views/livewire/create.blade.php
<form>
<div class="form-group">
<label for="exampleFormControlInput1">Name</label>
<input type="text" class="form-control" id="exampleFormControlInput1" placeholder="Enter Name" wire:model="name">
@error('name') <span class="text-danger">{{ $message }}</span>@enderror
</div>
<div class="form-group">
<label for="exampleFormControlInput2">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput2" wire:model="email" placeholder="Enter Email">
@error('email') <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>
<div class="form-group">
<input type="hidden" wire:model="user_id">
<label for="exampleFormControlInput1">Name</label>
<input type="text" class="form-control" wire:model="name" id="exampleFormControlInput1" placeholder="Enter Name">
@error('name') <span class="text-danger">{{ $message }}</span>@enderror
</div>
<div class="form-group">
<label for="exampleFormControlInput2">Email address</label>
<input type="email" class="form-control" wire:model="email" id="exampleFormControlInput2" placeholder="Enter Email">
@error('email') <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>
Now we are ready to run our example so run bellow command for quick run:
php artisan serve
Now you can open bellow URL on your browser:
http://localhost:8000/users
i'm hoping it assist you to, thanks for visit my article if you like my article then proportion together with your friend and social platform.
