Pengantar

HTTP Request adalah cara frontend berkomunikasi dengan backend untuk mengambil atau mengirim data.

API (Application Programming Interface) adalah "jembatan" yang menghubungkan frontend dengan backend.

Analogi Sederhana

Frontend = Pelanggan (User)
Backend  = Dapur (Server)
API      = Pelayan (Penghubung)

Alur:
1. Pelanggan pesan makanan (request)
2. Pelayan bawa ke dapur (API)
3. Dapur memasak (backend proses)
4. Pelayan antar makanan (response)

Jenis HTTP Request

GET    = Ambil data
POST   = Kirim data baru
PUT    = Update data
DELETE = Hapus data

Contoh:
GET    /users      → ambil semua user
POST   /users      → tambah user
PUT    /users/1    → update user id 1
DELETE /users/1    → hapus user id 1

Alur API (Frontend ↔ Backend)

1. User klik tombol di frontend (React)
2. Frontend kirim request ke API (Express)
3. Backend menerima request
4. Backend ambil / simpan data ke database (MySQL)
5. Backend kirim response (JSON)
6. Frontend menampilkan data ke user

Contoh Alur Nyata

Kasus: Ambil data user

Frontend:
fetch("http://localhost:5000/users")

Backend:
app.get("/users", (req, res) => {
  res.json([
    { id: 1, nama: "Budi" }
  ]);
});

Hasil:
Frontend menerima data JSON lalu ditampilkan ke halaman

Struktur HTTP Request

Request terdiri dari:

1. URL
   http://localhost:5000/users

2. Method
   GET / POST / PUT / DELETE

3. Headers
   (info tambahan, contoh: token JWT)

4. Body
   (data yang dikirim, biasanya JSON)

Response dari Backend

Response biasanya berupa JSON:

{
  "status": "success",
  "data": [...]
}

Status code penting:
200 = sukses
201 = berhasil dibuat
400 = error dari user
401 = tidak punya akses
500 = error server

Hubungan dengan Project Kalian

Frontend (React)
↓
services/api.js → kirim request (fetch / axios)
↓
Backend (Express)
↓
Database (MySQL)

Jadi:
Frontend TIDAK langsung ke database
Frontend HARUS lewat backend (API)

Catatan Penting

- API menggunakan format JSON
- Gunakan CORS agar frontend bisa akses backend
- Pisahkan logic frontend dan backend
- Selalu handle error (try-catch)

INTINYA:
Frontend = tampilan
Backend  = logic + data
API      = penghubung