4 Framework Bootstrap

Bootstrap adalah salah satu framework CSS yang paling populer saat ini, yang
berisi kerangka kerja untuk memudahkan kita dalam membuat template atau tampilan
website. Bootstrap telah menyediakan class-class untuk membuat berbagai jenis
komponen website. seperti menu navigasi, pesan alert, carousel, tombol, form, tabel dll.
Sederhananya, bootstrap berisi class-class yang dapat langsung kita gunakan tanpa
perlu mengatur CSS terlebih dahulu. Misal kita ingin membuat tombol, kita tinggal
menggunakan class yang disediakan bootstrap untuk membuat tombol, tanpa perlu
menulis coding CSS lagi dari awal.

Bootstrap awalnya dikembangkan oleh developer Twitter, lalu dibuat open

source agar semua orang dapat berkontribusi di dalamnya. Situs resmi bootstrap adalah
https://getbootstrap.com/. Pada website resmi bootstrap, terdapat dokumentasi cara
penggunaaan bootstrap (menu Documentation) dan contoh-contoh template website
yang dibuat dengan menggunakan bootstrap (menu Examples). Hingga saat ini
bootstrap telah sampai versi 4.5.3, dimana terdapat banyak perubahan pada versi ini.
Contohnya tampilan dan warna yang lebih jernih dan modern jika dibandingkan dengan
bootstrap versi sebelumnya.
Kelebihan utama menggunakan Bootstrap adalah: 1) Menghemat waktu,
dikarenakan tidak perlu lagi menulis coding CSS untuk masing-masing komponen yang
kita buat, kecuali kita ingin meng-custom tampilan komponen bootstrap. 2) Tampilan
Responsive, merupakan keunggulan yang sangat signifikan pada bootstrap untuk dapat

31 Pemrograman Web – Framework Laravel

membuat halaman website yang responsive baik di smartphone, tablet, laptop maupun
pc.

A. Instalasi

Untuk menginstalasi atau menggunakan bootstrap ada dua cara yang sering
digunakan, yakni: 1) Mengunduh file-file nya, atau 2) Menyisipkan link bootstrap
melalui CDN.
Mengunduh file bootstrap
Cara pertama yang dapat digunakan dalam menggunakan bootstrap adalah
dengan mengunduh file-file bootstrap dari website resminya. Berikut Langkah-
langkahnya:
1. a

2. Klik download pada gambar diatas, kemudian tunggu hingga file-file bootstrap
berekstensi zip selesai di download.

32 Pemrograman Web – Framework Laravel

 3. Ekstrak file bootstrap berekstensi zip tersebut, hingga akan menampilkan
keseluruhan direktori sebagai berikut:

4. Pindahkan folder bootstrap yang telah diekstrak sebelumnya ke direktori

aplikasi Laravel kita, yakni masukkan dalam folder public, serta ubah nama
folder menjadi asset. Berikut tampilannya:

33 Pemrograman Web – Framework Laravel

 5. Buat file index.html dalam folder asset, kemudian tuliskan sintaks seperti
berikut:

Pada tampilan diatas, dapat dilihat bahwa kita menyisipkan file css bootsrap
menggunakan tag “link”, sesuai dengan path file bootstrap. Kemudian, kita juga
perlu menyisipkan file js bootstrap menggunakan tag “script” agar tampilan
responsive bootstrap berjalan. Artinya, setiap kita ingin membuat halaman baru,
perlu menyisipkan dua file utama tersebut, untuk mengakses class-class library
nya.
6. Buka/jalankan file html yang telah dibuat pada browser, sehingga akan
menampilkan sebagai berikut:

Menyisipkan link file bootstrap via CDN

Cara kedua yang dapat digunakan dalam menggunakan bootstrap adalah dengan
menyisipkan file-file bootstrap via CDN yang telah disediakan oleh bootstrap. Hal yang

34 Pemrograman Web – Framework Laravel

perlu diperhatikan adalah, jika kita ingin menggunakan cara ini, maka pastikan
laptop/pc kita selalu terhubung ke internet saat mengembangkan/menjalankan aplikasi
web, agar dapat selalu mengakses file-file bootstrap. Berikut Langkah-langkahnya:
1. Buka website resmi bootstrap, kemudian arahkan ke halaman introduction pada
link https://getbootstrap.com/docs/4.5/getting-started/introduction/, seperti
berikut:

2. Geser kebawah halaman diatas hingga menemukan bagian “Starter Template”,

seperti berikut:

35 Pemrograman Web – Framework Laravel

 3. Salin sintaks tersebut, kemudian buatlah file baru bernama index.html pada
folder aplikasi Laravel anda, public/asset/index.html, seperti berikut:

4. Selanjutnya, tempelkan sintaks yang sebelumnya telah disalin pada file

index.html serta tambahkan sintaks header, hingga menjadi seperti tampilan
sebagai berikut:

Pada tampilan diatas, dapat dilihat bahwa kita menyisipkan file css bootsrap
menggunakan tag “link” yang terhubung via CDN secara online. Kemudian,
kita juga perlu menyisipkan file js bootstrap menggunakan tag “script” agar
tampilan responsive bootstrap berjalan. Artinya, setiap kita ingin membuat

36 Pemrograman Web – Framework Laravel

 halaman baru, perlu menyisipkan file-file tersebut, untuk mengakses class-class
library nya.
5. Buka/jalankan file html yang telah dibuat pada browser, sehingga akan
menampilkan sebagai berikut:

B. Container

Container adalah element layout yang paling dasar pada bootstrap.

Sederhananya, container bisa kita anggap sebagai wadah yang menampung semua
element grid sistem atau element lain nya dari bootstrap. Ada 2 jenis container pada
bootstrap, yaitu container dan container-fluid. Jika website memiliki ukuran lebar
layoutnya tidak penuh, berarti website tersebut menggunakan container untuk lebar
layoutnya, sebaliknya jika menggunakan container-fluid, tampilan layout websitenya
akan berukuran penuh.
Container
Berikut langkah-langkah dalam membuat container standar:
1. Buatlah file container.html, kemudian isikan sintaks seperti berikut:

Perhatikan pada contoh penggunaan container di atas, dimana untuk

menggunakan container kita hanya perlu menambahkan class container pada
element paling luar untuk membungkus element-element lainnya.

37 Pemrograman Web – Framework Laravel

 2. Buka/jalankan file html yang telah dibuat pada browser, sehingga akan
menampilkan sebagai berikut:

Container-fluid
Berikut langkah-langkah dalam membuat container-fluid:
1. Buatlah file container_fluid.html, kemudian isikan sintaks seperti berikut:

Perhatikan pada contoh penggunaan container-fluid di atas, dimana untuk

menggunakan container kita hanya perlu menambahkan class container pada
element paling luar untuk membungkus element-element lainnya.
2. Buka/jalankan file html yang telah dibuat pada browser, sehingga akan
menampilkan sebagai berikut:

C. Grid System

Grid system adalah sistem pengaturan lebar untuk masing-masing komponen

yang ingin kita buat. Pengaturan ini bertujuan untuk mengatur ke-responsive-an
website yang kita buat. Jadi kita bisa mengaturnya sesuai yang kita inginkan dengan
sangat mudah tanpa perlu menulis coding css secara manual untuk membuat halaman
yang responsive. Pada bootstrap, grid dibagi menjadi 12 yang dapat dianalogikan

38 Pemrograman Web – Framework Laravel

sebagai 12 kotak yang bisa kita atur lebarnya dengan mudah. Ada beberapa jenis class
dasar dari bootstrap 4 untuk mengatur grid, diantaranya adalah:
• .col-* digunakan untuk mengatur grid secara otomatis
• .col-sm-* digunakan untuk mengatur grid pada ukuran layar monitor yang
berukuran kecil ( >=576px )
• .col-md-* digunakan untuk mengatur grid pada ukuran layar monitor yang
berukuran sedang ( >=720px )
• .col-lg-* digunakan untuk mengatur grid pada ukuran layar monitor yang
berukuran besar ( >=992px )
• .col-xl-* digunakan untuk mengatur grid pada ukuran layar monitor yang
berukuran ekstra besar ( >=1200px )
Pada urutan pertama ada class col-*, col-* digunakan untuk mengatur grid
secara default. Misalnya jika di akses dari layar yang berukuran kecil, besar ataupun
ekstra besar, ukuran gridnya akan tetap dan tidak berubah. jadi mau dibuka dari ukuran
layar berapa pun, hasilnya akan tetap mengikuti pengaturan grid col-* yang sudah
ditetapkan. Sedangkan col-sm-* digunakan untuk mengatur grid jika halaman website
diakses dari ukuran layar yang kecil seperti smartphone, maka pengaturan class col-sm-
* lah yang akan digunakan. Berikut contoh-contoh penggunaanya:
1. Buatlah file grid.html, kemudian isikan sintaks seperti berikut:

