Apa itu express? Express adalah framework node.js yang minimalis dan flexibel yang memiliki fitur-fitur yang lengkap untuk membuat web dan mobile application.
Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.
Jadi dengan Express kamu bisa lebih cepat untuk membuat rest api dengan menggunakan MySQL atau database lainnya. Itu karena Express sudah include dengan HTTP utility yang mudah dipakai dan juga module-module lainnya.
Jika kalian baru mulai belajar Express, ikuti terus tutorial ini ya.
Daftar Isi:
Instalasi Express
Express membutuhkan node.js, jadi pastikan komputer kamu sudah terinstall node.js dahulu ya.
Jika belum bisa cek cara install node.js di tutorial ini: Belajar NodeJs - Dasar dan Persiapan Belajar NodeJs.
Jika node.js sudah terinstall dengan baik. Selajutnya kita buat sebuah folder. Misalnya namanya express-app.
mkdir express-app
Pergi ke dalam folder tersebut dan jalankan npm init
cd express-app
npm init
Ikuti step-stepnya sampai selesai. Contohnya seperti di bawah ini.
{
"name": "express-app",
"version": "1.0.0",
"description": "express app sample",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Jika sudah selesai, selanjutnya kita akan menginstall Express.
Bagaimana caranya?
Jalankan command dibawah ini.
npm install express --save
Jika sudah selesai, package.json akan berubah seperti dibawah ini.
{
"name": "express-app",
"version": "1.0.0",
"description": "express app sample",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.17.1"
}
}
Bisa kita liat, kita sudah memiliki dependencies baru dengan nama express.
Selain itu, di dalam folder express-app juga akan ada folder baru dengan nama node_modules.
Kita sudah berhasil menginstall express di dalam project kita.
Selanjutnya apa?
Membuat Hello World Dengan Express
Untuk mengetes apakah express berfungsi dengan baik, kita akan membuat sebuah aplikasi sederhana yang menampilan Hello World.
Buat sebuah file index.js. Lalu isi dengan kode dibawah ini.
const express = require('express')
const app = express()
const port = 3030
app.get('/', (req, res) => {
res.send('Hello World!')
})
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`)
})
Coba jalankan server kita dengan command node index.js.
Jika tidak ada error akan muncul tampilan seperti ini di terminal kamu.
Buka url http://localhost:3030 dan kamu harusnya bisa mendapatkan tampilan Hello World! di browser kamu.
Express Routing
Salah satu fitur Express adalah kita bisa dengan mudah membuat route atau url untuk aplikasi yang kita buat.
Kita bisa menentukan path dan method dari route yang dibuat.
Untuk membuat route di express, caranya adalah dengan mengikuti struktur ini.
app.METHOD(PATH, HANDlER)
Dimana:
- app: ini adalah instant dari express
- METHOD: ini adalah method dari request yang kita buat, seperti get, post, put atau delete. http method ini huruf kecil semua ya.
- PATH: ini adalah path url yang di inginkan. Seperti /product, /home atau yang lainnya.
- HANDLER: adalah function yang akan dieksekusi saat route itu dipanggil.
Daripada bingung, kita contohnya saja bagaimana cara membuat route di applikasi sebelumnya.
Buka file index.js lihat di bagian ini.
app.get('/', (req, res) => {
res.send('Hello World!')
})
Itu adalah contoh GET route. Nah kita kamu ingin membuat POST route contohnya ada dibawah ini.
app.post('/', function (req, res) {
res.send('Got a POST request')
})
Atau PUT request?
app.put('/user', function (req, res) {
res.send('Got a PUT request at /user')
})
Bagaimana kalau DELETE Requst?
app.delete('/user', function (req, res) {
res.send('Got a DELETE request at /user')
})
Mudah bukan routing di Express. Untuk dokumentasi yang lebih lengkap, kamu bisa cek dokumentasi disini ya: https://expressjs.com/en/guide/routing.html
Express Templating
Secara umum, Express dan nodejs digunakan di server side. Untuk membuat website sederhana di Express, kita akan memakai template engine Express yaitu Pug.
Pug adalah template engine yang memungkinkan kita parsing data/variable ke dalam static file.
Selain Pug, kita juga bisa memakai template engine lainnya seperti Mustache atau EJS atau Jade.
Kita install dulu pug.
npm install pug --save
Jika sudah, edit file index.js dan tambahkan kode dibawah ini setelah baris const port = 3030.
app.set('view engine', 'pug');
app.set('views','./views');
Penjelasannya adalah:
- Kita memberitahu Express bahwa kita akan menggunakan
view engine = pug. - Kita akan memberitahu Express untuk tempat file-file view kita akan kita taruh di directory/folder
views.
Selajutnya buat sebuah folder baru dengan nama views.
Kemudian buat sebuah file dengan nama welcome.pug.
Isi dengan kode dibawah ini.
doctype html
html
head
title = "Hello Pug"
body
p.greetings#people Hello World!
Edit dibagain get route dan ubah get route / menjadi seperti dibawah ini.
app.get('/', (req, res) => {
res.render('welcome');
})
Penjelasan:
Saat ada get request ke path / maka, Express akan me-render file welcome.
Coba restart webserver kamu dan buka lagi url: http://localhost:3030/
Express akan merender file welcome.pug itu menjadi seperti dibawah ini:
<!DOCTYPE html>
<html>
<head>
<title>Hello Pug</title>
</head>
<body>
<p class = "greetings" id = "people">Hello World!</p>
</body>
</html>
Bagaimana cara memparsing data dari route ke view template?
Misalnya kita buat sebuah view baru dengan nama profile.pug.
doctype html
html
head
title = "Hello Pug"
body
p.greetings#people Hello #{user}
Untuk pass variable berupa string ke template, kamu bisa menggunakan syntact #{variableName}.
Buat sebuah route baru dengan path profile yang akan me-render view profile.pug.
app.get('/profile', (req, res) => {
res.render('profile', {user: 'Agus'});
})
Kamu bisa memparsing data ke view dengan menambahkan object sebagai parameter dari fungsi res.render(view_name, data_json_object).
Jadi di route /profile kita parsing variable user ke view dengan value = Agus.
Cukup mudah mudah?
Jadi itulah sedikit perkenalan kita dengan Express.JS, framework nodejs yang bisa mempercepat proses saat development sebuah website atau mobile aplikasi.
Selanjutnya kita akan belajar bagaimana cara membuat REST api dengan menggunakan Express.
Ikuti terus tutorial di website ini ya guys.
