NodeJS ExpressJS

Eko Kurniawan Khannedy

Eko Kurniawan Khannedy

- Technical architect at one of the biggest

ecommerce company in Indonesia
- 12+ years experiences
- www.programmerzamannow.com
- youtube.com/c/ProgrammerZamanNow
Eko Kurniawan Khannedy
● Telegram : @khannedy
● Facebook : fb.com/ProgrammerZamanNow
● Instagram : instagram.com/programmerzamannow
● Youtube : youtube.com/c/ProgrammerZamanNow
● Telegram Channel : t.me/ProgrammerZamanNow
● Tiktok : https://tiktok.com/@programmerzamannow
● Email : [email protected]
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
● https://expressjs.com/
● https://www.npmjs.com/package/express
● https://github.com/expressjs/express
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

● https://github.com/ProgrammerZamanNow/belajar-nodejs-logging
Menambah Dependency
Application
Application

● Saat kita membuat web menggunakan ExpressJS, kita akan membuat object
Application
● Application adalah object utama dalam library ExpressJS
● https://expressjs.com/en/4x/api.html#app
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
● https://expressjs.com/en/4x/api.html#app.listen
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
app.connect(path, callback) HTTP Method CONNECT

app.get(path, callback) HTTP Method GET

app.post(path, callback) HTTP Method POST

app.put(path, callback) HTTP Method PUT

app.delete(path, callback) HTTP Method DELETE

app.options(path, callback) HTTP Method OPTIONS

app.trace(path, callback) HTTP Method TRACE

app.head(path, callback) HTTP Method HEAD

app.patch(path, callback) HTTP Method PATCH

app.all(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
● https://www.npmjs.com/package/supertest
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
● https://expressjs.com/en/4x/api.html#req
Kode : Request
Request URL
Request URL

● Untuk mendapatkan URL saat ini, kita bisa menggunakan object Request untuk
mendapatkan informasinya
● req.originalUrl, untuk mendapat url secara full beserta query param nya
● req.path, untuk mendapatkan path url tanpa query param
● req.hostname, untuk mendapatkan nama host atau domain dari web kita
● req.protocol, untuk mendapatkan protocol dari url web
● req.secure, untuk mengecek apakah url web nya https atau bukan
● req.subdomains, 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
req.query
● https://expressjs.com/en/4x/api.html#req.query
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 req.get(name) atau req.header(name) untuk
mendapatkan header berdasarkan name, khusus untuk HTTP Header, name nya
adalah case insensitive
● https://expressjs.com/en/4x/api.html#req.get
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
● https://expressjs.com/en/4x/api.html#res
Kode : Response
Response Status
Response Status

● Saat kita ingin mengubah HTTP Status dari HTTP Response yang kita buat, kita bisa
menggunakan method res.status(code)
● https://expressjs.com/en/4x/api.html#res.status
Kode : Response Status
Response Header
Response Header

● Kita juga bisa mengubah HTTP Response Header dengan menggunakan method
res.set(name, value) atau res.header(name, value)
● Atau jika ingin langsung beberapa name, kita bisa masukkan dalam bentuk object ke
dalam parameter name nya
● https://expressjs.com/en/4x/api.html#res.set
Kode : Response Header
Response Body
Response Body

● Untuk mengubah Response Body, kita bisa menggunakan method res.send(body)

● Dimana parameter body bisa kita kirim dalam bentuk buffer atau string, baik itu text,
html, json dan lain-lain
● https://expressjs.com/en/4x/api.html#res.send
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 res.redirect(to)
● https://expressjs.com/en/4x/api.html#res.redirect
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
● https://www.npmjs.com/package/path-to-regexp
● Untuk melakukan pengetesan, kita bisa menggunakan website
http://forbeslindesay.github.io/express-route-tester/
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 req.params
● https://expressjs.com/en/4x/api.html#req.params
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
● https://expressjs.com/en/4x/api.html#app.route
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
● https://expressjs.com/en/4x/api.html#express.router
● https://expressjs.com/en/4x/api.html#router
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
app.use(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 app.use(), misal
app.use(“/products/*”, middleware)
● https://expressjs.com/en/4x/api.html#app.use
Router-Level Middleware

● Yaitu middleware yang ditambahkan pada object Router yang kita buat
menggunakan express.Router()
● 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 router.use(path, middleware)
● https://expressjs.com/en/4x/api.html#router.use
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
● express.json(), yaitu middleware yang melakukan parsing request body menjadi
JavaScript object
● express.text(), yaitu middleware yang melakukan parsing request body menjadi string
● express.raw(), yaitu middleware yang melakukan parsing request body menjadi Buffer
● express.urlencoded(), yaitu middleware yang melakukan parsing request body form
menjadi object
● express.static(), 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

express.json() Membaca request body menjadi bentuk JSON (JavaScript

Object)

express.text() Membaca request body menjadi bentuk string

express.raw() Membaca request body menjadi bentuk Buffer

express.urlencoded() 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
● https://www.npmjs.com/package/cookie-parser
Menginstall Dependency
Membaca Cookie

● Setelah kita memasang Cookie Parser Middleware, kita bisa secara otomatis
membaca Cookie yang dikirim dari Client melalui req.cookies
● https://expressjs.com/en/4x/api.html#req.cookies
Kode : Membaca Cookie
Menulis Cookie

● Sedangkan untuk menulis Cookie, kita bisa tambahkan di response, dengan method
res.cookie(key, value, setting)
● https://expressjs.com/en/4x/api.html#res.cookie
● Dan untuk menghapus Cookie, kita bisa gunakan res.clearCookie(key, setting)
● https://expressjs.com/en/4x/api.html#res.clearCookie
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 req.cookies, melainkan harus menggunakan req.signedCookies
● https://expressjs.com/en/4x/api.html#req.signedCookies
Kode : Membaca Signed Cookie
Response Body Lainnya
Response Body

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

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

Response Body Method Keterangan

res.send(data) Response berupa raw data

res.download(path, filename, option) Response berupa file download

res.json(body) Response berupa JSON

res.redirect(url) Response redirect url

res.sendFile(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 express.static()
● http://expressjs.com/en/4x/api.html#express.static
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 :
app.use(‘/static’, express.static(...))
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 : https://github.com/janl/mustache.js/
● Pug : https://github.com/pugjs/pug
● EJS : https://github.com/mde/ejs
● Marko : https://github.com/marko-js/marko
● 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
● https://www.npmjs.com/package/mustache-express
Menambah Dependency
Kode : Registrasi Template Engine
Kode : Template
Kode : Render Template
Mustache

● Pelajari lebih lanjut tentang kode template Mustache

● https://github.com/janl/mustache.js
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
● https://github.com/richardgirges/express-fileupload
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