Rabu, 14 Mei 2014

PEMROGRAMAN WEB LANJUT BOOTSTRAP

PEMROGRAMAN WEB LANJUT
BOOTSTRAP
Dalam membangun sebuah web, desain tampilan merupakan hal yang paling penting. Berbicara tampilan desain, maka kita akan berbicara seni.  Pada artikel ini saya akan  membahas slah satu framework CSS yang dapat digunakan para pengembang web untuk mempermudah dalam membangun sebuah website dengan tampilan yang menarik. Framework yang dibahas dalam artikel ini yaitu Bootstrap, framework CSS yang dibangun oleh Twitter.
Apa itu Bootstrap?
Bootstrap merupakan sebuah toolkit yang dikembangkan oleh Twitter untuk mempermudah web developer dalam mendesain tampilan aplikasi. Bootstrap juga menyediakan sarana untuk membangun layout halaman dengan mudah dan rapi serta modifikasi pada tampilan dasar HTML untuk membuat seluruh halaman website yang dikembangkan senada dengan komponen-komponen lainnya. Bootstrap dibuat untuk memberikan sekumpulan perangkat yang dapat digunakan untuk membangun website sederhana dengan mudah.
Kelebihan dari Bootstrap adalah responsive layout dan 12 column grid system. Dengan responsive layout maka aplikasi web yang didesain dengan menggunakan Bootstrap  akan langsung menyesuaikan dengan lebar dari media perambahnya. Sehingga tampilan web akan tetap rapih dibuka dengan media apapun baik itu handphone, tablet, laptop ataupun PC desktop. Jadi, tampilan tidak akan terganggu dengan resolusi dari layar. Sedangkan 12-column grid system sederhananya adalah Bootstrap akan membagi lebar layar menjadi 12 bagian. Sehingga pembagian kolom per kolom tampilan web akan menjadi lebih mudah.
Twitter Bootstrap
597px-Twitter_Boostrap_logo.svg
Pengembang Twitter
Rilis perdana August 2011; 2 tahun yang lalu
Rilis stabil 2.3.2 / 1 Maret 2013; 9 bulan yang lalu
Status pengembangan Aktif
Bahasa pemograman HTML, CSS, LESS dan JavaScript
Sistem operasi Lintas-platform
Ukuran 79.2 KB (terarsip)
Jenis Templat desain berbasis HTML dan CSS
Bootstrap telah menyediakan deklarator clas-clas CSS yang sangat mudah digunakan untuk tampilan website. Contohnya yaitu tombol seperti dibawah ini :
sukses
Maka yang dibutuhkan adalah menambahkan selektor class tombol sukses (btn btn-success) pada Bootstrap, yaitu seperti berikut ini :
<a class=”btn btn-success” href=”">Link</a>
atau
<button class=”btn btn-success” type=”submit”>Button</button>
atau
<input class=”btn btn-success” type=”button” value=”Input”>
atau
<input class=”btn btn-success” type=”submit” value=”Submit”>
Tombol merupakan salah satu kemudahan dari Bootstrap, dan juga bisa dengan mudah untuk membuat style table, form bahkan icon-icon standar yang sering digunakan dalam pembuatan website.
Membuat menu dropdown seperti berikut ini :
dropdown
Membuat modal seperti berikut:
modal header
Membuat tab seperti berikut:
home
Atau menampilkan alert seperti ini:
alert
Serta masih banyak lagi yang lainnya, yang bisa membuat website menjadi lebih mudah dalam pembuatannya tentunya dengan style modern bergaya twitter.
Menggunakan Bootstrap
Langkah-langkah penggunaan Bootstrap pada website yaitu:
  1. Download Bootstrap pada website resminya
  2. Lakukan ekstraksi file zip hasil download
  3. Masukkan CSS Bootstrap pada file HTML

Langkah-langkah menggunakan Bootstrap pada HTML
Langkah 1: File HTML awal
Untuk mulai melihat bagiamana Bootstrap memberikan fitur-fitur rancangan antarmuka indah ke halaman website, kita akan membuat sebuah file HTML sederhana terlebih dahulu. Buat sebuah file HTML, dan isikan file tersebut dengan kode berikut:
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset=”UTF-8″>
  5. <title>Sebuah file HTML Sederhana</title>
  6. </head>
  7. <body>
  8. <h1>File HTML</h1>
  9. <p>Ini adalah sebuah file HTML sederhana, yang dapat dibuka langsung melalui <i>browser</i>.</p>
  10. <blockquote>
  11. Lakukanlah hal yang sulit ketika hal tersebut masih mudah, dan lakukan hal besar ketika hal tersebut masih kecil. Perjalanan ribuan mil harus dimulai dengan satu langkah.
  12. <small>Lao Tzu</small>
  13. </blockquote>
  14. </body>
  15. </html>
