Apa itu Bootstrap

Tutorial © Wawan Chahyo Nugroho / 12131294

1. Apa itu Bootstrap ?

Sebelum kita menjawab pertanyaan tersebut, terlebih dahulu kita memahami tentang pengertian framework,

perhatikan ilustrasi di bawah ini :

“Wawan adalah seorang programmer freelance, ia baru lulus dari kuliah dan sedang mencari pekerjaan, setelah

mencari kesana kemari melalui website akhirnya dia mendapatkan order untuk membuat website, dengan senang ia

mengerjakan proyek tersebut.

Karena proyek tersebut merupakan pengalaman pertamanya, maka ia membuat sebuah sistem sesuai permintaan

client, kemudian melakukan coding dari awal sampai akhir hingga menguras banyak waktu dan tenaga, pada akhirnya

proyek selesai dan client senang dengan hasil pekerjaannya, sehingga client tersebut bersedia merekomendasikannya

kepada rekan atau mitra bisnisnya.

Beberapa minggu kemudian ada perusahaan yang memesan website dengan permintaan beberapa fitur seperti

website client sebelumnya, dengan senang hati wawan menerima dan mengerjakannya. Sedangkan yang ia lakukan

adalah dengan melihat kembai coding pada website client sebelumnya kemudian mengadopsi beberapa coding yang

diperlukan dan menerapkannya pada website client ke-2. Pada akhirnya proyek ke-2 selesai lebih cepat dari proyek

pertama dan client senang dengan hasil pekerjaannya.

Beberapa minggu kemudian wawan mendapatkan beberapa proyek lagi dari beberapa client dan rata-rata kriteria

website yang dikehendaki hampir sama. Dalam pembuatan website ke-3, ke-4 dan seterusnya, wawan telah

menyadari bahwa ada beberapa program yang harus ada untuk setiap website, misalnya seperti kode untuk koneksi

ke database MySql, pagination untuk tampilan data atau email, dll. Dengan demikian wawan membuat koleksi kode

program yang mana sewaktu-waktu bisa ia gunakan, sehingga dapat menghemat waktu dan tenaga dalam

mengerjakan sebuah website”.

Apa yang dilakukan oleh wawan diatas adalah cikal bakal sebuah framework, sehingga dapat ditarik sebuah

kesimpulan atau pengertian sederhana bahwa Framework adalah koleksi atau kumpulan potongan – potongan

program yang disusun atau diorganisasikan sedemikian rupa, sehingga dapat digunakan untuk membantu membuat

aplikasi utuh atau program utuh tanpa harus memulainya dari awal.

Sekarang kita dapat menentukan jawaban untuk pertanyaan di atas :

Bootstrap adalah framework pemrograman web yang dibangun oleh twitter, sedangkan ilustrasi di atas

dimaksudkan untuk mempermudah kita dalam memahami pengertian singkat dari Bootstrap.

Pendahuluan

Dalam rangka memenuhi tugas mata kuliah Web Statis, Prodi TI, STMIK EL Rahma, dengan topik dan konten

yang telah ditetapkan, yaitu mengenai Bootstrap. Maka saya mengekspresikan sebuah pemahaman tentang

topik tersebut dalam karya tulis ini.


2. Dimana kita bisa memperoleh bootstrap ?

Lisensi yang digunakan oleh bootstrap adalah Apache 2.0, yaitu sebuah lisensi yang terbuka sehingga kita dapat

menggunakan bootstrap dengan mudah dan secara bebas. Untuk mendapatkannya bisa mengunjungi alamat berikut

ini :

Official Web : http://getbootstrap.com/

Official Blog : http://blog.getbootstrap.com/

Sedangkan untuk aktif mengikuti perkembangan tentang bootstrap anda bisa bergabung di sini :

Twitter : @twbootstrap

Facebook : Twitter Bootstrap

3. Ada apa saja di dalam bootstrap ?

Bootstrap adalah source code yang meliputi kompilasi CSS, Javascript dan Fonts.

History

Awalnya dibuat oleh seorang desainer dan pengembang di Twitter, Bootstrap telah menjadi salah satu

front-end framework yang paling populer dan merupakan proyek open source di dunia.

Bootstrap diciptakan di Twitter pada pertengahan 2010 oleh @mdo dan @fat. Sebelum menjadi kerangka