39 Pemrograman Web – Framework Laravel

40 Pemrograman Web – Framework Laravel
 2. Buka/jalankan file html yang telah dibuat pada browser, sehingga akan
menampilkan sebagai berikut:

41 Pemrograman Web – Framework Laravel

D. Navbar

Navbar (Navigation bar) merupakan komponen website berupa menu yang

biasanya diletakkan sisi atas/header website. Navbar juga sering disebut sebagai menu
utama dari sebuah website karena terletak dibagian header yang paling atas. Komponen
navbar sangat powerfull, selain responsive, pada navbar juga dapat diletakkan logo atau
nama website, atau bahkan nama dan logo sekaligus. Berikut langkah-langkah
membuat navbar pada bootstrap:
1. Buatlah file home.html, kemudian isikan sintaks sebagai berikut:

Pada gambar diatas, dapat dilihat bahwa kita menggunakan tag “nav” yang
kemudian ditambahkan kelas “navbar” dari bootstrap, sehingga akan
menghasilkan style navigasi default dari bootstrap. Sintaks diatas dimodifikasi

42 Pemrograman Web – Framework Laravel

 berdasarkan dokumentasi navbar oleh bootstrap, yang dapat diakses pada link
https://getbootstrap.com/docs/4.5/components/navbar/, seperti berikut:

2. Buka/jalankan file html yang telah dibuat pada browser, sehingga akan
menampilkan sebagai berikut:

E. Dropdown

Dropdown adalah sebuah menu yang berisikan kumpulan link-link yang

ditampilkan menurun kebawah jika menu tersebut di klik serta berfungsi sebagai
pengarah ke halaman web lain. Bootstrap telah menyediakan komponen dropdown
untuk dapat digunakan secara mudah dan cepat. Dalam pembuatan dropdown, hanya
perlu menggunakan class-class yang sudah tersedia. Sebelumnya, kita telah mendesain
menu navigasi, yang selanjutnya akan kita modifikasi dengan menambahkan fitur
dropdown, khususnya menu article. Berikut langkah-langkahnya:

43 Pemrograman Web – Framework Laravel

 1. Buka kembali file home.html, kemudian modifikasi sintaks navbar seperti
berikut (baris 27-39):

Pada gambar contoh dropdown di atas, isi dari konten yang ingin ditampilkan
pada bagian dropdown nya dapat diletakkan di dalam class “.dropdown-menu”
seperti di atas. Sintaks diatas dimodifikasi berdasarkan dokumentasi dropdowns
oleh bootstrap, yang dapat diakses pada link
https://getbootstrap.com/docs/4.5/components/dropdowns/, seperti berikut:

44 Pemrograman Web – Framework Laravel

 2. Refresh/jalankan kembali file html yang telah dibuat pada browser, sehingga
akan menampilkan sebagai berikut:

F. Card

Komponen card adalah komponen yang menggantikan komponen panel dari

versi bootstrap sebelumnya. Semenjak bootstrap merilis bootstrap versi 4, komponen
panel tidak lagi tersedia, dan digantikan dengan sebuah komponen yang bernama card.
Card memiliki tiga bagian di dalam nya, yaitu bagian header, body dan footer. Pada
bagian header card biasanya dituliskan dari judul konten yang berkaitan, pada bagian
body card biasanya dituliskan isi dari konten yang ingin ditampilkan, pada bagian footer
card biasanya dituliskan keterangan lebih lanjut atau bisa juga dibuat tombol.
Sebelumnya kita telah mendesain menu navigasi, kali ini kita akan mendesain konten
isi dibawahnya dengam memanfaatkan komponen card. Berikut langkah-langkahnya:
1. Buka kembali file home.html, kemudian tambahkan sintaks card seperti berikut
(baris 54-97):

45 Pemrograman Web – Framework Laravel

 Gambar di atas adalah contoh sintaks card yang sederhana, dimana terdapat
