Pengantar Haml dan Sinatra

() translation by (you can also view the original English article)

Dua kali sebulan, kami mengunjungi kembali beberapa posting favorit pembaca kami dari sepanjang riwayat Nettuts+. Tutorial ini pertama kali diterbitkan pada Oktober 2010.

Tutorial ini akan memperkenalkan Haml dan Sinatra. Haml adalah bahasa markup yang menghasilkan HTML yang bersih dan terstruktur dengan baik. Sinatra adalah kerangka kerja Ruby yang sederhana namun kuat untuk membuat situs web atau layanan web. Keduanya bekerja sangat baik bersama-sama dan menyediakan alat yang ampuh untuk pengembangan web yang cepat dan sederhana. Saya menemukan mereka ideal untuk membuat prototipe.

Pada akhir tutorial ini, Anda akan membuat situs web dengan dua halaman menggunakan Sinatra dan Haml. Sepanjang jalan, Anda akan belajar bagaimana aplikasi Sinatra terstruktur, dan akan diperkenalkan ke Haml. Anda juga akan belajar cara menggunakan file tata letak untuk mengurangi jumlah kode duplikat dan memberikan konsistensi antara halaman.

Langkah 1: Instal Ruby dan Gem

Anda dapat melewati bagian ini jika Anda sudah menginstal Ruby dan bekerja di sistem Anda.

Kita perlu menginstal bahasa Ruby dan gem Sinatra dan Haml untuk memulai.

Metode untuk melakukan ini akan bervariasi tergantung pada sistem operasi Anda. Saya suka menggunakan Ruby Version Manager (RVM) untuk mengelola Ruby di OS X dan Linux. (Pengguna Windows mungkin ingin melihat Pik sebagai alternatif untuk RVM.)

Instal RVM untuk Mengelola Lingkungan Ruby kami

Bagi Anda yang belum menginstal Ruby, unduh dan instal RVM.

Ikuti instruksi pada Halaman Instalasi RVM, buka terminal dan masukkan yang berikut ini:

