Bagaimana Framework Express NodeJS Bekerja
Sekarang kita akan mempelajari bagaimana Framework Express NodeJS bekerja agar kita mudah untuk membangung aplikasi dengan menggunakan Express NodeJS.
Kerangka Framework Express NodeJS
Sebelumnya pada pengenalan dan cara instalasi framework Express NodeJS kita sudah membahas bagaimana cara menginstal Express. Baiklah, untuk mengingat kembali sekaligus memulai materi ini mari kita buat sebuah proyek Express NodeJS dengan nama "kerangka-express". Caranya dari command prompt atau terminal, berikan perintah :
>express kerangka-express --view=pug
Opsi --view=pug adalah untuk memberitahu Express generator bahwa kita akan menggunakan View Engine Pug. Ada banyak View Engine yang didukung oleh Expres, hal ini akan kita bahas pada bagian tersendiri.
Hasil dari perintah ini adalah sebuah sub-direktori / sub-folder dengan nama kerangka-express yang didalamnya terdapat beberapa folder dan file seperti pada gambar diatas. Akan tetapi proses belum selesai, kita harus masuk ke folder proyek dan memberikan perintah :
> npm install
sebagaimana yang diperlihatkan pada gambar hasil eksekusi diatas.
View Engine Apa Yang Sebaiknya Kita Gunakan Untuk Express ?
Express Application Generator memungkinkan kita memilih sejumlah view engine (template) yang populer, misalnya : EJS, Hbs, Pug (Jade), Twig, dan Vash..Akan tetapi jika tidak ditentukan oleh pengguna, maka Express akan memilih Jade secara default..
Dalam memilih view engine untuk framework ada beberapa hal yang perlu diperhatikan, akan tetapi pada secara umum kita sebaiknya memilih view engine yang menyediakan semua fungsi yang kita butuhkan dan memungkinkan kita untuk menjadi lebih produktif. Berikut adalah beberapa hal yang perlu dipertimbangkan ketika memilih view / template engine :
- Waktu pengembangan. Jika tim kita dan tim pengembang sudah memiliki pengalaman dengan satu bahasa template / view engine, maka kemungkinan akan lebih mudah dan lebih cepat proses pengembangan aplikasi dengan menggunakan bahasa itu. Tetapi jika tidak maka harus dipertimbangan waktu belajar yang dibutuhkan dari masing-masing view / template engine yang menjadi kandidat.
- Popularitas dan aktivitas : Pilihlah yang memiliki popularitas dan komunitas yang aktif. Hal ini dibutuhkan agar kita bisa mendapat dukungan ketika menemukan masalah sepanjang masa pakai aplikasi web kita
- Style : Beberapa view engine menggunakan markup khusus untuk menunjukkan konten yang disisipkan dalam HTML "biasa", sementara yang lain membangun HTML menggunakan sintaks yang berbeda (misalnya, menggunakan indentasi dan nama blok).
- Kecepatan proses rendering.
- Fitur : Ketersediaan fitur yang kita butuhkan merupakan hal penting dalam mempertimbangkan apakah view engine layak atau tidak untuk kita gunakan. Misalnya :
- Fitur pewarisan tata letak. Ini penting dan dibutuhkan agar kita tidak perlu membuat bagian-bagian view yang sama setiap kali diperlukan.
- Dukungan "Include" untuk memungkinkan kita membuat template view dengan menyertakan/menempelkan template/view lain.
- Sintaks variabel dan kontrol loop yang ringkas.
- Kemampuan untuk memfilter nilai variabel pada level template, seperti membuat variabel huruf besar, atau memformat nilai tanggal.
- Kemampuan untuk menghasilkan format output selain HTML, seperti JSON atau XML.
- Dukungan untuk operasi dan streaming asinkron.
- Fitur Client Side (sisi klien). Yaitu fitur yang memungkinkan sebagian atau seluruh proses render dilakukan disisi klien sehingga meningkatkan kinerja aplikasi web.
Pada materi ini kami memilih Pug sebagai view/template engine. Pug adalah nama pengganti dari Jade yang paling populer dikalangan pengembang NodeJS Express dan memiliki banyak dukungan.
Sebenarnya ada satu engine lagi yang sudah termasuk dalam kerangka Express pada saat kita membuatnya dengan express-generator, yaitu CSS Engine. Akan tetapi kami rasa tidak perlu membahasnya lebih banyak, dan kita gunakan saja apa yang sudah disediakan yaitu Vanilla CSS yang tidak membutuhkan kerangka kerja tambahan atau preprosesor.
Instalasi Modul Dependensi
Tadi kita sudah melakukan persiapan kerangka kerja (Framework) Express, selanjutnya yang harus kita lakukan adalah menginstal modul-modul dependensi yang didefiniskan pada file package.json dengan cara :
- Pindah ke folder/direktori kerangka-express
- Eksekusi perintah : >npm install
Jika perintah npm install sudah dijalankan, berarti kerangka kerja Express sudah siap untuk digunakan atau dimodifikasi jika diperlukan.
Sekarang aplikasi siap dieksekusi, gunakan perintah :
SET DEBUG=express-locallibrary-tutorial:* | npm start
dari Command Prompt atau dari Terminal windows teks editor yang digunakan, kemudian buka browser pada alamat : http://localhost:3000
Bagaimana Framework Express NodeJS Bekerja ?
Sekarang kita tiba pada inti bahasan, yaitu bagaimana kerangka kerja Express ini bekerja agar kita dapat melakukan modifikasi sesuai kebutuhan pengembangan aplikasi kita. Mari kita lihat kembali file-file dan folder yang dihasilkan.
File WWW
Pada saat mengeksekusi server dengan perintah npm start ataupun debug, yang pertama dibaca adalah file package.json dimana terdapat script untuk mengeksekusi node ./bin/www (lihat gambar diatas no 1).
Didalam file www sendiri perintah pertama yang dijalankan adalah : var app = require(",,/app")
Sisa kode dalam file www ini adalah untuk menyiapkan server HTTP node dengan aplikasi yang diatur ke port tertentu (ditentukan dalam variabel lingkungan atau 3000 jika variabel tidak ditentukan), dan mulai mendengarkan dan melaporkan kesalahan dan koneksi server.
File app.js
Sekarang mari kita bedah app.js yang terletak pada folder root.
Pada nomor 1 modul express berupa Object Constructor di impor kedalam variabel express, kemudian digunakan untuk mendeklarasi variabel app sebagai variabel objek express pada baris 10.
Baris 7 dan 8 adalah untuk mendeklarasikan variabel rute atau jalur URL terkait. Pada contoh yang dibuat oleh Express Generator ada dua rute yaitu index dan users. Yang mana keduanya menunjuk kepada file yang terdapat pada folder routes seperti pada gambar berikut :
Jadi sekiranya kita memodifikasi kode Express dan ingin menambahkan rute baru kita bisa membuat file untuk menangani rute baru tersebut. Misalnya kita ingin menambahkan pada aplikasi sewa apartemen kita ingin menambahkan unit apartemen baru, kita bisa membuat unit.js
Setelah app sebagai objek express dideklarasikan, yang harus kita lakukan adalah mengatur view engine atau template yang terdiri dari dua bagian. Pertama, kita menetapkan folder tempat template akan disimpan (subfolder /views). Kemudian kita menetapkan nilai 'view engine' yang digunakan yaitu dalam hal ini "pug" (lihat gambar 4 pada nomor 2).
Baris 16 sampai 20 adalah untuk menambahkan pustaka middleware yang kita impor sebelumnya ke dalam rantai penanganan permintaan. Misalnya, express.json() dan express.urlencoded() diperlukan untuk mengisi req.body dengan kolom formulir.
Setelah pustaka-pustaka (library) tersebut, kita juga menggunakan middleware express.static pada baris 20, hal ini untuk membuat Express melayani semua file statis di direktori /public di root proyek.
Sekarang setelah semua middleware disiapkan, kita perlu menambahkan kode penanganan rute (yang sebelumnya diimpor pada baris 7 dan 8) ke dalam rantai penanganan permintaan. Kode yang diimpor ini akan menentukan rute tertentu untuk berbagai bagian situs.
Path "/" dan "/users" merupakan prefik dari rute file yang ditentukan. Misalnya jika pada file users terdapat definis untuk rute /profile, maka kita dapat mengaksesnya dengan mengetik : /users/profile.
Bagian berikutnya dari kode app.js adalah menambahkan error handler untuk menangani berbagai kesalahan yang mungkin muncul dan HTTP 404 respon.
Sekarang objek express app sudah terkonfigurasi, baris terakhir perintah adalah untuk memungkinkan modul ini diimpor oleh file /bin/www, yaitu dengan menggunakan perintah module.exports = app;.
Rute
Rute mendefinisikan callback yang akan dipanggil setiap kali permintaan HTTP GET dengan pola yang benar terdeteksi. Pola pencocokan adalah rute yang ditentukan saat modul diimpor ('/') dan ('/users') ditambah apa pun yang didefinisikan dalam file tersebut ('/'). Dengan kata lain, rute users.js ini akan digunakan ketika URL /users/ diterima.
Sekarang mari kita lihat bagian folder rute yang berisi 2 file yaitu index.js dan users.js. File index.js digunakan untuk membuka halaman utama atau root path atau home page.
Baris pertama mendeklarasikan variabel express sebagai objek kosntruktor untuk digunakan membuat objek pada variabel router dibaris kedua.
Pada baris ke 3, kita mendefinisikan rute untuk request terhadap root dengan mengirimkan hasil render file (1) index.pug dengan mengirim variabel (2) title berisi teks 'Express'. Baris ke 9 sebagaimana sudah dijelaskan pada pembahasan file app.js yaitu untuk memungkinkan modul ini di impor oleh modul lain dengan metode exports.
Jika kita perhatikan ada satu hal yang menarik bahwa fungsi callback pada rute memiliki argumen ketiga yaitu 'next', dan ini merupakan fungsi middleware dari callback sederhana. Meskipun kode pada contoh ini tidak menggunakan argumen <next>, argumen tersebut kelak akan berguna jika kita ingin menambahkan beberapa penangan rute ke jalur rute '/'.
View / Template
View (template) disimpan pada folder /views (sebagaimana didefinisikan dalam app.js) dan diberi ekstensi file .pug.
Metode Response.render() digunakan untuk merender template tertentu bersama dengan nilai variabel bernama yang diteruskan dalam suatu objek, dan kemudian mengirim hasilnya sebagai respons. Pada kode rute diatas, kita lihat ada variabel dengan nama 'title' berisi teks 'Express' dikirim ke View index.pug.
Sekarang mari kita lihat file index.pug pada folder view
