Tutorial Node.js Express.js Framework
โก Ringkasan Cerdas
Express.js adalah kerangka kerja aplikasi web Node.js minimal yang menambahkan perutean, middleware, dan rendering template ke modul HTTP inti, sehingga aplikasi satu halaman, multi-halaman, dan hibrida dapat mencapai server yang berfungsi hanya dengan beberapa baris kode.
Dalam tutorial ini, kita akan mempelajari framework Express. Framework ini dibangun sedemikian rupa sehingga bertindak sebagai framework aplikasi web Node.js yang minimal dan fleksibel, menyediakan serangkaian fitur yang kuat untuk membangun aplikasi web satu halaman, multi-halaman, dan hibrida.
Apa itu Express.js?
Express.js adalah kerangka kerja server aplikasi web Node.js, yang dirancang khusus untuk membangun aplikasi web satu halaman, multi-halaman, dan hibrida.
Express telah menjadi kerangka kerja server standar untuk Node.js. Express adalah bagian backend dari sesuatu yang dikenal sebagai tumpukan MEAN.
Express menambahkan lapisan routing dan middleware di atas inti HTTP Node.js, stream dan API peristiwa.
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 kerja aplikasi web default
3) AngularJS - The JavaKerangka kerja MVC skrip yang digunakan untuk aplikasi web
4) Node.js โ Kerangka kerja yang digunakan untuk aplikasi sisi server dan jaringan yang dapat diskalakan.
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 Node Package Manager untuk mengunduh express yang dibutuhkan. modul dan memasangnya sesuai petunjuk.
Catatan versi: npm sekarang menginstal Express 5.2; banyak proyek masih menggunakan Express 4. Keduanya menjalankan contoh di bawah ini pada sebuah rilis Node.js yang didukung.
Mari gunakan kerangka Express yang baru kita instal dan buat aplikasi sederhana โHello Worldโ.
Aplikasi kami akan membuat sesuatu yang sederhana. modul server yang akan mendengarkan pada nomor port 3000. Dalam contoh kita, jika permintaan dibuat melalui browser pada nomor port ini, maka aplikasi server akan mengirimkan respons 'Hello World' ke klien.
var express=require('express'); var app=express(); app.get('/',function(req,res) { res.send('Hello World!'); }); var server=app.listen(3000,function() {});
Code Penjelasan:
- 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 callback. Fungsi ini akan dipanggil setiap kali seseorang mengakses direktori utama aplikasi web kita, yaitu http://localhost:3000. Fungsi callback akan digunakan untuk mengirimkan string 'Hello World' 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.
- Selanjutnya, kita menggunakan fungsi listen untuk membuat aplikasi server kita mendengarkan permintaan klien pada port 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 Anda menelusuri ke URL Jika Anda mengakses localhost di port 3000, Anda akan melihat string 'Hello World' ditampilkan di halaman tersebut.
- Karena dalam kode kita telah secara spesifik menyebutkan agar server mendengarkan pada port nomor 3000, kita dapat melihat output saat mengaksesnya. URL.
Apa itu Rute?
Satu jalur akar tunggal hanyalah titik awal.
Routing menentukan cara aplikasi merespons permintaan klien ke titik akhir tertentu.
Sebagai contoh, klien dapat membuat permintaan HTTP GET, POST, PUT, atau DELETE untuk berbagai keperluan. URL seperti yang ditunjukkan di bawah ini;
http://localhost:3000/Books http://localhost:3000/Students
Dalam contoh di atas,
- Jika permintaan GET dibuat untuk yang pertama URLMaka, idealnya respons yang diberikan adalah berupa daftar buku.
- Jika permintaan GET dibuat untuk yang kedua URLMaka, idealnya respons yang diberikan adalah daftar siswa.
- Jadi berdasarkan URL Saat suatu halaman diakses, fungsi berbeda pada server web akan dipanggil, dan sesuai dengan itu, respons akan dikirim ke klien. Inilah konsep routing.
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.
| Memanggil | Meminta | Tujuan |
|---|---|---|
| aplikasi.get(PATH, HANDLER) | DAPATKAN | Baca |
| app.post(PATH, HANDLER) | POST | membuat |
| aplikasi.put(PATH, HANDLER) | PUT | menggantikan |
| aplikasi.hapus(PATH, HANDLER) | DELETE | Hapus |
| app.route(PATH) | Dirantai | Pengelola grup |
| aplikasi.gunakan(HANDLER) | Apa saja | Pasang middleware |
โ ๏ธ Ekspresikan 5 catatan: Tanda tangan ini tidak berubah, tetapi app.del() menjadi app.delete(), res.sendfile() menjadi res.sendFile(), dan wildcard sekarang memerlukan nama seperti /*splat.
Mari kita lihat contoh bagaimana kita dapat mengimplementasikan rute di Express. Contoh kita akan membuat 3 rute sebagai berikut:
- 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 Guru99 Tutorial.โ
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'); });
Code Penjelasan:
- Di sini kita mendefinisikan sebuah rute jika URL http://localhost:3000/Node is selected in the browser. To the route, we are attaching a callback function which will be called when we browse to the Node URLFungsi 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 sebuah rute jika URL http://localhost:3000/Angular is selected in the browser. To the route, we are attaching a callback function which will be called when we browse to the Angular URL.
- Kami menggunakan fungsi kirim untuk mengirim string โTutorial tentang Angularโ kembali ke klien jika rute Angular dipilih.
- Ini adalah rute default yang dipilih saat seseorang mengakses direktori utama aplikasi โ http://localhost:3000. Saat rute default dipilih, pesan โSelamat datang di Guru"99 Tutorial" akan dikirimkan kepada 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 Anda menelusuri ke URL Jika Anda mengakses localhost di port 3000, Anda akan melihat string 'Selamat datang di GuruTerdapat 99 tutorial yang ditampilkan di halaman tersebut.
- Karena dalam kode kita, kita telah menyebutkan bahwa default kita URL akan menampilkan pesan ini.
Selanjutnya, buka /Node.
Dari keluarannya,
- Anda bisa melihat bahwa jika URL telah diubah menjadi /Node, rute Node yang bersangkutan akan dipilih dan string โTutorial tentang Nodeโ akan ditampilkan.
Kemudian, kunjungi /Angular.
Dari keluarannya,
- Anda bisa melihat bahwa jika URL Jika telah diubah menjadi /Angular, rute Node yang sesuai akan dipilih dan teks "Tutorial tentang Angular" akan ditampilkan.
Contoh server Web menggunakan express.js
Dari contoh di atas, kita telah melihat bagaimana kita dapat memutuskan output apa yang akan ditampilkan berdasarkan routing. Routing semacam ini digunakan di sebagian besar aplikasi web modern. Bagian lain dari server web adalah tentang penggunaan template di Node.js.
Saat membuat aplikasi Node.js secara cepat dan instan, cara mudah dan cepat adalah dengan menggunakan template untuk aplikasi tersebut. Ada banyak framework yang tersedia di pasaran untuk membuat template. Dalam kasus ini, kita akan mengambil contoh framework Jade untuk pembuatan template.
Jade diinstal melalui Node Package Manager. Ini dapat dilakukan dengan menjalankan baris berikut di command line.
npm instal giok
Perintah di atas meminta Node Package Manager untuk mengunduh modul Jade yang dibutuhkan dan menginstalnya sesuai kebutuhan.
CATATAN: Dalam versi terbaru Node, giok sudah tidak digunakan lagi. Sebagai gantinya, gunakan pug.
โ ๏ธ Padanan modern: install Pesek, ganti nama index.jade menjadi index.pug dan atur app.set('view engine','pug'). Paket jade tidak menerima pembaruan; langkah-langkah di bawah ini masih berjalan.
Mari kita gunakan framework Jade yang baru saja kita instal dan buat beberapa template dasar.
Langkah 1) Langkah pertama adalah membuat template Jade. 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 di dalam tag header akan diganti dengan apa pun yang diteruskan dalam template Jade.
Berikut adalah kode aplikasi yang merendernya.
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() {});
Code Penjelasan:
- Hal pertama yang perlu ditentukan dalam aplikasi adalah "view engine" yang akan digunakan untuk merender template. Karena kita akan menggunakan Jade untuk merender template kita, kita menentukannya sesuai kebutuhan.
- Fungsi render digunakan untuk merender halaman web. Dalam contoh kita, kita merender template (index.jade) yang telah dibuat sebelumnya.
- Kami menyampaikan nilai-nilai โGuruUbah nilai "99" dan "Selamat Datang" menjadi parameter "judul" dan "pesan" secara berturut-turut. 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 diatur menjadi โGuru99โ dan header halaman diatur menjadi โSelamat Datang.โ
- Hal ini disebabkan oleh template Jade yang dipanggil dalam aplikasi Node.js kita.









