Tutorial Node.js Express FrameWork – Belajar dalam 10 Menit
James Hartman
Dalam tutorial ini, kita akan mempelajari kerangka Express. Kerangka kerja ini dibangun sedemikian rupa sehingga berfungsi sebagai kerangka aplikasi web Node.js yang minimal dan fleksibel, menyediakan serangkaian fitur yang kuat untuk membangun aplikasi web tunggal dan multihalaman, serta hibrid.
Apa itu Express.js?
Express.js adalah kerangka server aplikasi web Node js, yang dirancang khusus untuk membangun aplikasi web satu halaman, multi-halaman, dan hybrid.
Ini telah menjadi kerangka server standar untuk node.js. Express adalah bagian backend dari sesuatu yang dikenal sebagai tumpukan MEAN.
MEAN adalah sumber terbuka dan gratis JavaNaskah tumpukan perangkat lunak untuk membangun situs web dinamis dan aplikasi web yang memiliki komponen-komponen berikut;
1) MongoDB – Basis data NoSQL standar
2) Ekspres.js – Kerangka aplikasi web default
3) Angular.js - The JavaKerangka kerja MVC skrip yang digunakan untuk aplikasi web
4) Node.js – Kerangka yang digunakan untuk aplikasi sisi server dan jaringan yang skalabel.
Kerangka kerja Express.js membuatnya sangat mudah untuk mengembangkan aplikasi yang dapat digunakan untuk menangani berbagai jenis permintaan seperti permintaan GET, PUT, dan POST dan DELETE.
Menginstal dan menggunakan Express
Express diinstal melalui Node Package Manager. Ini dapat dilakukan dengan menjalankan baris berikut di baris perintah
npm instal ekspres
Perintah di atas meminta manajer paket Node untuk mengunduh modul ekspres yang diperlukan dan menginstalnya.
Mari gunakan kerangka Express yang baru kita instal dan buat aplikasi sederhana “Hello World”.
Aplikasi kita akan membuat modul server sederhana yang akan mendengarkan pada port nomor 3000. Dalam contoh kita, jika permintaan dibuat melalui browser pada nomor port ini, maka aplikasi server akan mengirimkan respons 'Halo' Dunia' ke klien .
var express=require('express');
var app=express();
app.get('/',function(req,res)
{
res.send('Hello World!');
});
var server=app.listen(3000,function() {});
Penjelasan Kode:
- Di baris kode pertama, kami menggunakan fungsi require untuk menyertakan “modul ekspres”.
- Sebelum kita mulai menggunakan modul express, kita perlu membuat objeknya.
- Di sini kita membuat fungsi panggilan balik. Fungsi ini akan dipanggil setiap kali ada orang yang menelusuri root aplikasi web kita http://localhost:3000 . Fungsi panggilan balik akan digunakan untuk mengirimkan string 'Halo Dunia' ke halaman web.
- Dalam fungsi panggilan balik, kami mengirimkan string “Halo Dunia” kembali ke klien. Parameter 'res' digunakan untuk mengirim konten kembali ke halaman web. Parameter 'res' ini adalah sesuatu yang disediakan oleh modul 'request' untuk memungkinkan seseorang mengirim konten kembali ke halaman web.
- Kami kemudian menggunakan fungsi mendengarkan untuk membuat aplikasi server kami mendengarkan permintaan klien pada port no 3000. Anda dapat menentukan port apa pun yang tersedia di sini.
Jika perintah berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di peramban.
Keluaran:
Dari keluarannya,
- Anda dapat melihat dengan jelas bahwa jika menelusuri URL localhost pada port 3000, Anda akan melihat string 'Halo Dunia' ditampilkan di halaman.
- Karena dalam kode kami, kami telah menyebutkan secara khusus agar server mendengarkan pada port no 3000, kami dapat melihat hasilnya saat menjelajah ke URL ini.
Apa itu Rute?
Perutean menentukan cara aplikasi merespons permintaan klien ke titik akhir tertentu.
Misalnya, klien dapat membuat permintaan http GET, POST, PUT atau DELETE untuk berbagai URL seperti yang ditunjukkan di bawah ini;
http://localhost:3000/Books http://localhost:3000/Students
Dalam contoh di atas,
- Jika permintaan GET dibuat untuk URL pertama, idealnya responsnya berupa daftar buku.
- Jika permintaan GET dibuat untuk URL kedua, maka responsnya idealnya berupa daftar Siswa.
- Jadi berdasarkan URL yang diakses, fungsi berbeda di server web akan dipanggil, dan karenanya, respons akan dikirim ke klien. Ini adalah konsep perutean.
Setiap rute dapat memiliki satu atau lebih fungsi pengendali, yang dijalankan ketika rute tersebut cocok.
Sintaks umum untuk suatu rute ditunjukkan di bawah ini
app.METHOD(PATH, HANDLER)
Di mana,
1) aplikasi adalah turunan dari modul ekspres
2) METODE adalah metode permintaan HTTP (GET, POST, PUT atau DELETE)
3) PATH adalah jalur pada server.
4) HANDLER adalah fungsi yang dijalankan ketika rute cocok.
Mari kita lihat contoh bagaimana kita bisa mengimplementasikan rute di ekspres. Contoh kita akan membuat 3 rute sebagai
- Rute /Node yang akan menampilkan string “Tutorial di Node” jika rute ini diakses
- Rute /Angular yang akan menampilkan string “Tutorial tentang Angular” jika rute ini diakses
- Rute default / yang akan menampilkan string “Selamat Datang di Tutorial Guru99.”
Kode dasar kita akan tetap sama seperti contoh sebelumnya. Cuplikan di bawah ini adalah add-on untuk menunjukkan bagaimana perutean diterapkan.
var express = require('express');
var app = express();
app.route('/Node').get(function(req,res)
{
res.send("Tutorial on Node");
});
app.route('/Angular').get(function(req,res)
{
res.send("Tutorial on Angular");
});
app.get('/',function(req,res){
res.send('Welcome to Guru99 Tutorials');
}));
Penjelasan Kode:
- Di sini kita mendefinisikan rute jika URL http://localhost:3000/Node dipilih di browser. Pada rute tersebut, kita melampirkan fungsi panggilan balik yang akan dipanggil saat kita menelusuri URL Node. Fungsi tersebut memiliki 2 parameter.
- Parameter utama yang akan kita gunakan adalah parameter 'res', yang dapat digunakan untuk mengirimkan informasi kembali ke klien.
- Parameter 'req' memiliki informasi tentang permintaan yang dibuat. Terkadang parameter tambahan dapat dikirim sebagai bagian dari permintaan yang dibuat, dan karenanya parameter 'req' dapat digunakan untuk menemukan parameter tambahan yang dikirim.
- Kami menggunakan fungsi kirim untuk mengirim string “Tutorial tentang Node” kembali ke klien jika rute Node dipilih.
- Di sini kita mendefinisikan rute jika URL http://localhost:3000/Angular dipilih di browser. Pada rute tersebut, kami melampirkan fungsi panggilan balik yang akan dipanggil saat kami menelusuri URL Angular.
- Kami menggunakan fungsi kirim untuk mengirim string “Tutorial tentang Angular” kembali ke klien jika rute Angular dipilih.
- Ini adalah rute default yang dipilih ketika seseorang menelusuri rute aplikasi – http://localhost:3000. Ketika rute default dipilih, pesan “Selamat datang di Tutorial Guru99” akan dikirim ke klien.
Jika perintah berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di peramban.
Keluaran:
Dari keluarannya,
- Anda dapat melihat dengan jelas bahwa jika menelusuri URL localhost pada port 3000, Anda akan melihat string 'Selamat Datang di Tutorial Guru99' ditampilkan di halaman.
- Karena dalam kode kami, kami telah menyebutkan bahwa URL default kami akan menampilkan pesan ini.
Dari keluarannya,
- Anda dapat melihat bahwa jika URL telah diubah menjadi /Node, masing-masing rute Node akan dipilih dan string “Tutorial On Node' ditampilkan.
Dari keluarannya,
- Anda dapat melihat bahwa jika URL telah diubah menjadi /Angular, masing-masing rute Node akan dipilih dan string “Tutorial On Angular” ditampilkan.
Contoh server Web menggunakan express.js
Dari contoh di atas, kita telah melihat bagaimana kita dapat memutuskan keluaran apa yang akan ditampilkan berdasarkan perutean. Perutean semacam inilah yang digunakan di sebagian besar aplikasi web modern. Bagian lain dari server web adalah tentang penggunaan template di Node js.
Saat membuat aplikasi Node dengan cepat dan cepat, cara yang mudah dan cepat adalah dengan menggunakan template untuk aplikasi tersebut. Ada banyak kerangka kerja yang tersedia di pasar untuk membuat template. Dalam kasus kami, kami akan mengambil contoh kerangka giok untuk templating.
Jade diinstal melalui Node Package Manager. Ini dapat dilakukan dengan menjalankan baris berikut di command line
npm instal giok
Perintah di atas meminta manajer paket Node untuk mengunduh modul giok yang diperlukan dan menginstalnya.
CATATAN: Dalam versi terbaru Node, giok sudah tidak digunakan lagi. Sebagai gantinya, gunakan pug.
Mari gunakan kerangka giok yang baru kita pasang dan buat beberapa templat dasar.
Langkah 1) Langkah pertama adalah membuat template giok. Buat file bernama index.jade dan masukkan kode di bawah ini. Pastikan untuk membuat file di folder “views”.
- Di sini kami menentukan bahwa judul halaman akan diubah ke nilai apa pun yang diteruskan saat templat ini dipanggil.
- Kami juga menetapkan bahwa teks dalam tag header akan diganti dengan apa pun yang diteruskan dalam templat giok.
var express=require('express');
var app=express();
app.set('view engine','jade');
app.get('/',function(req,res)
{
res.render('index',
{title:'Guru99',message:'Welcome'})
});
var server=app.listen(3000,function() {});
Penjelasan Kode:
- Hal pertama yang harus ditentukan dalam aplikasi adalah “mesin tampilan” yang akan digunakan untuk merender template. Karena kita akan menggunakan giok untuk merender template kita, kita menentukannya sesuai dengan itu.
- Fungsi render digunakan untuk merender halaman web. Dalam contoh kita, kita merender template (index.jade) yang telah dibuat sebelumnya.
- Kami meneruskan nilai “Guru99” dan “Selamat Datang” ke parameter “judul” dan “pesan”. Nilai-nilai ini akan digantikan oleh parameter 'judul' dan 'pesan' yang dideklarasikan dalam template index.jade.
Jika perintah berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di peramban.
Keluaran:
Dari keluarannya,
- Kita dapat melihat bahwa judul halaman disetel ke “Guru99” dan header halaman disetel ke “Selamat Datang.”
- Ini karena templat giok yang dipanggil di aplikasi node js kita.
Ringkasan
- Kerangka kerja ekspres adalah kerangka kerja yang paling umum digunakan untuk mengembangkan aplikasi Node js. Kerangka kerja ekspres dibangun di atas kerangka node.js dan membantu pelacakan cepat pengembangan aplikasi berbasis server.
- Rute digunakan untuk mengalihkan pengguna ke berbagai bagian aplikasi web berdasarkan permintaan yang dibuat. Respon setiap rute bisa berbeda-beda tergantung apa yang perlu ditampilkan kepada pengguna.
- Templat dapat digunakan untuk memasukkan konten dengan cara yang efisien. Jade adalah salah satu mesin template paling populer yang digunakan dalam aplikasi Node.js.