Cara Menggunakan EJS untuk Membuat Templat Aplikasi Node

Pengantar

Saat membuat aplikasi Node secara cepat, kadang-kadang diperlukan cara mudah dan cepat untuk membuat templat aplikasi kita.

Jade hadir sebagai mesin tampilan untuk Express secara asali, tetapi sintaks Jade dapat menjadi terlalu rumit untuk banyak kasus penggunaan. EJS adalah satu alternatif yang melakukan pekerjaan itu dengan baik dan sangat mudah disiapkan. Mari kita lihat cara membuat aplikasi sederhana dan menggunakan EJS untuk memasukkan bagian situs kita yang dapat diulang (potongan) dan menyalurkan data ke tampilan.

Menyiapkan Aplikasi Demo

Kita akan membuat dua halaman untuk aplikasi, satu halaman dengan lebar penuh dan yang satu lagi dengan bilah samping.

Struktur Berkas

Inilah berkas yang akan kita perlukan untuk aplikasi kita. Kita akan membuat templat dari dalam folder tampilan dan selebihnya adalah praktik Node yang cukup standar.

- views
----- partials
---------- footer.ejs
---------- head.ejs
---------- header.ejs
----- pages
---------- index.ejs
---------- about.ejs
- package.json
- server.js

package.json akan menyimpan informasi aplikasi Node dan dependensi yang kita perlukan (express dan EJS). server.js akan menyimpan konfigurasi dan penyiapan server Express. Kita akan mendefinisikan rute ke halaman kita di sini.

Penyiapan Node

Mari kita masuk ke berkas package.json dan menyiapkan proyek kita di sana.

{
  "name": "node-ejs",
  "main": "server.js",
  "dependencies": {
    "ejs": "^3.1.5",
    "express": "^4.17.1"
  }
}

Kita cuma perlu Express dan EJS. Sekarang kita harus menginstal dependensi yang baru saja kita definisikan. Lanjutkan dan jalankan:

npm install

Dengan semua dependensi yang telah diinstal, mari kita konfigurasi aplikasi untuk menggunakan EJS dan menyiapkan rute untuk dua halaman yang kita perlukan: halaman indeks (lebar penuh) dan halaman about (bilah samping). Kita akan melakukannya semua dalam berkas server.js.

// load the things we need
var express = require('express');
var app = express();

// set the view engine to ejs
app.set('view engine', 'ejs');

// use res.render to load up an ejs view file

// index page
app.get('/', function(req, res) {
    res.render('pages/index');
});

// about page
app.get('/about', function(req, res) {
    res.render('pages/about');
});

app.listen(8080);
console.log('8080 is the magic port');