kerja open-source, Bootstrap dikenal sebagai Twitter Blueprint. Mendistribusikan lebih dari 350 juta tweet per

hari, Twitter berkembang dari sekedar suatu layanan pesan yang biasa. Selama bertahun-tahun seiring

dengan kemampuannya dalam hal analisa data real time, perusahaan tersebut juga telah mencapai

pengalaman yang luar biasa dalam hal perancangan web. Pengalaman tersebut kini telah dikumpulkan dalam

suatu pengembangan antar muka yang dikonsolidasikan dan dipublikasikan dalam bentuk Bootstrap.

Awalnya dirilis pada Jumat, 19 Agustus, 2011, dan sudah memiliki lebih dari 20 produk release termasuk

yang terbesar adalah versi -2 dan versi-3.

Hadirnya Bootstrap 2, maka fungsionalitas responsif terhadap seluruh kerangka sebagai stylesheet

opsional telah di tambahkan dan pada Bootstrap 3, maka responsif secara default telah ditambahkan untuk

pendekatan pertamanya terhadap ponsel.

http://getbootstrap.com/

http://blog.getbootstrap.com/

https://twitter.com/twbootstrap

https://www.facebook.com/pages/Twitter-Bootstrap


<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>My First Bootstrap project</title>

</head>

<body>

<header>

<hgroup>

<h1>Ini Adalah Project Pertama Menggunakan Bootstrap</h1>

<h2>Menggunakan class css bootstrap</h2>

</hgroup>

</header>

</body>

</html>

Contoh :

4. Cara sederhana untuk memahami prinsip penggunaan bootstrap

1. Download bootstrap, untuk segmen kali ini saya coba dengan versi 3.0.3-dist, ekstrak file ke dalam folder

yang sudah kita sediakan.

2. Open folder, karena disitu baru tersedia directory css, fonts, dan js, maka kita tambahkan index.html

3. Isi file index.html dengan elemen sederhana atau elemen dasar html 5, seperti di bawah ini :

Checkpoint : sampai di sini kita telah memiliki sebuah file html yaitu index.html, file ini belum terintegrasi

dengan bootstrap dan jika kita lihat di browser maka tampilannya akan seperti ini :

4. Masukan bootstrap kedalam index.html dengan cara menambahkan sebuah link yang menuju ke directory

css, sebagaimana berikut : <link rel="stylesheet" type="text/css" href="css/bootstrap.css">

Jadikan elemen paling bawah pada tag <head>…</head>


<!DOCTYPE html>

<html>

<head>



<link rel="stylesheet" href="css/bootstrap.css">

</head>

<body>

<header>

<hgroup>



</hgroup>

</header>

</body>

</html>

Overview :

Sekarang lihat perubahan yang dibuat oleh bootstrap :

Jika kita belum puas dengan yang disediakan oleh bootstrap, maka kita bisa melakukan editing pada file css

dalam hal ini adalah bootstrap.css, sebagai contoh saya menambahkan font-style pada bootstrap.css :

Sehingga menghasilkan perubahan seperti tampila berikut ini :

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.


<!DOCTYPE html>

<html>

<head>




<link href="navbar.css" rel="stylesheet">

</head>

<body>

<header>

<hgroup>



</hgroup>

</header>

</body>

</html>

5. Cara menggunakan class css bootstrap

Perlu kita ingat bahwa bootstrap menggunakan 12 grids dalam design templatenya, untuk membagi grids

tersebut kita akan menggunakan span, namun untuk kasus ini kita akan coba terapkan pada 2 span yaitu :

Header

Navbar

Dalam hal ini kita akan membuat sebuah navigasi, maka terlebih dahulu kita integrasikan index.html kita dengan css

navbar dari bootstrap dengan cara menambahkan link untuk menuju ke directory- css-navbar dari bootstrap

sebagaimana di bawah ini :


Jadikan elemen paling bawah pada tag <head>…</head>

Overview :

Selanjutnya kita akan memasang sebuah navigasi dengan cara menambahkan beberapa kode dengan berkorelasi pada

css navbar yang telah disediakan oleh bootstrap, dalam hal ini saya telah mengadobsi beberapa kode navbar yang telah

disediakan oleh bootstrap.

Letakan kode navbar di bagian paling bawah pada elemen <body>…</body>

