Haml adalah markup seperti Html, tetapi lebih indah,
human-readable (enak dibaca) dan dapat memangkas banyak waktu. Haml sendiri adalah
library dari bahasa pemprograman Ruby (atau biasa disebut Gem) yang meng-
compile file .haml ke file .html jadi kita
tidak perlu menginstall ruby di server karena proses
compile dapat dilakukan di komputer lokal. Tapi kita tetap harus menginstall Ruby di komputer lokal kita.
Untuk menginstall ruby, jika anda menggunakan sistem Window$, anda bisa mengunduh installernya di
http://rubyinstaller.org/downloads/ dan pilih versi 1.9.2 untuk kestabilan. Di Linux dan Mac anda bisa menggunakan RVM, Ruby Version Manager di
http://beginrescueend.com/. Untuk mengetes apa ruby sudah terinstall, buka command-line atau terminal (di Windows, Start > run > ketik ‘cmd’, atau Start > accesscories > command line)
Setelah menginstall ruby, sekarang kita perlu menginstall library dari Haml itu sendiri. Mudah kok, cukup dengan perintah pada command-line:
gem install haml
atau diawali dengan kata `sudo’ pada Linux atau Mac OS X.
Baiklah kini Haml (dan Ruby) sudah ter-install, saatnya kita belajar Haml dari contoh file:
!!!
%html
%head
%title Judul Halaman
%link{:rel => 'stylesheet', :href => 'style.css'}
%body
%h1 Heading 1
%p
Lorem ipsum dolor sit amet,
%strong consectetur
adipiscing elit. Praesent pretium justo non nibh commodo iaculis. Maecenas rhoncus varius egestas. Quisque vulputate quam eget augue rhoncus semper.
.container
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium justo non nibh commodo iaculis. Maecenas rhoncus varius egestas. Quisque vulputate quam eget augue rhoncus semper.
#wrapper
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium justo non nibh commodo iaculis. Maecenas rhoncus varius egestas. Quisque vulputate quam eget augue rhoncus semper.
%div{ :class => 'container', :id => 'wrapper'}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium justo non nibh commodo iaculis. Maecenas rhoncus varius egestas. Quisque vulputate quam eget augue rhoncus semper. Simpan file diatas dengan nama index.haml (atau nama lain) lalu ketikkan di command line/terminal perintah:
haml index.haml index.html
Dimana ‘haml’ adalah nama perintah untuk meng-compile file haml, ‘index.haml’ adalah nama dari file input berupa Haml yang kita buat diatas, sedang ‘index.html’ adalah file output hasil kompilasi dari file haml. Saya sarankan file output dan file input namanya sama, misal index.haml untuk index.html, view.haml untuk view.html, dan seterusnya.
Hasilnya dalam index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Judul Halaman</title>
<link href='style.css' rel='stylesheet' />
</head>
<body>
<h1>Heading 1</h1>
<p>
Lorem ipsum dolor sit amet,
<strong>consectetur</strong>
adipiscing elit. Praesent pretium justo non nibh commodo iaculis. Maecenas rhoncus varius egestas. Quisque vulputate quam eget augue rhoncus semper.
</p>
<div class='container'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium justo non nibh commodo iaculis. Maecenas rhoncus varius egestas. Quisque vulputate quam eget augue rhoncus semper.
</div>
<div id='wrapper'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium justo non nibh commodo iaculis. Maecenas rhoncus varius egestas. Quisque vulputate quam eget augue rhoncus semper.
</div>
<div class='container' id='wrapper'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium justo non nibh commodo iaculis. Maecenas rhoncus varius egestas. Quisque vulputate quam eget augue rhoncus semper.
</div>
</body>
</html>
Tag dalam Haml, seperti dalam file Haml diatas cukup dengan tanda
% di depan nama tag. Misal
%html,
%title, dan sebagainya.
Sedangkan untuk Tag yang berada di dalam tag lain, Haml menggunakan konsep
indentasi. Biasanya indentasi dalam Haml adalah 1 tab atau 2 spasi (ala Ruby), untuk lebih jelasnya apa maksud penggunaan
indentasi dalam Haml, lihat contoh berikut ini:
%body
%p
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
%strong
Praesent pretium justo
%em
non nibh commodo iaculis.
Maecenas rhoncus varius egestas. Quisque vulputate quam eget augue rhoncus semper.
Dan jika di-
compile maka hasilnya:
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<strong>
Praesent pretium justo
<em>
non nibh commodo iaculis.
</em>
</strong>
Maecenas rhoncus varius egestas. Quisque vulputate quam eget augue rhoncus semper.
</p>
</body>
Bagaimana? Sudah jelas maksud indentasinya? Ya, Indentasi Haml berfungsi sebagai
pengganti tag nesting pada Html. Sebuah indentasi bisa berupa 1 tab atau beberapa spasi. Syaratnya, jumlahnya harus sama dan konsisten.
Sedangkan tanda
!!! diawal dokumen adalah doctype dari html.
!!! melambangkan
xhtml 1, dan
!!! 5 adalah
html 5.
Bagaimana dengan atribut Html seperti href dan title pada tag a (anchor), description dan content pada tag meta? Untuk memberikan atribut html, bisa dilakukan dengan memberi tanda kurung kurawal setelah nama tag tanpa spasi. Contohnya:
%a{ :href => '/page.html', :title => 'Link ke sebuah halaman'} Linkdituliskan dalam bentuk haml seperti ini:
<a href='/page.html' title='Link ke sebuah halaman'>Link</a>
Contoh-contoh diatas adalah sebagian kecil dari fitur Haml. Haml tidak hanya memperindah kode (dan lebih human-readable), tapi juga memangkas waktu penulisan tag-tag Html biasa. Haml banyak digunakan oleh developer Rails sebagai pengganti Erb atau developer PHP sebagai pengganti tag Html biasa.
Selamat Mencoba
