Memahami dan Membuat Routing Dasar di Express.js - Perwira Learning Center

 

 

1. Latar Belakang

    Hari ini saya akan melanjutkan pembelajaran Express.js untuk membahas Routing Dasar di Express.js. Routing itu ibarat peta restoran di mall besar:

• Restoran = Aplikasi kita
• Meja-meja = Route/endpoint yang berbeda
• Menu di setiap meja = Logika bisnis di setiap route
• Pelayan = Express.js yang arahin request ke tempat yang benar

Tanpa routing yang baik, aplikasi kita kayak restoran chaos: semua order dicampur, gak tau mana meja mana!

 

2. Alat dan Bahan

a. Perangkat Lunak

1. Express.js Project yang sudah setup
2. Postman - Untuk test semua jenis HTTP method
3. Browser dengan DevTools - Untuk inspect routing
4. VS Code - Untuk coding
5. Terminal - Untuk jalanin server

b. Perangkat Keras

1. Laptop/PC (spesifikasi sama seperti sebelumnya)

 

3. Pembahasan

3.1 Apa itu Routing?

Routing = Proses menentukan bagaimana aplikasi merespons request client ke endpoint tertentu.

Analogi SIMPLE:

javascript

// Express Routing = Kantor Pos
// '/letters'    = Kotak surat untuk surat
// '/packages'   = Kotak surat untuk paket  
// '/express'    = Kotak surat untuk kilat
// Function      = Petugas yang proses isi kotak

3.2 Struktur Dasar Route di Express

Basic Syntax:

Artinya:

• app = Aplikasi Express kita
• .get = HTTP Method (GET, POST, dll)
• '/users' = Path/endpoint
• (req, res) => { ... } = Handler function yang dijalankan

3.3 Jenis-jenis HTTP Method untuk Routing

1. GET - Read Data

2. POST - Create Data

3. PUT - Update Data

4. PATCH - Partial Update

5. DELETE - Hapus Data

3.4 Praktik Lengkap: CRUD Routing untuk User Management

Karna kodenya banyak, kalian bisa coba akses aja di repository GitHub saya di https://github.com/Vortechlabs/belajar-expressjs. Jangan lupa distar dan di follow akun GitHub saya ya.

3.5 Cara Testing Routing dengan Postman

1. Setup Postman Collection:

text

📁 User Management API
├── 📂 GET Requests
│   ├── GET All Users
│   ├── GET User by ID
│   ├── GET Search Users
│   └── GET Active Users
├── 📂 POST Requests  
│   ├── POST Create User
│   └── POST Bulk Create
├── 📂 PUT Requests
│   └── PUT Update User
└── 📂 DELETE Requests
    └── DELETE User

2. Contoh Testing:

Test 1: GET All Users

text

Method: GET
URL: http://localhost:3002/api/users
Response: 200 OK dengan list users

Test 2: POST Create User

text

Method: POST
URL: http://localhost:3002/api/users
Headers: Content-Type: application/json
Body (raw JSON):
{
  "name": "Dian Sastro",
  "email": "dian@email.com",
  "age": 28
}
Response: 201 Created

Test 3: PUT Update User

text

Method: PUT  
URL: http://localhost:3002/api/users/1
Headers: Content-Type: application/json
Body:
{
  "name": "Andi Wijaya Updated",
  "email": "andi.new@email.com",
  "age": 26,
  "isActive": true
}
Response: 200 OK

Test 4: DELETE User

text

Method: DELETE
URL: http://localhost:3002/api/users/2
Response: 200 OK dengan data user yang dihapus

3.6 Route Parameters vs Query Parameters

Route Parameters:

javascript

// URL: /api/users/123
app.get('/api/users/:id', (req, res) => {
  const userId = req.params.id; // "123"
  // Untuk mengambil resource spesifik
});

Query Parameters:

javascript

// URL: /api/users/search?name=andi&age=25
app.get('/api/users/search', (req, res) => {
  const name = req.query.name; // "andi"
  const age = req.query.age;   // "25"
  // Untuk filtering, sorting, pagination
});

Kapan Pakai Yang Mana:

Parameter Type	Contoh URL	Kegunaan
Route Param	/users/123	Spesifik resource
Query Param	/users?role=admin	Filtering/Options
Keduanya	/users/123/posts?status=published	Resource + Filter

3.7 Nested Routing (Route Bersarang)

javascript

// User's Posts Routes
app.get('/api/users/:userId/posts', (req, res) => {
  const userId = req.params.userId;
  // Get all posts by user
});

app.get('/api/users/:userId/posts/:postId', (req, res) => {
  const { userId, postId } = req.params;
  // Get specific post by user
});

app.post('/api/users/:userId/posts', (req, res) => {
  const userId = req.params.userId;
  const postData = req.body;
  // Create new post for user
});

Struktur RESTful yang baik:

text

/users          → Collection of users
/users/:id      → Specific user  
/users/:id/posts → Collection of user's posts
/users/:id/posts/:postId → Specific post of user

3.8 Route Method Chaining

javascript

// Route chaining untuk path yang sama
app.route('/api/products')
  .get((req, res) => {
    // GET /api/products
    res.json({ message: 'Get all products' });
  })
  .post((req, res) => {
    // POST /api/products
    res.json({ message: 'Create product' });
  });

