Node.js - Framework Express

Hai, para pemrogram yang sedang belajar! Hari ini, kita akan memulai perjalanan menarik ke dunia Node.js dan framework Express. Sebagai guru ilmu komputer yang ramah di lingkungan sekitar Anda, saya sangat senang untuk mengantar Anda dalam petualangan ini. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya - kita akan mulai dari awal dan belajar bersama-sama.

Apa Itu Express?

Sebelum kita masuk ke detil, mari berbicara tentang apa sebenarnya Express. Bayangkan Anda sedang membangun sebuah rumah. Anda bisa mulai dari awal, membuat sendiri batu dan memotong kayu Anda sendiri. Atau, Anda bisa menggunakan bahan siap pakai yang membuat pekerjaan Anda mudah dan cepat. Express seperti bahan siap pakai itu, tapi untuk aplikasi web. Itu adalah framework yang menyediakan set robust fitur untuk aplikasi web dan mobile, membuatnya mudah dan cepat untuk membuat aplikasi web dengan Node.js.

Instalasi Express

Mari kita mulai dengan menginstal Express. Pertama, pastikan Anda sudah menginstal Node.js di komputer Anda. Jika belum, kunjungi situs web resmi Node.js dan unduhnya.

Setelah Node.js terinstal, buka terminal (atau command prompt jika Anda di Windows) dan ketik perintah berikut:

npm install express

Perintah ini menggunakan npm (Node Package Manager) untuk menginstal Express. Bayangkan npm seperti sebuah kotak peralatan magis yang berisi berbagai peralatan (disebut paket) yang berguna yang bisa kita gunakan di proyek Node.js kami.

Contoh Hello World

Sekarang kita sudah menginstal Express, mari buat aplikasi Express pertama kita. Kita akan mulai dengan contoh klasik "Hello, World!".

Buat sebuah file baru bernama app.js dan ketik kode berikut:

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
res.send('Hello, World!');
});

app.listen(port, () => {
console.log(`Aplikasi contoh mendengarkan di http://localhost:${port}`);
});

mariuraikan ini:

1. Kita mengimpor modul Express dan membuat aplikasi Express.
2. Kita tentukan nomor port (3000 dalam kasus ini).
3. Kita mengatur rute untuk URL utama ('/') yang mengirimkan "Hello, World!" sebagai tanggapan.
4. Kita memerintahkan aplikasi kita untuk mendengarkan di port yang ditentukan.

Untuk menjalankan aplikasi ini, pergi ke terminal Anda, navigasikan ke direktori yang mengandung app.js, dan jalankan:

node app.js

Sekarang, buka browser Anda dan pergi ke http://localhost:3000. Anda seharusnya melihat "Hello, World!" ditampilkan di halaman. Selamat! Anda baru saja membuat aplikasi Express pertama Anda!

Objek Aplikasi

Dalam contoh sebelumnya, kita membuat objek aplikasi Express:

const app = express();

Objek app ini adalah pusat bagaimana kita menggunakan Express. Itu memiliki metode untuk routing permintaan HTTP, mengonfigurasi middleware, merender pandangan HTML, mendaftarkan mesin template, dan banyak lagi.

Berikut adalah beberapa metode yang paling sering digunakan oleh objek app:

Metode	Deskripsi
app.get()	Routes permintaan HTTP GET ke path yang ditentukan dengan fungsi callback yang ditentukan
app.post()	Routes permintaan HTTP POST ke path yang ditentukan dengan fungsi callback yang ditentukan
app.use()	Memasang fungsi middleware yang ditentukan atau fungsi-fungsi middleware ke path yang ditentukan
app.listen()	Mengikat dan mendengarkan koneksi di host dan port yang ditentukan

Routing Dasar

Routing merujuk kepada menentukan bagaimana aplikasi merespon permintaan klien ke endpoint tertentu, yang adalah URI (atau path) dan metode permintaan HTTP tertentu (GET, POST, dan lain-lain).

Mari diperluas aplikasi kita untuk termasuk lebih banyak rute:

const express = require('express');
const app = express();
const port = 3000;

app.get('/', (req, res) => {
res.send('Hello, World!');
});

app.get('/about', (req, res) => {
res.send('Ini adalah halaman tentang');
});

app.post('/submit', (req, res) => {
res.send('Dapat permintaan POST');
});

app.listen(port, () => {
console.log(`Aplikasi contoh mendengarkan di http://localhost:${port}`);
});

Dalam contoh ini, kita telah menambahkan dua rute baru:

• Sebuah rute GET untuk '/about' yang mengembalikan "Ini adalah halaman tentang"
• Sebuah rute POST untuk '/submit' yang mengembalikan "Dapat permintaan POST"

Untuk menguji rute POST, Anda akan memerlukan sebuah tool seperti Postman, atau Anda bisa membuat formulir HTML yang mengirimkan ke rute ini.

Menyajikan File Statis

Biasanya, Anda akan ingin menyajikan file statis seperti gambar, file CSS, dan file JavaScript. Express menyediakan fungsi middleware bawaan express.static untuk tujuan ini.

Mari buat sebuah direktori bernama public di folder proyek kita, dan letakkan file gambar (misalnya cat.jpg) di dalamnya. Kemudian, perbarui app.js kita seperti ini:

const express = require('express');
const path = require('path');
const app = express();
const port = 3000;

app.use(express.static('public'));

app.get('/', (req, res) => {
res.send('Hello, World!');
});

app.get('/cat', (req, res) => {
res.sendFile(path.join(__dirname, 'public', 'cat.jpg'));
});

app.listen(port, () => {
console.log(`Aplikasi contoh mendengarkan di http://localhost:${port}`);
});

Dalam contoh ini, kita telah melakukan dua hal:

1. Kita menggunakan app.use(express.static('public')) untuk menyajikan file statis dari direktori 'public'.
2. Kita menambahkan rute baru '/cat' yang mengirim file cat.jpg sebagai tanggapan.

Sekarang, Anda dapat mengakses gambar Anda langsung di http://localhost:3000/cat.jpg, atau melalui rute '/cat' yang kita tentukan.

Dan itu saja! Kita telah meliputi dasar-dasar Express, dari instalasi hingga menyajikan file statis. Ingat, belajar mengoding seperti belajar bahasa baru - itu memerlukan latihan dan kesabaran. Jangan frustasi jika Anda belum mengerti segalanya segera. Tetap mencoba, terus membangun, dan terutama, tetap bersenang-senang!

Dalam pelajaran berikutnya, kita akan mendalami middleware Express dan teknik routing yang lebih lanjut. Sampai jumpa, selamat coding!

Credits: Image by storyset