BAB I

MENGENAL BOOTSTRAP
DAN MEMASANG SECARA OFFLINE

Persiapan
Sebelum memulai modul ini anda harus mempersiapkan bahan dibawah ini;
1. Frameword bootstrap 4
2. Bootstrap offline
3. Text editor
4. Browser

Tujuan
1. Memahami cara instalasi bootstrap
2. Memahami sistem container dan fungsinya
3. Memahami grid dan jenisnya

A. Sekilas Tentang Bootstrap

Hari kehari dan masa kemasa para programmer semakin mengembangkan berbagai jenis aplikasi
komputer. Baik aplikasi siap jadi, maupun aplikasi sebagai soft pendukung untuk pengembangan aplikasi itu
sendiri. Sehingga pada masa kini kita dapat menjumpai berbagai jenis aplikasi yang sudah diciptakan. Bahkan
jika kita kurang update tentang teknologi satu hari saja, rasanya kita sudah jauh ketinggalan informasi dan
perubahannya.
Tangan terampil pada disainer website juga tidak mau ketinggalan. Walau kita tahu untuk membuat
template sebuah website semakin menarik dan indah maka kita harus mengetikkan sekian banyak koding
html dan css. Bahkan untuk membuat satu halaman website saja mungkin kita bisa menghabiskan berjam-
jam. Apalagi kita harus akurat dalam menentukan ukuran dan tataletak sebuah halaman.
Namun pada akhirnya sebuah frameword diciptakan untuk mempermudah para disainer website
membuat halaman website. Frameware tersebut sudah dilengkapi dengan berbagai jenis sintak css dan
javascript. Sehingga mudah bagi pengembang untuk membuat halaman sebuah website.
Bootstrap merupakan salah satu frameword css yang banyak digunakan oleh desainer template web
saat ini. Saat ini bootstrap sudah dirilis sampai versi 4.3. untuk mendapatkan aplikasinya dapat didownload di
https://getbootstrap.com/ . frameword ini bersifat gratis (free).

Gambar 1. 1. Halaman Situs Resmi Bootstrap

Kadrahman, M.Kom
 Bootstrap menyediakan berbagai class-class css dan sintak-sintak javascript untuk membuat berbagai
jenis komponen website. Jadi, class-class yang disediakan oleh bootstrap tinggal digunakan saja tampa harus
membuat atau mengetikkan koding css dan javascript.
Sebelum memulai membuat template dengan boostrap sangat dianjurkan bagi para disainer untuk
memahami terlebih dahulu bahasa html, Javascript dan css. Tidak harus memahami secara komplit, cukup
memahami dasar pembuatan saja. Ketiga bahasa tersebut akan banyak digunakan didalam membuat disain
template web dengan bootstrap.

Kelebihan menggunakan bootstrap

1. Lebih Menghemat waktu karena disainer tidak perlu lagi repot-repot membuat koding css dan js. Bootstrap
menyediakan beberapa file css dan js.
2. Tampilan responsive sehingga website yang didisain dapat digunakan diberbagai jenis perangkat.
3. Mudah digunakan karena sistem menggunakan bootstrap tidak beda jauh dengan cara membuat web
manual.
Masih banyak kelebihan yang dimiliki oleh boostrap yang benar-benar membantu seorang disainer
website didalam membuat template web. Bootstrap juga menyediakan dokumen sebagai panduan didalam
membuat layout website.

B. Cara memasang bootsrap