1
2	bash <<( curl http://rvm.beginrescueend.com/releases/rvm-install-head )

Ini akan mengunduh dan menginstal RVM. Kita perlu menambahkan baris ke akhir file .bashrc kita. Anda yang menggunakan alternatif untuk shell ke Bash harus mengubah profil yang sesuai. Lihat halaman instalasi RVM untuk lebih jelasnya.

Ingin mempelajari lebih lanjut tentang bekerja dengan RVM?

1
2	echo '[[ -s "$HOME/.rvm/scripts/rvm" ]] && source "$HOME/.rvm/scripts/rvm" # This loads RVM into a shell session.' >> ~/.bashrc

Tutup dan buka kembali shell Anda dan Anda harus siap!

Instal Ketergantungan dan Bahasa Ruby

Ketikkan 'rvm notes' untuk memeriksa semua dependensi yang mungkin Anda perlukan untuk sistem operasi Anda. Ada beberapa versi server Ruby berbeda yang dapat dikelola RVM. Kami akan menggunakan versi standar yang disebut MRI. Oleh karena itu, dalam output rvm notes cari bagian yang mengatakan, 'For MRI and REE...'. Kemudian salin dan tempel perintah yang disebutkan untuk 'ruby'.

Sebagai contoh, pada instalasi baru Ubuntu, saya mendapatkan output berikut dan perlu menginstal dependensi yang tercantum dengan menggunakan perintah aptitude yang diberikan dalam output. Lihat screenshot di bawah ini.

Dengan sedikit rumit, menginstal dan menggunakan berbagai versi dan gem Ruby sekarang mudah. Instal Ruby versi 1.9.2 dengan memasukkan yang berikut:

1
2	rvm install 1.9.2

RVM sekarang harus mengunduh dan menginstal Ruby versi 1.9.2.

Tahap terakhir adalah memasang gem Sinatra dan Haml. Mengetik:

1
2	gem install sinatra

Anda akan melihat output berikut di terminal:


Successfully installed rack-1.2.1
Successfully installed sinatra-1.0
2 gems installed
Installing ri documentation for rack-1.2.1...
Installing ri documentation for sinatra-1.0...
Installing RDoc documentation for rack-1.2.1...
Installing RDoc documentation for sinatra-1.0...

Sekarang ketik gem install haml untuk menginstal gem Haml pada sistem Anda dengan cara yang sama.

Langkah 2: Buat aplikasi Sinatra

Baru ke Sinatra? Ikuti kursus gratis kami!

Untuk mulai membuat aplikasi Sinatra, buat folder yang berisi file Ruby untuk kode aplikasi. Di terminal Anda, ketik:

1
2	mkdir sinatra-app
3	cd sinatra-app
4	touch website.rb

Buka file 'website.rb' yang baru dibuat di editor teks Anda dan masukkan yang berikut ini:


require 'rubygems'
require 'sinatra'

get '/' do
  "This is Sinatra"
end

Ini adalah aplikasi dasar Sinatra. Dua baris pertama membawa perpustakaan 'rubygems' dan 'sinatra' untuk melakukan pekerjaan berat.

Bagian selanjutnya memberi tahu Sinatra bagaimana menanggapi permintaan 'get'. Secara khusus, ia memberi tahu apa yang harus dilakukan ketika url root (path '/') diminta. Dalam contoh ini, Sinatra baru saja mengembalikan string "This is Sinatra". Inilah yang akan muncul di browser ketika url root aplikasi diminta.

Untuk melihatnya beraksi, kembali ke terminal Anda dan jalankan aplikasi Sinatra menggunakan perintah berikut:

1
2	ruby website.rb

Anda harus memulai ulang file website.rb ini setiap kali Anda mengubahnya. Oleh karena itu, ide yang baik untuk membuat shell terpisah berjalan di jendela atau tab sendiri untuk memulai dan menghentikannya.

Anda harus mendapatkan respons:


== Sinatra/1.0 has taken the stage on 4567 for development with backup from WEBrick
[2010-09-27 09:45:37] INFO  WEBrick 1.3.1
[2010-09-27 09:45:37] INFO  ruby 1.8.7 (2010-08-16) [i686-darwin10.4.0]
[2010-09-27 09:45:38] INFO  WEBrick::HTTPServer#start: pid=14135 port=4567

Ini memberi tahu kami bahwa server web (disebut WEBrick) telah dimulai dan sekarang melayani aplikasi Anda pada port 4567.

Untuk melihatnya, buka browser Anda dan pergi ke "localhost:4567". Anda harus melihat output aplikasi:

Selamat! Aplikasi Sinatra Anda sudah aktif dan berjalan!

Mari kita mulai melihat halaman pembuatan dengan Haml dan beberapa konvensi standar Sinatra untuk file khusus.

Langkah 3: Memperkenalkan Haml

Kami akan membangun halaman kami dengan Haml. Langkah pertama adalah memberi tahu aplikasi kita bahwa kita akan menggunakan gem Haml.

Kami melakukan ini dengan menambahkan sertakan 'Haml' di bagian atas kode Anda. Ubah file 'website.rb' Anda agar terlihat seperti berikut:


require 'rubygems'
require 'sinatra'
require 'Haml

get '/' do
  "This is Sinatra"
end

Aplikasi Anda sekarang akan tahu untuk menggunakan gem Haml yang kami instal sebelumnya.

Bahasa Markup Haml

Haml adalah cara sederhana dan bersih untuk menggambarkan HTML. Itu juga dapat menangani kode inline, seperti PHP, ASP dan skrip Ruby.

Salah satu tujuan Haml adalah untuk mengurangi jumlah duplikasi dan pengulangan yang ditemukan dalam membuat halaman web dengan HTML; salah satu contohnya adalah tag penutup. Ini dilakukan dengan mengandalkan struktur indentasi dalam kode: Ketika menulis dalam Haml, penting untuk konsisten dengan indentasi saat mereka menggambarkan struktur halaman.

Hasilnya adalah markup yang logis dan lebih mudah dibaca daripada HTML untuk semua kasus kecuali yang paling sepele.

Mari kita lihat beberapa markup Haml dan perlihatkan HTML yang dihasilkannya.


!!!
%html
  %head
    %title This is the Title in a title tag within the head tag
  %body
    %h1 This is a heading within an h1 tag
    %p
      This is text in a paragraph. Notice how we do not close the tag...the indents do that!

'!!!' pada awal kode memberitahu Haml untuk menampilkan tag DOCTYPE. Tag HTML dijelaskan dengan tanda '%'. Jadi% html menampilkan tag <html>,%head membuat tag <head>, %p menciptakan tag <p> dan seterusnya.

Indentasi memberi tahu Haml tag mana yang ada pada orang lain. Jadi tag heading <h1> yang dihasilkan oleh markup '%h1' ada di dalam tag <body> yang dibuat oleh markup '%body'. Tag paragraf berikut yang ditandai oleh tag '%p' juga ada di dalam tag body. Mengikuti indentasi, kita dapat melihat bahwa teks terletak di dalam paragraf.

Karenanya, markup di atas memberikan output HTML berikut:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title >This is the Title within the head tag </title>
  </head>
  <body>
    <h1>This is a heading within the body tag </h1>
    <p>
      This is text in a paragraph. Notice how we do not close the tag...the indents do that!
    </p>
  </body>
</html>

Anda dapat melihat di mana tag penutup sesuai dengan indentasi di markup Haml asli.

Menambahkan Template Haml ke Aplikasi Sinatra

Dengan perkenalan singkat tentang Haml, kita dapat mulai menggunakannya dalam aplikasi kita. Secara default, Sinatra akan mencari templat laman web di folder yang disebut 'views'. Mari tambahkan folder itu sekarang.

Buka terminal, navigasikan ke folder sinatra_app yang kami buat sebelumnya dan masukkan yang berikut ini:

1
2	mkdir views
3	cd views

Sekarang kita berada di dalam folder views, mari kita buat halaman 'index.haml'.

1
2	touch index.haml

Buka 'index.haml' di editor teks Anda dan isi berikut ini:


!!!
%html
  %head
    %title My Sinatra Website
  %body
    %h1 Welcome
    %p
      Welcome to my website made with Sinatra and HAML

Langkah selanjutnya adalah memberi tahu Sinatra untuk menggunakan file ini untuk beranda. Buka file 'website.rb' dan ubah kode di blok get '/' sehingga file tersebut sekarang terbaca:


require 'rubygems'
require 'sinatra'
require 'haml'

get '/' do
  haml :index
end

Ini menginstruksikan aplikasi untuk mengirim output dari file Haml, yang disebut index.haml (dicari secara otomatis di folder 'views'), ketika alamat root diminta.

Kembali di terminal yang menjalankan server web, ketik 'Ctrl-C' untuk menghentikan server web dan kemudian panggil lagi menggunakan perintah ruby untuk me-restart:

1
2	[Ctrl-C]
3	ruby website.rb

Refresh browser Anda dan Anda akan melihat halaman web yang dihasilkan.

Melihat sumber halaman web ini menunjukkan HTML yang dihasilkan oleh Haml:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html>
    <head>
      <title>My Sinatra Website</title>
    </head>
    <body>
      <h1>Welcome</h1>
      <p>
        Welcome to my website made with Sinatra and HAML
      </p>
    </body>
  </html>

Besar! Kami sekarang memiliki situs web kami bekerja dengan menggunakan templat Haml di direktori 'views'.

Sekarang mari kita bekerja halaman utama menjadi sesuatu yang mengikuti struktur khas dengan header, footer, area konten dan sidebar. Kami juga akan menambahkan beberapa CSS dasar ke posisi dan gaya halaman. Dalam melakukan ini, kita akan melihat bagaimana mengekspresikan tag <div> di Haml dan bagaimana cara membawa tautan ke file CSS.

Membuat Halaman Beranda

Kembali ke file 'index.haml' di editor teks Anda dan ubah tampilannya seperti berikut:


!!!
%html
  %head
    %title My Sinatra Website
  %body
    #wrapper
      #header
        %h1 My Sinatra Website
        %h2 A Simple Site made with Sinatra and HAML!

      #content
        %h1 The Home Page
        %p
          Welcome to my website made with Sinatra and HAML.
        %p
          This is the home page and this is some text to fill out the home page!

      #side_bar
        %h1 Side Bar
        %p
          This is the side bar of the webpage

      #footer
        %p
          This is the footer.

Ini adalah tata letak khas dengan header, konten, side_bar, dan footer divs. Seperti yang Anda lihat, tag <div> dibuat dengan tanda #. Seluruh halaman dibungkus dengan tag <div id= "wrapper"> yang dibuat oleh baris '#wrapper'.

Untuk memberikan id tag HTML, kami hanya rekatkan # pada bagian akhir, sehingga kami dapat menulis %body#my_ID untuk mendapatkan <body id= "my_ID">. Kelas ditandai dengan titik. Jadi %article.my_class akan memberikan <article class="my_class">.

Simpan file dan segarkan di browser Anda. Anda harus melihat sesuatu seperti ini:

Menambahkan beberapa style CSS

Sinatra menggunakan nama direktori khusus lain 'public' untuk menyimpan aset seperti file dan gambar CSS. Buat folder yang dinamai 'public' di folder root aplikasi Anda. Ubah ke direktori itu dan buat satu yang dinamai 'css' untuk menyimpan file css. Selesai dengan membuat file css kosong di direktori itu.

Lakukan ini di terminal Anda dengan mengetik:


mkdir public
cd public
mkdir css
cd css
touch styles.css

Buka file styles.css di editor Anda dan salin dan tempel yang berikut ini di:


#wrapper{
    width:66%;
    margin:auto;
}

