Showing posts with label Express JS. Show all posts
Showing posts with label Express JS. Show all posts

Wednesday, 26 November 2025

Tutorial MongoDB connect to express JS use Driver MongoDB v7.0.0

 

Dalam pengembangan aplikasi backend dengan Node.js dan Express, MongoDB merupakan salah satu pilihan database NoSQL yang sangat populer. Banyak developer memilih menggunakan Mongoose untuk mengelola database karena menyediakan schema, validasi, dan abstraction layer. Namun, sebagian lainnya lebih menyukai menggunakan MongoDB Native Driver karena sifatnya yang lebih ringan, fleksibel, dan memberikan kontrol penuh terhadap interaksi langsung dengan database. Artikel ini akan membahas cara membuat koneksi MongoDB pada aplikasi Express menggunakan driver resmi MongoDB, mulai dari instalasi hingga konfigurasi koneksi yang baik dan aman.

1. Mengapa Menggunakan MongoDB Native Driver?

Sebelum masuk ke langkah-langkah teknis, penting untuk memahami alasan memilih MongoDB Driver dibanding Mongoose:

    a. Lebih ringan dan tanpa lapisan abstraksi tambahan

Driver ini berkomunikasi langsung dengan database tanpa schema enforcement. Cocok untuk proyek yang membutuhkan fleksibilitas atau performa tinggi.

    b. Kontrol penuh terhadap query dan operasi database 

Karena tidak ada ODM yang membungkus query, developer lebih bebas melakukan operasi kompleks.

    c. Lebih cocok untuk arsitektur mikroservis 

Banyak mikroservis modern menggunakan driver native agar footprint aplikasi lebih kecil.

    4. Mendukung penuh fitur terbaru MongoDB 

Kadang fitur baru MongoDB tersedia lebih awal pada driver dibanding di ODM seperti Mongoose.

2. Persiapan Proyek 

Pastikan Node.js dan npm sudah terinstal. Mulailah dengan membuat direktori baru:


mkdir express-mongodb-driver
cd express-mongodb-driver

Inisialisasi proyek:


npm init -y

Instal Express dan MongoDB driver:


npm install express mongodb

Jika ingin mempermudah pengembangan, install nodemon:


npm install --save-dev nodemon

3. Struktur Proyek


express-mongodb-driver/
│
├── server.js
└── config/
    └── database.js

File database.js akan menyimpan konfigurasi koneksi database. 

4. Membuat Koneksi MongoDB

Buat file config/database.js berisi:  


const { MongoClient } = require('mongodb');

const uri = 'mongodb://localhost:27017';
const client = new MongoClient(uri);

let db;

const connectDB = async () => {
    try {
        await client.connect();
        console.log('Berhasil terhubung ke MongoDB');

        db = client.db('database_name'); // nama database
    } catch (error) {
        console.error('Gagal terhubung ke MongoDB:', error.message);
        process.exit(1);
    }
};

const getDB = () => {
    if (!db) {
        throw new Error('Database belum terkoneksi!');
    }
    return db;
};

module.exports = { connectDB, getDB };

Penjelasan:

  • MongoClient adalah class inti untuk membuat koneksi ke server MongoDB.
  • client.connect() digunakan untuk membuka koneksi.
  • db = client.db('nama_database') menyimpan reference database.
  • Fungsi getDB() berguna agar database bisa dipanggil dari file lain tanpa membuat koneksi baru.

5. Menghubungkan MongoDB pada Express

Buka file server.js dan isi seperti berikut:


const express = require('express');
const { connectDB, getDB } = require('./config/database');

const app = express();
app.use(express.json());

// Koneksi ke database
connectDB();

app.get('/', (req, res) => {
    res.send('Aplikasi Express dengan MongoDB Native Driver');
});

// Contoh route yang mengambil data dari database
app.get('/user', async (req, res) => {
    try {
        const db = getDB();
        const users = await db.collection('users').find().toArray();
        res.json(users);
    } catch (error) {
        res.status(500).json({ message: error.message });
    }
});

const PORT = 3000;
app.listen(PORT, () => console.log(`Server berjalan pada port ${PORT}`));

