Vue · Bab 11
Tantangan
Dua tantangan akhir tingkat 5 untuk proyek sendiri, yaitu klien Vue untuk API Laravel milikmu dan klien orisinal untuk API Tantangan Laravel, lengkap dengan daftar periksa serah terima.
Kamu sudah membangun etalase dan kasir Smart Retail di lab. Tantangan ini memintamu melakukan hal yang sama tanpa kode awal dan tanpa cek otomatis, di laptop, untuk API buatanmu sendiri. Pilih salah satu, atau kerjakan keduanya berurutan.
T1 · Klien Vue untuk API Laravel Milikmu
Ambil proyek Laravel Lab 12/13 milikmu sendiri (API dengan login token dan transaksi), lalu buat klien Vue untuknya.
- Buat proyek dengan
npm create vue@latest(Router dan Pinia), pasang axios (bab 10). - Isi
.envdenganVITE_API_URL=http://127.0.0.1:8000/api; sediakan.env.example. - Pastikan
config/cors.phpmilikmu mengizinkanhttp://localhost:5173diallowed_origins. - Jalankan keduanya berdampingan:
# terminal 1, di folder Laravel
php artisan serve
# terminal 2, di folder Vue
npm run dev- Bangun halaman: katalog dengan cari dan paginasi, detail, login, panel yang dijaga guard, tambah/ubah/hapus sesuai peran, dan pencatatan transaksi.
Yang membedakan dari lab: data dan aturannya milikmu. Bila API-mu menjawab sesuatu yang tidak kamu duga, perbaiki di sisi yang benar. Validasi dan izin diperbaiki di Laravel; tampilan dan pesan diperbaiki di Vue.
T2 · Klien Orisinal untuk API Tantangan Laravel
Pakai API dari Tantangan Laravel bab 19 (minimal 3 tabel yang berelasi, login, dan peran). Rancang sendiri halaman-halamannya, misalnya aplikasi peminjaman alat, pendaftaran kegiatan, atau katalog perpustakaan kecil.
- Tentukan dulu rute dan komponennya di kertas: halaman apa, siapa yang boleh membukanya, data apa yang diambil.
- Tentukan apa yang disimpan di store (sesi, pilihan yang dipakai beberapa halaman) dan apa yang tetap lokal.
- Tulis teks keadaan kosong dan galat untuk setiap halaman sebelum menata tampilannya.
Daftar Periksa Serah Terima
Periksa sendiri sebelum menyatakan selesai. Setiap butir harus bisa kamu tunjukkan, bukan hanya kamu yakini.
| Butir | Cara membuktikan |
|---|---|
README lengkap | orang lain bisa menjalankan proyekmu hanya dari README |
.env.example ada, .env tidak di-commit | git status dan isi repositori |
| empat keadaan per halaman | matikan php artisan serve: halaman menampilkan galat yang membantu, bukan layar kosong |
| 401, 403, 422, 429 tertangani | login salah, token dicabut, aksi tanpa izin, isian tidak valid, login berulang |
| responsif | uji di lebar 375 dan 1024 |
| aksesibilitas | axe tanpa pelanggaran; menu dan form bisa dipakai dengan keyboard saja |
| build bersih | npm run build tanpa peringatan |
| publikasi | build statis terpasang dengan mode demo bila API tidak ikut dipublikasikan (bab 10) |
Setelah Ini
Dengan tantangan ini, kamu sudah menempuh jalur lengkap: HTML dan CSS untuk struktur dan tampilan, JavaScript untuk perilaku, Laravel untuk server dan API, dan Vue untuk frontend terpisah di atasnya. Proyek T1 atau T2 yang dipublikasikan adalah portofolio yang bisa kamu tunjukkan: tautan demo, repositori, dan README yang menjelaskan keputusanmu.