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.
Haml
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:
1
| 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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| !!!%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:
1
| 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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <!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:
1
2
3
4
5
6
7
8
| %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:
1
2
3
4
5
6
7
8
9
10
11
12
| <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:
1
| %a{ :href => '/page.html', :title => 'Link ke sebuah halaman'} Link |
dituliskan dalam bentuk haml seperti ini:
1
| <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
