Modul Web Programming - Pertemuan 4
Diunggah oleh
cloud.085730102088Modul Web Programming - Pertemuan 4
Diunggah oleh
cloud.085730102088Modul Pertemuan 4
FRAMEWORK CSS (BOOTSTRAP)
Tujuan
1. Siswa dapat memahami tentang framework
2. Memahami penggunaan framework bootstrap
3. Membuat desain website menggunakan bootstrap
A. Apa itu Bootstrap ?
Beberapa tahun terakhir, Bootstrap adalah senjata andalan para developer saat menciptakan
website. Tak lain karena Bootstrap bisa membantu mereka membuat website dengan cepat dan mudah.
Bootstrap adalah framework web development berbasis HTML, CSS, dan JavaScript yang dirancang untuk
mempercepat proses pengembangan web responsive dan mobile-first (memprioritaskan perangkat seluler).
Selain bisa digunakan untuk mengembangkan website dengan lebih cepat, Bootstrap adalah framework
gratis yang bersifat open-source. Skrip dan syntax yang disediakan Bootstrap bisa diterapkan untuk berbagai
komponen dalam desain web. (sumber : https://www.hostinger.co.id/)
Seluruh dokumentasi / panduan penggunaan bootstrap dapat diakses secara online melalui situs
https://getbootstrap.com/ . Untuk panduan awal penggunaannya dapat dilihat di halaman Documentation
dengan klik menu Docs.
Modul Pertemuan 4.docx 1
B. Instruksi Praktik
• Buat file baru dengan nama latihan_bootstrap.html
• Ketikkan format / elemen html standart, kemudian tautkan bootstrap ke halaman dengan menambahkan
tag <link> pada elemen <head> dan tag <script> sebelum akhir elemen body (</body>). Contoh dapat
dilihat di dokumentasi bootstrap bagian introduction.
• Buatlah elemen form di dalam tag <body> untuk mengisi email, password, nama lengkap, alamat, foto
profil. Contoh elemen form bootstrap dapat dilihat melalui submenu Forms -> Form Control.
Input email :
Input password :
Input nama lengkap :
Input alamat :
Modul Pertemuan 4.docx 2
Input file foto :
Hasil akhir file latihan_bootstrap.html :
Setelah menambahkan beberapa elemen tersebut, silakan buka file latihan_bootstrap
menggunakan browser kemudian perhatikan desain yang dihasilkan jika kita menggunakan framework
css bootstrap. Dapat kita simpulkan bahwa jika menggunakan bootstrap, anda bisa menciptakan website
responsive dengan mudah tanpa perlu melakukan coding dari awal.
• Buatlah elemen navbar / menu menggunakan bootstrap, silakan cari dokumentasinya di website dengan
kata kunci “Nav”. Sebagai contoh, kita akan menambahkan elemen navbar pada elemen body (sebelum
elemen form sebelumnya) dengan kode sebagai berikut :
Hasil :
Modul Pertemuan 4.docx 3
Selanjutnya kita akan mengatur layout website menggunakan class container, dokumentasi dapat dicari
dengan kata kunci “container”, contoh : <div class="container">. Sebelum elemen form kita tambahkan
class container > row > col-12. Keterangan masing – masing class dapat dilihat di website dokumentasi
bootstrap. Sehingga kode menjadi seperti gambar berikut :
Lakukan refresh pada browser atau buka kembali file latihan_bootstrap.html dan amati perubahan apa
yang terjadi setelah menambahkan beberapa class. Selanjutnya kita akan memberikan jarak / margin
untuk bagian container dengan navbar, tambahkan class “mt-5” sehingga menjadi
<div class="container mt-5">.
Ukuran margin yang disediakan oleh bootstrap sangat terbatas, jika kita ingin mengubah / memberi
margin sesuai keinginan kita, maka dapat menggunakan inline style dengan property margin-top.
Contoh : <div class="container" style="margin-top: 100px;">
Modul Pertemuan 4.docx 4
• Selanjutnya kita akan membuat konten Card , card yang disediakan oleh bootstrap merupakan wadah
sebuah konten yang fleksibel dan sering kita jumpai pada website pada umumnya. Contohnya dapat
dilihat di website dokumentasi dengan kata kunci “Card” .
Di dalam class container, setelah class col-12 tambahkan div (division) dengan class card, kemudian
tambahkan lagi division dengan class card-body.
Susunan : div.card > div.card-body
Modul Pertemuan 4.docx 5
Setelah menambahkan division baru (card & card-body), jangan lupa untuk memberikan tag penutup
“</>” setelah elemen form untuk mengakhiri 2 division baru (card & card-body). Perhatikan kode berikut
ini (container division).
• Tambahkan judul kartu menggunakan divisi card-header sebelum div.card-body (divisi card-body), dan
buat tombol simpan pada divisi card-footer setelah penutup divisi card-body. Dokumentasi card-header,
card-footer dan tombol / button dapat dilihat di website bootstrap (variasi sesuaikan keinginan masing
– masing). Sehingga kode akan menjadi seperti gambar berikut :
Modul Pertemuan 4.docx 6
• Silakan refresh / buka kembali file latihan_bootstrap, kemudian amatilah perubahan apa saja yang
terjadi.
• Contoh tampilan :
C. Post Test
1. Berdasarkan latihan di atas, apa saja kelebihan dan kekurangan jika kita mengembangkan website
menggunakan bootstrap ?
2. Jelaskan apa yang dimaksud dengan division dan section?
Modul Pertemuan 4.docx 7
3. Lakukanlah perubahan pada kode HTML / halaman yang sudah anda buat sesuai dengan keinginan &
selera anda, pernahkah terjadi error ? Bagaimanakah anda menyelesaikannya ?
D. Tugas 4
1. Buatlah form “Pendaftaran Siswa Web Programming” seperti Tugas 1 pada Modul Pertemuan 1
menggunakan framework bootstrap. Desainlah form tersebut semenarik mungkin sesuai dengan
keinginan anda !
2. Tambahkan elemen tabel dengan kolom yang sesuai dengan isian form.
3. Desainlah seluruh elemen (form & tabel) dalam satu halaman / file menggunakan bootstrap.
