Node.js templating dengan EJS

EJS adalah salah satu template layouting pada node.js yang mudah untuk digunakan, pada tutorial penggunaan ejs kali ini kita akan belajar menggunakan EJS di aplikasi node.js kita dan passing data dari server ke template.

Struktur Projek

Pertama kali kita akan membuat folder untuk projek terlebih dahulu, saya memberi nama ejstutorial dalam folder ejstutorial buat file app.js dan package.json.

Selanjutnya kita akan menginstall dependencies nya terlebih dahulu:

$ npm install express ejs

Sintak diatas akan menginstall express yang akan kita gunakan untuk server-side dan ejs untuk templating nya.

Lalu masukkan kode dibawah kedalam app.js

ejstutorial/app.js

  1. const path = require('path');
  2.  
  3. const express = require('express');
  4.  
  5. const app = express();
  6.  
  7. app.set('view engine', 'ejs');
  8. app.set('views', 'views');
  9.  
  10. const router = require('./routes/router');
  11.  
  12. app.use(router);
  13.  
  14. app.listen(3000, () => console.log(`Server listening on port 3000!`))

Pada baris ke-7 digunakan untuk mensetting view engine yang akan digunakan, yaitu EJS.

Sementara pada baris ke-8 digunakan untuk memberitahu express sebagai server-side, dimana posisi folder template kita disimpan.

ejstutorial/package.json

  1. {
  2.   "name": "ejstutorial",
  3.   "version": "1.0.0",
  4.   "description": "Tutorial Penggunaan Template EJS - Koder.id",
  5.   "main": "app.js",
  6.   "scripts": {
  7.     "test": "echo \"Error: no test specified\" && exit 1"
  8.   },
  9.   "author": "Ananda Bayu Putra Yudhistira",
  10.   "dependencies": {
  11.     "body-parser": "^1.18.3",
  12.     "ejs": "^2.6.1",
  13.     "express": "^4.16.4"
  14.   }
  15. }

Routing dan Views

Setelah itu buat folder routes dan views yang akan digunakan sebagai acuan routing dan templating.

ejstutorial/routes/router.js

  1. const express = require('express');
  2.  
  3. const router = express.Router();
  4.  
  5. router.get('/', (req, res, next) => {
  6.     let kodertext = "Text ini dikirim dari server."
  7.     res.render('index', {kodertext});
  8. });
  9.  
  10. module.exports = router;

Pada baris ke-6 kita membuat variabel yang akan ditampilkan pada template, isi variabel bisa Koders ganti dengan apa saja.

ejstutorial/view/index.ejs

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
  9.         crossorigin="anonymous">
  10.     <title>EJS Tutorial</title>
  11. </head>
  12.  
  13. <body>
  14.     <div class="jumbotron jumbotron-fluid">
  15.         <div class="container">
  16.             <h1 class="display-4">Hello World</h1>
  17.             <p class="lead">Ini tutorial templating Node.js dengan EJS -
  18.                 <a href="https://koder.id/">Koder.id</a>.
  19.             </p>
  20.             <h2>Variable</h2>
  21.             <p>
  22.                 <%= kodertext %>
  23.             </p>
  24.         </div>
  25.     </div>
  26. </body>
  27.  
  28. </html>

Pada template kita bisa menampilkan variabel yang sudah dipassing dari server dengan perintah <%= kodertext %>.

Struktur folder akan terlihat seperti gambar dibawah ini:

Struktur folder ejstutorial
Struktur folder ejstutorial

Jika sudah sesuai seperti diatas jalankan perintah node app.js untuk menjalankan server, lalu buka browser dan akses localhost:3000

Jika Koders melihat halaman seperti dibawah, berarti Koders sudah berhasil membuat aplikasi node.js dengan template ejs.

Aplikasi Node.js dengan EJS
Aplikasi Node.js dengan EJS

Source

Source code aplikasi bisa Koders clone atau download disini.

Penjelasan

Tutorial diatas menjelaskan penggunaan EJS di node.js, dimulai dari membuat server dengan express lalu merubah view engine dan mensetting folder template. Koders juga belajar menggunakan routing di express serta passing data dari server untuk ditampilkan pada halaman website.

Referensi

  1. https://scotch.io/tutorials/use-ejs-to-template-your-node-application
  2. https://github.com/Soarez/express-ejs-layouts
Author

Started coding from 3rd junior high school, 3+ years of experience in Software development using any programming language.

Pin It