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.

  • ๐Ÿ”˜ Peran tumpukan MEAN: Express.js menyediakan lapisan backend di samping MongoDB, AngularJS dan Node.js.
  • โ˜‘๏ธ instalasi: Perintah `npm install express` mengambil framework dari Node Package Manager.
  • โœ… Rute: app.METHOD(PATH, HANDLER) memetakan setiap URL dan kata kerja HTTP ke satu handler.
  • ๐Ÿงช Template: app.set('view engine') ditambah res.render memasukkan data ke dalam file tampilan.
  • ๏ธ Bentuk modern: Express 5 menerima handler yang mengembalikan promise dan menyertakan express.json().
  • ๐Ÿ“Š Catatan versi: Jade berganti nama menjadi Pug, dan Node.js 24 adalah lini LTS aktif.

Tutorial framework Node.js Express.js

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.

Kode server Annotated Express Hello World yang mendengarkan pada port 3000

var express=require('express');
var app=express();
app.get('/',function(req,res)
{
res.send('Hello World!');
});
var server=app.listen(3000,function() {});

Code Penjelasan:

  1. Di baris kode pertama, kami menggunakan fungsi require untuk menyertakan โ€œmodul ekspresโ€.
  2. Sebelum kita mulai menggunakan modul express, kita perlu membuat objeknya.
  3. 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.
  4. 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.
  5. 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:

Browser menampilkan "Hello World" yang dikembalikan oleh server Express pada port 3000.

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:

  1. Rute /Node yang akan menampilkan string โ€œTutorial di Nodeโ€ jika rute ini diakses
  2. Rute /Angular yang akan menampilkan string โ€œTutorial tentang Angularโ€ jika rute ini diakses
  3. 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.

Kode routing Express yang diberi anotasi, mendefinisikan rute Node, Angular, dan rute default.

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:

  1. 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.
  2. Kami menggunakan fungsi kirim untuk mengirim string โ€œTutorial tentang Nodeโ€ kembali ke klien jika rute Node dipilih.
  3. 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.
  4. Kami menggunakan fungsi kirim untuk mengirim string โ€œTutorial tentang Angularโ€ kembali ke klien jika rute Angular dipilih.
  5. 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:

Browser menampilkan Selamat datang di Guru99 Tutorial di rute Express default

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.

Browser menampilkan Tutorial tentang Node yang dikembalikan oleh rute 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.

Browser yang menampilkan Tutorial tentang Angular yang dikembalikan oleh rute 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โ€.

Markup template index.jade dengan placeholder judul dan header

  1. Di sini kami menentukan bahwa judul halaman akan diubah ke nilai apa pun yang diteruskan saat templat ini dipanggil.
  2. 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.

Kode Express beranotasi yang mengatur mesin tampilan Jade dan indeks rendering.

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:

  1. 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.
  2. Fungsi render digunakan untuk merender halaman web. Dalam contoh kita, kita merender template (index.jade) yang telah dibuat sebelumnya.
  3. 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:

Browser menampilkan template Jade dengan judul Guru99 dan header Selamat datang

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.

Pertanyaan Umum Demo Slot

middleware Fungsi-fungsi tersebut menerima `req`, `res`, dan `next`, kemudian dijalankan sesuai urutan pendaftaran. Mereka menangani pencatatan log, penguraian isi respons, otentikasi, dan kesalahan, dan masing-masing harus mengakhiri respons atau memanggil `next()`.

Tidak. Express menggabungkan parser, jadi express.json() dan express.urlencoded() menggantikan parser yang terpisah. pengurai tubuh Ketergantungan. Fungsi pembantu bodyParser() gabungan telah dihapus, dan req.body tetap tidak terdefinisi sampai parser dijalankan.

Ekspresikan 5 Membuat handler peka terhadap promise, menghapus app.del() dan res.sendfile(), meningkatkan pencocokan jalur sehingga wildcard memerlukan nama seperti /*splat, dan mengatur urlencoded extended menjadi false secara default.

Pada Express 5, promise yang ditolak secara otomatis diteruskan ke middleware penanganan error, sehingga panggilan next(err) manual tidak diperlukan. Express 4 membutuhkan try/catch eksplisit di dalam setiap async. Telepon kembali.

PesekJade diganti namanya karena alasan merek dagang dan paket jade sudah usang. Template yang ada tetap berfungsi setelah diganti namanya menjadi .pug dan mengganti mesin tampilan.

Node.js 24 adalah lini LTS aktif selama tahun 2026 sementara Node.js 22 tetap dalam pemeliharaan, jadi install Salah satunya. Express 5 membutuhkan Node.js 18 atau yang lebih baru.

Pemindai pembelajaran mesin membaca definisi rute dan urutan middleware, kemudian menandai otentikasi yang hilang dan tidak tervalidasi. JavaNaskah Aturan input dan CORS yang permisif. Peninjau manusia tetap mengkonfirmasi setiap temuan.

Kopilot GitHub dan asisten berbasis agen serupa menghasilkan file rute, middleware validasi, dan stub controller dari satu perintah singkat. Setiap rute yang dihasilkan masih membutuhkan pengujian sebelum rilis.

Ringkaslah postingan ini dengan: