NodeJS ExpressJS

Eko Kurniawan Khannedy

Eko Kurniawan Khannedy

- Technical architect at one of the biggest

ecommerce company in Indonesia
- 12+ years experiences
- [Link]
- [Link]/c/ProgrammerZamanNow
Eko Kurniawan Khannedy
● Telegram : @khannedy
● Facebook : [Link]/ProgrammerZamanNow
● Instagram : [Link]/programmerzamannow
● Youtube : [Link]/c/ProgrammerZamanNow
● Telegram Channel : [Link]/ProgrammerZamanNow
● Tiktok : [Link]
● Email : [Link]@[Link]
Sebelum Belajar
● Sudah Mengikuti Kelas JavaScript Programmer Zaman Now
● NodeJS Dasar, Unit Test dan Logging
● Belajar HTTP
Agenda

● Pengenalan ExpressJS
● App
● Route
● Template
● Dan lain-lain
Pengenalan ExpressJS
Pengenalan ExpressJS

● ExpressJS adalah salah satu Web Framework OpenSource paling populer di NodeJS
● ExpressJS pertama kali dibuat tahun 2010, dan karena sangat populer, ExpressJS sekarang sudah
menjadi hal yang wajib dikuasai ketika kita akan membuat Web menggunakan NodeJS
● [Link]
● [Link]
● [Link]
Minimalist

● ExpressJS sangat minimalist, tidak memiliki banyak fitur seperti Web Framework di bahasa
pemrograman lain seperti Laravel, Ruby on Rails atau Django
● Karena sangat minimalist, biasanya ExpressJS akan diintegrasikan dengan banyak library NodeJS
lainnya
● Oleh karena itu, programmer bisa bebas memilih Library NodeJS yang ingin dia integrasikan
dengan ExpressJS
Membuat Project
Membuat Project

● [Link]
Menambah Dependency
Application
Application

● Saat kita membuat web menggunakan ExpressJS, kita akan membuat object Application
● Application adalah object utama dalam library ExpressJS
● [Link]
Kode : Membuat Application
Menjalankan Application

● Application secara default tidak berjalan, jika kita ingin menjalankan Application nya, kita perlu
menggunakan method listen(port)
● Dimana port adalah nomor port yang ingin kita gunakan untuk menjalankan web nya
● Pastikan port yang kita pilih tidak bentrok dengan aplikasi lain
● [Link]
Kode : Menjalankan Application
Basic Routing
Routing

● Saat kita membuat web, biasanya kita akan membuat banyak sekali URL Path
● Routing merupakan teknik yang digunakan untuk meneruskan request dari URL Path ke callback
yang kita tuju
● Routing di ExpressJS bisa menggunakan object Application, dan menggunakan method sesuai
dengan nama HTTP Method nya
Routing Method
[Link](path, callback) HTTP Method CONNECT

[Link](path, callback) HTTP Method GET

[Link](path, callback) HTTP Method POST

[Link](path, callback) HTTP Method PUT

[Link](path, callback) HTTP Method DELETE

[Link](path, callback) HTTP Method OPTIONS

[Link](path, callback) HTTP Method TRACE

[Link](path, callback) HTTP Method HEAD

[Link](path, callback) HTTP Method PATCH

[Link](path, callback) Semua HTTP Method

Kode : Routing
Unit Test
Bagaimana Melakukan Unit Test ExpressJS?

● Salah satu yang sulit ketika membuat aplikasi web yang harus berjalan yaitu melakukan
automation test
● Jika melakukan manual test, terlihat mudah tinggal kita buka melalui web browser
● Namun dalam pekerjaan sehari-hari, lambat laun, hal ini akan menyulitkan kita ketika harus
melakukan manual test jika terdapat perubahan di aplikasi kita
● Oleh karena itu, sangat direkomendasikan menggunakan unit test, walaupun aplikasinya dalam
bentuk web
Supertest

● Supertest adalah salah satu library yang bisa digunakan untuk membantu melakukan pengetesan
web ExpressJS
● Dengan Supertest, kita bisa lebih mudah membuat unit testnya, dibading melakukan secara manual
● [Link]
Kode : Menginstall Dependency
Kode : Unit Test
Request
Request

