Ing pangembangan web, nampilake data saka server ing kaca web iku penting kanggo nggawe pengalaman pangguna sing interaktif lan dinamis. Iki ngendi Template Engine teka Express.js kanggo ngluwari. A Template Engine minangka alat sing ngidini sampeyan nggawe template HTML dinamis kanthi nyuntikake data saka server menyang kode HTML.
Kenapa Gunakake Template Engine ?
Template Engine mbantu misahake markup HTML saka data sing teka saka server. Iki ngidini sampeyan ngatur kode HTML kanthi luwih gampang tanpa kudu nglebokake data menyang saben baris kode. Nanging, sampeyan bakal nggawe "placeholders" utawa "tag" ing kode HTML, sing Template Engine mengko bakal ngisi data sisih server.
Nggunakake Template Engine ing Express.js
Express.js ndhukung macem-macem template engine, kayata Pug(biyen dikenal minangka Jade) lan EJS(Embedded JavaScript). Ing ngisor iki conto nggunakake Pug lan EJS ing Express.js:
Nggunakake Pug Template Engine
Instal Pug: Sampeyan kudu nginstal pug paket liwat npm.
npm install pug --save
Konfigurasi Template Engine: Ing file konfigurasi aplikasi sampeyan(contone, app.js), nemtokake Pug minangka template engine.
app.set('view engine', 'pug');
Nggawe Cithakan Pug: Nggawe file Pug ing views direktori. Contone, nggawe index.pug file:
doctype html
html
head
title My Express App
body
h1 Welcome to My Express App
p #{message}
Penanganan Rute lan Rendering Data: Ing penanganan rute, sampeyan bisa ngirim data menyang template engine nggunakake res.render().
app.get('/',(req, res) => {
const message = 'Hello from Express!';
res.render('index', { message });
});
Nggunakake EJS Template Engine
Instal EJS: Instal ejs paket liwat npm.
npm install ejs --save
Konfigurasi Template Engine: Netepake EJS minangka ing template engine konfigurasi aplikasi sampeyan.
app.set('view engine', 'ejs');
Nggawe Cithakan EJS: Nggawe file EJS ing views direktori. Contone, nggawe 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 lan Rendering Data: Ing penanganan rute, pass data menyang template engine nggunakake res.render().
app.get('/',(req, res) => {
const message = 'Hello from Express!';
res.render('index', { message });
});
Kesimpulan
Nggunakake Template Engine ing Express.js ngidini sampeyan nggawe kaca web dinamis lan nampilake informasi saka server ing browser pangguna. Kanthi nggunakake Pug, EJS, utawa liyane template engine, sampeyan bisa mbangun kaca web interaktif lan fleksibel sing nyedhiyakake pengalaman pangguna sing luwih apik lan ngoptimalake manajemen kode lan data HTML.