Dalam pengembangan web, menampilkan data dari server pada halaman web sangat penting untuk menciptakan pengalaman pengguna yang interaktif dan dinamis. Di sinilah Template Engine datang Express.js untuk menyelamatkan. A Template Engine adalah alat yang memungkinkan Anda membuat template HTML dinamis dengan menyuntikkan data dari server ke dalam kode HTML.
Mengapa Menggunakan Template Engine ?
Template Engine membantu memisahkan markup HTML dari data yang berasal dari server. Ini memungkinkan Anda mengelola kode HTML dengan lebih mudah tanpa harus menyematkan data ke setiap baris kode. Sebagai gantinya, Anda akan membuat "placeholder" atau "tag" di dalam kode HTML, yang Template Engine nantinya akan diisi dengan data sisi server.
Menggunakan Template Engine di Express.js
Express.js mendukung berbagai template engine, seperti Pug(sebelumnya dikenal sebagai Jade) dan EJS(JavaScript Tertanam). Di bawah ini adalah contoh penggunaan Pug dan EJS di Express.js:
Menggunakan Pug Template Engine
Instal Pug: Anda perlu menginstal pug paket melalui npm.
npm install pug --save
Configure Template Engine: Dalam file konfigurasi aplikasi Anda(misalnya, app.js), tentukan Pug sebagai template engine.
app.set('view engine', 'pug');
Buat Template Pug: Buat file Pug di views direktori. Misalnya, buat index.pug file:
doctype html
html
head
title My Express App
body
h1 Welcome to My Express App
p #{message}
Penanganan Rute dan Rendering Data: Dalam penanganan rute, Anda dapat meneruskan data ke template engine penggunaan res.render().
app.get('/',(req, res) => {
const message = 'Hello from Express!';
res.render('index', { message });
});
Menggunakan EJS Template Engine
Instal EJS: Instal ejs paket melalui npm.
npm install ejs --save
Configure Template Engine: Tetapkan EJS sebagai dalam template engine konfigurasi aplikasi Anda.
app.set('view engine', 'ejs');
Buat Template EJS: Buat file EJS di views direktori. Misalnya, buat index.ejs file:
<!DOCTYPE html>
<html>
<head>
<title>My Express App</title>
</head>
<body>
<h1>Welcome to My Express App</h1>
<p><%= message %></p>
</body>
</html>
Penanganan Rute dan Rendering Data: Dalam penanganan rute, berikan data ke template engine penggunaan res.render().
app.get('/',(req, res) => {
const message = 'Hello from Express!';
res.render('index', { message });
});
Kesimpulan
Menggunakan Template Engine in Express.js memungkinkan Anda membuat halaman web dinamis dan menampilkan informasi dari server di browser pengguna. Dengan memanfaatkan Pug, EJS, atau lainnya template engine, Anda dapat membuat halaman web yang interaktif dan fleksibel yang memberikan pengalaman pengguna yang lebih baik dan mengoptimalkan pengelolaan kode dan data HTML.