● Saat kita membuat callback di router, parameter pertama adalah object Request, yang secara
otomatis diisi oleh ExpressJS
● Object Request akan berisikan informasi tentang HTTP Request yang masuk ke callback tersebut
● Ada banyak sekali informasi HTTP Request yang bisa kita ambil dari object Request, seperti Query
Param, Header, Body dan lain-lain
● [Link]
Kode : Request
Request URL
Request URL

● Untuk mendapatkan URL saat ini, kita bisa menggunakan object Request untuk mendapatkan
informasinya
● [Link], untuk mendapat url secara full beserta query param nya
● [Link], untuk mendapatkan path url tanpa query param
● [Link], untuk mendapatkan nama host atau domain dari web kita
● [Link], untuk mendapatkan protocol dari url web
● [Link], untuk mengecek apakah url web nya https atau bukan
● [Link], untuk mendapatkan array subdomain dari url web kita
Kode : Request URL
Request Query Param
Request Query Param

● Request juga bisa digunakan untuk mengambil data query parameter

● Secara otomatis, semua query parameter akan disimpan dalam bentuk object di [Link]
● [Link]
Kode : Request Query Param
Request Header
Request Header

● Object Request juga bisa kita gunakan untuk mendapatkan informasi dari HTTP Header dari
Request
● Kita bisa menggunakan method [Link](name) atau [Link](name) untuk mendapatkan header
berdasarkan name, khusus untuk HTTP Header, name nya adalah case insensitive
● [Link]
Kode : Request Header
Response
Response

● Pada Callback Routing ExpressJS, terdapat parameter kedua yaitu response

● Response merupakan object representasi dari HTTP Response
● Kita bisa mengubah data HTTP Response melalui object Response tersebut
● [Link]
Kode : Response
Response Status
Response Status

● Saat kita ingin mengubah HTTP Status dari HTTP Response yang kita buat, kita bisa menggunakan
method [Link](code)
● [Link]
Kode : Response Status
Response Header
Response Header

● Kita juga bisa mengubah HTTP Response Header dengan menggunakan method [Link](name,
value) atau [Link](name, value)
● Atau jika ingin langsung beberapa name, kita bisa masukkan dalam bentuk object ke dalam
parameter name nya
● [Link]
Kode : Response Header
Response Body
Response Body

● Untuk mengubah Response Body, kita bisa menggunakan method [Link](body)

● Dimana parameter body bisa kita kirim dalam bentuk buffer atau string, baik itu text, html, json dan
lain-lain
● [Link]
Kode : Response Body
Redirect
Redirect

● Seperti yang pernah dijelaskan di kelas HTTP, untuk melakukan Redirect dari sebuah web ke
halaman lain, kita hanya cukup menggunakan HTTP Header Location
● Di ExpressJS, kita bisa lakukan manual dengan menggunakan HTTP Header Location, atau bisa
dengan bantuan method [Link](to)
● [Link]
Kode : Redirect
Middleware
Middleware

● Middleware adalah function yang bisa digunakan untuk mengakses request object, response object
dan next function dalam alur hidup aplikasi ExpressJS
● Jika Middleware memanggil next function, artinya function Middleware selanjutnya atau Router
akan dieksekusi
Diagram : Middleware (1)
Fungsi Middleware

Ada banyak sekali kegunaan dari Middleware, seperti

● Eksekusi kode sebelum sebelum router di eksekusi

● Mengubah Request atau Response object sebelum router di eksekusi
● Mengakhiri response tanpa harus mengeksekusi router
● Dan lain-lain
Diagram : Middleware (2)
Spesifikasi Middleware

● Untuk membuat middleware, kita cukup membuat function dengan 3 parameter, request, response
dan next
● request adalah request object
● response adalah response object
● next adalah next function, bisa middleware selanjutnya atau router
Kode : Middleware
Kode : Menggunakan Middleware
Kode : Api Key Middleware
Kode : Menggunakan Api Key Middleware
Manipulasi Request

● Karena Request itu adalah JavaScript Object

● Jadi jika kita mau, kita juga bisa memanipulasi Request Object di Middleware
● Misal mengubah attribute atau menambah attribute baru, agar bisa digunakan di Middleware
selanjutnya, atau di Router
Kode : Request Time Middleware
Route Path
Route Path

● Sebelumnya pada materi Basic Routing, kita belajar bagaimana cara melakukan routing dengan
HTTP Method sesuai yang kita mau
● Sekarang kita akan bahas lebih detail tentang Route Path nya.
● Sebelumnya, route path yang kita gunakan tidak dinamis. ExpressJS mendukung route path yang
dinamis, dengan cara menggunakan route path string patterns atau regex
Path to Regex