Sebagaimana dibawah ini :

<!DOCTYPE html>

<html>

<head>





</head>

<body>

<header>

<hgroup>



</hgroup>

</header>



<div class="navbar navbar-default navbar-static-top" role="navigation">

<div class="container">

<div class="navbar-collapse collapse">

<ul class="nav navbar-nav">

<li class="active"><a href="#">Home</a></li>

<li><a href="#about">Tentang Saya</a></li>

<li><a href="#contact">Contact</a></li>

<li class="dropdown">

<a href="#" class="dropdown-toggle" data-

toggle="dropdown">Catatan Kuliah<b class="caret"></b></a>

<ul class="dropdown-menu">

<li><a href="#">fisika</a></li>

<li><a href="#">wirausaha</a></li>

<li><a href="#">ppkn</a></li>

</ul>

</li>

</ul>

<ul class="nav navbar-nav navbar-right">

<li class="active"><a href="./">Intermeso</a></li>

</ul>

</div>

</div>

</div>

</body>

</html>

Overview :

Al – hasil akan tampil seperti dibawah ini :


6. Cara menggunakan koleksi icon pada bootstrap

<span class="glyphicon glyphicon-search"></span>

Contoh :

Saya akan mengganti navbar intermeso dengan sebuah icon star perhatikan langkah di bawah ini :

Jangan dicampur dengan komponen lain

Kelas Icon tidak dapat dikombinasikan dengan unsur-unsur lain. Mereka dirancang untuk menjadi

elemen mandiri.

Untuk alasan performa, maka semua ikon memerlukan kelas dasar dan kelas icon individual. Untuk

menggunakan, letakkan kode berikut hampir di mana saja. Pastikan untuk memberikan ruang

antara icon dan teks untuk padding yang tepat.

SEBELUM



<li class="active"><a href="./">Intermeso</a></li>

</ul>


</div>

</div>

</body>

</html>


<button type="button" class="btn btn-default btn-lg">

<span class="glyphicon glyphicon-star-empty"></span><a

href="./">Intermeso</a>

</button>

</ul>


</div>

</div>

Caranya :

Masih dengan index.html kita, sehingga perhatikan kode warna biru pada elemen ini :

Ganti dengan kode warna biru di bawah ini :

7. Cara mengintegrasikan Javascript di bootstrap

Individu atau dikompilasi

Plugin dapat dimasukkan secara individual menggunakan bootstrap.js atau bootstrap.min.js.

SESUDAH

Jangan mencoba untuk memasukkan keduanya.

seperti bootstrap.js dan bootstrap.min.js berisi semua plugin dalam satu file.

Dependensi (ketergantungan) Plugin

Beberapa plugin dan komponen CSS tergantung pada plugin lainnya. Jika Anda memasukan plugin

individual, pastikan untuk memeriksa dependensi ini dalam dokumentasi, dan juga mencatat

semua plugin yang tergantung pada jQuery (ini berarti jQuery harus disertakan sebelum file

plugin). kesimpulan : setiap integrasikan index.html dengan bootstrap.js jangan lupa integrasikan

juga dengan jQuery.js


Catatan :

mungkin kita akan bertanya kapan kita seharusnya meletakkan kode javascript kita di tag <head> atau

<body>. Kita dapat meletakkan kode javascript didalam tag <head> bila kita membuat fungsi yang akan

dipanggil di tag <body>. Sedangkan kita dapat menuliskan kode javascript di dalam tag <body> ketika kita

akan memanggil fungsi yang telah kita definisikan di dalam tag <head> atau dari file external javascript.

Pada html sebelumnya kita telah memiliki sebuah menu dropdown akan tetapi belum aktif dikarenakan html

kita belum terintegrasi dengan javascript dari bootstrap beserta jquery, coba perhatikan dibawah ini :

Dengan tampilan seperti ini, yaitu ketika catatan kuliah kita klik, maka tidak ada option yang ditampilkan.

Masih dengan index.html kita sebelumnya, sehingga pada segmen kali ini kita akan mengintegrasikan sebuah

javascript yang ada di directory dengan cara meletakan elemen javascript paling bawah pada tag <head>.

Sebagaimana telah dijelaskan sebelumnya tentang dependensi plugin, maka untuk integrasi javascript

