Membuat REST API dengan JavaScript Menggunakan Express.js dan Laragon

10 Sep, 2026 Posting Komentar

Pada tutorial kali ini kita akan belajar membuat REST API menggunakan JavaScript dengan Express.js.

Kita akan membuat REST API sederhana yang dapat digunakan untuk:

Menampilkan data
Menambahkan data
Mengubah data
Menghapus data

Untuk menjalankan project, kita akan menggunakan Laragon sebagai local development environment dan Node.js + Express.js sebagai teknologi utama.

Tutorial ini cocok untuk pemula yang ingin mulai belajar membuat Backend API menggunakan JavaScript.

1. Apa Itu REST API?

REST API adalah sebuah mekanisme yang memungkinkan aplikasi saling berkomunikasi menggunakan protokol HTTP.

Contohnya, kita memiliki aplikasi:

Frontend
   |
   | Request
   v
REST API
   |
   v
Database

Frontend dapat meminta data kepada REST API.

Misalnya:

GET /api/products

Kemudian server akan memberikan response dalam format JSON:

[
    {
        "id": 1,
        "name": "Laptop",
        "price": 7500000
    },
    {
        "id": 2,
        "name": "Mouse",
        "price": 150000
    }
]

REST API biasanya menggunakan beberapa HTTP Method utama:

Method	Fungsi
GET	Mengambil data
POST	Menambahkan data
PUT	Mengubah data
DELETE	Menghapus data

2. Tools yang Digunakan

Pada tutorial ini kita menggunakan beberapa tools:

Laragon
Node.js
Express.js
Visual Studio Code
Postman

Laragon akan kita gunakan sebagai environment development di komputer lokal.

Node.js digunakan untuk menjalankan JavaScript di sisi server.

Express.js digunakan sebagai framework untuk membuat REST API.

Postman digunakan untuk melakukan testing API.

3. Install Laragon

Silakan install Laragon terlebih dahulu.

Setelah Laragon berhasil di-install, jalankan aplikasi Laragon.

Pada tutorial ini kita tidak menggunakan Apache atau Nginx sebagai web server utama untuk API.

Express.js akan menjalankan server menggunakan Node.js.

Struktur sederhananya:

Laragon
└── www
    └── belajar-api

4. Cek Node.js

Sebelum membuat project, kita perlu memastikan Node.js sudah tersedia.

Buka Terminal / PowerShell kemudian jalankan:

node -v

Contohnya:

v22.14.0

Kemudian cek npm:

npm -v

Jika versi Node.js dan npm muncul, berarti Node.js sudah siap digunakan.

5. Membuat Project REST API

Masuk ke folder www milik Laragon.

Biasanya berada di:

C:\laragon\www

Kemudian buka terminal pada folder tersebut.

Jalankan:

mkdir belajar-api

Masuk ke folder:

cd belajar-api

Kemudian buat project Node.js:

npm init -y

Perintah tersebut akan membuat file:

package.json

File tersebut digunakan untuk menyimpan konfigurasi dan dependency project Node.js.

6. Install Express.js

Sekarang kita install Express.js.

Jalankan:

npm install express

Setelah proses selesai, akan muncul folder:

node_modules

dan file:

package-lock.json

Struktur project sekarang:

belajar-api
│
├── node_modules
├── package-lock.json
└── package.json

7. Membuat File Server

Buat file baru bernama:

server.js

Sehingga struktur project menjadi:

belajar-api
│
├── node_modules
├── package-lock.json
├── package.json
└── server.js

Kemudian buka file server.js.

Masukkan kode berikut:

const express = require('express');

const app = express();

const PORT = 3000;

// Middleware untuk membaca JSON
app.use(express.json());

// Route utama
app.get('/', (req, res) => {
    res.json({
        message: 'REST API berhasil dijalankan'
    });
});

// Menjalankan server
app.listen(PORT, () => {
    console.log(`Server berjalan di http://localhost:${PORT}`);
});

8. Menjalankan REST API

Sekarang kita jalankan server.

Pada terminal jalankan:

node server.js

Jika berhasil, akan muncul:

Server berjalan di http://localhost:3000

Sekarang buka browser:

http://localhost:3000

Response:

{
    "message": "REST API berhasil dijalankan"
}

Selamat, REST API pertama kita sudah berhasil dibuat.

9. Membuat Endpoint GET

Sekarang kita akan membuat API untuk menampilkan data product.

Tambahkan kode berikut pada server.js:

const products = [
    {
        id: 1,
        name: 'Laptop',
        price: 7500000
    },
    {
        id: 2,
        name: 'Mouse',
        price: 150000
    },
    {
        id: 3,
        name: 'Keyboard',
        price: 350000
    }
];

