06 Desember 2018
Menyederhanakan HTML dengan Pug Template Engine

Mengutip dari websitenya, Pug adalah template engine yang diimplementasikan dengan javascript untuk NodeJS dan web browser. Fungsi utama dari Pug adalah untuk memproses template dan konten menjadi dokumen HTML.

Berkas template pug (disimpan dengan ekstensi .pug) ditulis dengan menggunakan syntax yang lebih sederhana dari HTML, sebagai contoh :

doctype html
html(lang="id")
  head
    title HTML From Pug
  body
    .container
      h1 Hello World
      p Quick Brown Fox Jumps Over The Lazy Dog

Kode diatas akan menghasilkan halaman HTML dengan kode berikut :

<!DOCTYPE html>
<html lang="id">
  <head>
    <title>HTML From Pug</title>
  </head>
  <body>
    <div class="container">
      <h1>Hello World</h1>
      <p>Quick Brown Fox Jumps Over The Lazy Dog</p>
    </div>
  </body>
</html>

Instalasi

Program yang akan digunakan adalah pug-cli. Program ini menggunakan antarmuka command line, yang artinya, program ini digunakan melalui Terminal atau Command Prompt. Program ini diinstall menggunakan package manager npm yang disediakan dalam NodeJS.

Untuk menginstall pug-cli, kita gunakan perintah berikut :

npm install -g pug-cli

Setelah diinstall, kita bisa menguji program ini dengan mengetikkan perintah dibawah pada jendela Command Prompt

pug -h

Perintah diatas akan menampilkan cara penggunaan program serta opsi yang bisa digunakan

  Usage: index [options] [dir|file ...]


  Options:

    -V, --version          output the version number
    -O, --obj <str|path>   JSON/JavaScript options object or file
    -o, --out <dir>        output the rendered HTML or compiled JavaScript to <dir>
    -p, --path <path>      filename used to resolve includes
    -b, --basedir <path>   path used as root directory to resolve absolute includes
    -P, --pretty           compile pretty HTML output
    -c, --client           compile function for client-side
    -n, --name <str>       the name of the compiled template (requires --client)
    -D, --no-debug         compile without debugging (smaller functions) (default: true)
    -w, --watch            watch files for changes and automatically re-render
    -E, --extension <ext>  specify the output file extension
    -s, --silent           do not output logs
    --name-after-file      name the template after the last section of the file path (requires --client and overriden by --name)
    --doctype <str>        specify the doctype on the command line (useful if it is not specified by the template)
    -h, --help             output usage information
  Examples:

    # Render all files in the `templates` directory:
    $ pug templates

    # Create {foo,bar}.html:
    $ pug {foo,bar}.pug

    # Using `pug` over standard input and output streams
    $ pug < my.pug > my.html
    $ echo 'h1 Pug!' | pug

    # Render all files in `foo` and `bar` directories to `/tmp`:
    $ pug foo bar --out /tmp

    # Specify options through a string:
    $ pug -O '{"doctype": "html"}' foo.pug
    # or, using JavaScript instead of JSON
    $ pug -O "{doctype: 'html'}" foo.pug

    # Specify options through a file:
    $ echo "exports.doctype = 'html';" > options.js
    $ pug -O options.js foo.pug
    # or, JSON works too
    $ echo '{"doctype": "html"}' > options.json
    $ pug -O options.json foo.pug

Syntax Penulisan

Elemen HTML

Normalnya elemen HTML ditulis dalam format berikut :

<elemen atribut="nilai">text</elemen>

Sebagai contoh :

<p style="text-align: center">quick brown fox</p>

Elemen HTML ditulis dengan tag pembuka <elemen> dan tag penutup </elemen>. Elemen HTML dapat berisi 1 atau lebih atribut dan nilai dari atribut tersebut yang ditulis didalam tag pembuka. Text dari elemen ditulis diantara tag pembuka dan tag penutup.

Dalam Pug, tag dari elemen HTML ditulis tanpa kurung sudut (angle bracket) < dan > dan tidak berpasangan. Atribut dari elemen HTML ditulis dalam tanda kurung (parenthesis), jika lebih dari satu, masing-masing atribut dipisahkan dengan simbol koma. Text dari elemen ditulis setelah tag dipisahkan dengan spasi

