Panduan alur coding — Toko Mango (fullstack SMK)

0 Gambaran project (dua folder utama)

testfullstack/          ← folder project (buka di VS Code / Cursor)
├── backend/               ← API Express + MySQL  → http://localhost:5000
└── frontend/              ← React + Vite         → http://localhost:5173

Jalankan kedua terminal — web butuh API sudah hidup dulu.

1 Frontend ↔ Backend — panel admin (baca ini dulu)

1.1 Dua “aplikasi” terpisah

Browser hanya menampilkan React. React memanggil API lewat fetch ke http://localhost:5000.

1.2 Login admin — dari tombol sampai data muncul

[Siswa buka http://localhost:5173/login]
        │
        ▼
LoginPage.jsx  →  POST http://localhost:5000/api/users/login
        │              body: { email, passwd }
        ▼
usersController (backend)  →  cek password  →  JWT + role: "admin"
        │
        ▼
AuthContext.jsx  menyimpan token di localStorage
        │
        ▼
Navigate ke /admin  →  RequireAuth cek role === "admin"
        │
        ▼
AdminLayout (sidebar + konten)

• Satu login dipakai admin dan pembeli (/api/users/login).
• Perbedaan akses ada di field role di JWT: "admin" vs "pembeli".
• Route /admin/* hanya boleh dibuka jika role === "admin".

1.3 Satu halaman admin = React + banyak endpoint API

Contoh halaman Produk (/admin/produk):

Semua request admin memakai header:

Authorization: Bearer <token dari localStorage>

Diatur di frontend/src/api/http.js (authHeaders()).

1.4 Peta URL frontend admin ↔ API backend

Routing: frontend/src/App.jsx. API: frontend/src/api/adminApi.js.

1.5 Komponen frontend yang dipakai ulang

Alur CRUD (misalnya Kontak):

1. useAdminList(adminApi.getKontak) → tabel.
2. Detail → getKontakById → AdminDetailModal.
3. Ubah → AdminModal + updateKontak.
4. Hapus → deleteKontak + reload().

2 Alur sistem (besar — siapa ngapain)

2.1 Diagram umum fullstack

┌─────────────┐     HTTP (JSON)      ┌─────────────┐     SQL      ┌──────────┐
│   Browser   │ ◄──────────────────► │   Backend   │ ◄──────────► │  MySQL   │
│  React Vite │   localhost:5000     │   Express   │              │ toko DB  │
│    :5173    │                      │             │              │          │
└─────────────┘                      └─────────────┘              └──────────┘

2.2 Tiga “pengguna” sistem

• /api/users/... — toko publik + akun pembeli + pesanan sendiri.
• /api/admin/... — kelola semua data toko; wajib token admin.

Admin memakai GET /api/admin/me, bukan GET /api/users/me.

2.3 Alur admin mengelola toko

1. Import / buat database (toko_online.sql atau database/schema-latihan-toko.sql).
2. Pastikan ada user admin (seed-admin.sql atau data di dump).
3. Terminal 1: cd backend → npm run dev. Terminal 2: cd frontend → npm run dev.
4. Login di /login dengan akun admin.
5. Dashboard → /api/admin/stats.
6. Kelola: produk, pembeli, pesanan, artikel, kontak, info toko.

2.4 Alur pembeli (singkat)

1. Lihat katalog — tanpa login (GET /api/users/produk).
2. Daftar / login → JWT pembeli.
3. Checkout → POST /api/users/pembelian (id_pembeli dari token).
4. Riwayat → GET /api/users/pembelian.

Detail lengkap: lihat Bagian 6.

3 Alur coding (satu request masuk sampai keluar)

3.1 Backend — urutan eksekusi (MVC API)

Browser / React (fetch)
    → server.js              (Express, CORS, JSON body, static uploads)
    → routes/admin.js        (cocokkan URL + method)
    → middlewares/           (authenticate + requireRole("admin"))
    → controllers/           (validasi, aturan bisnis, status HTTP)
    → models/                (query SQL)
    → config/db.js           (pool MySQL)
    → respons JSON balik ke React

Kenapa urutannya begitu? Route = peta URL, controller = logika, model = data. Ganti database cukup sentuh models/.

3.2 Frontend admin — urutan eksekusi

AdminProdukPage.jsx (atau halaman lain)
    → adminApi.getProduk()     (adminApi.js)
    → http.js apiRequest()     (tambah Bearer token, base URL)
    → fetch → backend
    → setState(rows) → render tabel
    → AdminRowActions → modal Detail / Ubah / Hapus

Konfigurasi: frontend/.env.development → VITE_API_URL=http://localhost:5000.

3.3 Contoh: admin klik “Hapus produk”

4 Alur folder & file (mulai baca dari mana)

4.1 Pohon folder backend

backend/
├── server.js                 ← ① PINTU MASUK
├── .env                      ← ② PORT, JWT_SECRET, DB_*
├── config/db.js              ← ③ pool MySQL
├── routes/users.js, admin.js ← ④⑤ routing
├── middlewares/              ← ⑥⑦ auth, role, upload
├── controllers/              ← logika + JSON
├── models/                   ← SQL per tabel
├── uploads/images/
├── toko_online.sql
└── database/

4.2 Pohon folder frontend (admin)

frontend/src/
├── main.jsx, App.jsx         ← ①② routing
├── context/AuthContext.jsx, AdminShopContext.jsx
├── api/http.js, adminApi.js  ← ④⑤ panggil API
├── layouts/AdminLayout.jsx
├── pages/admin/              ← halaman panel
├── hooks/useAdminList.js, useAdminGuard.js
└── components/admin/

4.3 Urutan belajar (siswa)

4.4 Peran folder vs MVC

View HTML tidak ada di API — tampilan admin ada di React, backend hanya JSON.

5 Ringkasan endpoint /api/admin

Semua route di bawah router.use(authenticate, requireRole("admin")) di routes/admin.js.

6 Alur belanja pembeli (/api/users)

Base URL: http://localhost:5000/api/users

File terkait: routes/users.js → pembeliController.js → pembelianModel.js, dll.

7 File SQL & database

8 Upload gambar

9 Ringkasan satu kalimat

Panel admin: React di :5173 menampilkan /admin/* dan memanggil JSON API di :5000/api/admin/* dengan token JWT admin.

Backend: setiap request mengalir server.js → routes → middlewares → controllers → models → MySQL, lalu balik sebagai JSON ke React.