app.get('/api/products', (req, res) => {
    res.json(products);
});

Sekarang akses:

http://localhost:3000/api/products

Response:

[
    {
        "id": 1,
        "name": "Laptop",
        "price": 7500000
    },
    {
        "id": 2,
        "name": "Mouse",
        "price": 150000
    },
    {
        "id": 3,
        "name": "Keyboard",
        "price": 350000
    }
]

10. Membuat Endpoint GET Berdasarkan ID

Selain menampilkan seluruh product, kita juga dapat mengambil satu product berdasarkan ID.

Tambahkan:

app.get('/api/products/:id', (req, res) => {

    const id = parseInt(req.params.id);

    const product = products.find(item => item.id === id);

    if (!product) {
        return res.status(404).json({
            message: 'Product tidak ditemukan'
        });
    }

    res.json(product);
});

Sekarang coba akses:

http://localhost:3000/api/products/1

Response:

{
    "id": 1,
    "name": "Laptop",
    "price": 7500000
}

Jika ID tidak ditemukan:

http://localhost:3000/api/products/99

Response:

{
    "message": "Product tidak ditemukan"
}

HTTP Status yang diberikan adalah:

404 Not Found

11. Membuat Endpoint POST

Sekarang kita akan membuat endpoint untuk menambahkan product baru.

Tambahkan:

app.post('/api/products', (req, res) => {

    const { name, price } = req.body;

    const newProduct = {
        id: products.length + 1,
        name: name,
        price: price
    };

    products.push(newProduct);

    res.status(201).json({
        message: 'Product berhasil ditambahkan',
        data: newProduct
    });
});

Karena kita menggunakan:

app.use(express.json());

Express dapat membaca data JSON yang dikirim melalui request body.

Contoh JSON:

{
    "name": "Monitor",
    "price": 2500000
}

12. Testing POST Menggunakan Postman

Buka Postman.

Pilih:

POST

Kemudian masukkan URL:

http://localhost:3000/api/products

Pilih:

Body
→ raw
→ JSON

Masukkan:

{
    "name": "Monitor",
    "price": 2500000
}

Klik Send.

Response:

{
    "message": "Product berhasil ditambahkan",
    "data": {
        "id": 4,
        "name": "Monitor",
        "price": 2500000
    }
}

13. Membuat Endpoint PUT

Selanjutnya kita membuat API untuk mengubah product.

Tambahkan:

app.put('/api/products/:id', (req, res) => {

    const id = parseInt(req.params.id);

    const product = products.find(item => item.id === id);

    if (!product) {
        return res.status(404).json({
            message: 'Product tidak ditemukan'
        });
    }

    const { name, price } = req.body;

    product.name = name;
    product.price = price;

    res.json({
        message: 'Product berhasil diubah',
        data: product
    });
});

Kemudian pada Postman pilih:

PUT

URL:

http://localhost:3000/api/products/1

Body:

{
    "name": "Laptop Gaming",
    "price": 12500000
}

Response:

{
    "message": "Product berhasil diubah",
    "data": {
        "id": 1,
        "name": "Laptop Gaming",
        "price": 12500000
    }
}

14. Membuat Endpoint DELETE

Sekarang kita membuat API untuk menghapus product.

Tambahkan:

app.delete('/api/products/:id', (req, res) => {

    const id = parseInt(req.params.id);

    const index = products.findIndex(item => item.id === id);

    if (index === -1) {
        return res.status(404).json({
            message: 'Product tidak ditemukan'
        });
    }

    const deletedProduct = products.splice(index, 1);

    res.json({
        message: 'Product berhasil dihapus',
        data: deletedProduct[0]
    });
});

Pada Postman pilih:

DELETE

Kemudian:

http://localhost:3000/api/products/3

Klik Send.

Response:

{
    "message": "Product berhasil dihapus",
    "data": {
        "id": 3,
        "name": "Keyboard",
        "price": 350000
    }
}

15. REST API CRUD Lengkap

Sampai tahap ini kita sudah mempunyai API CRUD.

Endpoint yang kita buat:

Method	Endpoint	Fungsi
GET	`/api/products`	Menampilkan semua product
GET	`/api/products/:id`	Menampilkan product berdasarkan ID
POST	`/api/products`	Menambahkan product
PUT	`/api/products/:id`	Mengubah product
DELETE	`/api/products/:id`	Menghapus product

Secara sederhana alurnya:

GET
    ↓
Menampilkan data

POST
    ↓
Menambahkan data

PUT
    ↓
Mengubah data

DELETE
    ↓
Menghapus data

16. Full Code server.js

