Node.js - Express Framework

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

Apa Itu Express?

Sebelum kita masuk ke dalam, mari bicarakan apa sebenarnya Express itu. Bayangkan Anda sedang membangun sebuah rumah. Anda bisa mulai dari nol, membuat sendiri batu dan memotong kayu Anda sendiri. Atau, Anda bisa menggunakan material yang sudah jadi yang membuat pekerjaan Anda mudah dan cepat. Express seperti material yang sudah jadi itu, tapi untuk aplikasi web. Itu adalah kerangka kerja yang menyediakan set fitur yang kuat untuk aplikasi web dan mobile, membuatnya mudah dan cepat untuk membangun aplikasi web dengan Node.js.

Menginstal Express

Mari kita mulai dengan menginstal Express. Pertama, pastikan Anda telah menginstal Node.js di komputer Anda. Jika belum, buka 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 ajaib yang berisi berbagai peralatan yang berguna (disebut paket) yang kita bisa gunakan dalam proyek Node.js kita.

Contoh Hello World

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

Buat sebuah file baru yang disebut 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 sedang 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 menyiapkan sebuah rute untuk URL root ('/') yang mengirimkan "Hello, World!" sebagai tanggapan.
4. Kita memerintahkan aplikasi kita untuk mendengarkan di port yang ditentukan.

Untuk menjalankan aplikasi ini, buka terminal Anda, navigasikan ke direktori yang berisi 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 tampilan 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 di 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 luasakan 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('Menerima permintaan POST');
});

app.listen(port, () => {
console.log(`Aplikasi contoh sedang 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 "Menerima permintaan POST"

Untuk menguji rute POST, Anda akan memerlukan alat 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 yang disebut public di folder proyek kita, dan masukkan sebuah file gambar (misalnya cat.jpg) di dalamnya. Kemudian, ubah 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 sedang 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 mengirimkan 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 coding adalah seperti belajar bahasa baru – itu memerlukan latihan dan kesabaran. Jangan frustasi jika Anda belum mengerti segalanya segera. Terus mencoba, terus membangun, dan yang paling penting, terus bersenang-senang!

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

Credits: Image by storyset