Beberapa hal penting:

  • Kita memanggil connectDB() saat aplikasi dijalankan.
  • Untuk mengakses MongoDB di route Express, kita memanggil getDB() untuk mengambil instance database yang sudah terkoneksi.
  • Contoh route /users menunjukkan cara mengambil data dari koleksi menggunakan driver native.

6. Menjalankan Aplikasi

Jalankan server dengan:  


node server.js

Atau menggunakan nodemon:


npx nodemon server.js

Jika berhasil, Anda akan melihat:

$ npx nodemon server.js
[nodemon] 3.1.11
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,cjs,json
[nodemon] starting `node server.js`
Server berjalan pada port 3000
Berhasil terhubung ke MongoDB

Meskipun databasenya belum dibuat, mongodb akan membuat otomatis sesuai dengan nama database pada konfigurasi koneksi.

Jika kalian akses browset localhost:3000/user, akan kosong karna memamng datanya tidak ada, untuk membuktikannya silahkan buatk route baru misal user-add:


app.get('/user-add', async(req, res) => {
    try {
        const db = getDB();
        const users = await db.collection('users').insertOne({name:'Naruto', email:'naruto@konoha.com'});
        res.json(users);
    } catch (error) {
        res.status(500).json({ message: error.message });
    }
});

akses browser localhost:3000/user-add, setelah itu buka lagi localhost:3000/user, maka datanya akan ada sesuai yang di tambahkan sebelumnya.

7. Kesimpulan

Menggunakan MongoDB Native Driver pada aplikasi Express memberikan fleksibilitas maksimum dan performa lebih ringan dibanding menggunakan ODM seperti Mongoose. Walaupun Anda tidak mendapatkan fitur seperti schema, model, atau validasi otomatis, Anda memperoleh kontrol penuh atas operasi database dan dapat memanfaatkan fitur terbaru MongoDB tanpa menunggu update library lain.

Pendekatan ini cocok untuk aplikasi kecil, backend dengan performa tinggi, atau mikroservis yang membutuhkan jejak memori minimal. Dengan struktur yang modular, seperti memisahkan koneksi database ke dalam file khusus, aplikasi menjadi lebih rapi dan mudah diperluas.

Untuk melihat artikel yang lain bisa klik Disini. Untuk versi yang menggunakan Mongoose bisa cek Disini

Tutorial MongoDB connect to express JS use Mongoose 9.0.0

 

Dalam pengembangan aplikasi berbasis Node.js, penggunaan MongoDB sebagai database NoSQL sangat populer karena fleksibel, cepat, dan mudah diintegrasikan dengan berbagai framework JavaScript. Salah satu pendekatan paling umum untuk mengelola koneksi dan operasi database MongoDB dalam aplikasi Express adalah melalui Mongoose, sebuah Object Data Modeling (ODM) yang menyediakan struktur lebih terorganisasi untuk bekerja dengan MongoDB. Artikel ini akan membahas langkah-langkah membuat koneksi database MongoDB pada Express menggunakan Mongoose, mulai dari instalasi hingga konfigurasi koneksi dan penanganan error.

Ada 2 cara dalam membuat koneksi dari express ke mongodb, yaitu dengan cara minginstal driver mongoose, atau install driver mongodb. Pada artikel ini kita akan membahas koneksi dengan menggunakan driver mongoose.

1. Mengapa Menggunakan Mongoose? 

Mongoose menawarkan beberapa kelebihan penting, antara lain:

  • Schema-based Modeling : Anda bisa menentukan struktur data berupa schema, sehingga data lebih terorganisasi.
  • Validasi Otomatis : Mongoose menyediakan validator untuk memastikan data sesuai sebelum dimasukkan ke database.
  • Middleware / Hooks : Sangat berguna untuk menjalankan operasi sebelum atau sesudah aksi tertentu seperti save, update, dsb.
  • Query Builder yang Mudah Digunakan : Mongoose menyediakan API yang mudah dibaca dan digunakan.

Dengan fitur-fitur tersebut, Mongoose menjadi pilihan utama bagi developer Node.js yang ingin mengelola MongoDB dengan lebih rapi dan terstruktur. 

2. Persiapan Proyek

Pertama kali pastikan kalian sudah menginstall MongoDB Community Server jika belum bisa cek Disini, selanjutnya pastikan Node.js dan npm sudah terinstal. Buat direktori baru untuk proyek:


mkdir express-mongoose
cd express-mongoose