#header{
    background-color:#ade;
}

#header>h1{
    font-size:200%;
}

h2{
    font-size:130%;
    font-family:sans-serif;
}

#content{
    margin:12px 0;
    float:left;
}

#side_bar{
    margin:12px 0;
    width :30%;
    float:right;
    clear:none;
    background-color:#ddd;
}

h1{
    font-size:150%;
}

#footer{
    clear:both;
    background-color:#ade;
    font-size:75%;
    font-family:sans-serif;
    color:#333;
    border-top:solid 1px #69a;
}

ol{
    padding-top:20px;
    background-color:#ade;
    display:block;
}

li{
    color:white;
    text-align:center;
    display:inline;
    padding:5px 10px 0 10px;
    margin-right:2px;
    background-color: #69a;
}

a{
    text-decoration:none;
}

Saya tidak akan membahas detail css, karena ini hanya cara cepat dan kotor untuk membuat elemen halaman lebih jelas di browser.

Kita perlu menautkan ke file CSS dari dalam halaman index. Saya juga akan menambahkan tautan ke Yahoo CSS reset untuk membantu konsistensi di seluruh peramban. Buka halaman index.haml editor dan tambahkan dua baris ini ke bagian %head.

1
2	%link(rel="stylesheet" href="http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css")
3	%link(rel="stylesheet" href="css/styles.css")

