NodeJS #12: Templating dengan EJS – Menyisipkan Data ke HTML

byFerdian Rahabista -
0


🍭 NodeJS #12: Templating dengan EJS – Menyisipkan Data ke HTML

Halo, calon developer web! 👋

Sejauh ini kita mengirim HTML langsung dari dalam kode JavaScript dengan res.send(). Itu baik untuk halaman sederhana, tapi bagaimana kalau halamannya panjang dan dinamis, misalnya menampilkan daftar pengguna dari database? Akan sangat merepotkan jika kita harus menulis HTML di dalam string JavaScript. Di sinilah templating engine berguna.

EJS (Embedded JavaScript) adalah salah satu templating engine yang populer untuk Express. Dengan EJS, kita bisa menulis HTML biasa, lalu menyisipkan kode JavaScript langsung di dalamnya untuk menampilkan data dinamis. Bayangkan seperti HTML yang diberi "lubang" yang bisa diisi dengan data dari server. Yuk, kita pelajari! 🚀

🎯 Apa Itu Templating Engine?

Templating engine adalah alat yang memungkinkan kita membuat file template (biasanya mirip HTML) dengan tempat-tempat khusus yang akan diisi data dari server. Hasilnya adalah halaman HTML lengkap yang dikirim ke browser. EJS menggunakan tag <%= %> untuk menampilkan data, dan <% %> untuk menjalankan logika JavaScript (seperti looping atau if).

📦 Instalasi EJS

Pertama, kita perlu menginstal EJS di proyek. Pastikan kamu sudah ada folder proyek dengan package.json. Jika belum, buat folder baru dan jalankan npm init -y. Kemudian instal Express dan EJS:

npm install express ejs

Setelah instalasi selesai, kita siap mengkonfigurasi Express untuk menggunakan EJS sebagai view engine.

⚙️ Setup View Engine di Express

Buat file app.js di folder proyek. Ketik kode berikut:

const express = require('express');
const app = express();
const port = 3000;

// Set EJS sebagai view engine
app.set('view engine', 'ejs');

// (Opsional) Tentukan folder views, default sudah 'views'
// app.set('views', './views');

app.listen(port, () => {
  console.log(`Server berjalan di http://localhost:${port}`);
});

app.set('view engine', 'ejs') memberi tahu Express bahwa kita akan menggunakan EJS untuk merender file template. Secara default, Express akan mencari file template di folder views. Jadi kita harus membuat folder tersebut.

📁 Membuat Folder Views dan File EJS Pertama

Buat folder bernama views di dalam proyek. Di dalamnya, buat file index.ejs dengan isi sederhana:

<!DOCTYPE html>
<html>
<head>
    <title>Halaman EJS</title>
</head>
<body>
    <h1>Halo dari EJS!</h1>
    <p>Ini adalah file template pertama saya.</p>
</body>
</html>

Sekarang, buat route di app.js untuk merender file ini:

app.get('/', (req, res) => {
  res.render('index');
});

res.render() akan mencari file index.ejs di folder views, merendernya menjadi HTML, lalu mengirimkannya ke browser.

Jalankan server dengan node app.js dan buka http://localhost:3000. Kamu akan melihat halaman HTML yang kita buat.

💡 Catatan: Kita tidak perlu menulis ekstensi .ejs di res.render('index'). Express akan otomatis mencarinya.

📤 Mengirim Data dari Express ke EJS

Keunggulan EJS adalah kita bisa mengirim data dari route ke template. Data tersebut akan tersedia di dalam file EJS. Misalnya kita ingin menampilkan nama pengguna.

Ubah route / menjadi:

app.get('/', (req, res) => {
  const data = {
    nama: 'Budi',
    umur: 12,
    hobi: ['membaca', 'coding', 'bermain bola']
  };
  res.render('index', { user: data });
});

Parameter kedua res.render() adalah objek yang berisi data yang akan dikirim ke template. Di sini kita mengirim objek dengan properti user yang berisi data pengguna.

Sekarang di index.ejs, kita bisa mengakses data tersebut menggunakan tag <%= %>:

<!DOCTYPE html>
<html>
<head>
    <title>Profil Pengguna</title>
</head>
<body>
    <h1>Halo, <%= user.nama %>!</h1>
    <p>Umur kamu <%= user.umur %> tahun.</p>
    <p>Hobi: <%= user.hobi.join(', ') %></p>
</body>
</html>

Tag <%= %> akan menampilkan nilai variabel ke dalam HTML. user.hobi.join(', ') menggabungkan array hobi menjadi string dengan koma.

Coba jalankan dan lihat hasilnya. Data dari server sekarang muncul di halaman!

🔄 Looping di EJS (Menampilkan Array)

Kita bisa menggunakan kode JavaScript biasa di dalam tag <% %> untuk melakukan looping atau percabangan. Misalnya kita ingin menampilkan daftar hobi dalam bentuk <ul>.

Ubah bagian hobi di index.ejs menjadi:

<h2>Daftar Hobi</h2>
<ul>
  <% user.hobi.forEach(function(item) { %>
    <li><%= item %></li>
  <% }); %>
</ul>

Perhatikan: <% %> digunakan untuk menjalankan kode JavaScript tanpa menampilkan hasilnya. Di dalamnya kita bisa menulis forEach, if, dll. Setiap baris HTML di luar tag akan diulang sesuai loop.

Hasilnya akan berupa daftar <li> untuk setiap hobi.

🔀 Percabangan di EJS (If-Else)

Kita juga bisa menampilkan konten secara kondisional. Misalnya kita ingin menampilkan pesan berbeda berdasarkan umur.

<% if (user.umur >= 17) { %>
  <p>Kamu sudah cukup umur.</p>
<% } else { %>
  <p>Kamu masih di bawah umur.</p>
<% } %>

🧩 Menggunakan Partials (Menyusun Halaman dari Potongan)

Dalam website, seringkali ada bagian yang sama di setiap halaman, seperti header, footer, atau navbar. Dengan EJS, kita bisa membuat partials (file terpisah) lalu menyertakannya di halaman lain. Ini membuat kode lebih rapi dan mudah dipelihara.

Buat folder views/partials. Di dalamnya, buat header.ejs:

<header>
  <h1>Website Saya</h1>
  <nav>
    <a href="/">Beranda</a>
    <a href="/tentang">Tentang</a>
  </nav>
</header>

Dan footer.ejs:

<footer>
  <p>&copy; 2026 Website Saya</p>
</footer>

Kemudian di index.ejs, kita bisa menyertakan partials dengan <%- include('partials/header') %> dan <%- include('partials/footer') %>. Perhatikan tag <%- %> yang digunakan untuk menyertakan file partial (tanpa meng-escape HTML).

<!DOCTYPE html>
<html>
<head>
    <title>Profil Pengguna</title>
</head>
<body>
    <%- include('partials/header') %>

    <h1>Halo, <%= user.nama %>!</h1>
    <!-- konten lainnya -->

    <%- include('partials/footer') %>
</body>
</html>
💡 Tips: Gunakan <%- %> untuk menyertakan file partial karena kita ingin HTML-nya dimasukkan apa adanya. <%= %> akan meng-escape HTML, yang tidak kita inginkan untuk partial.

📂 Mengirim Data ke Partial

Kita juga bisa mengirim data ke partial, misalnya untuk menyesuaikan judul halaman. Ubah header.ejs untuk menerima variabel title:

<header>
  <h1><%= title %></h1>
  <nav>...</nav>
</header>

Kemudian di halaman utama, saat memanggil partial, kita bisa mengirim data:

<%- include('partials/header', { title: 'Beranda' }) %>

📝 Contoh Lengkap: Menampilkan Daftar Teman

Mari buat contoh yang lebih kompleks. Kita akan menampilkan daftar teman dalam bentuk tabel.

Di app.js, tambahkan route baru:

app.get('/teman', (req, res) => {
  const teman = [
    { nama: 'Ani', umur: 12, kota: 'Jakarta' },
    { nama: 'Budi', umur: 13, kota: 'Bandung' },
    { nama: 'Cici', umur: 11, kota: 'Surabaya' }
  ];
  res.render('teman', { daftarTeman: teman });
});

Buat file views/teman.ejs:

<!DOCTYPE html>
<html>
<head>
    <title>Daftar Teman</title>
    <style>
        table { border-collapse: collapse; width: 100%; }
        th, td { border: 1px solid #ddd; padding: 8px; }
        th { background-color: #f2f2f2; }
    </style>
</head>
<body>
    <h1>Daftar Teman</h1>

    <table>
        <tr>
            <th>Nama</th>
            <th>Umur</th>
            <th>Kota</th>
        </tr>
        <% daftarTeman.forEach(function(t) { %>
        <tr>
            <td><%= t.nama %></td>
            <td><%= t.umur %></td>
            <td><%= t.kota %></td>
        </tr>
        <% }); %>
    </table>
</body>
</html>

Akses /teman dan lihat hasil tabel yang dinamis.

🧪 Latihan Mandiri

  1. Buat halaman profil dengan EJS yang menampilkan nama, foto (gunakan file statis), dan daftar teman (array).
  2. Buat partial navbar.ejs dan gunakan di semua halaman.
  3. Buat route /buku yang mengirim array buku (judul, penulis, tahun) dan tampilkan dalam bentuk card (gunakan CSS).
  4. Gunakan kondisional: jika umur di bawah 13, tampilkan label "Anak-anak".

📚 Rangkuman

Konsep Penjelasan
app.set('view engine', 'ejs') Mengatur EJS sebagai template engine.
res.render('namaFile', { data }) Merender file EJS dengan mengirim data.
<%= variabel %> Menampilkan nilai variabel (di-escape HTML).
<% kode %> Menjalankan kode JavaScript (tanpa output).
<%- include('path') %> Menyertakan file partial.

🏁 Penutup

Sekarang kamu sudah bisa membuat halaman web dinamis dengan EJS! Templating engine akan sangat memudahkan kita dalam mengembangkan website yang kompleks. Di tutorial selanjutnya (NodeJS #13) kita akan belajar tentang menerima data dari form (GET dan POST) – cara menangani input dari pengguna. Sampai jumpa!

Jangan lupa untuk mencoba latihan dan bereksperimen sendiri. Kalau ada pertanyaan, tulis di komentar. Selamat coding! 💻😊

Ditulis dengan ❤️ untuk para pemula yang ingin menjadi programmer handal.

Tags

Anda mungkin menyukai postingan ini

Lebih baru Lebih lama

نموذج الاتصال