Inisialisasi proyek:


npm init -y

Kemudian instal Express dan Mongoose:


npm install express mongoose

Untuk kebutuhan pengembangan, Anda juga dapat menginstal nodemon:


npm install --save-dev nodemon

agar server pada express nanti otomatis reload tanpa harus jalankan ulang server

3. Struktur Proyek

Gunakan struktur sederhana seperti berikut:


express-mongoose-app/
│
├── server.js
└── config/
    └── database.js

Folder config digunakan untuk menyimpan konfigurasi koneksi database agar lebih rapi.

4. Membuat File Koneksi MongoDB

Buat file config/database.js dan isi dengan kode berikut:


const mongoose = require('mongoose');

const connectDB = async()=>{
    try {
      //  digunakan untuk memaksa Mongoose agar hanya mempertimbangkan field yang ada dalam skema saat melakukan query ke basis data
      mongoose.set('strictQuery', true);

      //koneksi ke mongodb
      await mongoose.connect('mongodb://localhost:27017/database_name');
      console.log('Berhasil terhubung ke MongoDB');
    } catch (error) {
        console.error('Gagal terhubung ke MongoDB:', error.message);
    }
};

module.exports = connectDB;

Jika Anda menggunakan MongoDB Atlas, cukup ganti URL koneksi menjadi connection string dari Atlas.

5. Menghubungkan Database pada Express

Sekarang buka file server.js dan isi sebagai berikut:


const express = require('express');
const connectDB = require('./config/database');

const app = express();

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

// Panggil koneksi database
connectDB();

app.get('/', (req, res) => {
    res.send('Aplikasi Express dengan Mongoose');
});

const PORT = 3000;
app.listen(PORT, () => console.log(`Server berjalan pada port ${PORT}`));

Saat server dijalankan, Express akan otomatis menghubungkan diri ke MongoDB sebelum menerima request.

6. Menjalankan Server

Jalankan server dengan:


node server.js

Atau jika menggunakan nodemon:


npx nodemon server.js

Jika koneksi berhasil, Anda akan melihat output:


$ npx nodemon server.js
[nodemon] 3.1.11
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,cjs,json
[nodemon] starting `node server.js`
Server berjalan pada port 3000
Berhasil terhubung ke MongoDB

7. Kesimpulan

Menghubungkan Express dengan MongoDB menggunakan Mongoose memberikan banyak keuntungan, terutama dalam hal struktur kode, validasi data, dan kemudahan penggunaan. Dengan memisahkan konfigurasi koneksi ke dalam file khusus, aplikasi menjadi lebih modular dan mudah dikembangkan. Langkah-langkah di atas dapat digunakan sebagai dasar dalam membangun aplikasi backend yang lebih kompleks termasuk penambahan model, controller, dan rute API.

untuk melihat artikel yang lain bisa klik Disini, untuk versi yang menggunakan driver mongodb bisa lihat Disini

Tuesday, 25 November 2025

Install Prisma client versi 7.0.1 Pada Express JS

 

Prisma adalah next-generation ORM yang membantu developer bekerja dengan database secara efisien, aman, dan mudah. Prisma membuat proses query database menjadi lebih intuitif berkat Prisma Client yang dikompilasi otomatis dari schema yang kita definisikan. Pada artikel ini, kita akan membahas langkah-langkah instalasi Prisma Client pada aplikasi Express.js, mulai dari setup awal hingga siap digunakan.

1. Persiapan Lingkungan 

Sebelum memulai, pastikan Anda sudah menginstal beberapa hal berikut:

  • Node.js versi terbaru (minimal 14.x)
  • npm atau yarn 
  • Database yang akan digunakan, misalnya PostgreSQL, MySQL, SQLite, SQL Server atau MongoDB (dengan Prisma Mongo connector)

Pada saat artikel ini dibuat, saya menggunakan Node js versi 22.19.0,


express$ node -v
v22.19.0

Setelah semuanya siap, buat folder project baru dan lakukan inisialisasi: 


mkdir express
cd express
npm init -y

Selanjutnya install Express:


npm install express

Pada prisma client versi 7.0.1, kita akan menggunakan project typescript, karena jika menggunakan project js biasa akan bermasalah. 

2. Setup Project typescript

install dev-depedensi yang diperlukan:


npm install @types/express @types/node tsx typescript --save-dev

Selanjutnya ketikan


npx tsc --init

Buka file tsconfig.json dan ubah menjadi seperti ini:


{
  // Visit https://aka.ms/tsconfig to read more about this file
  "compilerOptions": {
    // File Layout
    "rootDir": "./src",
    "outDir": "./dist",
    // Environment Settings
    // See also https://aka.ms/tsconfig/module
    "module": "esnext",
    "target": "es2023",
    "types": [],
    // For nodejs:
    // "lib": ["esnext"],
    // "types": ["node"],
    // and npm install -D @types/node

    // Other Outputs
    "sourceMap": true,
    "declaration": true,
    "declarationMap": true,

    // Stricter Typechecking Options
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,

    // Style Options
    // "noImplicitReturns": true,
    // "noImplicitOverride": true,
    // "noUnusedLocals": true,
    // "noUnusedParameters": true,
    // "noFallthroughCasesInSwitch": true,
    // "noPropertyAccessFromIndexSignature": true,

    // Recommended Options
    "strict": true,
    "jsx": "react-jsx",
    "verbatimModuleSyntax": true,
    "isolatedModules": true,
    "noUncheckedSideEffectImports": true,
    "moduleDetection": "force",
    "skipLibCheck": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
  },
  "include": ["src/**/*"],
    "exclude": ["node_modules", "dist"],
}

Kemudian ubah juga file package.json, tambahkan type module


"type": "module",
  "keywords": [],
  

3. Menginstal Prisma dan Setup Awal

Prisma terdiri dari dua paket utama: Prisma CLI dan Prisma Client. CLI digunakan untuk mengelola schema, migrasi, dan utility lainnya, sedangkan Prisma Client digunakan di dalam kode Express. 

Install Prisma CLI dan yang lainya sebagai dev-depedensi:


npm install prisma --save-dev

Install juga depedensi yang lain 


npm install @prisma/adapter-mariadb @prisma/client dotenv

Setelah itu lakukan inisialisasi Prisma:


npx prisma init

Command ini akan menghasilkan folder baru bernama prisma/ yang berisi file schema.prisma. Selain itu Prisma akan membuat file .env yang digunakan untuk menyimpan variabel lingkungan, salah satunya koneksi database.

berikut versi prisma yang saya pakai:


express$ npx prisma -v
Loaded Prisma config from prisma.config.ts.

Prisma schema loaded from prisma/schema.prisma
prisma               : 7.0.1
@prisma/client       : 7.0.1
Operating System     : linux
Architecture         : x64
Node.js              : v22.19.0
TypeScript           : 5.9.3 

3. Mengatur Koneksi Database 

Buka file .env dan sesuaikan DATABASE_URL dengan database yang akan digunakan. Contoh jika menggunakan Mysql: 


DATABASE_URL="mysql://root:123@localhost:3306/belajar"

contoh diatas menggunakan database mysql, username=root, dan password mysqlnya adalah 123, dan nama databasenya adalah belajar, sesuaikan dengan pengaturan database kalian pada komputer atau laptop.

4. Membuat Schema Prisma

Buka file prisma/schema.prisma. Pastikan isinya seperti berikut:


generator client {
  provider = "prisma-client"
  output   = "../src/generated/prisma"
}

datasource db {
  provider = "mysql"
}

jika kalian menggunakan text editor Visual Studio Code, dan melihat baris merah pada bagian datasource db{provider="mysql"}, biarkan saja, karena pada versi sebelumnya ada tambahan url. itu bukan berarti error, itu hanya tatacara penulisan yang dianggap salah oleh text editornya.

Selanjutnya, Contoh sederhana untuk membuat model User:


generator client {
  provider = "prisma-client"
  output   = "../src/generated/prisma"
}

datasource db {
  provider = "mysql"
}

model users {
  id    Int     @id @default(autoincrement())
  name  String
  email String  @unique
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
 }

Setelah membuat schema, jalankan migrasi:


npx prisma migrate dev --name create_table_users

maka akan membuat sebuat folder didalam prisma/migrations, dan membuat table pada database dengan nama users.

Jika Error


Loaded Prisma config from prisma.config.ts.

Prisma schema loaded from prisma/schema.prisma
Datasource "db": MySQL database "belajar" at "localhost:3306"

