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.
Tutorial Wawan Chahyo Nugroho / 12131294
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.
Tutorial Wawan Chahyo Nugroho / 12131294
My First Bootstrap project
Ini Adalah Project Pertama Menggunakan Bootstrap
Menggunakan class css bootstrap
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 :
Jadikan elemen paling bawah pada tag
Tutorial Wawan Chahyo Nugroho / 12131294
My First Bootstrap project
Ini Adalah Project Pertama Menggunakan Bootstrap
Menggunakan class css bootstrap
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.
Tutorial Wawan Chahyo Nugroho / 12131294
My First Bootstrap project
Ini Adalah Project Pertama Menggunakan Bootstrap
Menggunakan class css bootstrap
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
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
Sebagaimana dibawah ini :
Tutorial Wawan Chahyo Nugroho / 12131294
My First Bootstrap project
Ini Adalah Project Pertama Menggunakan Bootstrap
Menggunakan class css bootstrap
Home
Tentang Saya
Contact
Catatan Kuliah
fisika
wirausaha
ppkn
Intermeso
Overview :
Al hasil akan tampil seperti dibawah ini :
Tutorial Wawan Chahyo Nugroho / 12131294
6. Cara menggunakan koleksi icon pada bootstrap
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
Tutorial Wawan Chahyo Nugroho / 12131294
Intermeso
Intermeso
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
Tutorial Wawan Chahyo Nugroho / 12131294
Catatan :
mungkin kita akan bertanya kapan kita seharusnya meletakkan kode javascript kita di tag atau
. Kita dapat meletakkan kode javascript didalam tag bila kita membuat fungsi yang akan
dipanggil di tag . Sedangkan kita dapat menuliskan kode javascript di dalam tag ketika kita
akan memanggil fungsi yang telah kita definisikan di dalam tag 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 .
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 :
Tutorial Wawan Chahyo Nugroho / 12131294
My First Bootstrap project
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?
Tutorial Wawan Chahyo Nugroho / 12131294
Page Title
Registration Name Email
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.
Tutorial Wawan Chahyo Nugroho / 12131294
Password Confirm Password Gender Gender Male Female Other Create My Account wawan chahyo nugroho
Tutorial Wawan Chahyo Nugroho / 12131294
Home
Registrasi
Contact
Masukan code html pada tag dibawah comment,
Al hasil seperti ini :
Kemudian cara mengintegrasikan registrasi.html pada index.html maka silakan cari kode ini Tentang saya pada index.html, dan silakan ganti menjadi seperti ini Registrasi sehingga akan Nampak seperti dibawah ini :
Al hasil :
Sebelum
Tutorial Wawan Chahyo Nugroho / 12131294
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, dont any where except just here.. bye ..