Mental Model Backend (Node.js + Express)

Analogi Sederhana

• Frontend (React) = tampilan yang dilihat user
• Backend (Node.js + Express) = otak + dapur proses
• Database = gudang data

Alur Dasar Aplikasi

1. User klik sesuatu di React
2. React kirim request ke backend
3. Backend proses logic
4. Backend ambil/simpan data ke database
5. Backend kirim response ke React
6. React tampilkan hasil ke UI

Istilah Penting

• Request - permintaan dari client ke server
• Response - jawaban server ke client
• API - jembatan komunikasi frontend-backend
• Endpoint - alamat URL spesifik untuk suatu aksi

Node.js

• Menjalankan JavaScript di sisi server
• Membuat tim bisa memakai bahasa yang sama di frontend dan backend

Express.js

• Framework ringan untuk membangun backend lebih cepat
• Mengatur routing URL
• Menangani request dan response
• Mendukung middleware (proses sebelum masuk logic utama)

Contoh Struktur

backend/
|
├── node_modules/
├── package.json
├── server.js / app.js
├── routes/
│   └── userRoutes.js
├── controllers/
│   └── userController.js
├── models/
│   └── userModel.js
├── middlewares/
│   └── authMiddleware.js
└── config/
    └── db.js

Fungsi Tiap Folder (Dengan Analogi)

• server.js / app.js - gerbang utama aplikasi
• routes/ - peta jalan URL
• controllers/ - otak logika proses
• models/ - representasi data dan akses database
• middlewares/ - satpam/filter sebelum request diproses
• config/ - pengaturan sistem (database, env, dll)

Urutan Berpikir yang Harus Ditanamkan

Step 1: Tentukan Fitur

• Login
• Register
• Ambil data user

Step 2: Tentukan Endpoint

• POST /login
• POST /register
• GET /users

Step 3: Bayangkan Alur Request

Frontend → /login → Backend

Step 4: Masuk ke Routes

• Routes menerima request
• Routes meneruskan ke controller yang tepat

Step 5: Masuk ke Controller

• Validasi input
• Jalankan business logic
• Panggil model untuk akses data

Step 6: Masuk ke Model

• Ambil data dari database
• Simpan/update/hapus data ke database

Step 7: Kirim Response

• Kirim hasil proses ke frontend (JSON)

Pola Inti yang Wajib Dihafal Secara Konsep

Request masuk
↓
Validasi data
↓
Proses logika
↓
Akses data (database)
↓
Buat response
↓
Kirim ke frontend

Dua Jenis Response

• Success response - proses berhasil (misalnya status 200/201)
• Error response - proses gagal (misalnya status 400/401/500)

Bagaimana React Berkomunikasi dengan Backend

Di project React (termasuk React + Vite), frontend biasanya:

• Mengirim request dengan fetch atau axios
• Menerima response dalam format JSON
• Menampilkan data/error ke UI

React Form → fetch/axios → API Backend → JSON Response → Update UI

Contoh Alur End-to-End

1. User isi form login di React
2. User klik tombol login
3. React kirim request ke endpoint POST /login
4. Backend validasi dan cek data user di database
5. Backend kirim response: berhasil atau gagal
6. React tampilkan feedback ke user

Rancangan Pertemuan

Pertemuan 1

• Konsep backend
• Request dan response
• API dan endpoint

Pertemuan 2

• Node.js dan Express
• Struktur project backend

Pertemuan 3

• Routing dan controller
• Flow tanpa coding dulu

Pertemuan 4

• Simulasi login/register dengan diagram
• Latihan identifikasi alur request-response

Pertemuan 5

• Mulai coding sederhana
• Implementasi endpoint dasar

Strategi Pengajaran

• Pakai analogi sehari-hari (restoran, kasir, dapur, gudang)
• Gambar flow di papan sebelum coding
• Jangan lompat ke syntax terlalu cepat
• Ulangi terus pola inti:

request → process → response