● ExpressJS menggunakan library Path to Regex untuk melakukan routing berupa regex
● Kita bisa lihat detail cara melakukan regex nya pada halaman dokumentasi library nya
● [Link]
● Untuk melakukan pengetesan, kita bisa menggunakan website
[Link]
Kode : Route Path
Kode : Unit Test Route Path
Route Parameter
Route Parameter

● Saat kita membuat aplikasi Web API atau RESTful API, kadang kita sering menyimpan parameter
dalam URL Path, misal /products/{idProduct}, atau /categories/{idCategory}, dan lain-lain
● ExpressJS mendukung penambahan parameter dalam route path, dengan menggunakan prefix :
(titik dua)
● Semua data parameter itu bisa kita tambahkan regex jika kita mau, misal /products/:id(\\d+),
artinya kita menambah parameter id, dimana id tersebut harus digit
● Data route parameter secara otomatis bisa kita ambil sebagai attribute di [Link]
● [Link]
Kode : Route Parameter
Kode : Unit Test Route Parameter
Route Function
Route Function

● Kadang ada kasus ketika kita membuat route path yang sama untuk beberapa tipe HTTP Method
● Pada kasus ini, kita bisa memanfaatkan route(path) function sehingga tidak perlu mendeklarasikan
nama path sama untuk beberapa route
● [Link]
Kode : Route Function
Kode : Unit Test Route Function
Router
Router

● Saat kita membuat Application ExpressJS, secara default sudah terdapat object Router nya
● Namun, kita bisa membuat object Router sendiri jika kita mau, hal ini sangat cocok jika kita ingin
melakukan grouping Router, lalu misal kita bisa menambahkan Router tersebut ke Application
seperti Middleware
● Ini sangat cocok ketika kita ingin membuat fitur modular yang bisa mengaktifkan atau
menonaktifkan router secara dinamis misalnya
● Dengan object Router, kita bisa memiliki Middleware dan Routing secara independen
● [Link]
● [Link]
Kode : Membuat Router
Kode : Menggunakan Router
Type of Middleware
Type of Middleware

Di ExpressJS, terdapat beberapa jenis Middleware

● Application-level middleware
● Router-level middleware
● Error-handling middleware
● Built-in middleware
● Third-party middleware
Application-Level Middleware

