Embedded Javascript Templating (EJS) merupakan templating engine yang digunakan oleh Node.js untuk membantu kita dalam membuat template HTML dengan kode yang lebih ringkas. Selain itu juga dapat mengirim data ke dalam template HTML di sisi klien.
EJS adalah bahasa template senderhana yang digunakan untuk menghasilkan markup HTML dengan Javascript. ini juga membantu dalam menyematkan javascript ke dalam HTML.
Mari kita coba menggunakan EJS sebagai template engine di aplikasi node.js kita.
Melakukan Set Up Node.js
langkah awal silahkan buat folder terlebih dahulu. kemudian ketik perintah berikut ini.
npm init
Selanjutnya kita perlu menginstall 2 package yang dibutuhkan. Silahkan ketik perintah berikut.
npm install express ejs
Setelah berhasil menginstall package yang diperlukan, silahkan kalian buat struktur folder seperti berikut ini.
Maka langkah selanjutnya silahkan kalian buka file index.js kemudian silahkan copy kode berikut.
const express = require('express')
const app = express()kode diatas untuk memanggil package yang sebelumnya telah kita install yaitu express.
Selanjutnya kita perlu menginisialisasi express dan mengatur port untuk menjalankan project Node Js kemudian kita jalankan server dengan menggunakan method listen().
app.listen(3000, () => console.log(`Server is work on http://localhost:3000`))
Kita perlu harus menjadikan EJS sebagai mesin tampilan untuk aplikasi Express dengan menggunakan app.set('view engine','ejs). kemudian kita perlu menginisialisasi letak folder untuk css dengan menggunakan app.use(express.static(‘public’)).
Sehingga pada file index.js kita seperti berikut ini.
const express = require('express')
const app = express()
app.set('view engine', 'ejs')
app.use(express.static('public'))
app.listen(3000, () => console.log(`Server is work on http://localhost:3000`))Membuat Potongan Kode
Disini kita akan memanggil potongan kode dan mendifinisikan
Kita akan memanggil potongan itu dan mendefinisikan empat berkas yang kita perlukan pada tampilan website kita: yang akan kita gunakan di seluruh bagian situs kita: footer.ejs, head.ejs, navbar.ejs dan sidebar.ejs. Mari kita buat potongan kode pada masing-masing berkasnya.
viwes/latyouts/footer.ejs
<footer>
<p>© Copyright 2023 Leravio</p>
</footer>viwes/latyouts/head.ejs
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Tutorial EJS</title> <!-- CSS --> <link rel="stylesheet" href="/css/style.css" type="text/css"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
viwes/latyouts/navbar.ejs
<nav>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>viwes/latyouts/sidebar.ejs
<div class="w3-sidebar w3-bar-block w3-black w3-xxlarge" style="width:70px">
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-home"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-search"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-envelope"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-globe"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-trash"></i></a>
</div>Memasukan Potongan Kode
Setelah selesai melakukan potongan kode, maka langkah selanjtunya kita memasukkannya dalam tampilan. Silahkan kalian buka views/pages/index.ejs kemudian menggunakan sintaks include untuk menambahkan potongan tersebut.
Silahkan kalian gunakan sintaks <- include('YOUR PATH') %> untuk menyematkan potongan EJS di berkas lain. Sehingga pada views/pages/index.ejs seperti berikut.
<!DOCTYPE html>
<html lang="en">
<head>
<%- include('../layouts/head'); %>
</head>
<body class="container">
<header>
<%- include('../layouts/navbar'); %>
<%- include('../layouts/sidebar'); %>
</header>
<main>
<div class="jumbotron">
<h1>Jumbotron</h1>
<span>test jumbottron</span>
</div>
<div class="row">
<div class="column">
<div class="card">
<p>test nama</p>
</div>
</div>
</div>
</main>
<%- include('../layouts/footer'); %>
</body>
</html>Mengirim Data ke Tampilan
Disini kita akan mendefiniskan beberapa variabel yang menampung data untuk disalurkan ke halaman yang sudah kita buka. silahkan kalian buka kembali file index.js dan tambahkan kode berikut
app.get('/', function(req, res) {
var cards = [
{ no: 'Card1', name: "Leravio", year: 2023},
{ no: 'Card2', name: "EJS", year: 2023},
{ no: 'Card3', name: "Node.js", year: 2023}
];
var text = "ini jumbotron";
res.render('pages/index', {
cards: cards,
text: text
});
})sehingga untuk keseluruhan file index.js seperti berikut ini.
const express = require('express')
const app = express()
app.set('view engine', 'ejs')
app.use(express.static('public'))
app.get('/', function(req, res) {
var cards = [
{ no: 'Card1', name: "Leravio", year: 2023},
{ no: 'Card2', name: "EJS", year: 2023},
{ no: 'Card3', name: "Node.js", year: 2023}
];
var text = "ini jumbotron";
res.render('pages/index', {
cards: cards,
text: text
})
})
app.listen(3000, () => console.log(`Server is work on http://localhost:3000`))Kemudian kita perlu menangkap variabel yang dikirim di tampilan yang sudah kita buat. kalian dapat menggunakan sintaks berikut ini untuk menangkap variable text.
<span><%= text %></span>
Kemudian untuk variable cards karena menampung beberapa data maka perlu melakukan looping seperti berikut ini.
<% cards.forEach(function(card) { %>
<div class="column">
<div class="card">
<h3><%= card.no %></h3>
<p><%= card.name %></p>
<p><%= card.year %></p>
</div>
</div>
<% }); %>Silahkan kalian ketik perintah berikut untuk menjalankan aplikasi, setelah itu kalian dapat mengunjungi link localhost untuk melihat hasil tampilan web yang sudah kita buat.
node index.js
Penutup
Sekian untuk tutorial Menggunakan EJS untuk Template Engine di Node.js. Jika ada kesulitan kalian bisa komentar dibawah ini.