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. 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.
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. 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.
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 : <!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> 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>
Overview : <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>my First Bootstrap project</title> <link rel="stylesheet" href="css/bootstrap.css"> </head> <body> <header> <hgroup> <h1>ini Adalah Project Pertama Menggunakan Bootstrap</h1> <h2>menggunakan class css bootstrap</h2> </hgroup> </header> </body> </html> 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.
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 : <link href="navbar.css" rel="stylesheet"> Jadikan elemen paling bawah pada tag <head> </head> Overview : <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>my First Bootstrap project</title> <link rel="stylesheet" href="css/bootstrap.css"> <link href="navbar.css" rel="stylesheet"> </head> <body> <header> <hgroup> <h1>ini Adalah Project Pertama Menggunakan Bootstrap</h1> <h2>menggunakan class css bootstrap</h2> </hgroup> </header> </body> </html> 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 :
Overview : <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>my First Bootstrap project</title> <link rel="stylesheet" href="css/bootstrap.css"> <link href="navbar.css" rel="stylesheet"> </head> <body> <header> <hgroup> <h1>ini Adalah Project Pertama Menggunakan Bootstrap</h1> <h2>menggunakan class css bootstrap</h2> </hgroup> </header> <!-- Static navbar --> <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" datatoggle="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> <!--/.nav-collapse --> </body> </html> Al hasil akan tampil seperti dibawah ini :
6. Cara menggunakan koleksi icon pada bootstrap 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. Jangan dicampur dengan komponen lain Kelas Icon tidak dapat dikombinasikan dengan unsur-unsur lain. Mereka dirancang untuk menjadi elemen mandiri. <span class="glyphicon glyphicon-search"></span> Contoh : Saya akan mengganti navbar intermeso dengan sebuah icon star perhatikan langkah di bawah ini : SEBELUM
SESUDAH Caranya : Masih dengan index.html kita, sehingga perhatikan kode warna biru pada elemen ini : <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="./">intermeso</a></li> </ul> <!--/.nav-collapse --> </body> </html> Ganti dengan kode warna biru di bawah ini : <ul class="nav navbar-nav navbar-right"> <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-star-empty"></span><a href="./">intermeso</a> </button> </ul> <!--/.nav-collapse --> 7. Cara mengintegrasikan Javascript di bootstrap Individu atau dikompilasi Plugin dapat dimasukkan secara individual menggunakan bootstrap.js atau bootstrap.min.js. 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 :
Sekarang kita integrasikan index.html kita dengan menambahkan link, sebagaimana berikut ini : <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>my First Bootstrap project</title> <link rel="stylesheet" href="css/bootstrap.css"> <link href="navbar.css" rel="stylesheet"> <script src="js/jquery-1.10.2.js"></script> <script src="js/bootstrap.js"></script> </head> <body> <header> <hgroup> Dan sekarang kita lihat, perubahan apa yang dibuat oleh bootstrap : Nah mudah bukan?
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 : <!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"> <!--code form html disini --> </body> 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. <!-- code html disini --> <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" datacontent="enter your first and last name." data-original-title="full Name"> <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" datacontent="what s your email address?" data-original-title="email">
<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 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" datacontent="re-enter your password for confirmation." data-original-title="re-password" > <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 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> </fieldset> </form> <!--/row--> <!--/span--> <!--/row--> <hr> <footer> <div class="container"> <p> wawan chahyo nugroho</p> </footer>
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 : <li class="active"><a href="#">home</a></li> <li><a href="registrasi.html">registrasi</a></li> <li><a href="#contact">contact</a></li> 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..