- Drift detected: Your database schema is not in sync with your migration history.

The following is a summary of the differences between the expected database schema given your migrations files, and the actual schema of the database.

It should be understood as the set of changes to get from the expected schema to the actual schema.

[+] Added tables
  - users

- The following migration(s) are applied to the database but missing from the local migrations directory: 20251126045630_create_table_users

We need to reset the MySQL database "belajar" at "localhost:3306"

You may use prisma migrate reset to drop the development database.
All data will be lost.

Jalankan npx prisma migrate reset, dan ulangi lagi 


npx prisma migrate dev --name create_table_users

Setelah itu jalankan prisma generate


npx prisma generate

5. Menggunakan Prisma Client pada Express.js

Buat folder src dan buat file didalam folder src index.ts sebagai server Express:


import "dotenv/config";
import express from 'express';
import { PrismaMariaDb } from '@prisma/adapter-mariadb';
import { PrismaClient } from "./generated/prisma/client";

const app = express();
const adapter = new PrismaMariaDb({
  host: "localhost",
  user: "root",
  password: "123",
  database: "belajar",
  connectionLimit: 5
});
const prisma = new PrismaClient({ adapter });

app.use(express.json());

// Route: menambahkan user
app.get('/add-user', async (req, res) => {
  const name = "Naruto Uzumaki";
  const email = "naruto@konoha.com";
  const user = await prisma.users.create({
    data: { name, email }
  });
  res.json(user);
});

// Route: mendapatkan semua user
app.get('/user', async (req, res) => {
  const users = await prisma.users.findMany();
  res.json(users);
});

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

Aplikasi Anda sekarang sudah terhubung dengan Prisma dan siap melakukan query database dengan sintaks yang clean dan modern.

jalankan server dengan perintah pada terminal : 


npx tsx src/index.ts

akses browser dengan localhost:3000/add-user, untuk menambah user tetapi jangan di akses lebih 1 kali karna akan error, ini disebabkan karna email pada database harus unique tidak boleh sama jadi solusinya ubah dulu emailnya baru jalankan lagi routenya, untuk melihat list user akses dengan localhost:3000/user

Kesimpulan 

Instalasi Prisma Client pada Express.js tidaklah sulit. Dengan beberapa langkah mulai dari inisialisasi project, setup schema, migrasi, hingga penggunaan Prisma Client di dalam routing Express, Anda bisa mendapatkan ORM yang powerful dan mudah digunakan. Prisma memberikan banyak keuntungan seperti pengetikan yang kuat (type safety), auto-completion, dan struktur query yang rapi sehingga meningkatkan produktivitas developer.

Dengan mengikuti panduan di atas, sekarang Anda sudah dapat membangun aplikasi Express dengan akses database yang lebih efisien menggunakan Prisma.

Untuk melihat artikel yang lain, bisa klik Disini. 

Saturday, 22 November 2025

Perbandingan Hono JS vs Express: Siapa yang Lebih Unggul?

 

Dalam dunia pengembangan backend JavaScript, Express telah lama menjadi standar de facto untuk membangun REST API maupun server web. Namun, beberapa tahun terakhir bermunculan framework baru yang menawarkan performa lebih tinggi dan pengalaman developer yang lebih modern—salah satunya adalah Hono JS. Framework minimalis yang dirancang untuk berjalan di berbagai environment seperti Cloudflare Workers, Bun, Deno, dan Node.js ini mulai menarik perhatian banyak developer. Pertanyaannya: apakah Hono mampu menyaingi dominasi Express?

Artikel ini akan membahas perbandingan keduanya dari sisi performa, fleksibilitas, kemudahan penggunaan, ekosistem, serta potensi penggunaan di masa depan. 

1. Performa 

Salah satu daya tarik utama Hono JS adalah performanya yang luar biasa cepat. Hono dibangun dengan pendekatan minimalis dan dioptimalkan untuk platform edge, membuatnya sangat ringan dan efisien. Benchmark independent menunjukkan bahwa Hono mampu melayani request per detik jauh lebih tinggi dibanding Express, terutama pada platform seperti Bun dan Cloudflare Workers.

