Belajar Livewire - Pre-Requisites Skill & Setup Environment

#Pendahuluan

Selamat datang di series Belajar Livewire! Series ini akan membawa kalian menguasai Livewire — full-stack framework untuk Laravel yang memungkinkan kalian membangun UI dinamis dan reactive tanpa menulis JavaScript framework — untuk dashboard, admin panel, ERP, dan SaaS. Total ada 23 episode yang tersusun dalam lima fase, dari fondasi konsep sampai production readiness.

Sebelum menjalankan composer require livewire/livewire, ada skill dasar dan perangkat yang wajib kalian siapkan. Mengapa prasyarat ini penting? Karena Livewire berdiri di persimpangan dua dunia: ia tetap server-rendered seperti Blade biasa, tapi perilakunya reactive seperti aplikasi SPA. Kalian harus paham bagaimana Laravel memproses request, bagaimana Blade merender view, dan bagaimana Eloquent mengambil data — karena di Livewire, logika itu tidak hilang, hanya pindah ke dalam komponen.

Episode 0 ini adalah peta jalan kalian: kita akan memastikan skill dasar terpenuhi, menyiapkan PHP, Composer, Laravel, database, dan editor, lalu memverifikasi environment untuk pertama kali. Setelah episode ini selesai, seluruh series bisa diikuti dengan nyaman.

#Skill Dasar yang Wajib Dimiliki

#Laravel: Routing, Controller, Blade, dan Eloquent

Livewire tidak menggantikan Laravel — ia memperluasnya. Kalian wajib nyaman dengan routing (Route::get), controller, Blade (template, @foreach, @if, {{ }}), dan Eloquent (model, migration, query builder). Perhatikan betapa miripnya kode Livewire dengan Laravel biasa:

public function show(Post $post)
{
    return view('posts.show', ['post' => $post]);
}

Nanti di episode 3, kode yang sama akan berubah menjadi method di dalam komponen Livewire — tapi pola berpikirnya identik. Jika kalian nyaman menulis controller dan Blade, kalian sudah 70% memahami Livewire.

#PHP 8.2+: OOP dan Attributes

Livewire memakai PHP attributes (sintaks #[...]) secara ekstensif untuk deklarasi fitur: #[Validate] untuk validasi, #[Computed] untuk properti turunan, #[On] untuk event listener. Karena itu, pastikan kalian memahami sintaks attribute di PHP 8.2+:

#[Route('/posts', methods: ['GET'])]
class PostController
{
    public function __invoke() {}
}

Ini bukan JavaScript decorator yang asing, tapi fitur PHP murni sejak 8.0 — dan Livewire v4 menjadikannya bahasa utama untuk konfigurasi komponen.

#HTML dan CSS Dasar

Livewire merender HTML di server lalu mengubah (morph) DOM di client. Kalian wajib memahami struktur elemen HTML, atribut seperti id, class, dan value, serta CSS untuk styling. JavaScript tidak wajib — itulah poin utama Livewire. Tetapi di episode 15-18, kalian akan berkenalan dengan Alpine.js (bundled dengan Livewire) untuk micro-interaction, jadi dasar JavaScript yang ringan akan menjadi nilai tambah.

#Perangkat Software dan Hardware yang Disiapkan

#PHP 8.2-8.4 dan Composer

Livewire v4 berjalan di atas Laravel 12/13 dengan PHP 8.2 sampai 8.4 (dukungan resmi PHP 8.3-8.5). Cek versi kalian:

php -v
composer --version

Jika belum ada, install lewat package manager distro atau Laravel Herd untuk macOS/Windows. Pastikan ekstensi PHP yang dibutuhkan Laravel aktif: pdo, mbstring, openssl, tokenizer, xml, dan json.

#Laravel 12/13

Livewire adalah package yang dipasang di atas project Laravel yang sudah ada. Buat project baru jika belum punya:

composer create-project laravel/laravel livewire-lab
cd livewire-lab

Laravel 12/13 mendukung PHP 8.2-8.4. Untuk series ini kita berasumsi kalian memakai Laravel 12 atau 13 dengan Livewire v4; jika project kalian masih Laravel 10 dengan Livewire v3.8.x, sebagian besar konsep tetap relevan namun beberapa sintaks v4 (seperti wire:model deferred default) berbeda — perbedaan itu kita bahas di episode 4.

#Database

Untuk episode 3-10, SQLite sudah cukup dan paling cepat untuk lab. Laravel otomatis memakainya saat DB_CONNECTION=sqlite di .env:

touch database/database.sqlite

MySQL atau PostgreSQL baru benar-benar dibutuhkan saat kita membahas query performance di episode 21. Kalian bisa menyiapkannya bertahap.

#Editor: VS Code + Intelephense

Laravel sangat diuntungkan editor dengan IntelliSense PHP yang kuat. VS Code dengan ekstensi PHP Intelephense adalah kombinasi paling umum, ditambah ekstensi Laravel Extra Intellisense untuk autocomplete Blade dan route. Navigasi "Go to Definition" ke kode framework sangat membantu saat kita membedah source code Livewire di episode-episode berikutnya.

#Verifikasi Environment

Sebelum lanjut ke episode 1, jalankan verifikasi menyeluruh:

php -v
composer --version
php artisan --version
php -m | grep -E "pdo|mbstring|openssl|tokenizer|xml"

php -v harus menampilkan versi 8.2 atau lebih tinggi, composer --version menampilkan Composer 2.x, php artisan --version menampilkan Laravel 12.x atau 13.x, dan kelima ekstensi di atas harus muncul di daftar module. Jika ada yang hilang, install ekstensinya dulu — tanpa pdo, Laravel tidak bisa terhubung ke database.

#Ringkasan Prasyarat

Rangkuman yang sudah kalian siapkan di episode 0:

• Skill Laravel: routing, controller, Blade, Eloquent — plus OOP PHP dan attribute #[...].
• Skill UI: HTML/CSS dasar; JavaScript tidak wajib (nilai tambah untuk episode 15-18).
• Runtime: PHP 8.2-8.4 + ekstensi wajib, Composer 2.x, dan Laravel 12/13.
• Database: SQLite cukup untuk 10 episode awal; MySQL/PostgreSQL menyusul.
• Editor: VS Code + Intelephense (atau editor PHP lain yang kalian nyaman).
• Verifikasi: php -v, composer --version, dan php artisan --version semua lolos.

Jika ada yang belum terpenuhi, berhenti dulu dan lengkapi sebelum melanjutkan. Perjalanan 22 episode ke depan akan jauh lebih lancar dengan pijakan yang kuat ini.

#Penutup

Inti yang harus dibawa pulang:

• Livewire memperluas Laravel, bukan menggantikannya — kuasai routing, Blade, dan Eloquent.
• PHP attributes (#[...]) adalah bahasa konfigurasi utama Livewire v4.
• Butuh PHP 8.2-8.4, Composer, dan Laravel 12/13; versi di bawah itu tidak akan jalan.
• JavaScript tidak wajib — satu bahasa (PHP/Blade) untuk seluruh aplikasi.

Di episode 1 selanjutnya kita akan membahas sejarah, latar belakang, dan mengapa kalian membutuhkan Livewire — dari kelahirannya oleh Caleb Porzio pada 2019, perjalanan v2, v3 yang menulis ulang mesin morphing dengan Alpine, hingga v4 di awal 2026, serta alasan Livewire tetap relevan sebagai cara membangun UI reactive tanpa SPA. Pastikan environment kalian sudah siap, karena perjalanan Belajar Livewire baru saja dimulai!