Dalam tutorial ini, kita akan mempelajari kerangka kerja Express. Kerangka kerja ini dibuat sedemikian rupa sehingga berfungsi sebagai kerangka kerja aplikasi web Node.js yang minimal dan fleksibel, menyediakan sekumpulan fitur yang kuat untuk membangun aplikasi web tunggal dan multi-halaman, dan hibrid.
Dalam tutorial ini, Anda akan belajar-
- Apa itu Express.js?
- Menginstal dan menggunakan Express
- Apakah Routes itu?
- Contoh server Web menggunakan express.js
Apa itu Express.js?
Express.js adalah framework 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 kumpulan perangkat lunak JavaScript gratis dan sumber terbuka untuk membangun situs web dinamis dan aplikasi web yang memiliki komponen berikut;
1) MongoDB - Database NoSQL standar
2) Express.js - Kerangka aplikasi web default
3) Angular.js - Kerangka MVC JavaScript yang digunakan untuk aplikasi web
4) Node.js - Kerangka kerja yang digunakan untuk sisi server dan aplikasi 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 install express
Perintah di atas meminta pengelola paket Node untuk mengunduh modul ekspres yang diperlukan dan menginstalnya sesuai kebutuhan.
Mari gunakan kerangka kerja Express yang baru dipasang dan buat aplikasi "Hello World" sederhana.
Aplikasi kita akan membuat modul server sederhana yang akan mendengarkan pada nomor port 3000. Dalam contoh kita, jika permintaan dibuat melalui browser pada nomor port ini, maka aplikasi server akan mengirimkan tanggapan '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 pertama kode kita, kita menggunakan fungsi yang dibutuhkan untuk memasukkan "modul ekspres."
- Sebelum kita dapat mulai menggunakan modul ekspres, kita perlu membuat objek darinya.
- Di sini kami membuat fungsi panggilan balik. Fungsi ini akan dipanggil setiap kali ada yang menjelajah ke root aplikasi web kita yaitu http: // localhost: 3000 . Fungsi callback akan digunakan untuk mengirim string 'Hello World' ke halaman web.
- Dalam fungsi callback, kami mengirimkan string "Hello World" 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 yang tersedia di sini.
Jika perintah berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser.
Keluaran:
Dari keluarannya,
- Anda dapat melihat dengan jelas bahwa kami jika menelusuri URL localhost di port 3000, Anda akan melihat string 'Hello World' ditampilkan di halaman.
- Karena dalam kode kami, kami telah menyebutkan secara khusus untuk server untuk mendengarkan pada port no 3000, kami dapat melihat output saat menjelajah ke URL ini.
Apakah Routes itu?
Perutean menentukan cara aplikasi menanggapi permintaan klien ke titik akhir tertentu.
Misalnya, klien dapat membuat permintaan GET, POST, PUT atau DELETE http untuk berbagai URL seperti yang ditunjukkan di bawah ini;
http://localhost:3000/Bookshttp://localhost:3000/Students
Dalam contoh di atas,
- Jika permintaan GET dibuat untuk URL pertama, maka tanggapan idealnya adalah daftar buku.
- Jika permintaan GET dibuat untuk URL kedua, maka tanggapan idealnya adalah daftar Siswa.
- Jadi berdasarkan URL yang diakses, fungsionalitas berbeda pada server web akan dipanggil, dan karenanya, tanggapan akan dikirim ke klien. Ini adalah konsep perutean.
Setiap rute dapat memiliki satu atau lebih fungsi penangan, yang dijalankan ketika rute cocok.
Sintaks umum untuk rute ditampilkan 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 di server.
4) HANDLER adalah fungsi yang dijalankan ketika rute cocok.
Mari kita lihat contoh bagaimana kita bisa mengimplementasikan rute di ekspres. Contoh kami akan membuat 3 rute sebagai
- Rute A / Node yang akan menampilkan string "Tutorial on Node" jika rute ini diakses
- Rute A / Angular yang akan menampilkan string "Tutorial on Angular" jika rute ini diakses
- Rute default / yang akan menampilkan string "Selamat Datang di Tutorial Guru99."
Kode dasar kami 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 kami mendefinisikan rute jika URL http: // localhost: 3000 / Node dipilih di browser. Untuk rute, kami melampirkan fungsi panggilan balik yang akan dipanggil saat kami menelusuri ke URL Node.
Fungsi ini memiliki 2 parameter.
- Parameter utama yang akan kita gunakan adalah parameter 'res', yang dapat digunakan untuk mengirim 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 sedang dikirim.
- Kami menggunakan fungsi send untuk mengirim string "Tutorial on Node" kembali ke klien jika rute Node dipilih.
- Di sini kami mendefinisikan rute jika URL http: // localhost: 3000 / Angular dipilih di browser. Untuk rute, kami melampirkan fungsi panggilan balik yang akan dipanggil saat kami menelusuri URL Angular.
- Kami menggunakan fungsi send untuk mengirim string "Tutorial on Angular" kembali ke klien jika rute Angular dipilih.
- Ini adalah rute default yang dipilih ketika seseorang menjelajahi 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 browser.
Keluaran:
Dari keluarannya,
- Anda dapat melihat dengan jelas bahwa kami jika menelusuri URL localhost di 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 kami di atas, kami telah melihat bagaimana kami dapat memutuskan output apa yang akan ditampilkan berdasarkan perutean. Perutean semacam ini adalah yang digunakan di sebagian besar aplikasi web modern. Bagian lain dari server web adalah tentang menggunakan templat di Node js.
Saat membuat aplikasi Node on-the-fly cepat, cara yang mudah dan cepat adalah dengan menggunakan template untuk aplikasi tersebut. Ada banyak kerangka kerja yang tersedia di pasar untuk membuat templat. Dalam kasus kami, kami akan mengambil contoh kerangka giok untuk templating.
Jade diinstal melalui manajer Paket Node. Ini dapat dilakukan dengan menjalankan baris berikut di baris perintah
npm instal giok
Perintah di atas meminta pengelola paket Node untuk mengunduh modul giok yang diperlukan dan menginstalnya sesuai kebutuhan.
CATATAN: Di versi terbaru Node jade sudah tidak digunakan lagi. Sebagai gantinya, gunakan pug.
Mari gunakan kerangka giok yang baru dipasang 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 menetapkan bahwa judul halaman akan diubah menjadi nilai apa pun yang dilewatkan saat templat ini dipanggil.
- Kami juga menetapkan bahwa teks di tag header akan diganti menjadi apa pun yang diteruskan di template 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 membuat template. Karena kami akan menggunakan giok untuk membuat templat kami, kami menetapkan ini sesuai.
- Fungsi render digunakan untuk membuat halaman web. Dalam contoh kami, kami merender template (index.jade) yang telah dibuat sebelumnya.
- Kami meneruskan nilai "Guru99" dan "Selamat Datang" ke parameter "judul" dan "pesan" masing-masing. Nilai-nilai ini akan diganti dengan parameter 'title', dan 'message' yang dideklarasikan dalam template index.jade.
Jika perintah berhasil dijalankan, Output berikut akan ditampilkan saat Anda menjalankan kode di browser.
Keluaran:
Dari keluarannya,
- Kita dapat melihat bahwa judul halaman disetel ke "Guru99" dan header halaman disetel ke "Selamat Datang."
- Ini karena template giok yang dipanggil dalam 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 kerja node.js dan membantu dalam pengembangan pelacakan cepat aplikasi berbasis server.
- Rute digunakan untuk mengalihkan pengguna ke berbagai bagian aplikasi web berdasarkan permintaan yang dibuat. Tanggapan untuk setiap rute dapat bervariasi tergantung pada apa yang perlu ditampilkan kepada pengguna.
- Template dapat digunakan untuk memasukkan konten dengan cara yang efisien. Jade adalah salah satu mesin template paling populer yang digunakan dalam aplikasi Node.js.