// Atau lebih panjang
app.route('/api/products/:id')
  .get((req, res) => {
    // GET /api/products/:id
    const productId = req.params.id;
    res.json({ message: `Get product ${productId}` });
  })
  .put((req, res) => {
    // PUT /api/products/:id
    res.json({ message: 'Update product' });
  })
  .delete((req, res) => {
    // DELETE /api/products/:id
    res.json({ message: 'Delete product' });
  });

3.9 Validasi dan Middleware di Route

javascript

// Middleware untuk validasi
const validateUserData = (req, res, next) => {
  const { name, email } = req.body;
  
  if (!name || !email) {
    return res.status(400).json({
      error: 'Name and email are required'
    });
  }
  
  // Email validation
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!emailRegex.test(email)) {
    return res.status(400).json({
      error: 'Invalid email format'
    });
  }
  
  next(); // Lanjut ke handler berikutnya
};

// Gunakan middleware di route
app.post('/api/users', validateUserData, (req, res) => {
  // Handler hanya dijalankan jika validasi lolos
  res.status(201).json({ message: 'User created' });
});

// Multiple middleware
app.put('/api/users/:id', 
  validateUserData,
  checkUserExists,
  (req, res) => {
    // Handler
  }
);

3.10 Best Practices Routing

1. Konsisten Naming Convention:

javascript

// ✅ Good
GET    /api/users      # Get all users
GET    /api/users/:id  # Get user by ID
POST   /api/users      # Create user
PUT    /api/users/:id  # Update user
DELETE /api/users/:id  # Delete user

// ❌ Bad (inconsistent)
GET    /getUsers
POST   /createUser
PUT    /updateUser/:id
DELETE /removeUser/:id

2. Versioning API:

javascript

// Version 1
app.get('/api/v1/users', (req, res) => { /* ... */ });

// Version 2 (future)
app.get('/api/v2/users', (req, res) => { /* ... */ });

3. Gunakan Router untuk Modularitas:

javascript

// File: routes/userRoutes.js
const express = require('express');
const router = express.Router();

router.get('/', (req, res) => {
  // GET /api/users
});

router.post('/', (req, res) => {
  // POST /api/users
});

module.exports = router;

// File: server.js
const userRoutes = require('./routes/userRoutes');
app.use('/api/users', userRoutes);

3.11 Latihan Praktikum

Exercise 1: Todo List CRUD

javascript

// Buat CRUD routes untuk Todo List:
// GET    /api/todos           → Get all todos
// GET    /api/todos/:id       → Get todo by ID
// POST   /api/todos           → Create new todo
// PUT    /api/todos/:id       → Update todo
// DELETE /api/todos/:id       → Delete todo
// GET    /api/todos/completed → Get completed todos
// GET    /api/todos/pending   → Get pending todos

Exercise 2: E-commerce Routes

javascript

// Design routes untuk e-commerce:
// Products:
// - GET    /api/products
// - GET    /api/products/:id
// - GET    /api/products/category/:category
// - POST   /api/products (admin only)
// - PUT    /api/products/:id (admin only)
// - DELETE /api/products/:id (admin only)

// Orders:
// - POST   /api/orders          → Create order
// - GET    /api/orders/:id      → Get order details
// - GET    /api/users/:id/orders → Get user's orders

3.12 Troubleshooting Routing

Problem: Route Tidak Terpanggil

javascript

// ❌ Wrong order - 404 handler dipanggil duluan
app.use('*', (req, res) => { /* 404 handler */ });
app.get('/api/users', (req, res) => { /* Never reached */ });

// ✅ Correct order - spesifik dulu, baru 404
app.get('/api/users', (req, res) => { /* Handler */ });
app.use('*', (req, res) => { /* 404 handler */ });

Problem: Route Parameter Tidak Bekerja

javascript

// ❌ Wrong - static route duluan
app.get('/api/users/active', (req, res) => { /* Handler */ });
app.get('/api/users/:id', (req, res) => { 
  // '/api/users/active' akan masuk ke sini!
});

// ✅ Correct - spesifik dulu
app.get('/api/users/:id', (req, res) => { /* Handler */ });
app.get('/api/users/active', (req, res) => { /* Handler */ });

Problem: Request Body Undefined

javascript

// Jangan lupa middleware untuk parse JSON!
app.use(express.json()); // ← INI PENTING!
app.post('/api/users', (req, res) => {
  console.log(req.body); // Sekarang ada isinya
});

 

4. Daftar Pustaka

1. Express.js Documentation (2024). Routing Guide. Diakses dari https://expressjs.com/en/guide/routing.html
2. MDN Web Docs (2024). Express/Node Routing. Diakses dari https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes
3. REST API Tutorial (2024). REST Resource Naming Guide. Diakses dari https://restfulapi.net/resource-naming/
4. Postman Blog (2024). API Design Best Practices. Diakses dari https://blog.postman.com/api-design-best-practices/
5. Perwira Learning Center (2024). Modul Routing & Middleware. Materi internal PLC.
6. W3Schools (2024). Express.js Routing. Diakses dari https://www.w3schools.com/nodejs/nodejs_express.asp
7. freeCodeCamp (2024). Express.js Routing Tutorial. Diakses dari https://www.freecodecamp.org/news/express-js-routing-tutorial/