Express, meskipun stabil dan mature, memiliki performa lebih rendah karena arsitekturnya yang lebih tua dan banyak middleware bawaan yang menambah overhead. Untuk aplikasi dengan kebutuhan throughput sangat tinggi, Hono jelas menjadi kandidat yang lebih unggul.

Kesimpulan:

Hono menang dalam performa mentah dan efisiensi.

2. Kemudahan Penggunaan

Express terkenal dengan API yang sederhana dan intuitif. Banyak developer JavaScript pertama kali belajar backend melalui Express karena strukturnya mudah dipahami, dokumentasinya lengkap, dan banyak tutorial tersedia.  

Menariknya, Hono juga mengadopsi kesederhanaan yang mirip, namun dengan pendekatan yang lebih modern. Routing di Hono terasa lebih bersih dan deklaratif. Contohnya:


import { Hono } from 'hono'
const app = new Hono()

app.get('/hello', (c) => c.text('Hello Hono!'))
export default app

API routing ini mirip dengan Express, tetapi lebih ringan dan dirancang untuk bekerja secara optimal di berbagai runtime, bukan hanya Node.js.

Kesimpulan:

Keduanya mudah digunakan, namun Hono menawarkan pengalaman yang lebih modern dan fleksibel.

3. Ekosistem dan Middleware 

Di sinilah Express masih memimpin. Dengan usia lebih dari satu dekade, Express memiliki ekosistem middleware yang sangat kaya: autentikasi, body parser, validation, logging, dan masih banyak lainnya.

Hono memiliki ekosistem middleware yang terus berkembang, termasuk validasi berbasis Zod, JWT, OAuth, dan caching. Namun jumlahnya belum sebanyak Express. Meski demikian, Hono mampu memanfaatkan beberapa middleware standar karena mendukung Web Standard API.

Kesimpulan:

Express unggul dalam ekosistem, tetapi Hono terus mengejar dan sudah cukup matang untuk kebutuhan umum.

4. Kesesuaian Platform

Salah satu kelebihan terbesar Hono adalah fleksibilitasnya. Ia dapat berjalan di berbagai environment:

  • Cloudflare Workers
  • Bun
  • Deno  
  • Vercel Edge Functions
  • Node JS 

Express hanya berjalan pada Node.js. Untuk aplikasi yang memanfaatkan edge computing atau arsitektur serverless modern, Hono adalah pilihan yang jauh lebih baik. 

Kesimpulan:

Hono menang telak dalam kompatibilitas lintas platform.

5. Use Case

  • Gunakan Express jika: Anda bekerja dengan proyek legacy, membutuhkan middleware yang sangat spesifik, atau butuh stabilitas jangka panjang dengan ekosistem besar.
  • Gunakan Hono jika: Anda ingin performa maksimal, deployment serverless/edge, atau ingin memulai proyek baru dengan runtime modern seperti Bun atau Deno.

Kesimpulan Akhir 

Dalam banyak aspek, terutama performa dan fleksibilitas platform, Hono JS menunjukkan potensi besar untuk menjadi penerus Express di era modern. Meskipun ekosistemnya belum sebesar Express, fitur dan desainnya yang modern membuatnya sangat menarik bagi developer yang menginginkan performa tinggi dan kompatibilitas lintas runtime.

Jika Anda sedang memulai proyek baru, terutama yang membutuhkan kecepatan dan arsitektur serverless, Hono bisa menjadi pilihan terbaik. Namun untuk proyek matang yang sudah mengandalkan ekosistem Express, perpindahan tidak selalu diperlukan.

Keduanya tetap memiliki tempat masing-masing dalam dunia backend JavaScript, tetapi arah perkembangan industri menunjukkan bahwa framework seperti Hono akan semakin populer.

Jika ingin melihar artikel yang lain bisa di klik Disini. 

Saturday, 15 November 2025

Cara handle error 404 page not found pada Express JS

 


Memahami Handler 404 pada Express.js: Fungsi, Cara Kerja, dan Implementasi Terbaik

Dalam pengembangan aplikasi web menggunakan Express.js, salah satu hal penting yang harus diperhatikan adalah bagaimana menangani permintaan (request) yang tidak ditemukan atau tidak memiliki rute yang sesuai. Dalam konteks HTTP, kondisi ini dikenal sebagai 404 Not Found. Untuk memastikan pengalaman pengguna tetap baik dan aplikasi tetap mudah dipelihara, Express menyediakan mekanisme yang sederhana namun fleksibel untuk mengatur handler khusus guna menangani kasus 404.