● Yaitu middleware yang digunakan di object Application, sebelumnya kita sudah menggunakan
Application-Level Middleware, dengan cara menggunakan function [Link](middleware)
● Saat kita menggunakan Application-Level Middleware, maka secara otomatis Middleware tersebut
akan dipanggil di semua route
● Jika kita mau menggunakan Middleware hanya untuk di route path tertentu, kita bisa tambahkan
route pattern ketika menggunakan [Link](), misal [Link](“/products/*”, middleware)
● [Link]
Router-Level Middleware

● Yaitu middleware yang ditambahkan pada object Router yang kita buat menggunakan
[Link]()
● Middleware ini secara otomatis akan dipanggil ketika request masuk ke router ini
● Sama seperti dengan Application-Level Middleware, jika kita ingin middleware nya hanya dipanggil
para route path tertentu, kita bisa juga tambahkan route pattern ketika menggunakan middleware
nya menggunakan [Link](path, middleware)
● [Link]
Error-Handling Middleware

● Yaitu middleware yang akan dipanggil ketika terjadi error di aplikasi kita (throw Error)
● Cara penggunaannya mirip dengan Application-Level Middleware, yang membedakan adalah
function callback nya memiliki empat parameter, yaitu error, request, response dan next
● Object error akan secara otomatis terisi oleh data Error yang terjadi di aplikasi kita
● Middleware ini, sangat cocok ketika kita ingin menampilkan tampilan yang berbeda ketika terjadi
error di aplikasi kita
Built-in Middleware

● ExpressJS banyak sekali menggunakan Middleware untuk melakukan pemrosesan request dan
response, termasuk terdapat Built-in Middleware, yaitu middleware yang sudah terdapat secara
otomatis di ExpressJS
● [Link](), yaitu middleware yang melakukan parsing request body menjadi JavaScript object
● [Link](), yaitu middleware yang melakukan parsing request body menjadi string
● [Link](), yaitu middleware yang melakukan parsing request body menjadi Buffer
● [Link](), yaitu middleware yang melakukan parsing request body form menjadi object
● [Link](), yaitu middleware yang digunakan untuk melayani file static
Third-party middleware

● Yaitu middleware buatan orang lain yang kita gunakan

● Untuk menggunakannya, kita perlu menambah dependency middleware nya terlebih dahulu
Request Body
Request Body

● Sebelumnya kita belum membahas tentang HTTP Request Body

● Di ExpressJS, Secara default HTTP Request Body tidak bisa diambil datanya oleh Router Callback,
hal ini dikarenakan, jenis data Request Body bisa berbeda-beda, tergantung tipe data yang dikirim
● Oleh karena itu, di dalam ExpressJS, terdapat Built-in Middleware, yang digunakan untuk
membaca Request Body, lalu melakukan konversi ke tipe data yang diinginkan
Built-in Middleware

Middleware Keterangan

[Link]() Membaca request body menjadi bentuk JSON (JavaScript

Object)

[Link]() Membaca request body menjadi bentuk string

[Link]() Membaca request body menjadi bentuk Buffer

[Link]() Membaca request body menjadi bentuk Form (JavaScript

Object)
Kode : Request Body JSON
Kode : Request Body Form
Cookie
Cookie

● Dalam HTTP, salah satu fitur yang biasa digunakan untuk pertukaran data dari Server dan Client
adalah Cookie
● Banyak yang menggunakan Cookie sebagai Session misalnya
● Sayangnya, secara default, ExpressJS tidak mendukung Cookie, tapi jangan khawatir, kita bisa
menggunakan Third-Party Middleware untuk mendukung Cookie ini
Cookie Parser

● Cookie Parser adalah salah satu Third-Party Middleware yang bisa kita gunakan untuk mendukung
fitur Cookie, dimana dengan Cookie Parser, kita secara otomatis menyimpan data ke Cookie, atau
mengambil data ke Cookie
● [Link]
Menginstall Dependency
Membaca Cookie

● Setelah kita memasang Cookie Parser Middleware, kita bisa secara otomatis membaca Cookie
yang dikirim dari Client melalui [Link]
● [Link]
Kode : Membaca Cookie
Menulis Cookie

● Sedangkan untuk menulis Cookie, kita bisa tambahkan di response, dengan method [Link](key,
value, setting)
● [Link]
● Dan untuk menghapus Cookie, kita bisa gunakan [Link](key, setting)
● [Link]
Kode : Menulis Cookie
Signed Cookie
Signed Cookie

● Salah satu kelemahan ketika kita menyimpan data di Cookie adalah, Cookie bisa dimodifikasi oleh
Client, misal kita bisa modifikasi Cookie di Browser kita
● Salah satu cara untuk menjaga agar Cookie tidak dimodifikasi adalah, kita menambahkan Signature
pada Cookie kita
● Setiap nilai Cookie akan ada Signature, dimana ketika nilai Cookie diubah, otomatis Signature tidak
akan sama lagi, dan secara otomatis value Cookie tidak dianggap valid lagi
● Fitur ini sudah ada di Cookie Parser dengan nama Signed Cookie
● Kita wajib menyebutkan Cookie mana yang ingin di Signed, ketika kita membuat Cookie di
response
● Selain itu, kita juga perlu memasukkan Secret Key untuk digunakan ketika proses pembuatan
Signature, pastikan Secret Key nya aman dan tidak mudah ditebak
Kode : Membuat Signed Cookie
Kode : Contoh Signed Cookie
Membaca Signed Cookie

● Jika kita membuat Cookie sebagai Signed Cookie, maka untuk membacanya, jangan menggunakan
[Link], melainkan harus menggunakan [Link]
● [Link]
Kode : Membaca Signed Cookie
Response Body Lainnya
Response Body

● Sebelumnya, kita sudah mencoba beberapa jenis Response Body di ExpressJS

● Kita bisa menggunakan [Link](data) untuk mengirim response berupa text misal nya, atau
sebelumnya, kita sudah menggunakan [Link](object) untuk mengirim data dalam bentuk JSON
● Sebenarnya masih banyak jenis Response Body yang didukung oleh ExpressJS
Response Body Method

Response Body Method Keterangan

[Link](data) Response berupa raw data

[Link](path, filename, option) Response berupa file download

[Link](body) Response berupa JSON

[Link](url) Response redirect url

[Link](path, option) Response berupa file

Kode : Response Body File
Error Handling
Jika Terjadi Error

● Apa yang terjadi jika misal terjadi Error di aplikasi kita? Secara otomatis Error tersebut akan
ditangkap oleh ExpressJS
● Lalu detail error nya akan ditampilkan di response-nya secara otomatis
● Kadang, ada kasus kita ingin mengubah cara menampilkan error, atau bahkan kita memang
berharap terjadi error, misal Validation Error
● Pada kasus seperti ini, untungnya ExpressJS memiliki fitur Error-Handling Middleware, dimana kita
bisa membuat Middleware dan akan dieksekusi ketika terjadi error
● Berbeda dengan Middleware biasanya, pada Error-Handling Middleware, diperlukan empat
parameter, dimana diawali dengan parameter error nya
Default Halaman Error
Kode : Error Middleware
Static File
Static File

● Saat membuat Web, kadang kita ingin menampilkan static file seperti html, css, javascript, gambar,
atau file lainnya
● Jika kita harus membuat route untuk setiap file, maka akan menyulitkan.
● Untungnya, terdapat middleware yang bisa kita gunakan untuk menyediakan static file.
● Middleware ini secara otomatis akan mencari file, jika file ada, maka akan dikembalikan file
tersebut, jika tidak ada, maka akan dilanjutkan ke middleware atau route selanjutnya
● Kita bisa menggunakan Middleware [Link]()
● [Link]
Kode : Static File
Prefix Path

● Kadang-kadang, kita ingin memberi prefix path pada static file, misal /static/filenya
● Pada kasus itu, maka kita bisa tambahkan route pada middleware nya, misal :
[Link](‘/static’, [Link](...))
Kode : Static File Prefix
Template Engine
Template Engine

● Saat membuat web menggunakan ExpressJS, maka jika kita membuat string HTML lalu kita kirim
menggunakan response, maka hal itu sangat menyulitkan
● Biasanya, untuk mempermudah itu, kita bisa menggunakan Template Engine
● Template Engine adalah library yang digunakan untuk membuat template lalu mempermudah kita
ketika ingin menampilkan data di template nya
● Biasanya template nya dalam bentuk HTML, dan data nya bisa kita ubah sesuai dengan data yang
ingin kita tampilkan di HTML tersebut
Template Engine Library

● ExpressJS Sendiri tidak memiliki fitur Template Engine, oleh karena itu kita perlu menggunakan
library lain untuk menggunakan Template Engine
● Ada banyak sekali library Template Engine di NodeJS, misal
● Mustache : [Link]
● Pug : [Link]
● EJS : [Link]
● Marko : [Link]
● Dan lain-lain
Mustache Express

● Pada kelas ini, kita akan menggunakan Mustache sebagai template engine
● Hal ini dikarenakan Mustache merupakan template engine yang sangat mudah digunakan
● Kita tidak akan menginstall Mustache secara manual, kita akan menggunakan bantuan library
Mustache Express
● [Link]
Menambah Dependency
Kode : Registrasi Template Engine
Kode : Template
Kode : Render Template
Mustache

● Pelajari lebih lanjut tentang kode template Mustache

● [Link]
File Upload
File Upload

● Sebelumnya kita belum membahas bagaimana jika Request Body yang dikirim adalah File Upload
atau Multipart Form Data?
● Sayangnya, secara default di ExpressJS, tidak ada fitur untuk membaca File Upload
● Tapi kita bisa menggunakan Third-Party Middleware lain untuk membaca File Upload
● [Link]
Menambah Dependency
Kode : Menggunakan File Upload Middleware
Kode : Upload File
Not Found Error
Not Found Handler

● Saat user melakukan request ke URL yang tidak tersedia, maka secara default ExpressJS akan
mengembalikan halaman 404
● Kadang ada kasus dimana kita ingin membuat halaman 404 sendiri
● Pada kasus ini, kita bisa menambahkan middleware di posisi paling akhir
● Middleware tersebut akan dipanggil jika memang tidak terdapat route yang tersedia untuk route
path yang diakses
Kode : Middleware Not Found
Materi Selanjutnya
Materi Selanjutnya

● NodeJS Mustache
● NodeJS Database
● Dan lain-lain