Sebagai contoh :

p(style="text-align: center") Quick Brown Fox

Atribut Class dan ID

Atribut class dan id umumnya digunakan untuk pengelompokan atau identifikasi elemen dalam dokumen HTML. Mengikuti penjelasan sebelumnya, kedua atribut ini dapat ditulis dalam elemen HTML seperti berikut :

p(id="paragraph-awal",class="text-hijau") Quick Brown Fox

Dalam pug, class dari elemen dapat langsung disebutkan setelah tag dengan syntax penulisan elemen.nama-class, sebagai contoh :

p.text-hijau Quick brown fox

Untuk id dari elemen dapat langsung disebutkan dengan menggunakan simbol tagar (hashtag) menggunakan syntax elemen#nama-id, sebagai contoh :

p.text-hijau#paragraph-awal Quick brown fox

Kode pug diatas akan menghasilkan kode HTML berikut :

<p id="paragraph-awal" class="text-hijau">Quick brown fox</p>

Nilai class dan id juga dapat langsung disebutkan tanpa menggunakan elemen, sebagai contoh :

.sample Hello World
#sample-1 Quick Brown Fox
.sample#sample-2 Quick Brown Fox
#sample-3(style="text-align: center") Quick Brown Fox

Atribut class dan id yang disebutkan tanpa elemen akan diterjemahkan sebagai <div/>. Kode pug diatas akan menghasilkan kode HTML berikut :

<div class="sample">Hello World</div>
<div id="sample-1">Quick Brown Fox</div>
<div class="sample" id="sample-2">Quick Brown Fox</div>
<div id="sample-3" style="text-align: center">Quick Brown Fox</div>

Element Bertingkat

Elemen-elemen HTML umumnya ditulis secara bertingkat (nested), contoh paling sederhana adalah penulisan header dan paragraph didalam tag <body> :

<body>
  <h1>Hello World</h1>
  <p>Quick brown fox jumps over the lazy dog</p>
  <ul>
    <li>daftar 1</li>
    <li>daftar 2</li>
  </ul>
</body>

Dalam pug, elemen HTML yang merupakan bagian internal dari elemen lainnya ditulis dengan menggunakan indentasi baik itu menggunakan spasi atau tab. Kode HTML diatas dapat ditulis seperti berikut :

body
  h1 Hello World
  p Quick brown fox jumps over the lazy dog
  ul
    li daftar 1
    li daftar 2

Inline Tag

Dalam kondisi tertentu, tag HTML dapat ditulis bersamaan dengan text sebagai bagian dari tag HTML lainnya, sebagai contoh, misalnya dalam sebuah paragraph kita perlu menggunakan cetak miring, cetak tebal atau link

<p>Quick brown <em>fox</em> jumps over the <strong>lazy</strong> <a href="#">dog</a></p>

Kode HTML diatas dapat ditulis seperti berikut :

p Quick brown <em>fox</em> jumps over the <strong>lazy</strong> <a href="#">dog</a>

Metode penulisan lain untuk kode diatas adalah sebagai berikut :

p
  | Quick brown
  em fox
  | jumps over the
  strong lazy
  a(href="#") dog

Kompilasi

Berikut ini contoh proses bagaimana menerjemahkan kode pug menjadi HTML. Ketikkan kode-kode berikut kemudian simpan dengan nama file index.pug pada direktori c:\contoh-pug

doctype html
html(lang="id")
  head
    title Pug to HTML
  body
    .container
      h1 Hello World
      #bagian-1
        h2 Sample
        p Quick Brown Fox Jumps Over The Lazy Dog
      #bagian-2
        h2 Another Sample
        p
          | Quick brown
          em fox
          | Jumps over the
          strong lazy
          a(href="#") dog

Melalui aplikasi Command Prompt, pindah ke direktori c:\contoh-pug kemudian ketikkan perintah :

pug index.pug --pretty

Berikut ini adalah kutipan layar dari perintah diatas

command prompt