Simpan file dengan nama bootstrap.html, dan buka file HTML yang baru dibuat pada browser. Sampai titik ini, halaman HTML kita akan memiliki tampilan seperti berikut:
file


Langkah 2: Download dan ekstrak Bootstrap
Untuk menggunakan Boostrap pada aplikasi kita, tentunya kita harus memiliki Bootstrap terlebih dahulu. Buka website resmi Bootstrap, http://twitter.github.io/bootstrap/, dan klik tombol “Download Bootstrap” untuk memulai download Bootstrap.
download
Selesai download, anda akan memiliki file bootstrap.zip yang berisi file-file yang dibutuhkan untuk menggunakan Bootstrap. Ekstrak file tersebut pada tempat yang sama dengan bootstrap.html, sehingga sekarang kita memiliki file seperti berikut:
html
dengan isi dari masing-masing direktori yaitu:
  • Direktori “css” memiliki empat buah file di dalamnya, yaitu:
    1. bootstrap.css
    2. bootstrap.min.css
    3. bootstrap-responsive.css
    4. bootstrap-responsive.min.css
  • Direktori “img memiliki dua buah file di dalamnya, yaitu:
    1. glyphicons-halflings.png
    2. glyphicons-halflings-white.png
  • Direktori “js” memiliki dua buah file di dalamnya, yaitu:
    1. bootstrap.js
    2. bootstrap.min.js
Jika seluruh file yang ada telah sama, maka kita telah siap menggunakn Bootstrap!
Checkpoint: Sebelum masuk ke langkah selanjutnya, pastikan file yang ada pada direktori percobaan anda telah sama dengan daftar file yang ada di atas.
Langkah 3: Memasukkan Bootstrap ke dalam HTML
Langkah terakhir sangat sederhana, karena kita hanya perlu memasukkan CSS Bootstrap ke dalam file bootstrap.html, dan kita dapat langsung melihat perubahan yang dibuat oleh Bootstrap.
Buka file bootstrap.html dan tambahkan kode berikut sebelum baris ke 6 (</head>):
  1. <link rel=”stylesheet” href=”css/bootstrap.css”>
Catatan: file bootstrap.css merupakan file CSS yang belum dikompilasi, dan digunakan hanya pada tahap pengembangan untuk mempermudah debugging. Jika ingin menggunakan Bootstrap pada website produksi yang akan benar-benar dikunjungi pengguna, disarankan untuk menggunakan bootstrap.min.css untuk meminimalkan download pengguna.
sehingga isi dari file bootstrap.html menjadi seperti berikut:
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset=”UTF-8″>
  5.  <title>Sebuah file HTML Sederhana</title>
  6.  <link rel=”stylesheet” href=”css/bootstrap.css”>
  7. </head>
  8. <body>
  9. <h1>File HTML</h1>
  10. <p>Ini adalah sebuah file HTML sederhana, yang dapat dibuka langsung melalui <i>browser</i>.</p>
  11. <blockquote>
  12. Lakukanlah hal yang sulit ketika hal tersebut masih mudah, dan     lakukan hal besar ketika hal tersebut masih kecil. Perjalanan ribuan mil harus dimulai dengan satu langkah.
  13. <small>Lao Tzu</small>
  14. </blockquote>
  15. </body>
  16. </html>
kemudian buka kembali bootstrap.html pada browsr, dan kita dapat langsung melihat perubahan pada halaman.

