Panduan alur coding — Portal Berita (fullstack)

0 Gambaran project (tiga folder utama)

NEWS PKL/                 ← folder project (buka di VS Code / Cursor)
├── database/               ← schema.sql + seed.sql (PostgreSQL)
├── backend/                ← API Express + pg     → http://localhost:5000
└── frontend/               ← React + Vite         → http://localhost:5173

Jalankan kedua terminal setelah database siap — web butuh API sudah hidup.

1 Frontend ↔ Backend (baca ini dulu)

1.1 Dua aplikasi terpisah

Browser hanya menampilkan React. React memanggil API lewat apiFetch di frontend/src/services/api.js ke http://localhost:5000/api/....

1.2 Login — dari tombol sampai dashboard

[Buka http://localhost:5173/login]
        │
        ▼
Login.jsx  →  authService.login(email, password)
        │         POST http://localhost:5000/api/auth/login
        ▼
authController.login  →  bcrypt.compare  →  JWT + { id, nama, email, role }
        │
        ▼
setAuth(token, user)  →  localStorage "token" + "user"
        │
        ▼
Navigate: role === "admin"  → /dashboard/admin
          role === "author" → /dashboard/author
        │
        ▼
ProtectedRoute cek getUser().role  →  AdminLayout / AuthorLayout

• Satu halaman login untuk admin dan author (POST /api/auth/login).
• Perbedaan akses ada di field role: "admin" vs "author".
• Akun admin hanya dari seed.sql. Pendaftaran publik (/daftar) selalu membuat author.

1.3 Contoh: author menulis berita

Request yang butuh login memakai header (otomatis di apiFetch):

Authorization: Bearer <token dari localStorage>

1.4 Peta halaman ↔ API utama

Routing: frontend/src/routes/index.jsx. Panggilan API: folder frontend/src/services/.

1.5 Batasan penting (supaya tidak bingung)

• Author: CRUD berita milik sendiri saja. Tidak mengatur headline / info web / user lain.
• Admin: lihat semua berita, hapus, set/cabut headline. Tidak boleh create/edit isi berita.
• Admin: kelola author (list, detail, edit nama/email, hapus + cascade berita).
• info_web: satu baris — admin hanya UPDATE (plus upload logo).

2 Alur sistem (siapa ngapain)

2.1 Diagram umum fullstack

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

2.2 Tiga area pengguna

2.3 Alur singkat: publik baca berita

1. Buka Home → getHeadline() + getBerita({ limit }) + getInfoWeb().
2. Klik kartu → /berita/:id → getBeritaById(id).
3. Filter kategori → /kategori/teknologi → getBerita({ kategori: "Teknologi" }).

2.4 Alur singkat: admin moderasi

1. Login admin → dashboard hitung author/berita/headline dari API admin.
2. List berita → set headline (PATCH .../headline) atau cabut (DELETE .../headline).
3. Hapus berita / hapus author → backend hapus record + file gambar di uploads/.
4. Info Web → form + FormData logo → PUT /api/info-web.

3 Alur coding (satu request masuk sampai keluar)

3.1 Backend — urutan eksekusi (MVC API)

Browser / React (apiFetch)
    → server.js                 (Express, CORS, JSON, static /uploads)
    → routes/*.js               (cocokkan URL + method)
    → middlewares/              (auth JWT, role, multer upload)
    → controllers/              (validasi, aturan bisnis, success/fail)
    → models/                   (query SQL parameterized $1, $2, ...)
    → config/db.js              (Pool PostgreSQL)
    → respons JSON balik ke React

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

3.2 Frontend — urutan eksekusi

Page (mis. BeritaSaya.jsx / Home.jsx)
    → services/beritaService.js   (getBeritaSaya, getBerita, ...)
    → services/api.js apiFetch()  (base URL + Bearer token)
    → fetch → backend
    → setState(...) → render (tabel / BeritaCard)

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

3.3 Contoh: author klik “Hapus berita”

4 Alur folder & file (mulai baca dari mana)

4.1 Pohon folder backend (inti)

backend/
├── server.js                 ← ① PINTU MASUK
├── .env                      ← ② PORT, JWT_SECRET, DB_*, FRONTEND_URL
├── config/db.js              ← ③ Pool PostgreSQL
├── routes/                   ← ④ auth, berita, admin, infoWeb
├── middlewares/              ← ⑤ auth, role, upload
├── controllers/              ← logika + JSON
├── models/                   ← SQL per tabel
├── utils/response.js, fileHelper.js
└── uploads/berita|logo|sosmed/

4.2 Pohon folder frontend (inti)

frontend/src/
├── main.jsx, App.jsx         ← ①② entry + Router
├── routes/index.jsx          ← ③ semua <Route> + ProtectedRoute
├── services/                 ← ④ api.js + *Service.js
├── pages/public|dashboard/   ← halaman
├── components/layout|berita|home|auth|common
└── styles/custom.css

4.3 Urutan belajar (disarankan)

4.4 Folder vs MVC

View HTML server tidak ada — tampilan ada di React; backend hanya JSON (+ file statis /uploads).

5 Ringkasan endpoint API

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

6 Database (PostgreSQL)

7 Upload gambar

8 Ringkasan

1. Frontend React dan backend Express adalah dua aplikasi; data lewat REST JSON.
2. Backend mengikuti Routes → Middleware → Controller → Model → PostgreSQL.
3. Frontend: Page → Service → apiFetch → setState → tampilan.
4. Role menentukan dashboard dan endpoint: publik / author / admin.
5. Pelajari satu fitur utuh dulu (misalnya list berita Home), baru perluas ke auth dan dashboard.