Apa Itu Handler 404?

Handler 404 adalah sebuah middleware dalam Express.js yang dieksekusi ketika tidak ada rute atau middleware lain yang cocok dengan permintaan yang diterima. Dengan kata lain, jika pengguna mencoba mengakses URL yang tidak didefinisikan dalam aplikasi, maka Express akan menjalankan handler ini.

Secara default, Express tidak mengembalikan halaman 404 yang ramah pengguna. Jika Anda tidak mendefinisikan handler 404 secara manual, respon yang dikirimkan akan cukup sederhana dan tidak informatif. Oleh karena itu, membuat handler 404 khusus sangat disarankan, baik untuk tujuan UX maupun debugging.

 

Cara Kerja Handler 404 di Express.js

Express menggunakan urutan middleware berdasarkan urutan deklarasi dalam kode. Ketika sebuah request datang, Express akan mencocokkannya dengan middleware atau rute dari atas ke bawah.

Jika tidak ada yang cocok, pada akhir tumpukan (middleware stack), kita bisa menambahkan sebuah middleware untuk menangani 404. Karena middleware ini ditempatkan paling akhir, dia hanya akan dijalankan jika semua rute sebelumnya gagal menangani request.

Contoh Implementasi Handler 404

Berikut implementasi sederhana handler 404 dalam Express:


  const express = require('express');
  const app = express();
  
  // Contoh rute
  app.get('/', (req,res)=>{
    res.send('Halaman Utama');
  });
  
  // Handler 404 (ditempatkan di paling akhir)
  app.use((req,res)=>{
    res.status(404).send('404 - Halaman tidak ditemukan');
  });
  
  app.listen(3000, ()=>console.log('Server berjalan pada port 3000'));

Pada contoh di atas, Express akan mencoba mencocokkan request ke rute yang tersedia. Jika tidak ada yang cocok, middleware app.use((req, res) => {...}) akan dieksekusi otomatis.

Handler 404 dengan Tampilan Lebih Menarik

Biasanya, aplikasi produksi membutuhkan tampilan 404 yang lebih profesional. Express bisa dikombinasikan dengan template engine seperti EJS, Pug, atau Handlebars:


  app.use((req,res)=>{
    res.status(404).render('404', {
      title: 'Halaman Tidak Ditemukan',
      message:'Maaf, halaman yang Anda cari tidak tersedia.'
    });
  });

Dengan demikian, pengguna mendapatkan pengalaman yang lebih baik dan tampak lebih profesional.

Perbedaan Handler 404 dan Error Handler Lainnya

Penting untuk membedakan handler 404 dengan handler error (500 atau error lainnya). Dalam Express, error handler memiliki empat parameter:


  app.use((err,req,res,next)=>{
    res.status(500).send('Terjadi kesalahan pada server');
  });

Sedangkan handler 404 tidak memerlukan parameter err karena dijalankan saat tidak ada kesalahan internal—hanya rute yang tidak ditemukan.

Best Practice dalam Membuat Handler 404

  1. Selalu letakkan di bagian paling akhir
    Jika ditaruh di tengah, Express tidak akan bisa memproses rute di bawahnya.

  2. Berikan pesan yang jelas dan ramah pengguna
    Jangan hanya menampilkan teks polos seperti "404", tetapi berikan informasi yang cukup.

  3. Gunakan template engine atau file HTML khusus
    Ini meningkatkan profesionalitas tampilan aplikasi.

  4. Catat request 404 pada log
    Log 404 bisa membantu mendeteksi link rusak, kesalahan pengguna, atau potensi percobaan eksploitasi.

  5. Sediakan opsi untuk kembali ke halaman utama
    Tambahkan tombol atau link “Kembali ke Beranda”.

 

Kesimpulan

Handler 404 merupakan komponen penting dalam aplikasi Express.js untuk menangani permintaan yang tidak memiliki rute yang valid. Dengan memasang middleware khusus ini di bagian paling akhir alur middleware, Anda dapat memastikan aplikasi tetap terstruktur, ramah pengguna, dan mudah dikelola. Implementasi handler 404 yang baik bukan hanya meningkatkan pengalaman pengguna, tetapi juga membantu dalam pemeliharaan aplikasi jangka panjang.