Di sini kita mendefinisikan aplikasi dan mengaturnya untuk ditampilkan di porta 8080. Kita juga harus menjadikan EJS sebagai mesin tampilan untuk aplikasi Express menggunakan app.set('view engine','ejs;. Perhatikan cara kita mengirim tampilan kepada pengguna dengan res.render(). Perlu diperhatikan bahwa res.render() akan mencari tampilan di folder tampilan. Jadi kita hanya perlu mendefinisikan pages/index karena jalur lengkapnya adalah views/pages/index.

Memulai Server kita

Lanjutkan dan mulai server menggunakan:

node server.js

Sekarang kita dapat melihat aplikasi dalam browser di http://localhost:8080 dan http://localhost:8080/about. Aplikasi kita sudah siap dan kita harus mendefinisikan berkas tampilan dan melihat cara kerja EJS di sana.

Buat Potongan EJS

Seperti banyak aplikasi yang kita buat, akan ada banyak kode yang digunakan kembali. Kita akan memanggil potongan itu dan mendefinisikan tiga berkas yang akan kita gunakan di seluruh bagian situs kita: head.ejs, header.ejs, dan footer.ejs. Mari kita buat berkas-berkas itu sekarang.

<meta charset="UTF-8">
<title>EJS Is Fun</title>

<!-- CSS (load bootstrap from a CDN) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
<style>
    body { padding-top:50px; }
</style>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="/">EJS Is Fun</a>
  <ul class="navbar-nav mr-auto">
    <li class="nav-item">
      <a class="nav-link" href="/">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/about">About</a>
    </li>
  </ul>
</nav>

<p class="text-center text-muted">© Copyright 2020 The Awesome People</p>

Menambahkan Potongan EJS ke Tampilan

Sekarang potongan kita telah didefinisikan. Kita tinggal memasukkannya dalam tampilan. Mari kita masuk ke dalam index.ejs dan about.ejs serta menggunakan sintaks include untuk menambahkan potongan tersebut.

Sintaks untuk Memasukkan Potongan EJS

Gunakan <%- include('RELATIVE/PATH/TO/FILE') %> untuk menyematkan potongan EJS di berkas lain.

• Tanda hubung <%- daripada cuma <% untuk memberi tahu EJS agar merender HTML mentah.
• Jalur ke potongan itu relatif terhadap berkas saat ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <%- include('../partials/head'); %>
</head>
<body class="container">

<header>
    <%- include('../partials/header'); %>
</header>

<main>
    <div class="jumbotron">
        <h1>This is great</h1>
        <p>Welcome to templating using EJS</p>
    </div>
</main>

<footer>
    <%- include('../partials/footer'); %>
</footer>

</body>
</html>

Sekarang kita dapat melihat tampilan yang didefinisikan dalam browser di http://localhost:8080.

Untuk halaman about, kita juga menambahkan bilah samping bootstrap guna memeragakan cara menstrukturkan potongan untuk digunakan kembali di seluruh bagian templat dan halaman yang berbeda.

<!DOCTYPE html>
<html lang="en">
<head>
    <%- include('../partials/head'); %>
</head>
<body class="container">

<header>
    <%- include('../partials/header'); %>
</header>

<main>
<div class="row">
    <div class="col-sm-8">
        <div class="jumbotron">
            <h1>This is great</h1>
            <p>Welcome to templating using EJS</p>
        </div>
    </div>

    <div class="col-sm-4">
        <div class="well">
            <h3>Look I'm A Sidebar!</h3>
        </div>
    </div>

</div>
</main>

<footer>
    <%- include('../partials/footer'); %>
</footer>

</body>
</html>

Jika kita mengunjungi http://localhost:8080/about, kita dapat melihat halaman about dengan bilah samping!

Sekarang kita dapat mulai menggunakan EJS untuk menyalurkan data dari aplikasi Node ke tampilan kita.

Menyalurkan Data ke Tampilan dan Potongan

Mari kita definisikan beberapa variabel dasar dan daftar yang harus disalurkan ke halaman beranda kita. Kembalilah ke berkas server.js dan tambahkan yang berikut ini di dalam rute app.get('/').

// index page
app.get('/', function(req, res) {
    var mascots = [
        { name: 'Sammy', organization: "DigitalOcean", birth_year: 2012},
        { name: 'Tux', organization: "Linux", birth_year: 1996},
        { name: 'Moby Dock', organization: "Docker", birth_year: 2013}
    ];
    var tagline = "No programming concept is complete without a cute animal mascot.";

    res.render('pages/index', {
        mascots: mascots,
        tagline: tagline
    });
});

Kita telah membuat daftar bernama mascots dan string sederhana bernama tagline. Mari kita masuk ke berkas index.ejs dan menggunakannya.

Merender Variabel Tunggal di EJS

Untuk menggemakan variabel tunggal, kita cukup menggunakan <%= tagline %>. Mari kita tambahkan ini ke berkas index.ejs:

...
<h2>Variable</h2>
<p><%= tagline %></p>
...

Mengulang-ulang Data di EJS

Untuk mengulang-ulang data, kita akan menggunakan .forEach. Mari kita tambahkan ini ke berkas tampilan:

...
<ul>
    <% mascots.forEach(function(mascot) { %>
        <li>
            <strong><%= mascot.name %></strong>
            representing <%= mascot.organization %>, born <%= mascot.birth_year %>
        </li>
    <% }); %>
</ul>
...

Sekarang kita dapat melihat informasi baru yang telah ditambahkan di browser!

Menyalurkan Data ke Potongan di EJS

Potongan EJS memiliki akses ke semua data yang sama seperti tampilan induk. Namun, berhati-hatilah: Jika Anda merujuk variabel di potongan, perlu didefinisikan di setiap tampilan yang menggunakan potongan atau akan dihasilkan kesalahan.

Anda juga dapat mendefinisikan dan menyalurkan variabel ke potongan EJS dalam sintaks include seperti ini:

...
<header>
    <%- include('../partials/header', {variant:'compact'}); %>
</header>
...

Namun, sekali lagi, Anda perlu berhati-hati ketika berasumsi variabel telah didefinisikan.

Jika Anda ingin merujuk variabel di potongan yang mungkin tidak selalu didefinisikan, dan memberinya nilai asali, Anda dapat melakukannya seperti ini:

...
<em>Variant: <%= typeof variant != 'undefined' ? variant : 'default' %></em>
...

Dalam baris di atas, kode EJS merender nilai variant jika telah didefinisikan, dan default jika tidak.

Kesimpulan

EJS memungkinkan kita untuk menjalankan aplikasi secara cepat saat kita tidak membutuhkan sesuatu yang terlalu rumit. Dengan menggunakan potongan dan memiliki kemampuan menyalurkan variabel ke tampilan, kita dapat membuat aplikasi yang bagus dengan cepat.

Untuk referensi lainnya tentang EJS, lihat dokumentasi resmi di sini.