bootstrap harus diiringi dengan integrasi javascript jQuery, jika salah satunya tidak ada maka plugin tidak

akan bekerja. Sehingga dalam hal ini terlebih dahulu kita lengkapi directory js kita dengan cara download

jQuery.js di sini http://jquery.com/download , sehingga nampak seperti ini :


<!DOCTYPE html>

<html>

<head>





<script src="js/jquery-1.10.2.js"></script>

<script src="js/bootstrap.js"></script>

</head>

<body>

<header>

<hgroup>

Sekarang kita integrasikan index.html kita dengan menambahkan link, sebagaimana berikut ini :

Dan sekarang kita lihat, perubahan apa yang dibuat oleh bootstrap :

Nah mudah bukan?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/doc.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="row"> <div class="span8">  </div> </div> </div> </body> </html>

 <div class="container"> <div class="row"> <form class="form-horizontal" id="registerHere" method='post' action=''> <fieldset> <legend>Registration</legend> <div class="control-group"> <label class="control-label" for="input01">Name</label> <div class="controls"> <input type="text" class="input-xlarge" id="user_name" name="user_name" rel="popover" data-content="Enter your first and last name." data-original-title="Full Name"> </div> </div> <div class="control-group"> <label class="control-label" for="input01">Email</label> <div class="controls">

<input type="text" class="input-xlarge" id="user_email" name="user_email" rel="popover" data-content="What’s your email address?" data-original-title="Email">

</div>

8. Mengimplementasikan design form registrasi dengan bootstrap

1. Bootstrap CSS

Hanya mencakup dua file CSS untuk diintegrasikan yaitu bootstrap.css dan doc.css, anda bisa

mendapatkannya di bootstrap versi 3.0.3

contoh :

2. Code Form HTML

Berikut nama-nama warna font merah adalah elemen class Bootstrap untuk styling, Anda dapat

menggunakan nama class yang berbeda untuk ukuran input input-kecil, menengah dan input-input-besar.

</div> <div class="control-group"> <label class="control-label" for="input01">Password</label> <div class="controls"> <input type="password" class="input-xlarge" id="pwd" name="pwd" rel="popover" data-content="6 characters or more! Be tricky" data-original-title="Password" > </div> </div> <div class="control-group"> <label class="control-label" for="input01">Confirm Password</label> <div class="controls"> <input type="password" class="input-xlarge" id="cpwd" name="cpwd" rel="popover" data-content="Re-enter your password for confirmation." data-original-title="Re-Password" > </div> </div> <div class="control-group"> <label class="control-label" for="input01">Gender</label> <div class="controls"> <select name="gender" id="gender" > <option value="">Gender</option> <option value="male">Male</option> <option value="female">Female</option> <option value="other">Other</option> </select> </div> </div> <div class="control-group"> <label class="control-label" for="input01"></label> <div class="controls"> <button type="submit" class="btn btn-success" rel="tooltip" title="first tooltip">Create My Account</button> </div> </div> </fieldset> </form> </div> </div> </div> </div> </div> <hr> <footer> <div class="container"> <p>© wawan chahyo nugroho</p> </div> </footer>


<li class="active"><a href="#">Home</a></li>

<li><a href="registrasi.html">Registrasi</a></li>

<li><a href="#contact">Contact</a></li>

Masukan code html pada tag <body> dibawah comment,

Al – hasil seperti ini :

Kemudian cara mengintegrasikan registrasi.html pada index.html maka silakan cari kode ini <li><a

href="about">Tentang saya</a></li> pada index.html, dan silakan ganti menjadi seperti ini <li><a

href="registrasi.html">Registrasi</a></li> sehingga akan Nampak seperti dibawah ini :

Al – hasil :

Sebelum


Sesudah :

Dan jika kita klik, maka tampilah halaman registrasi yang telah kita buat sebelumnya :

Dan sudah saatnya kita untuk bilang, “Congratulation” heee ok gan selamat mencoba , semoga tutorial singkat dari

saya ini bermanfaat, Terimakasih

Ok, gan”, untuk tutorial bootstrap ini akan saya update lagi setelah saya melakukan explorasi lebih jauh lagi,,

Please, don’t any where except just here.. bye ..

Apa itu Bootstrap

Documents

Transcript of Apa itu Bootstrap