Install Express dan Alur Fullstack Dasar

Step Install Backend Project

mkdir backend
cd backend
npm init -y
npm install express

Penjelasan:

• npm init -y - membuat project Node.js
• npm install express - install framework backend

Tambahan Opsional (Tapi Penting)

npm install nodemon

nodemon dipakai untuk auto restart server saat file berubah.

Bukan Backend Saja, Tapi Fullstack

project-fullstack/
│
├── frontend/
│   ├── node_modules/
│   ├── public/
│   ├── src/
│   │   ├── components/
│   │   ├── pages/
│   │   ├── routes/
│   │   ├── services/      <-- berisi fungsi untuk komunikasi API (GET, POST, dll ke backend)
│   │   └── App.jsx
│   ├── package.json
│   └── vite.config.js
│
├── backend/
│   ├── node_modules/
│   ├── package.json
│   ├── server.js
│   ├── routes/
│   ├── controllers/
│   ├── models/
│   ├── middlewares/
│   └── config/
│
└── README.md

Frontend (React + Vite)

• Menampilkan UI
• Menangani interaksi user
• Mengirim request ke backend
• Folder penting: services/ untuk fetch API

Backend (Node.js + Express)

• Menerima request
• Memproses data
• Mengirim response

Flow Paling Penting

User
↓
Frontend (React)
↓ (request)
Backend (Express)
↓
Controller
↓
Model / Database
↓
Controller
↓ (response JSON)
Frontend
↓
UI berubah

Tekankan bahwa:

• Data dikirim dalam format JSON
• Komunikasi memakai HTTP (GET, POST, PUT, DELETE)

Urutan Berpikir

a. Mulai dari fitur

• Login
• Register
• List data

b. Tentukan endpoint backend

• POST /login
• GET /users

c. Buat alur backend

Route -> Controller -> Model

d. Hubungkan ke frontend

React kirim request ke endpoint backend.

e. Tampilkan hasil di UI

Tampilkan data sukses atau pesan error ke user.

Contoh: Register User

Dari sisi user

1. Isi form di React
2. Klik submit

Di frontend

3. Data dikirim ke backend

Di backend

4. Route menerima request
5. Controller melakukan validasi dan proses simpan data
6. Model berinteraksi dengan database
7. Backend kirim response

Kembali ke frontend

8. Tampilkan hasil: sukses atau error

Tahapan Belajar

Tahap 1

• Install Node.js dan Express
• Jalankan server sederhana

Tahap 2

• Buat struktur backend

Tahap 3

• Pahami alur Route -> Controller

Tahap 4

• Buat 1 endpoint sederhana

Tahap 5

• Hubungkan React ke backend

Tahap 6

• Buat fitur sederhana (login/register)

• Menganggap backend = database saja
• Langsung coding tanpa paham flow
• Menaruh semua logic di satu file
• Tidak memisahkan frontend dan backend

Ulangi ini terus di kelas:

Frontend itu minta data, backend itu ngasih data.

Dan pola inti:

Route -> Controller -> Model -> Response