Laravel adalah salah satu framework PHP yang paling populer untuk membuat aplikasi web. Salah satu fitur terbaru dan sangat menarik adalah Livewire, yang memungkinkan kita membuat antarmuka pengguna interaktif tanpa harus menulis JavaScript. Dalam artikel ini, kita akan belajar cara membuat aplikasi CRUD (Create, Read, Update, Delete) menggunakan Livewire di Laravel 11. Kita akan memulai dari instalasi proyek Laravel, hingga implementasi CRUD yang lengkap.
Apa Itu Livewire?
Livewire adalah sebuah library yang memungkinkan kita membangun aplikasi web dinamis dengan menggunakan PHP di backend, tanpa perlu menulis JavaScript secara langsung. Dengan Livewire, kita dapat mengupdate tampilan halaman secara real-time, mengirimkan data antar server dan client, serta menangani berbagai interaksi pengguna secara langsung, semua itu hanya dengan menggunakan PHP dan sedikit HTML.
Persiapan
Sebelum mulai, pastikan kamu sudah menginstal beberapa hal berikut:
- PHP versi 8.0 atau lebih tinggi.
- Composer untuk mengelola dependensi.
- Laravel 11 yang baru dirilis.
Langkah 1: Instalasi Proyek Laravel 11
Pertama, kita akan membuat proyek Laravel 11 baru. Buka terminal (atau command prompt) dan jalankan perintah berikut:
composer create-project --prefer-dist laravel/laravel crud-livewire "11.*"
Setelah perintah ini selesai, Laravel akan menginstal semua dependensi yang dibutuhkan. Sekarang, pindah ke folder proyek kamu:
cd crud-livewire
Langkah 2: Instalasi Livewire
Untuk menggunakan Livewire, kita perlu menginstalnya terlebih dahulu. Jalankan perintah berikut di terminal:
composer require livewire/livewire
Setelah itu, tambahkan Livewire ke dalam file resources/views/welcome.blade.php (atau bisa juga di layout yang kamu gunakan) dengan menambahkan baris berikut di dalam tag <head>:
@livewireStyles
Dan jangan lupa untuk menambahkan @livewireScripts di bagian bawah sebelum tag penutup </body>:
@livewireScripts
Langkah 3: Membuat Model, Migrasi, dan Seeder
Sekarang kita akan membuat model untuk entitas yang akan kita kelola di CRUD ini. Misalnya kita akan membuat aplikasi untuk mengelola artikel. Di terminal, jalankan perintah berikut untuk membuat model dan migrasi:
php artisan make:model Article -m
Perintah ini akan membuat model Article dan file migrasi. Buka file migrasi yang ada di folder database/migrations/ dan tambahkan kolom untuk tabel artikel. Contoh:
public function up()
{
Schema::create('articles', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->text('content');
$table->timestamps();
});
}
Setelah migrasi selesai, jalankan perintah untuk menjalankan migrasi:
php artisan migrate
Jika kamu ingin menambahkan beberapa data awal, kamu bisa membuat seeder. Jalankan perintah berikut untuk membuat seeder:
php artisan make:seeder ArticleSeeder
Kemudian, di dalam file seeder, tambahkan kode berikut:
use App\Models\Article;
public function run()
{
Article::create([
'title' => 'Judul Artikel Pertama',
'content' => 'Ini adalah konten artikel pertama.',
]);
Article::create([
'title' => 'Judul Artikel Kedua',
'content' => 'Ini adalah konten artikel kedua.',
]);
}
Jalankan seeder untuk menambahkan data:
php artisan db:seed --class=ArticleSeeder
Langkah 4: Membuat Komponen Livewire
Sekarang, kita akan membuat komponen Livewire untuk menangani CRUD. Di terminal, jalankan perintah berikut untuk membuat komponen ArticleCrud:
php artisan make:livewire ArticleCrud
Perintah ini akan menghasilkan dua file:
app/Http/Livewire/ArticleCrud.php(logika komponen)resources/views/livewire/article-crud.blade.php(tampilan HTML komponen)
Buka file ArticleCrud.php dan tambahkan kode berikut:
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Article;
class ArticleCrud extends Component
{
public $articles, $title, $content, $article_id;
public function mount()
{
$this->articles = Article::all();
}
public function render()
{
return view('livewire.article-crud');
}
public function store()
{
$this->validate([
'title' => 'required',
'content' => 'required',
]);
Article::create([
'title' => $this->title,
'content' => $this->content,
]);
$this->resetFields();
$this->mount(); // Refresh list
}
public function edit($id)
{
$article = Article::find($id);
$this->article_id = $article->id;
$this->title = $article->title;
$this->content = $article->content;
}
public function update()
{
$this->validate([
'title' => 'required',
'content' => 'required',
]);
$article = Article::find($this->article_id);
$article->update([
'title' => $this->title,
'content' => $this->content,
]);
$this->resetFields();
$this->mount(); // Refresh list
}
public function delete($id)
{
Article::find($id)->delete();
$this->mount(); // Refresh list
}
public function resetFields()
{
$this->title = '';
$this->content = '';
}
}
Langkah 5: Membuat Tampilan Komponen
Sekarang, kita akan mengatur tampilan untuk komponen Livewire ini. Buka file resources/views/livewire/article-crud.blade.php dan tambahkan kode berikut:
<div>
<h2>Artikel CRUD dengan Livewire</h2>
<div>
<input type="text" wire:model="title" placeholder="Judul Artikel">
<textarea wire:model="content" placeholder="Konten Artikel"></textarea>
<button wire:click="store">Simpan Artikel</button>
</div>
<hr>
<h3>Daftar Artikel</h3>
<ul>
@foreach($articles as $article)
<li>
<strong>{{ $article->title }}</strong><br>
{{ $article->content }}<br>
<button wire:click="edit({{ $article->id }})">Edit</button>
<button wire:click="delete({{ $article->id }})">Hapus</button>
</li>
@endforeach
</ul>
</div>
Langkah 6: Menambahkan Komponen ke Tampilan Utama
Akhirnya, kita akan menampilkan komponen ini di halaman utama. Buka file resources/views/welcome.blade.php dan tambahkan kode berikut di dalam body:
<livewire:article-crud />
Langkah 7: Menjalankan Aplikasi
Sekarang, jalankan server Laravel dengan perintah berikut:
php artisan serve
Buka browser dan akses aplikasi kamu di http://127.0.0.1:8000. Kamu akan melihat aplikasi CRUD dengan Livewire yang sudah berfungsi!
Kesimpulan
Dengan menggunakan Livewire di Laravel 11, kamu dapat dengan mudah membuat aplikasi CRUD tanpa menulis JavaScript. Proses interaksi pengguna, seperti membuat, membaca, mengedit, dan menghapus data, menjadi lebih sederhana dan efisien. Semoga tutorial ini membantu kamu memahami cara membuat aplikasi CRUD dengan Livewire. Jangan lupa untuk mengeksplorasi lebih banyak fitur Livewire untuk memperkaya aplikasi kamu!
Semoga artikel ini bermanfaat untuk SEO kamu dan mempermudah pemahaman para pembaca tentang cara membangun aplikasi CRUD menggunakan Livewire di Laravel 11!
Leave a Reply