Thursday, 13 November 2025

Membuat middleware sederhana dengan Express JS


 

Dalam pengembangan aplikasi backend menggunakan Node.js, Express.js menjadi salah satu framework yang paling populer karena kesederhanaan dan fleksibilitasnya. Salah satu fitur paling penting dalam Express adalah middleware. Dengan memahami konsep middleware, kita dapat mengontrol alur request–response, melakukan validasi, logging, autentikasi, dan berbagai fungsi lainnya dengan cara yang lebih terstruktur. Pada artikel ini, kita akan membahas apa itu middleware, bagaimana cara membuatnya, dan contoh penerapannya pada aplikasi Express.js sederhana.

 

Apa Itu Middleware?

Secara sederhana, middleware adalah fungsi yang dieksekusi di antara request dari client dan response yang akan dikirimkan server. Middleware dapat memodifikasi objek request (req) dan response (res), menjalankan logika tertentu, atau menghentikan proses sebelum mencapai handler utama. Setiap middleware memiliki parameter standar:

  • req: objek yang berisi informasi request.

  • res: objek untuk mengirimkan response.

  • next: fungsi yang dipanggil untuk melanjutkan ke middleware berikutnya.

Struktur dasarnya seperti ini:

 


  function middleware(req,res,next){
    // logika middleware
    next();
    // melanjutkan ke middleware berikutnya
  }

Ketika next() tidak dipanggil, maka request akan berhenti di middleware tersebut. Hal ini berguna jika kita ingin memblokir akses atau mengirimkan response langsung dari middleware.

 

Persiapan Project Express

Sebelum membuat middleware, mari siapkan project Express.js sederhana. Jalankan perintah berikut pada lokasi project kalian:


npm init -y


npm install express

Lalu buat file server.js


  const express = require('express');
  const app = express();
  const port = 3000;

Membuat Middleware Logging Sederhana

Salah satu contoh middleware yang umum dipakai adalah middleware logging. Tujuannya adalah mencatat setiap request yang masuk, lengkap dengan method, URL, dan waktu aksesnya.

Contohnya:


  const logger = (req,res,next)=>{
    const time = new Date().toLocaleString();
    console.log('ini middleware logger');
    console.log([${time}]${req.method}${req.url});
    next();
  };

Middleware ini memudahkan developer melihat aktivitas request pada server dan sangat berguna untuk debugging maupun monitoring.

Untuk menggunakannya, cukup daftarkan di Express: 


  app.use(logger);

Setiap request menuju endpoint mana pun akan melalui middleware logger terlebih dahulu.

Menambahkan Route untuk Pengujian

Tambahkan route sederhana agar kita bisa melihat middleware bekerja:


  app.get('/', (req,res)=>{
    res.send('Halo, ini homepage!');
  });

Kemudian jalankan server:


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

Buka terminal arahkan ke route project kalian tersimpan, lalu ketikan "node server.js" tanpa tanda kutip,

Saat mengakses http://localhost:3000/, console akan menampilkan log seperti:


  Server berjalan di http://localhost:3000
  ini middleware logger
  [11/14/2025,9:46:58AM]GET/

Middleware dengan Parameter (Dynamic Middleware)

Middleware juga bisa dibuat lebih fleksibel dengan parameter tambahan. Misalnya, kita membuat middleware untuk mengecek API key:


  const checkApiKey = (key)=>{
    const oriKey = '123';
    return(req,res,next)=>{
      if(oriKey === key) {
        next();
      }else{
        console.log(req.query);
        res.status(401).send('API Key salah! ');
      }
    };
  };

Penggunaan:


  app.get('/secure',checkApiKey('123'), (req,res)=>{
    res.send('Akses berhasil!');
  });

Middleware seperti ini sangat berguna dalam implementasi autentikasi, pembatasan akses, ataupun proteksi endpoint tertentu.

Kesimpulan

Middleware adalah salah satu pilar utama dalam arsitektur Express.js. Dengan memahaminya, kita dapat membangun aplikasi yang lebih terstruktur, aman, dan mudah dikelola. Middleware memungkinkan kita menambahkan fungsi seperti logging, validasi, autentikasi, hingga error handling tanpa harus mengotori kode utama pada route handler.