Web Modern - 20 jam

Sudah dua kali saya membuat project sederhana dengna bantuan chatGPT, dan itu jalan tentunya dengan beberapa error yang lumayan pusing. setelah saya pelajari lebih dalam, ternyata errornya dikarenakan saya tidak paham atau setengah paham tentang code yang saya tuliskan, lebih tepatnya yang saya copy dan paste dari chatGPT. 

kali ini saya tetap akan membuat project ke-3 tetapi dengan pendetakan yang berbeda. belajar 20 jam dengan sistem josh kauffman pada buku yang ditulis “The First 20 Hours: How to Learn Anything… Fast!”. Saya tetap menggunakan chatGPT yang menjadi tutor saya dengan membagi modul-modulnya.

project akhir: aplikasi admin dashboard untuk management user, atau yang lain.

• Pendahuluan

• Minggu 1: CRUD dan Laravel dasar (dengan cuplikan kode)

• Minggu 2: Vue dan API interaction

• Minggu 3: Autentikasi Login & Register

• Minggu 4: Role & Permission

• Penutup: Refleksi, apa yang kamu pelajari, dan apa selanjutnya

✅ Minggu 1 (Jam 1–5): Dasar Laravel + CRUD User

📌 Tujuan: Membuat Laravel API + CRUD User (tanpa auth dulu)

Checklist:

• Install Laravel + setup MySQL + konfigurasi .env

• Buat model User + migrasi + seeder dummy user

• Buat UserController dan route API (index, store, update, destroy)

• Tes endpoint dengan Postman

• Konsep: Routing → Controller → Model → Database (ORM)

✅ Minggu 2 (Jam 6–10): Frontend Vue + Tampil User

📌 Tujuan: Menampilkan user dari API ke tabel Vue

Checklist:

• Buat proyek Vue 3 baru

• Setup Tailwind CSS

• Buat halaman UserList.vue → fetch API dari Laravel → tampilkan data

• Buat tombol tambah, edit, hapus (pakai modal atau halaman terpisah)

• Struktur folder: services/, components/, pages/

✅ Minggu 3 (Jam 11–15): Login, Logout, Registrasi (Auth)

📌 Tujuan: Menambahkan autentikasi user via Laravel Sanctum

Checklist:

• Setup Sanctum di Laravel

• Buat endpoint: login, logout, register, me

• Di Vue, buat form login dan register

• Simpan token (via cookie atau localStorage)

• Tampilkan “Selamat Datang, [nama]” di dashboard

✅ Minggu 4 (Jam 16–20): Role & Permission + Finishing

📌 Tujuan: Buat sistem role (admin, user) dan proteksi fitur

Checklist:

• Buat tabel roles, permissions, role_user, permission_role

• Tambah relasi belongsToMany di model

• Buat middleware untuk membatasi fitur (contoh: hanya admin bisa CRUD user)

• Buat halaman dashboard admin (statistik user/role)

• Deploy backend ke Railway / Render, frontend ke Netlify / Vercel