bagian header diisi oleh elemen “img”, sedangkan body diisi oleh teks
paragraph dan button. Sintaks diatas dimodifikasi berdasarkan dokumentasi
card oleh bootstrap, yang dapat diakses pada link
https://getbootstrap.com/docs/4.5/components/card/, seperti berikut:

2. Refresh/jalankan kembali file html yang telah dibuat pada browser, sehingga
akan menampilkan sebagai berikut:

G. Carousel

Carousel atau sering juga di sebut slideshow merupakan proses penampilan

gambar gambar yang di beri efek slide. Carousel digunakan untuk mempercantik
tampilan agar terlihat lebih menarik, dimana mayoritas website/situs menggunakan
slideshow/carousel bertujuan mempromosikan sebuah produk unggulan. Biasanya
carousel di letakkan pada halaman depan sebuah website dengan desain yang berbagai
macam dan tentunya menarik perhatian para pengunjung website. Sangat sulit untuk

46 Pemrograman Web – Framework Laravel

membuat slideshow atau carousel dengan cara manual, berbeda halnya dengan
menggunakan bootstrap yang sangat mudah dikarenakan bootstrap telah menyediakan
class untuk membuat fitur carousel. Selanjutnya, kita akan menambahkan carousel pada
halaman home yang telah kita buat sebelumnya agar lebih menarik. Berikut langkah-
langkahnya:
1. Buka kembali file home.html, kemudian tambahkan sintaks carousel seperti
berikut (baris 55-92, menggeser sintaks card sebelumnya:

Gambar di atas adalah contoh sintaks carousel yang sederhana, dimana kita
memasukkannya kedalam container terlebih dahulu. Carousel diatas dibuat
dengan menggunakan 3 slider gambar, namun kita dapat menambahkannya
sesuai dengan kebutuhan. Dalam membuat slider tersebut menjadi lebih
interaktif, juga ditambahkan tombol previous dan next. Sintaks diatas
dimodifikasi berdasarkan dokumentasi carousel oleh bootstrap, yang dapat
diakses pada link https://getbootstrap.com/docs/4.5/components/carousel/,
seperti berikut:

47 Pemrograman Web – Framework Laravel

 2. Refresh/jalankan kembali file html yang telah dibuat pada browser, sehingga
akan menampilkan sebagai berikut:

H. Form

Form merupakan tempat penginputan data sebelum diproses oleh sistem.

Elemen yang sering digunakan dalam komponen ini meliputi tag “input”, “textarea”,
dan “select”. Tag input merupakan tag yang dapat digunakan dalam form pengisian
berupa “text”, “password”, “checkbox”, “radiobutton”, sampai dengan tombol
“submit”. Tag textarea berfungsi hampir sama halnya dengan inputan text, hanya saja

48 Pemrograman Web – Framework Laravel

pada textarea ini dapat diisikan dengan lebih banyak teks didalamnya. Tag select biasa
digunakan oleh user untuk memilih data yang sudah disediakan. Dalam penggunakan
tag select selelu diikuti oleh “option” yang digunakan untuk membuat pilihan. Pada
bootstrap, form dapat digunakan dengan mudah, dimana kita hanya perlu menggunakan
kelas form-group agar tampilannya lebih menarik, tidak perlu menambahkan css.
Selanjutnya, kita akan mempraktekan cara membuat halaman yang berisikan komponen
form, yakni halaman contact.html. Berikut langkah-langkahnya:
1. Buatlah file contact.html, kemudian isikan sintaks sebagai berikut:

49 Pemrograman Web – Framework Laravel

 Dapat dilihat paga gambar diatas, pembuatan form menggunakan class “form
group” yang dimaksudkan untuk memisahkan masing-masing form serta label
untuk masing-masing elemen isian. Untuk membuat label, dapat menggunakan
elemen “label”. Selanjutnya pada bagian form, perlu diberikan/dimasukkan
class “.form-control”, kemudian kedua elemen ini diletakkan di dalam elemen
<div> yang kita beri class .form-group. Sintaks diatas dimodifikasi berdasarkan
dokumentasi form oleh bootstrap, yang dapat diakses pada link
https://getbootstrap.com/docs/4.5/components/forms/, seperti berikut:

50 Pemrograman Web – Framework Laravel

 2. Buka/jalankan file html yang telah dibuat pada browser, sehingga akan
menampilkan sebagai berikut:

51 Pemrograman Web – Framework Laravel