Ini menggambarkan bagaimana kita dapat menggunakan tanda kurung di Haml untuk atribut tag tambahan: rel dan href dalam kasus ini.

File akhir Anda akan terlihat seperti ini:


!!!
%html
  %head
    %title My Sinatra Website
    %link(rel="stylesheet" href="http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css")
    %link(rel="stylesheet" href="css/styles.css")
  %body
    #wrapper
      #header
        %h1 My Sinatra Website
        %h2 A Simple Site made with Sinatra and HAML!

      #content
        %h1 The Home Page
        %p
          Welcome to my website made with Sinatra and HAML.
        %p
          This is the home page and this is some text to fill out the home page!

      #side_bar
        %h1 Side Bar
        %p
          This is the side bar of the webpage

      #footer
        %p
          This is the footer.

Refresh browser Anda, dan Anda akan melihat halaman beranda dengan gaya dan div diposisikan.

Kami sekarang memiliki template dasar untuk halaman web kami yang dapat kami gunakan kembali untuk membuat halaman tambahan.

Langkah 4: Membuat Tata Letak Umum

Sekarang setelah kita memiliki tata letak halaman dasar, kita dapat melihat bahwa sebagian besar konten dalam file index.html kita mungkin sama untuk halaman lain di situs. Dalam contoh ini, kami akan menjaga header, footer, dan sidebar umum untuk kedua halaman. Kita dapat menggunakan file layout di Sinatra untuk mencapai ini.

Kembali ke halaman index di editor teks Anda; ubah nama file dengan memilih 'Save as' ke layout.haml.

Kami sekarang akan mengedit file layout dan memperkenalkan beberapa markup templating menggunakan tag '=' di Haml.

Ubah file layout menjadi seperti:


!!!
%html
  %head
    %title My Sinatra Website
    %link(rel="stylesheet" href="http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css")
    %link(rel="stylesheet" href="css/styles.css")
  %body
    #wrapper
      #header
        %h1 My Sinatra Website
        %h2 A Simple Site made with Sinatra and HAML!

      #content
        =yield

      #side_bar
        %h1 Side Bar
        %p
          This is the side bar of the webpage

      #footer
        %p
          This is the footer.

Kuncinya di sini adalah perintah '=yield'. Tanda = memberi tahu Haml untuk memproses beberapa kode Ruby dan meletakkan hasilnya di browser. Di sini kita hanya memanggil fungsi yield Ruby yang akan mengembalikan konten halaman.