Berikut adalah kode lengkap yang sudah kita buat:

const express = require('express');

const app = express();

const PORT = 3000;

// Middleware
app.use(express.json());

// Data sementara
const products = [
    {
        id: 1,
        name: 'Laptop',
        price: 7500000
    },
    {
        id: 2,
        name: 'Mouse',
        price: 150000
    },
    {
        id: 3,
        name: 'Keyboard',
        price: 350000
    }
];

// GET /
app.get('/', (req, res) => {
    res.json({
        message: 'REST API berhasil dijalankan'
    });
});

// GET semua product
app.get('/api/products', (req, res) => {
    res.json(products);
});

// GET product berdasarkan ID
app.get('/api/products/:id', (req, res) => {

    const id = parseInt(req.params.id);

    const product = products.find(item => item.id === id);

    if (!product) {
        return res.status(404).json({
            message: 'Product tidak ditemukan'
        });
    }

    res.json(product);
});

// POST product
app.post('/api/products', (req, res) => {

    const { name, price } = req.body;

    const newProduct = {
        id: products.length + 1,
        name: name,
        price: price
    };

    products.push(newProduct);

    res.status(201).json({
        message: 'Product berhasil ditambahkan',
        data: newProduct
    });
});

// PUT product
app.put('/api/products/:id', (req, res) => {

    const id = parseInt(req.params.id);

    const product = products.find(item => item.id === id);

    if (!product) {
        return res.status(404).json({
            message: 'Product tidak ditemukan'
        });
    }

    const { name, price } = req.body;

    product.name = name;
    product.price = price;

    res.json({
        message: 'Product berhasil diubah',
        data: product
    });
});

// DELETE product
app.delete('/api/products/:id', (req, res) => {

    const id = parseInt(req.params.id);

    const index = products.findIndex(item => item.id === id);

    if (index === -1) {
        return res.status(404).json({
            message: 'Product tidak ditemukan'
        });
    }

    const deletedProduct = products.splice(index, 1);

    res.json({
        message: 'Product berhasil dihapus',
        data: deletedProduct[0]
    });
});

// Menjalankan server
app.listen(PORT, () => {
    console.log(`Server berjalan di http://localhost:${PORT}`);
});

17. Struktur Project

Setelah tutorial ini selesai, struktur project kita menjadi:

belajar-api
│
├── node_modules
│
├── package-lock.json
│
├── package.json
│
└── server.js

Untuk tahap awal struktur seperti ini sudah cukup.

Namun jika project semakin besar, sebaiknya struktur aplikasi dipisahkan menjadi beberapa bagian.

Contohnya:

belajar-api
│
├── node_modules
│
├── src
│   ├── controllers
│   ├── routes
│   ├── models
│   └── middleware
│
├── package.json
│
└── server.js

Struktur tersebut akan membuat project lebih mudah dikembangkan.

18. Kesimpulan

Pada tutorial ini kita sudah belajar membuat REST API menggunakan JavaScript dan Express.js.

Kita sudah berhasil membuat:

Express.js project
REST API server
GET API
GET API berdasarkan ID
POST API
PUT API
DELETE API
Testing API menggunakan Postman

Untuk sementara data product masih disimpan di dalam array JavaScript sehingga ketika server dimatikan, data akan kembali seperti semula.

Pada tutorial berikutnya kita dapat mengembangkan project ini dengan menggunakan database MySQL sehingga data dapat disimpan secara permanen.

Contoh arsitekturnya:

Frontend
   │
   │ HTTP Request
   ▼
Express.js REST API
   │
   │ SQL Query
   ▼
MySQL Database

Dengan konsep tersebut, Express.js dapat digunakan sebagai backend untuk berbagai aplikasi seperti:

Sistem Inventory
Point of Sale
Task Management
Sistem Rumah Sakit
E-Commerce
Dashboard
Mobile App
Web Application

Deny Syarief Blog

Membuat REST API dengan JavaScript Menggunakan Express.js dan Laragon

1. Apa Itu REST API?

2. Tools yang Digunakan

3. Install Laragon

4. Cek Node.js

5. Membuat Project REST API

6. Install Express.js

7. Membuat File Server

8. Menjalankan REST API

9. Membuat Endpoint GET

10. Membuat Endpoint GET Berdasarkan ID

11. Membuat Endpoint POST

12. Testing POST Menggunakan Postman

13. Membuat Endpoint PUT

14. Membuat Endpoint DELETE

15. REST API CRUD Lengkap

16. Full Code server.js

17. Struktur Project

18. Kesimpulan

Posting Komentar untuk "Membuat REST API dengan JavaScript Menggunakan Express.js dan Laragon"