Skip to main content

1. Framework Express.html

3 Express.js features you need to know | by Louis Petrik | JavaScript ...[1] 

Gambar 1. Pengenalan Express.js.

Express.js adalah sebuah framework web app yang digunakan untuk membangun aplikasi web dengan menggunakan Node.js dan bahasa pemrograman JavaScript. Diciptakan oleh TJ Holowaychuk pada tahun 2010, framework ini bersifat open source, yang berarti dapat digunakan dan dimodifikasi oleh siapa saja secara bebas.

Express.js fokus pada pengembangan sisi server (back end) dari sebuah aplikasi web. Dengan menggunakan Express.js, kalian dapat mengatur berbagai fungsi penting dalam sebuah website, seperti pengelolaan route (routing) untuk mengarahkan permintaan HTTP ke tempat yang tepat, pengelolaan sesi (session) untuk mengelola informasi pengguna yang sedang terhubung, menangani kesalahan (error handling), dan melakukan pertukaran data di server.

Salah satu keunggulan Express.js adalah penggunaan arsitektur MVC (Model View Controller). Dalam arsitektur ini, data yang diterima dari pengguna diproses dan dikelola pada bagian Model, kemudian dihubungkan melalui Controller, dan akhirnya ditampilkan sebagai informasi melalui View. Hal ini membantu dalam memisahkan tugas-tugas yang berbeda sehingga membuat pengembangan aplikasi lebih terorganisir dan mudah dikelola. Dengan kesederhanaan dan fleksibilitasnya, Express.js telah menjadi pilihan populer bagi para pengembang web untuk membangun aplikasi yang andal dan efisien menggunakan Node.js.

Cara Kerja Express.js

  1. Routing

Routing pada Express.js adalah proses menentukan bagaimana aplikasi web kalian akan merespons permintaan yang masuk dari browser (client). Ketika browser mengirimkan permintaan HTTP, seperti GET, POST, PUT, atau DELETE, server Express.js perlu menentukan apa yang harus dilakukan dengan permintaan tersebut. Berikut adalah contoh routing pada halaman Hello World:

A picture containing text, screenshot, font

Description automatically generated

Gambar 2. Contoh routing pada express.js.

Pada program di gambar 2, kita menggunakan app.get, kode tersebut digunakan dalam Express.js untuk menentukan route yang akan menangani permintaan HTTP dengan metode GET pada path '/' (root path).

 

  1. Middleware

Middleware dalam Express.js menangani req (permintaan) dan res (respons) dalam aplikasi web kalian. Bertindak sebagai jembatan antara pengguna yang mengirim permintaan dan aplikasi web kalian yang memberikan respons.

 

Express.js memudahkan penggunaan middleware dengan metode useegg, yang memungkinkan kalian menambahkan middleware ke dalam aplikasi web dengan mudah. Metode ini akan menempatkan middleware dalam stack middleware Express.js, sehingga ketika aplikasi menerima permintaan, Express.js akan menjalankan setiap middleware secara berurutan. Dengan menggunakan metode ini, kalian dapat dengan cepat mengintegrasikan berbagai macam middleware, seperti autentikasi, penanganan kesalahan (error handling), validasi input, dan lainnya, ke dalam aplikasi web untuk menjalankan tugas yang dibutuhkan dalam pengembangan aplikasi web kalian. Berikut adalah contoh cara kerja middleware:

A screen shot of a computer program

Description automatically generated with low confidence

Gambar 3. Contoh middleware pada express.js.

 

Pada program di gambar 3, terdapat penggunaan Express.js untuk membuat aplikasi web. Pertama, kita mengimpor modul express dan membuat object aplikasi app. Selanjutnya, terdapat dua middleware yang digunakan.

Middleware pertama adalah logging, yang mencetak metode permintaan dan URL yang diterima ke console sebelum melanjutkan ke middleware berikutnya menggunakan nextegg. Middleware kedua adalah autentikasi, yang memeriksa keberadaan header otorisasi pada permintaan. Jika header tersebut ada, autentikasi dilakukan dan permintaan diteruskan ke middleware berikutnya. Jika tidak, maka respons dengan status 401 "Unauthorized" dikirimkan kembali ke client.

 

Selanjutnya, terdapat route utama yang menangani permintaan GET pada path '/'. Jika permintaan masuk pada route tersebut, response "Hello World!" dikirimkan kembali ke client. Terakhir, server dijalankan pada port 3000 dengan menggunakan metode listenegg, dan pesan "Server running on port 3000" dicetak ke console.

 

Dengan menggunakan kombinasi middleware logging dan autentikasi, serta route utama, aplikasi web ini dapat menerima permintaan, mencatat aktivitas dengan logging, melakukan autentikasi, dan memberikan respons yang sesuai kepada klien.

Menginstal Express.js