Kita sekarang dapat mengedit halaman index.haml kami untuk mengeluarkan semua kode yang digandakan dalam file layout. Ubah agar terlihat seperti:


%h1 The Home Page
%p
  Welcome to my website made with Sinatra and HAML.
%p
  This is the home page and this is some text to fill out the home page!

Menyegarkan peramban harus memberikan hasil yang persis sama dengan sebelumnya. Tapi kali ini, file layout secara otomatis diambil oleh Sinatra dan halaman index di render sebagai hasil dari fungsi yield.

Membuat Halaman Tentang

Membuat halaman tambahan yang menggunakan template ini sekarang sangat mudah. Buat file baru di folder 'views' bernama about.haml

Direktori dan struktur file Anda untuk aplikasi akan terlihat seperti ini:

Masukkan kode berikut dalam file baru:

1
2	%h1 About
3	%p
4	This is a simple application using Sinatra and HAML.

Seperti yang Anda lihat, ini adalah halaman yang sangat sederhana dengan heading dan sepotong teks di dalam tag paragraf.

Kami tidak memiliki cara untuk melihat halaman saat ini. Untuk melakukan itu, kita perlu mengubah file website.rb untuk memberitahu Sinatra untuk menangani permintaan '/about' dan untuk mengembalikan template about.haml sebagai hasilnya.

Kami melakukannya dengan menambahkan baris berikut ke file website.rb:


require 'rubygems'
require 'sinatra'
require 'haml'

get '/' do
  haml :index
end

get '/about' do
  haml :about
end

Blok get '/about' memberi tahu Sinatra untuk mengembalikan 'about' template Haml sebagai respons terhadap HTTP get untuk '/about'.

Mulai ulang server web WEBrick dengan menekan Ctrl-C di terminal yang menjalankannya, seperti yang kami lakukan sebelumnya, dan memanggil ruby website.rb.

Anda akan melihat halaman berikut ketika Anda menavigasi ke 'localhost:4567/about' di browser Anda.

Menambahkan lebih banyak halaman akan secepat dan sesederhana itu. Ingatlah bahwa Anda harus me-restart server WEBrick jika Anda mengubah file aplikasi.

Langkah 5: Menambahkan Meny (dan Merapikan)

Kita perlu menambahkan beberapa cara menavigasi antar halaman; jadi kami akan menambahkan menu sederhana di layout. Buka file layout.haml dan tambahkan div navigasi dan tautan seperti ini:


!!!
%html
  %head
    %title My Sinatra Website
    %link(rel="stylesheet" href="http://yui.yahooapis.com/2.8.0r4/build/reset/reset-min.css")
    %link(rel="stylesheet" href="css/styles.css")
  %body
    #wrapper
      #header
        %h1 My Sinatra Website
        %h2 A Simple Site made with Sinatra and HAML!
      #nav
        %ol
          %a(href="/")
            %li Home
          %a(href="about")
            %li About

      #content
        =yield

      #side_bar
        %h1 Side Bar
        %p
          This is the side bar of the webpage

      #footer
        %p
          This is the footer.

Di sini, kami membuat div dengan id nav. Div ini berisi daftar dengan tag anchor ke '/' dan 'about'. Perhatikan bagaimana teks tertaut diindentasi pada baris berikut untuk mengelilinginya di tag anchor HTML.

Refresh browser Anda, dan Anda akan melihat menu yang menghubungkan kedua halaman:

Mengklik tautan di menu navigasi akan membawa Anda ke setiap halaman. Anda dapat bereksperimen dengan menambahkan lebih banyak halaman. Ingat, langkah-langkahnya adalah sebagai berikut:

Tambahkan file .haml baru ke direktori views.
Jelaskan tampilan menggunakan Haml dalam file itu.
Tambahkan navigasi ke halaman baru di bagian menu dari file layout.
Edit file website.rb untuk rute baru dengan cara yang sama dengan rute '/about'.
Jangan lupa untuk me-restart file website.rb!

Kesimpulan

Tentu saja ada lebih banyak Sinatra dan Haml daripada yang kita lihat di sini. Sinatra adalah pilihan tepat untuk situs web dan layanan web, sedangkan kerangka kerja yang lebih berat seperti Ruby on Rails mungkin berlebihan. Lebih jauh, saya menemukan kesederhanaan dan kejelasan Haml melengkapi Sinatra dengan indah, dan menjadikannya pendekatan pembangunan yang sangat produktif.