Membangun panel pertama Anda
Delapan langkah, dari direktori kosong sampai panel admin yang layak diserahkan ke orang lain: katalog produk dengan tabel yang bisa dicari, form yang tervalidasi, tombol publikasi, dan dasbor yang menghitung sesuatu. Semua perintah di sini Anda jalankan sendiri, dan setiap file yang dihasilkan ditampilkan.
Siapkan sekitar 45 menit. Tidak ada yang dibuang setelah selesai — panel yang Anda hasilkan di akhir adalah panel yang akan Anda kembangkan berikutnya.
Sudah punya aplikasi Laravel?
Lompat ke langkah 3 dan pasang di sana. Langkah 2 ada karena Laravel Vue starter kit adalah jalan tercepat menuju frontend yang langsung jalan, bukan karena paket ini mewajibkannya.
Apa yang akan Anda bangun
Panel di /admin | Punya path, navigasi, middleware, dan aturan akses sendiri |
Resource Product | Halaman list, create, view, dan edit — sudah ter-routing dan muncul di sidebar |
| Tabel | Pencarian, sorting, filter status, kolom badge dan mata uang |
| Form | Tata letak dua kolom, validasi, select, dan date picker |
| Action | Tombol Publish sekali klik dengan konfirmasi, hanya pada baris yang relevan |
| Widget | Tiga angka di dasbor, lengkap dengan warna dan ikon |
| Policy | Karena resource tanpa policy menjawab 403 — dan itu memang disengaja |
Delapan langkahnya
| Langkah | Yang terjadi | Waktu |
|---|---|---|
| 1 · Menyiapkan lingkungan kerja | Memeriksa PHP, Node, ekstensi, dan database | 5 menit |
| 2 · Membuat proyek | Aplikasi Laravel Vue starter kit yang sudah berjalan | 5 menit |
| 3 · Memasang PandaBear | composer require, panel:install, dan cara membaca laporannya | 10 menit |
| 4 · Akun pertama dan login | panel:user, dan arti dua aturan akses itu | 5 menit |
| 5 · Resource pertama | Model, migrasi, resource, dan policy yang dibutuhkannya | 10 menit |
| 6 · Merapikan form dan tabel | Field sungguhan, kolom sungguhan, filter, dan pencarian | 10 menit |
| 7 · Action dan widget dasbor | Action publikasi dan widget statistik | 10 menit |
| 8 · Naik ke produksi | Build, cache, dan checklist sebelum deploy | 5 menit |
Cara membaca tutorial ini
Setiap langkah memakai bentuk yang sama, jadi Anda bisa melewati bagian yang sudah dikuasai:
- Tujuan — satu kalimat tentang apa yang berubah.
- Lakukan ini — perintah dan file, berurutan.
- Pastikan berhasil — sesuatu yang konkret untuk dilihat sebelum lanjut.
- Kalau gagal — dua atau tiga hal yang memang benar-benar sering salah di langkah itu.
Semua perintah diasumsikan dijalankan dari root proyek. Blok kode yang mengganti seluruh isi file menampilkan file utuh; blok yang hanya mengubah sebagian akan menyebutkannya di atas blok.
Model berpikirnya, dalam empat kalimat
Empat istilah ini muncul di hampir setiap halaman, jadi sekali baca sekarang akan menghemat waktu.
- Panel adalah prefix URL dengan navigasi, middleware, dan aturan akses sendiri. Satu aplikasi boleh punya beberapa — panel admin dan panel pelanggan, berdampingan.
- Resource adalah satu model Eloquent yang ditampilkan di dalam satu panel: tabel, form, halaman, dan satu query yang dibaca semuanya.
- Schema —
FormSchema,TableSchema,InfolistSchema— adalah deskripsi PHP tentang apa yang dirender. Validasi, sorting, filter, dan otorisasi berjalan di server; Vue merender apa yang diberikan kepadanya. - Action adalah operasi backend yang bisa diminta frontend berdasarkan nama. Definisi tombolnya menyeberang ke browser; handler-nya tidak pernah.
Pembahasan lengkapnya ada di Core concepts — tapi Anda tidak membutuhkannya untuk menyelesaikan tutorial ini.
Istilah teknis dibiarkan dalam bahasa Inggris
Resource, Panel, Action, Widget adalah nama yang Anda ketik di dalam kode, jadi tidak diterjemahkan. Kalau ada istilah yang terasa asing, buka glosarium.
Mulai di sini → 1 · Menyiapkan lingkungan kerja