Apabila sebelumnya kita sudah membahas tentang apa itu Laravel Livewire, maka kali ini kita akan membuat aplikasi dinamis dan interaktif tanpa perlu menggunakan JavaScript. Salah satu implementasi paling umum dalam pengembangan aplikasi web adalah operasi CRUD (Create, Read, Update, Delete). Dengan Livewire, Anda bisa dengan mudah membangun fitur CRUD yang real-time tanpa harus melakukan reload halaman.
Pada artikel ini, kita akan membahas cara membuat aplikasi CRUD menggunakan Laravel Livewire, mulai dari persiapan proyek hingga implementasi CRUD.
Sebelum kita mulai, pastikan Anda sudah menginstal Laravel dan Livewire pada proyek Anda. Jika belum, ikuti langkah-langkah berikut:
Instalasi Laravel
Jika Anda belum memiliki proyek Laravel, buat proyek baru dengan perintah berikut :
composer create-project --prefer-dist laravel/laravel crud-livewire
Instalasi Livewire
Setelah Laravel terinstal, tambahkan Livewire ke proyek Anda:
composer require livewire/livewire
Konfigurasi Blade
Tambahkan direktif Livewire di file layout Blade Anda (biasanya resources/views/layouts/app.blade.php
), tepat sebelum tag </head>
dan </body>
:
@livewireStyles
@livewireScripts
Membuat Tabel Database
Untuk menyimpan data, kita perlu membuat tabel di database. Mari kita buat migration untuk tabel posts
:
php artisan make:model Post -m
Edit file migration di database/migrations
untuk menambahkan kolom yang dibutuhkan:
Schema::create('posts', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->text('content');
$table->timestamps();
});
Setelah itu, jalankan migration:
php artisan migrate
Membuat Komponen Livewire
Setelah tabel dibuat, buat model untuk Post
dan komponen Livewire yang akan menangani operasi CRUD.
Membuat Komponen Livewire CRUD
Buat komponen Livewire yang akan menangani operasi CRUD:
php artisan make:livewire PostCrud
Perintah ini akan menghasilkan dua file:
app/Http/Livewire/PostCrud.php
untuk logika back-endresources/views/livewire/post-crud.blade.php
untuk tampilan front-endMari kita tambahkan logika CRUD di dalam komponen PostCrud.php
.
1. Menampilkan Data (Read)
Di dalam PostCrud.php
, kita akan mengambil data dari tabel posts
dan menampilkannya di tampilan Blade:
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Post;
class PostCrud extends Component
{
public $posts;
public function render()
{
$this->posts = Post::all();
return view('livewire.post-crud');
}
}
2. Menambahkan Data (Create)
Tambahkan properti untuk menyimpan input pengguna dan fungsi untuk menambah data:
public $title, $content;
public function store()
{
$this->validate([
'title' => 'required',
'content' => 'required',
]);
Post::create([
'title' => $this->title,
'content' => $this->content,
]);
session()->flash('message', 'Post berhasil ditambahkan.');
$this->resetInputFields();
}
private function resetInputFields()
{
$this->title = '';
$this->content = '';
}
3. Memperbarui Data (Update)
Tambahkan logika untuk memperbarui data:
public $post_id;
public function edit($id)
{
$post = Post::findOrFail($id);
$this->post_id = $post->id;
$this->title = $post->title;
$this->content = $post->content;
}
public function update()
{
$this->validate([
'title' => 'required',
'content' => 'required',
]);
$post = Post::find($this->post_id);
$post->update([
'title' => $this->title,
'content' => $this->content,
]);
session()->flash('message', 'Post berhasil diperbarui.');
$this->resetInputFields();
}
4. Menghapus Data (Delete)
Tambahkan fungsi untuk menghapus data:
public function delete($id)
{
Post::find($id)->delete();
session()->flash('message', 'Post berhasil dihapus.');
}
Tampilan Blade (UI)
Sekarang, kita akan menambahkan tampilan antarmuka pengguna untuk menampilkan, menambahkan, memperbarui, dan menghapus data. Edit file post-crud.blade.php
:
<div>
@if (session()->has('message'))
<div>{{ session('message') }}</div>
@endif
<form wire:submit.prevent="store">
<input type="text" wire:model="title" placeholder="Judul">
<textarea wire:model="content" placeholder="Konten"></textarea>
<button type="submit">Simpan</button>
</form>
<h3>Daftar Post</h3>
<ul>
@foreach($posts as $post)
<li>
{{ $post->title }} - {{ $post->content }}
<button wire:click="edit({{ $post->id }})">Edit</button>
<button wire:click="delete({{ $post->id }})">Hapus</button>
</li>
@endforeach
</ul>
</div>
Menghubungkan Komponen ke Route
Agar komponen Livewire dapat diakses dari browser, tambahkan rute di file web.php
:
use App\Http\Livewire\PostCrud;
Route::get('posts', PostCrud::class);
Menjalankan Aplikasi
Sekarang, jalankan aplikasi dengan perintah:
php artisan serve
Akses aplikasi melalui browser dengan mengunjungi http://localhost:8000/posts
. Di sini, Anda akan melihat formulir untuk menambah post dan daftar post yang sudah ditambahkan, lengkap dengan fitur edit dan hapus.
CRUD dengan Laravel Livewire memudahkan pengembang untuk membangun aplikasi dinamis dan interaktif tanpa perlu menggunakan JavaScript. Dengan Livewire, operasi CRUD dapat dilakukan dengan cepat dan efisien, langsung dari server, sehingga Anda dapat membangun aplikasi yang powerful dengan kode yang lebih sedikit dan lebih sederhana. Jika Anda baru mengenal Laravel atau ingin menghindari kompleksitas JavaScript, Livewire adalah pilihan yang tepat.
Baca berbagai artikel menarik dan berbagai macam tutorial hanya di RuangBacaku