Setelah sebelumnya saya telah memposting tentang Mengenal Node.js dan dimana pada postingan tersebut kita telah mencoba untuk membuat Command Line Interface sederhana, maka pada postingan kali ini kita akan mencoba Membuat Web Server di Node.js Menggunakan Express.js.
Jika sebelumnya Anda telah membaca postingan terdahulu saya tentang Membuat SlidingUpPanel Dengan HTML, CSS Dan Javascript yang terdiri dari 4 bagian dimana saya menggunakan Node.js dan Express.js dalam proses pembuatannya, namun disana saya kurang menjelaskan tentang Node.js dan Express.js jadi mungkin Anda kurang paham tentang Node.js dan Express.js sehingga saya membuat postingan baru yang lebih berfokus pada masing-masing alat yang digunakan pada postingan tersebut.
Apa Itu Express.js ?
Express.js, atau biasanya hanya disebut Express, adalah framework aplikasi web untuk Node.js, dirilis sebagai perangkat lunak bebas dan open-source di bawah lisensi MIT. Framework ini dirancang untuk membangun aplikasi web dan API (Application Programming Interface). Framework ini adalah kerangka server standar de facto untuk Node.js. Penulis asli, TJ Holowaychuk, menggambarkannya sebagai framework yang terinspirasi dari Sinatra Server, yang berarti bahwa framework ini relatif minim dengan banyak fitur yang tersedia sebagai plugin. Express adalah bagian backend dari MEAN stack, bersama-sama dengan MongoDB database dan AngularJS frontend framework.Sebelum memulai pastikan Anda telah menginstall Node.js, jika Anda tidak ingin direpotkan dengan penginstallan atau jika Anda hanya ingin mencobanya tanpa perlu menginstall apapun Anda dapat menggunakan online IDE seperti Gomix yang sekarang sudah berganti nama menjadi Glitch.
Pada postingan kali ini saya menggunakan Glitch dikarenakan Laptop yang sedang rusak jadi saya menggunakan Tablet untuk menulis postingan kali ini :D. Silahkan registrasi di Glitch kemudian masuk ke akun Anda, nantinya Anda akan disambut dengan sample aplikasi Gomix seperti screenshoot berikut.
Ubah nama project Anda seperti gambar diatas dengan mengklik arah panah yang ada pada nama project di bagian pojok kiri atas.
Sekarang kita akan menginstall express framework, Buka file package.json pada bagian kiri di group back-end kemudian klik tombol "add Package" yang berada di pojok kiri atas editor dan ketikkan express pada textbox kemudin klik express.
Saat menulis postingan ini versi terbaru dari express adalah versi 4.15.2.
Node.js menggunakan CommonJS untuk dapat mendefinisikan sebuah module javascript sehingga Anda dapat menggunakan require untuk memanggil module lain di file javascript Anda. Perlu diingat bahwa CommonJS bukanlah AMD (Asynchronous Module Definition), CommonJS biasanya digunakan untuk sisi server dan aplikasi desktop sedangkan AMD biasanya digunakan di browser. Untuk lebih lengkapnya Anda dapat membaca beberapa referensi yang saya lampirkan pada bagian akhir postingan ini.
Berikut ini adalah isi dari file server.js
// menginisialisasikan express framework
var express = require('express');
var app = express();
// menggunakan folder public sebagai folder statis
// http://expressjs.com/en/starter/static-files.html
app.use(express.static('public'));
// megirimkan response file index.html ke sisi klien saat server diakses hanya menggunakan hostname
// http://expressjs.com/en/starter/basic-routing.html
app.get("/", function (request, response) {
response.sendFile(__dirname + '/views/index.html');
});
// mengirimkan API response array dari variable dreams saat user mengakses url http://yourweb.com/dreams
app.get("/dreams", function (request, response) {
response.send(dreams);
});
// menambahkan data baru ke dalam array dreams saat ada data yang dikirim dari klien menggunakan metode POST
// could also use the POST body instead of query string: http://expressjs.com/en/api.html#req.body
app.post("/dreams", function (request, response) {
dreams.push(request.query.dream);
response.sendStatus(200);
});
// Simple in-memory store for now
var dreams = [
"Find and count some sheep",
"Climb a really tall mountain",
"Wash the dishes"
];
// memulai web server dan mendengarkan request dari sisi klien
// listen for requests :)
var listener = app.listen(process.env.PORT, function () {
console.log('Your app is listening on port ' + listener.address().port);
});
Saya akan menjelaskan sedikit beberapa baris dari coding diatas yang saya anggap penting.
app.use(express.static('public')); - ini digunakan untuk memberitahukan express bahwa semua file yang ada pada folder public merupakan file statis, biasanya file statis ini dapat berupa file-file library seperti misalnya jQuery, gambar, audio, video dan lain sebagainya. untuk mengakses file pada folder statis Anda tidak perlu memberikan nama folder statis tersebut, misal Anda telah mendefinisikan folder public sebagai folder statis dan di dalam folder terdapat gambar dengan nama gambar.jpg, maka Anda perlu menuliskan nama gambar yaitu gambar.jpg jika anda ingin menampilkan gambar tersebut. Jika gambar berada di dalam subfolder maka Anda perlu menuliskan nama subfolder tersebut tanpa folder public untuk menampilkannya.app.get("/", function (request, response) { ... }); - app.get ini dapat digunakan untuk routing atau API yang menggunakan metode GET. Ketika sisi klien mengakses domain tanpa path seperti contoh tersebut maka fungsi pada parameter kedua akan dipanggil dan dieksekusi, parameter request merupakan data yang diterima berdasarkan permintaan dari sisi klien sedangkan response adalah variable yang dapat digunakan untuk mengirimkan response ke sisi klien.
app.post("/dreams", function (request, response) { ... }); - app.post ini lebih sering digunakan untuk API, fungsinya hampir sama dengan get yang membedakan hanyalah metode yang digunakan. Pada contoh tersebut path di atur ke dreams sehingga jika Anda mengakses domain dengan path dreams dan menggunakan metode POST maka fungsi pada parameter kedua akan dieksekusi misal http://localhost/dreams. metode POST ini biasanya dapat dilakukan menggunakan form atau XMLHttpRequest.
app.listen(process.env.PORT, function () { ... }); - app.listen digunakan untuk memulai web server dan mulai mendengarkan request/permintaan dari sisi klien. parameter pertama merupakan port yang akan digunakan untuk server, proccess.env.PORT merupakan environment variable PORT yang ada pada komputer atau laptop Anda, di Glitch biasanya variable ini telah diatur secara otomatis dan biasanya port tersebut adalah port 80. Pada parameter kedua merupakan fungsi yang akan dipanggil dan dieksekusi saat server telah berjalan.response.sendFile() & response.send() - response.sendFile digunakan untuk mengirimkan response dalam bentuk file, pada contoh diatas file yang dikirim adalah file index.html sedangkan response.send digunakan untuk mengirimkan response berupa String, Number, Array, JSON dan lain sebagainya.Sampai disini mungkin Anda mulai sedikit memahami bagaimana cara menggunakan express framework untuk membuat sebuah web server di Node.js. Untuk mencoba project tersebut secara live Anda dapat mengklik tombol Show yang ada disamping kanan nama project Anda.
Mungkin itu saja yang dapat saya sampaikan pada postingan kali ini tentang bagaimana cara Membuat Web Server Di Node.js menggunakan Epress.js. Semoga bermanfaat...!!
Referensi :
Komentar
Posting Komentar