Laravel Livewire CRUD | Livewire Data Add, View, Update, Delete | Livewire CRUD Bangla Tutorial
Laravel - Livewire CRUD | Livewire Data Add, View, Update , Delete
Livewire is a full-stack framework for Laravel that makes building dynamic interfaces simple, without leaving the comfort of Laravel. It is a frontend framework. After learning it you will just verbalize "Verbally express hello to Livewire".
You can also check the git repository of this project. if you face any error, please have look on it and check you code.
Table of Contents
- Download Laravel App
- Create Routes
- Create Model and Migration
- Install Livewire
- Create Livewire Component and View
- Create Blade File
- Run Project
Step 1 : Download Laravel 7
In this laravel livewire crud tutorial i will explain it from step by step. So download the latest laravel app by the following command.
composer create-project --prefer-dist laravel/laravel livewireStep 2 : Create Routes
Now we need to create our routes. So paste this below code in web.php file.
routes/web.php
Route::view('departments', 'backend.departments');Here we used view route and backend.departments indicates blade view directories. So make it like below image.
Now paste this following code to departments.blade.php.
resources/views/backend/departments.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Livewire crud</title>
@livewireStyles
<style type="text/css">
svg{
display: none;
}
</style>
</head>
<body>
<div>
@livewire('departments')
</div>
@livewireScripts
</body>
</html>Step 3 : Create Model and Migration
Now we have to create our model and migration to submit form data in database so that we can check laravel livewire example crud tutorial. So make it by below command.
php artisan make:model Department-mnow open Contact model and paste below code.
app/Models/Department.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Department extends Model
{
use HasFactory;
protected $fillable=['name','code'];
}
now add this two field to your depatments table and run migrate command to save it database.
database/migrations/create_departments_table.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateDepartmentsTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('departments', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('code');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('departments');
}
}
and then run
php artisan migrateStep 4 : Install Livewire
To setup livewire in your project, run below command
composer require livewire/livewire
Step 5 : Create Livewire Component and View
Run the below command to create livewire view and component.
php artisan make:livewire departmentsAfter running this command you will find two file in the following path app/Http/Livewire/Departments.php and resources/views/livewire/departments.blade.php
App/Http/Livewire/Department.php
<?php
namespace App\Http\Livewire;
use App\Models\Department;
use Livewire\Component;
use Livewire\WithPagination;
class Departments extends Component
{
public $name, $code, $hid;
use WithPagination;
public function render()
{
$data=Department::paginate(3);
return view('livewire.departments',compact('data'));
}
public function resetForm()
{
$this->name='';
$this->code='';
$this->hid='';
}
public function store()
{
$validator=$this->validate([
'name'=>'required',
'code'=>'required',
]);
if($this->hid){
$department=Department::find($this->hid);
$department->update([
'name'=>$this->name,
'code'=>$this->code,
]);
$this->resetForm();
session()->flash('success','Data Update Successfully');
}else{
Department::create($validator);
$this->resetForm();
session()->flash('success','Data Inserted Successfully');
}
}
public function edit($hid)
{
$dpt=Department::find($hid);
$this->name=$dpt->name;
$this->code=$dpt->code;
$this->hid=$dpt->id;
}
public function delete($id)
{
$dpt=Department::find($id);
$dpt->delete();
session()->flash('success','Data Deleted Successfully');
}
}
Step 6 : Create Blade File
Now create a folder structure like below. We are in the last past of our livewire tutorial.
Now paste this below code to you blade file. Here we will create Departmentt, create and update file to create our laravel livewire crud example.
resources/views/livewire/departments.blade.php
<div>
@if(Session::has('success'))
<span style="color: green;">{{Session::get('success')}}</span>
@endif
<input type="hidden" wire:model="hid" value="{{$hid}}">
<div class="form-group">
<label>Name</label>
<input type="text" wire:model="name">
@error('name') <span style="color: red;">{{$message}}</span>@enderror
</div>
<div class="form-group">
<label>Code</label>
<input type="text" wire:model="code" >
@error('name') <span style="color: red;">{{$message}}</span>@enderror
</div>
<button wire:click="store()">Save</button>
<br>
<button wire:click="resetForm()">Add </button>
<table border="1">
<tr>
<th>SL</th>
<th>Name</th>
<th>Code</th>
<th>Action</th>
</tr>
@foreach($data as $row)
<tr>
<td> {{$loop->index+1}} </td>
<td>{{$row->name}} </td>
<td>{{$row->code}}</td>
<td> <button wire:click="edit({{$row->id}})">Edit</button> | <button wire:click="delete({{$row->id}})">Delete</button> </td>
</tr>
@endforeach
</table>
{{$data->links()}}
</div>
Now all are set to go. Just visit this below url to test our laravel livewire crud example project.
http://127.0.0.1:8000/departments
No comments