file 2
Fitur Bootstrap: Layout
Untuk menyusun elemen-elemen dengan rapi, biasanya pengembang harus mengerti konsep-konsep yang kompleks pada CSS: float, box model, positioning, dan lainnya. Untungnya, Bootstrap menyediakan banyak class CSS standar yang dapat digunakan untuk menyusun elemen-elemen dokumen HTML dengan rapi dan mudah.
Penampung Halaman
Umumnya sebuah halaman website memiliki bagian penampung utama yang berisikan keseluruhan konten website tersebut. Bagian penampung digunakan untuk membatasi lebar dokumen, sehingga konten pada website masih dapat dibaca dengan mudah.
Baris dan Kolom
Desain dari sebuah halaman HTML seringkali dikembangkan dengan menggunakan pembagian kolom, yang dikenal dengan nama grid system. Bootstrap juga memberikan fitur pembagian halaman ke dalam 12 kolom secara otomatis, dan tentunya kita bebas menentukan lebar kolom yang diinginkan.
Adapun class yang diberikan oleh Bootstrap untuk memasukkan elemen ke dalam kolom ialah span[jumlahkolom], dengan nilai jumlahkolom adalah 1 sampai 12. Jadi, kita ingin membagi halaman menjadi tiga kolom sama besar, kita dapat menggunakan tiga buah span4 dan mengisikan konten di dalam penampung span4 tersebut. Elemen-elemen kolom sendiri harus ditampung di dalam sebuah class dengan nilai row. Singkatnya, dengan menggunakan Bootstrap, kita dapat menyusun elemen-elemen halaman dalam baris dan kolom dengan rapi.
Untuk memudahkan pengertian, mari kita langsung praktekkan saja dengan menambahkan elemen tiga kolom ke dalam bootstrap.html. Tambahkan kode berikut tepat setelah </blockquote> pada bootstrap.html:
1. <div class=”row”>
2. <div class=”span4″>
3. <h2>Kolom Pertama</h2>
4. <p>Kolom pertama pada baris pertama yang memiliki lebar 4.</p>
5. </div>
6. <div class=”span4″>
7. <h2>Kolom Kedua</h2>
8. <p>Kolom kedua pada baris pertama yang memiliki lebar 4.</p>
9. </div>
10. <div class=”span4″>
11. <h2>Kolom Ketiga</h2>
12. <p>Kolom ketiga pada baris pertama yang memiliki lebar 4.</p>
13. </div>
14. </div>
dan buka bootstrap.html pada browser untuk melihat bagaimana kita telah membagi isi dari konten pada baris tersebut pada halaman web:
file 3
Selanjutnya, dapat menambahkan baris sebanyak yang diinginkan untuk mengorganisasikan elemen-elemen halaman sesuai dengan kemauan kita. Misalnya, dapat menambahkan baris baru dengan pembagian elemen yang berbeda setelah kode di atas, seperti berikut:
  1. <div>
  2. <div>
  3. <h2>Kolom Pertama</h2>
  4. <p>Kolom pertama baris kedua, yang memiliki lebar 8. Lorem ipsum dolor sit amet. Lorem nec dapibus egestas sit cursus. Urna dictumst?</p>

  6. </div>
  7. <div>
  8. <h2>Kolom Kedua</h2>
  9. <p>Kolom kedua baris kedua, yang memiliki lebar 4.</p>
  10. </div>
  11. </div>
yang akan menghasilkan halaman seperti berikut jika dibuka pada browser:
file 4
Komponen Antarmuka
Bootstrap menyediakan banyak komponen-komponen dasar yang dapat kita gunakan. Misalnya, untuk membuat menu website, kita cukup menuliskan kode HTML sesuai dengan aturan yang diberikan bootstrap.
Tambahkan kode berikut tepat setelah <body>:
  1. <div>
  2.  <div>
  3. <a href=”#”>BootstrapTest</a>
  4. <ul>
  5. <li><a href=”#”>Utama</a></li>
  6. <li><a href=”#”>Menu1</a></li>
  7. <li><a href=”#”>Menu2</a></li>
  8. </ul>
  9. </div>
  10. </div>
untuk menambahkan sebuah menu sederhana di atas seluruh elemen konten, seperti berikut:
file 5

Contoh lain lagi, kita dapat menambahkan tombol dengan memberikan class yang tepat pada elemen button. Tambahkan kode berikut tepat setelah <h1>File HTML</h1>:
  1. <p>
  2.  Contoh tombol-tombol yang disediakan oleh Bootstrap:
  3. </p>
  4. <p>
  5. <button>Tombol Merah</button>
  6. <button>Tombol Biru</button>
  7. <button>Tombol Hijau</button>
  8. </p>
yang akan memberikan kita tiga tombol seperti berikut:
cth tmbl
Catatan: Masing-masing tombol memiliki makna semantik yang berbeda, tergantung dengan class dari tombol tersebut. Bootstrap masih menyediakan sangat banyak komponen-komponen antarmuka yang dapat digunakan oleh para pengembang website.
 Tentang Grid didalam Bootstrap
Didalam Bootstrap v3 ini dipaparkan 4 macam class yang akan mendefinisikan Grid didalam HTML-mu. Jika kamu sudah terbiasa dengan class yang dipaparkan didalam Bootstrap 2, maka 4 macam class dibawah ini mungkin harus segera dibiasakan, karena memang berbeda dengan versi sebelumnya.
contoh class dalam Bootstrap 3
  1. col-xs-*
  2. col-sm-*
  3. col-md-*
  4. col-lg-*
Fitur-fitur pada Bootstrap :
  • css/bootstrap.css berisi style dasar (reset, layout, typography, button) bawaan bootstrap.
  • css/bootstrap-responsive.css berisi setting responsive desain. Kita bisa memakainya bersama bootstrap.css untuk membuat style bootstrap menjadi responsive.
Twitter Bootstrap tercatat sebagai kode yang paling banyak di download di Github sekarang ini, komunitasnya pun semakin banyak dan terus berkembang. Tools yang berkaitan dengan kostumasi twitter bootstrap pun sangat banyak.
Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)