Minggu 08 — Full-Stack AI Development

Alur full-stack

Browser (form)  →  fetch('/api/courses')  →  Backend (validasi, logika)  →  Database
      ↑                                                  ↓
   render ← JSON response ←─────────────────────────────┘

const res = await fetch('/api/courses?q=go&page=2');
if (!res.ok) throw new Error('Gagal memuat');
const { data, total } = await res.json();

Login, role, permission, sesi

• Sesi: setelah login, server memberi penanda (cookie sesi atau token) yang dikirim browser di setiap request.
• Role: kelompok hak akses, misalnya admin, instruktur, siswa.
• Permission: izin spesifik, misalnya "hapus kursus". Periksa di server pada setiap endpoint, bukan hanya menyembunyikan tombol di UI.

Pagination, search, filter

Jangan kirim 10.000 baris sekaligus. Kirim per halaman:

GET /api/courses?q=python&level=pemula&page=2&per_page=10
SELECT * FROM courses WHERE title ILIKE '%python%' AND level = 'pemula'
ORDER BY id LIMIT 10 OFFSET 10;

OFFSET = (halaman − 1) × per_page.

Upload file

• Batasi ukuran dan tipe file (misalnya gambar JPG/PNG maks 2 MB).
• Periksa tipe di server, ganti nama file dengan nama acak, simpan di luar folder yang bisa dieksekusi.

Validasi dua sisi

Validasi di client demi kenyamanan (cepat), validasi di server demi keamanan (wajib). Klien bisa dilewati; server tidak boleh percaya data apa pun.

Mengelola perubahan database

Setiap fitur yang butuh kolom baru = satu migration baru. Jangan mengubah tabel manual di production. Selalu cadangkan sebelum migrasi.

Praktik minggu ini

Bangun MVP platform kursus: katalog, detail kursus, login, dan pengelolaan konten. Target: aplikasi full-stack dengan alur utama berfungsi.