Pada kesempatan kali ini saya akan membagikan tutorial mengenai bagaimana cara membuat CRUD livewire laravel version 7, untuk pengertian livewire sendiri kurang lebih seperti ini, Livewire adalah full-stack framework laravel untuk membangun interfaces yang dinamis namun simple tanpa meninggalkan kenyamanan menggunakan Laravel itu sendiri, untuk lebih lengkapnya silahkan search apa itu livewire ? ^_^
Step 1, kita install project laravel nya
composer create-project --prefer-dist laravel/laravel:^7.0 livewire
Tunggu sampe proses instalasi selesai, lalu setting dibagian .env nya jangan lupa untuk membuat nama file databasenya terlebih dahulu
Step 2, kita buat sebuah migration nya
php artisan make:migration create_posts_table
Step 3, kita isi schema table posts yang sudah kita buat dengan migration nya
public function up()
{
Schema::create('posts', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->text('content');
$table->timestamps();
});
}Step 4, kita lakukan migrate
php artisan migrate
Cek didatabase pastikan terlebih dahulu datanya sudah masuk
Step 5, kita buat sebuah model dengan nama Post
php artisan make:model Post
Pastikan ada sebuah model dengan nama Post didalam project kita, sekalian kita isi file tersebut
class Post extends Model
{
//
protected $fillable = [
'title', 'content'
];
}Step 6, kita install liveware dengan perintah
composer require livewire/livewire
Jika berhasil tampilan nya kurang lebih seperti ini
Step 7, kita instal livewire untuk posts nya
php artisan make:livewire posts
jika berhasil akan ada 2 file baru diproject kita, yang pertama app/Http/Livewire/Posts.php dan kedua views/livewire/posts.blade.php
Step 8, kita tambahakn pada file app/Http/Livewire/Posts.php
<?php
namespace App\Http\Livewire;
use App\Post;
use Livewire\Component;
class Posts extends Component
{
public $posts, $title, $content, $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->content = '';
}
/**
* The attributes that are mass assignable.
*
* @var array
*/
public function store()
{
$validatedDate = $this->validate([
'title' => 'required',
'content' => '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->content = $post->content;
$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',
'content' => 'required',
]);
$post = Post::find($this->post_id);
$post->update([
'title' => $this->title,
'content' => $this->content,
]);
$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 9, pada file views/livewire/posts.blade.php kita tambahan seperti ini
<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>Content</th>
<th width="150px">Action</th>
</tr>
</thead>
<tbody>
@foreach($posts as $post)
<tr>
<td>{{ $post->id }}</td>
<td>{{ $post->title }}</td>
<td>{{ $post->content }}</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>
Step 10, kita buat file create.blade.php dan update.blade.php pada views/livewire
Step 11, untuk create.blade.php kita isi seperti dibawah ini
<form>
<div class="form-group">
<label for="exampleFormControlInput1">Title:</label>
<input type="text" class="form-control" id="exampleFormControlInput1"
placeholder="Masukan Title" wire:model="title">
@error('title') <span class="text-danger">{{ $message }}</span>@enderror
</div>
<div class="form-group">
<label for="exampleFormControlInput2">Content:</label>
<textarea type="email" class="form-control" id="exampleFormControlInput2"
wire:model="content" placeholder="Masukan Content"></textarea>
@error('content') <span class="text-danger">{{ $message }}</span>@enderror
</div>
<button wire:click.prevent="store()" class="btn btn-success">Save</button>
</form>
Step 12, untuk update.blade.php kita isi seperti dibawah ini
<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="Masukan Title" wire:model="title">
@error('title') <span class="text-danger">{{ $message }}</span>@enderror
</div>
<div class="form-group">
<label for="exampleFormControlInput2">Content:</label>
<textarea type="email" class="form-control" id="exampleFormControlInput2"
wire:model="content" placeholder="Masukan Content"></textarea>
@error('content') <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 13, untuk routes nya sendiri saya masih menggunakan default instalasinya laravel
Step 14, pada welcome.blade.php kita ubah seperti dibawah ini
<!DOCTYPE html>
<html>
<head>
<title>Laravel Livewire CRUD - ASEPIT.com</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 text-danger text-center">
<h2>Laravel Livewire CRUD - ASEPIT.com</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>
DONE .. ^_^
Semoga bermanfaat untuk kita semua, terutama bagi penulis sendiri.. haturnuhun
untuk link demonya menyusul ^_^
Comments