1. Download Frameword Bootstrap
Frameword bootstrap dapat didownload dengan cara mengunjungi situs resminya di
htpps://getbootstrap.com. File yang didownload berupa file dalam bentuk format zip. Saat ini bootstrap
sudah merilis versi 4.3.1 jadi kita akan menggunakan versi terbaru tersebut.
Letakkan file yang telah didownload tadi didrive kerja yang diingini agar mudah ditemukan
nantinya (contohnya kita pindahkan kedrive D://). Ekstrak file bootstrap yang sudah didownload. File
yang sudah diekstrak berupa folder dengan nama boostrap-4.3.1-dist yang mana isi dari folder tersebut
tedapat dua buah file, yaitu file css sebagai tempat penyimpanan file berformat css dan file js sebagai
penyimpanan file berformat js.

Gambar 1. 2. Isi Dari blog_bootsrap

Folder boostrap-4.3.1-dist dapat juga diganti namanya. Disini kita akan coba mengganti namanya
dengan nama blog_boostrap.

2. Membuat Index
File index merupakan pusat dari semua file yang dibuat. Saat program pertama kali dijalankan
maka file index yang terlebih dahulu dibaca oleh sistem.
Selain file index, juga ada file bernama home. Fungsinya sama dengan file index, namun jika
didalam satu aplikasi terdapat file index dan file home maka sistem terlebih dahulu membaca file index.
Untuk membuat file index kita dapat menggunakan text editor. Ada banyak jenis text edito (
notepad, sublime text dan sejenisnya). Klik menu file=> new file sehingga muncul halaman baru. Simpan
halaman tersebut didalam folder blog_boostrap dengan cara klik file=>save As dan pada kotak dialog
yang muncul isikan nama di file name dengan index.html (selain formad html, juga bisa kita gunakan
formad php). Sehingga didalam folder blog_boostrap terdapat dua folder dan satu file index.

Kadrahman, M.Kom
 Gambar 1. 3. Perubahan Pada Isi Blog

3. Memasang Started Template

Biasanya untuk membuat isi dari file index kita harus mengetikkan koding html. Namun disini kita
tinggal copas (copi dan paste) dari situs resmi bootstrap. Silahkan kunjungi situs resmi atau kita bisa juga
mendownload aplikasi getbootstrap secara offline. Silahkan dicari diinternet.
Pada bagian menu kita pilih documentation sehingga muncul halaman dokumen bootstrap. Pilih
menu getting started pada menu list sebelah kiri kemudian scroll halaman sebelah kanan kebawah dan
cari started template.

Gambar 1. 4. Halaman Getting Started

Salin semua isi tag pada started template dengan cara klik tombol Copy yang terletak sebelah
kanan koding.
Kembali ke file index, paste koding tersebut pada halaman index kemudian jangan lupa untuk
disimpan dengan cara klik Ctrl+S pada keyboard (lakukan hal ini setiap kali melakukan perubahan pada
file).
Buka file index.html dengan browser. Jika kita berhasil maka akan terlihat tampilan seperti gambar
dibawah ini.

Gambar 1. 5. Halaman Index pada mozila

Halaman diatas akan tampil jika kita terkoneksi kejaringan internet. Karena pada started template
yang di copas tadi meminta terkoneksi kejaringan internet.

4. Menjadikan Bootstrap Ofline

Css dan js yang ada di template yang disalin dari situs resmi bootstrap bersifat online. Sehingga
untuk melihat perubahan class maka kita harus terhubung kejaringan internet.

Gambar 1. 6. Tampilah index Yang Tidak Terkoneksi Ke Internet

Kadrahman, M.Kom
 Tampilan web yang tidak terkoneksi keinternet terlihat size dan font sangat standar, berbeda
dengan tampilan yang terkoneksi keinternet yang terlihat pada Gambar 5.
Kembali ke index dan rubah link css dan tiga buah script untuk link ke js seperti berikut ini,

Jalankan atau refresh browser dan lihat hasilnya. Jika terjadi perubahan berarti kita telah berhasil
melakukan pemasangan bootstrap ofline.

Jika kita tidak memiliki boostrap offline, script diatas bisa diketikkan saja pada text editor. Yang
terpenting adalah kita memiliki frameword boostrap. Berikut adalah script lengkap dari template
boostrap yang diketikkan.

Kadrahman, M.Kom