Karena di materi sebelumnya kita sudah menginstal Node.js. Maka kita dapat menggunakan NPM untuk menginstal Express.js. Berikut adalah langkah-langkah menginstal Express.js menggunakan NPM:

  1. Buatlah sebuah direktori untuk menampung aplikasi kalian, sebagai contoh kita bisa menggunakan terminal untuk membuatnya atau dapat dilihat pada gambar

 

A screenshot of a computer program

Description automatically generated with low confidence

Gambar 4. Membuat direktori baru.

  1. Gunakan perintah npm init untuk membuat file package.json untuk aplikasi kalian atau bisa lihat gambar 5.

A screenshot of a computer program

Description automatically generated with medium confidence

Gambar 5. Membuat file package.json.

Perintah diatas akan meminta beberapa informasi, seperti nama dan versi aplikasi kalian. Untuk itu, kalian dapat hanya menekan tombol RETURN untuk menerima nilai default untuk sebagian besar informasi tersebut, kecuali untuk pengecualian berikut:

A black background with white text

Description automatically generated with low confidence

Gambar 6. Pengecualian terhadap informasi saat membuat file package.json.

  1. Sekarang, instal Express di direktori myapp dan simpan di daftar dependensi atau bisa lihat gambar 7.

A screenshot of a computer program

Description automatically generated with medium confidence

Gambar 7. Menginstal express.js menggunakan npm.

Kalian juga bisa menginstall express sementara dan tidak menambahkannya ke daftar dependencies atau bisa lihat gambar 8.

A picture containing text, screenshot, font

Description automatically generated

Gambar 8. Menginstal express.js secara sementara.

Menginstal Express.js Generator

Kalian juga bisa menginstall Express.js Generator untuk mempercepat pembuatan struktur dasar aplikasi web dengan konfigurasi awal yang sudah disiapkan. Berikut adalah langkah-langkah untuk menginstal Express.js Generator:

  1. Kalian dapat menjalankan generator dengan perintah npx (tersedia di Node.js 8.2.0) pada direktori yang kosong atau bisa lihat gambar 9.

A screenshot of a computer program

Description automatically generated with medium confidence

Gambar 9. Menginstall express.js generator menggunakan npx.

Namun untuk versi Node.js sebelumnya, kalian dapat menginstall generator dalam bentuk paket global npm atau bisa lihat gambar 10.

A screenshot of a computer program

Description automatically generated with medium confidence

Gambar 10. Menginstal express.js generator menggunakan npm.

  1. Maka akan muncul struktur folder baru pada direktori yang sudah dibuat atau bisa lihat gambar 11.

A screenshot of a computer

Description automatically generated

Gambar 11. Struktur folder application web menggunakan express.js generator.

Quiz

1. Express.js adalah sebuah framework untuk membangun aplikasi web menggunakan ___________ dan bahasa pemrograman ___________.

a. PHP, Python

b. Java, JavaScript

c. Ruby, C++

d. Node.js, JavaScript

2. Siapa yang menciptakan Express.js?

a. TJ Holowaychuk

b. Ryan Dahl

c. Douglas Crockford

d. Brendan Eich

3. Express.js fokus pada pengembangan sisi ________ dari sebuah aplikasi web.

a. server (back end)

b. client (front end)

c. database

d. desain grafis

4. Apa keunggulan Express.js dalam penggunaan arsitektur MVC?

a. Memudahkan pengelolaan basis data

b. Mengurangi kompleksitas kode

c. Meningkatkan keamanan aplikasi

d. Mempercepat waktu pemuatan halaman

5. Apa fungsi utama dari routing pada Express.js?

a. Mengelola permintaan HTTP

b. Menampilkan pesan kesalahan

c. Membuat desain tampilan

d. Menerjemahkan kode JavaScript

6. Middleware dalam Express.js berperan sebagai jembatan antara __________ dan __________.

a. server, browser

b. pengguna, server

c. browser, pengguna

d. database, server

7. Bagaimana cara menambahkan middleware dalam Express.js menggunakan metode `use()`?

a. app.use()

b. add.use()

c. middleware.use()

d. express.use()

8. Apa tujuan dari middleware logging dalam Express.js?

a. Melakukan otentikasi pengguna

b. Mencatat aktivitas permintaan

c. Mengelola data sesi pengguna

d. Mengatasi kesalahan pada server

9. Pada Express.js, aplikasi web dapat merespons permintaan dengan metode HTTP seperti:

a. GET, POST, PUT, DELETE

b. READ, WRITE, UPDATE, DELETE

c. OPEN, CLOSE, SAVE, DELETE

d. START, STOP, PAUSE, RESUME

10. Bagaimana cara menginstal Express.js menggunakan NPM?

a. npm install express

b. npm add express

c. npm create express

d. npm generate express

Referensi

Middleware di Express js: Cara dan Manfaat Menggunakannya (alan.co.id)

Mengenal Express.js: Pengertian, Cara Kerja, Keunggulan, Tutorial (niagahoster.co.id)


Materi OK

Last modified: Monday, 7 August 2023, 10:10 AM