PugJS /Jade pada NodeJS (ExpressJS)

Source: https://madebydowson.com

Beberapa template engine yang populer digunakan di expressJs adalah Pug, Mustache dan EJS. Artikel kali ini akan membahas bagaimana cara menggunakan PugJS pada ExpressJS. Apa itu template engine? apa itu Pug JS? Sebuah browser bekerja dengan membaca file html dan css kemudian menampilkannya. Template engine(contoh : PugJs) bekerja dengan menginjeksi data dan menghasilkan HTML untuk dibaca oleh browser. Untuk mengetahui seperti apa PugJS itu, kamu dapat melihat di :

Getting Started - Pug

Pug

• Tag

Pada HTML kita menggunakan closing tag untuk mengakhiri suatu tag. Pada pug tidak ada closing tag. Pug menggunakan indentation (misal : spasi atau tab) untuk menunjukkan sebuah tag ada di dalam tag lain. Contoh :

div
  p Hai
  p Kamu

Pada HTML akan tampak seperti di bawah ini :

<div>
  <p>Hai</p>
  <p>Kamu</p>
</div>

• Atribut

Pada Pug kita menambahkan atribut dari tag dengan menggunakan kurung/parentheses () dan koma ,. Parentheses dituliskan setelah tag tanpa spasi. Contoh:

div(class="greeting" id="greeting")
  p Hallo Pug

Pada HTML akan tampak seperti di bawah ini :

<div>
  <p>Hallo Pug</p>
</div>

• Blok teks

Ketika anda ingin membuat sebuah teks yang memiliki banyak baris pada pug anda dapat meletakkan titik . setelah tag. Ingat bahwa pug menggunakan indentation untuk menuliskan child dari sebuah tag. Contoh penggunaan :

div
  p.
    Hallo..Nama saya bintang.
    Saat ini saya berumur 19 tahun.
    Hobi saya adalah berolahraga.

• Javascript di pug

Untuk menuliskan baris code javascript pada pug, baris harus di awali dengan tanda penghubung/hyphen — Contoh:

- var n = 3
div
  ul
    - for (var i=0; i<n; i++) {
      li Hai
    - }

• Looping/perulangan

Pada contoh javascript di pug saya mencontohkan perulangan dengan menggunakan javascript. Pug juga memiliki syntax untuk perulangan. Contoh:

- var daftarBinatang = ['Kucing', 'Ayam', 'Sapi']
div
  h1 Daftar binatang peliharaan :
  for binatang in daftarBinatang
    ul
      li= binatang

• Interpolation

Untuk menyisipkan sebuah variabel javascript pada pug kita dapat melakukan dengan p= "Halo " + nama. Selain menggunakan cara tersebut kita dapat menggunakan cara berikut ini:

- var nama = 'Bintang'
div
  h1 Hallo #{nama}

• Mixins

Mixins merupakan function yang memiliki parameter sebagai input dan memberikan output. Untuk mendefinisikan mixins menggunakan keyword mixin. Sedangkan untuk memanggilnya dengan menggunakan + Contoh:

mixin greeting(nama, umur)
  div
    p.
      Halo nama saya #{nama}
      Umur saya #{umur} tahun
+greeting('Bintang', 19)

Pug dengan NodeJS

Langkah yang perlu dilakukan untuk menggunakan PugJs dengan NodeJS(Express) adalah sebagai berikut :

1. Install express dan pug npm install express pug --save
2. Buat file app.js. Kemudian buat code seperti contoh di bawah ini :

Dalam code di atas yang perlu diperhatikan adalah app.set('view engine', 'pug');. Code tersebut digunakan untuk mengatur template engine yang digunakan.

3. Buat folder views.
Secara default file template berada di folder views. Kamu dapat mengubah dengan menambahkan code : app.set('views', './namaFolder').

4. Buat file index.pug di dalam folder views dan tulis code seperti contoh di bawah ini :

Kamu dapat melakukan custom code dengan mempelajari di : https://pugjs.org/api/getting-started.html

5. Jalankan applikasi dengan : node app. Kemudian buka browser dan buka : http://localhost:3000

Sekian tutorial PugJS kali ini semoga bermanfaat. Terimakasih.