Table of Contents
02 – NodeJS Framework Express.js
Pengenalan
Apa itu Express.js?
Express.js adalah framework web app untuk Node.js yang ditulis dengan bahasa pemrograman JavaScript. Framework open source ini dibuat oleh TJ Holowaychuk pada tahun 2010 lalu.
Express.js adalah framework back end. Artinya, ia bertanggung jawab untuk mengatur fungsionalitas website, seperti pengelolaan routing dan session, permintaan HTTP, penanganan error, serta pertukaran data di server.
Nah, framework yang satu ini punya arsitektur MVC (Model View Controller). Dengan begitu, setiap data diolah pada Model, dihubungkan melalui Controller, lalu ditampilkan menjadi informasi melalui View
Mengapa Menggunakan Express.js
- Memperbaiki Error Lebih Cepat
Express.js bisa mengatasierror dengan lebih cepat berkat mekanisme debugging yang diterapkan. Caranya lewat metode debug yang menyimpan informasi mulai dari routing, fungsi middleware, dan sebagainya. Dengan begitu, error dapat terdeteksi sejak dini dan dapat diperbaiki saat itu juga. Hasilnya, website akan berjalan dengan lancar dan sudah bersih dari segala bentuk error.
- Mempersingkat Proses Pengembangan
Proses pengembangan website menggunakan framework Express.js dapat selesai dalam waktu singkat. Pasalnya, ia terintegrasi dengan platform full stack MEAN yang dapat membangun website secara keseluruhan dengan lebih cepat.
Selain itu, Express.js punya dukungan ekosistem JavaScript yang besar sehingga proses implementasi fungsi dapat berjalan dengan lancar. Hal tersebut ditambah dengan keberadaan komunitas yang luas dan suportif. Jika Anda mengalami kendala atau error, Anda bisa langsung meminta bantuan ke komunitas untuk menemukan solusi. Dengan begitu, error bisa cepat terselesaikan dan website bisa selesai dalam waktu singkat.
- Menekan Biaya Pengembangan
Menggunakan Express.js artinya dapat menekan biaya yang diperlukan untuk mengembangkan website. Pasalnya, ia adalah framework open source yang bisa digunakan secara bebas tanpa perlu meminta perizinan lisensi.
Selain itu dengan singkatnya waktu pengembangan website, otomatis biaya yang dikeluarkan selama proses pengembangan dapat ditekan. Hal ini tentu saja sangat menguntungkan, khususnya bagi perusahaan. Mereka jadi tidak perlu mengeluarkan biaya berlebih dalam mengakomodasi proses pengembangan yang lama. Mulai dari hal-hal teknis sampai hal lain yang sifatnya non teknis.
Installasi
Instalasi Manual
Masuk ke direktori my-app. lalu jalan perintah2 di bawah ini.
cd my-app
npm init
npm install --save express
Setelah installasi berhasil, buka Visual Studio Code, buat file baru index.js. Kemudian tulis skrip berikut :
const express = require('express')
const app = express()
app.get('/', (req, res) => res.send('Hello Express!'))
app.listen(3000, () => console.log('Hello World Manual berjalan di http://localhost:3000'))
Jalankan
node index.js
Instalasi Otomatis
Ada satu cara lagi yang lebih ringkas dalam menerapkan Express.js yaitu melalui sebuah tool bernama Express Generator.
Tool ini bisa Anda gunakan untuk menginstall Express.js secara otomatis sekaligus menyiapkan sebuah project website baru. Langkah-langkahnya sebagai berikut:
Pertama, jalankan perintah berikut untuk menginstall Express Generator:
npm install express-generator -g
Setelahnya, buat project baru bernama helloworld-otomatis dengan menjalankan perintah berikut :
express mysecondapp
Masuk ke direktori project, lalu install.
cd mysecondapp
npm install
Lihat kerangka(skeleton) project mysecondapp, akan otomatis terbuat template struktur baru.
Jalankan project helloworld-otomatis dengan menjalankan perintah di bawah , lalu buka browser http://localhost:3000:
npm start
Static Files
Single
Untuk menyajikan file statis seperti gambar, file CSS, dan file JavaScript, gunakan fungsi middleware bawaan express.static di Express.
Formatnya adalah:
express.static(root, [options])
Argumen root menentukan direktori root untuk melayani aset statis. Misalnya, gunakan kode berikut untuk menyajikan gambar, file CSS, dan file JavaScript dalam direktori bernama publik :
app.use(express.static('public'))
Sekarang, Anda dapat memanggil file yang berada pada direktori public :
- http://localhost:3000/images/kitten.jpg
- http://localhost:3000/css/style.css
- http://localhost:3000/js/app.js
- http://localhost:3000/images/bg.png
- http://localhost:3000/hello.html
Multiple
Untuk menggunakan beberapa direktori aset static, panggil fungsi middleware express.static beberapa kali :
app.use(express.static('public'))
app.use(express.static('files'))
Alias
Untuk virtual prefix atau alias contohnya seperti berikut :
app.use('/static', express.static('public'))
Sekarang, Anda dapat memuat file yang ada di direktori public dengan menggunakan prefix static seperti berikut.
- http://localhost:3000/static/images/kitten.jpg
- http://localhost:3000/static/css/style.css
- http://localhost:3000/static/js/app.js
- http://localhost:3000/static/images/bg.png
- http://localhost:3000/static/hello.html
Namun, fungsi di atas mengikuti lokasi dimana node dijalankan. Misal jika anda menjalankan aplikasi dari direktori lain, lebih aman menggunakan jalur absolut dari direktori seperti berikut :
const path = require('path')
app.use('/static', express.static(path.join(__dirname, 'public')))
Routing
Routing adalah metode yang digunakan website (server) untuk merespons permintaan dari browser (client). Misalnya, permintaan untuk menampilkan halaman tertentu.
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('home', { title: 'Home' });
});
router.get('/about', function(req, res, next) {
res.render('about', { title: 'About' });
});
router.get('/contact', function(req, res, next) {
res.render('contact', { title: 'Contact' });
});
module.exports = router;
Route Methods
Route Method diturunkan dari salah satu metode HTTP, dan dilampirkan ke instance kelas express.
Kode berikut adalah contoh rute yang ditentukan untuk metode GET dan POST ke root aplikasi.
// GET method route
app.get('/', (req, res) => {
res.send('GET request to the homepage')
})
// POST method route
app.post('/', (req, res) => {
res.send('POST request to the homepage')
})
Express mendukung semua method request HTTP. GET, POST, dan sebagainya. Untuk daftar lengkap, lihat app.METHOD.
Ada metode perutean khusus yauitu app.all(), yang biasanya digunakan untuk CRUD. Misalnya, seperti di bawah ini.
app.all('/secret', (req, res, next) => {
console.log('Accessing the secret section ...')
next() // pass control to the next handler
})
Route Paths
Jalur rute dapat berupa string, pola string, atau reguler expression.
//This route path will match acd and abcd
app.get('/ab?cd', (req, res) => {
res.send('ab?cd')
})
Route Parameters
Parameter berdasarkan segmen URL yang digunakan untuk menangkap nilai yang ditentukan pada posisinya di URL.
Route path: /users/:userId/books/:bookId
Request URL: http://localhost:3000/users/34/books/8989
req.params: { "userId": "34", "bookId": "8989" }
Route Handlers
Beberapa callback dapat dipanggil sebagai handler, prosesnya mirip seperti middleware saat menangani request. Yang berbeda adalah callback ini dapat memanggil next(‘route’) untuk melewati route callback lain yang tersisa. Proses ini dapat diterapkan sebagai prasyarat pada route tertentu, lalu meneruskan kontrol ke rute berikutnya jika tidak ada error.
//More than one callback function can handle a route (make sure you specify the next object)
app.get('/example/b', (req, res, next) => {
console.log('the response will be sent by the next function ...')
next()
}, (req, res) => {
res.send('Hello from B!')
})
Metode pada objek respons (res) dalam tabel berikut dapat mengirimkan respons ke klien, dan mengakhiri siklus respons-permintaan. Jika tidak ada metode ini yang dipanggil dari pengendali rute, permintaan klien akan dibiarkan menggantung.
Response methods
Metode pada objek respons (res) dalam tabel berikut dapat mengirimkan respons ke klien, dan mengakhiri siklus respons-permintaan. Jika tidak ada metode yang dipanggil, permintaan klien akan dibiarkan menggantung.
| Method | Description |
|---|---|
| res.download() | Prompt a file to be downloaded. |
| res.end() | End the response process. |
| res.json() | Send a JSON response. |
| res.jsonp() | Send a JSON response with JSONP support. |
| res.redirect() | Redirect a request. |
| res.render() | Render a view template. |
| res.send() | Send a response of various types. |
| res.sendFile() | Send a file as an octet stream. |
| res.sendStatus() | Set the response status code and send its string representation as the response body. |
Middleware
Middleware khususnya di dunia web programming adalah suatu fungsi yang berada di antara router dengan controller yang biasanya diugunakan untuk menangani check autentikasi, validasi, dan lainnya. Sama halnya di Express.js juga seperti itu.
Middleware di Express.js merupakain sebuah fungsi dengan 3 parameter yaitu request, result dan next.
// Melanjutkan ke middleware berikutnya
(req, res, next) => {
next();
}
// Menghentikan proses di middleware
(req, res, next) => {
next(errorParameter);
}
Template Engines
Template Engine memungkinkan Anda untuk menggunakan file template statis di aplikasi Anda. Saat runtime, mesin template mengganti variabel dalam file template dengan nilai aktual, dan mengubah template menjadi file HTML yang dikirim ke klien. Pendekatan ini membuatnya lebih mudah untuk mendesain halaman HTML.
Umumnya setiap framework menyediakan template engine blade pada Laravel misal.
Beberapa template engine populer yang bekerja dengan Express adalah Pug, Kumis, dan EJS. Generator aplikasi Express menggunakan Jade sebagai standarnya, tetapi juga mendukung beberapa lainnya.