LAPORAN MODUL Bootstrap 1

Disusun untuk memenuhi matakuliah Pemrogramman Berbasis Web Dibimbing oleh Bapak
Achmad Hamdan, S.Pd., M.Pd.

Disusun Oleh :
Andika Fiby Candra Pratama
130533608141
OFF B 17

UNIVERSITAS NEGERI MALANG

FAKULTAS TEKNIK
JURUSAN TEKNIK ELEKTRO
PROGRAM STUDI S1 PENDIDIKAN TEKNIK INFORMATIKA
FEBRUARI 2019
 BOOTSTRAP 1
1. Tombol1.html
a. Sintax :

b. Hasil output dari sintax diatas :

c. Penjelasan :
Latihan diatas merupakan penerapan menggunakan bootstrap beberapa
class yang di gunakan untuk menciptakan bentuk tombol yang menarik adalah
 btn class untuk membuat tombol.
 btn-xs membuat tombol dengan ukuran sangat kecil.
 btn-sm membuat tombol dengan ukuran yang kecil.
 btn-md membuat tombol dengan ukuran sedang.
 btn-lg membuat tombol dengan ukuran besar.
 btn-danger membuat tombol berwarna merah.
 btn-default membuat tombol dengan warna standar bootstrap.
 btn-warning membuat tombol berwarna kuning.
  btn-primary membuat tombol berwarna biru.
 btn-info membuat tombol berwarna biru langit.
 btn-success membuat tombol berwarna hijau.
Jadi dengan menggunakan bootstrap sangat memudahkan kita untuk
mendesain suatu web sehingga nampak bagus.

2. Tombol2.html
a. Sintax :
 b. Hasil Output Sintax diatas :

c. Penjelasan :
Latihan diatas berfokus pada besar kecilnya suatu tombol dengan
menggunakan class btn-xs (membuat tombol dengan ukuran sangat kecil), btn-
sm (membuat tombol dengan ukuran yang kecil),btn-md (membuat tombol
dengan ukuran sedang),btn-lg (membuat tombol dengan ukuran besar). Latihan
diatas menunjukan jika kitta ingin merubah ukuran pada tombol dengan
menggunakan bootstrap kita hanya menggunakan class seperti di atas tersebut.

3. Gambar1.html
a. Sintax :
b. Hasil Output Sintax diatas :

c. Penjelasan :
Latihan diatas adalah class untuk mengatur gambar ssesuai dengan keinginan
class-class tersebut sebagai berikut
 img-responsive membuat gambar menjadi responsive saat
dijalankan pada semua bentuk dan ukuran resolusi.
 img-rounded membuat gambar berbentuk round atau pada sisi
sudut gambar memiliki bentuk melengkung.
 img-circle membuat gambar dengan bentuk lingkaran.
 img-thumbnail membuat gambar thumbnail dengan bootstrap.
4. Tabel.html
a. Sintax :

b. Hasil Output Sintax diatas :

c. Penjelasan :
Latihan diatas adalah class pada bootstrap yang di gunakan untuk memdesign
atau membuat tabel. Class yang bisa di gunakan ialah sebagai beriut :
 table membuat tabel biasa.
 table-striped membuat baris tabel yang bergaya belang-beling (strip).
 table-bordered membuat tabel memiliki garis.
 table-hover membuat efek hover pada row tabel saat cursor mouse
diletakkan di atas row tabel.
5. PesanAlert.html
a. Sintax :

b. Hasil Output Sintax diatas :

c. Penjelasan :
Latihan diatas yaitu membuat pesan Alert class yang di gunakan ialah :
 alert-success membuat pesan alert berwarna hijau, biasanya pesan
alert ini digunakan untuk membuat pesan sukses.
 alert-info membuat pesan alert berwarna biru, biasanya pesan alert
ini digunakan untuk membuat pesan yang berupa informasi.
 alert-warning membuat pesan alert berwarna kuning, biasanya
pesan alert ini digunakan untuk membuat pesan yang berupa peringatan.
 alert-danger membuat pesan alert berwarna merah, biasanya pesan
alert ini digunakan untuk membuat pesan gagal.
6. Jumbotron.html
a. Sintax :

b. Hasil Output Sintax Diatas :

c. Penjelasan :
Latihan diatas merupakan semacam papan pengumuman, atau komten
informasi dengan menggunakan class=”jumbotron”.
7. Icon.html
a. Sintax :

b. Hasil Output Sintax diatas :

c. Penjelasan :
Latihan diatas yaitu untuk menampilkan sebuah icon dengan penggunaan class
glypicon di dalam tag Span. Bagaimana menggunakan class icon dan
menampilkan icon” tertentu.
8. Pagination.html
a. Sintax :

b. Hasil Output Sintax Diatas :

c. Penjelasan :
Latihan diatas merupakan class untuk membuat pagination atau page atau
setelan halaman dengan cepat dan sudah modern.
9. NavigationBar.html
a. Sintax :

b. Hasil Output Sintax diatas :

 c. Penjelasan :
Latihan diatas untuk membuat navigasi bar dengan menggunakan tag nav di
dalam body contohnya ialah

Ini adalah nav di dalam body, navigasi bar seperti menu bar yang bertujuan
untuk mempermudah user atau pengguna untuk menuju page yang mereka
ingin buka.

10. MenuDropDown.html
a. Sintax :

b. Hasil Output Sintax diatas :

 c. Penjelasan :
Latihan ini hampir sama dengan latihan sebelumnya tetapi yang membedakan
yaitu latihan ini di tambah class dropdown, dengan sintak berikut
<class=”dropdown-menu”> ini akan otomatis menambahkan menu bar ketika
di klik akan ada menu anak di bawahnya.

11. Form.html
a. Sintax :
 b. Hasil Output Sintax diatas :

c. Penjelasan :
Latihan diatas ialah membuat Form dengan Menggunakan fungsi-fungsi yang
ada di bootstrap dengan menambahkan <form>, <class=”form-
group”>,<class=”form-control”>.
12. Tugas Praktikum 1
a. <Meta charset=”utf-8> berfungsi untuk memberi instruksi kepada web
browser tentang bagaimana cara menterjemahkan karakter-karakter yang ada
di dalam halaman HTML.
b. <meta http-equiv="X-UA-Compatible" content="IE-edge"/> berfungsi untuk
menangani permasalahan terkait web browser internet Explorer. Tag ini akan
memaksa IE (Internet Explorer) untuk tidak masuk ke mode compatible view.
compatible view merupakan mode yang aktif ketika halaman web diakses dari
komputer lokal atau intranet
c. <meta name=”viewport” content=”width=device-width, initial-scale=1”/>
berfungsi agar layout menjadi fleksibel dan layout akan ditampilkan seperti
yang dimaksudkan, initinya web menjadi sangan responsif.
13. TugasPraktikum2.html
a. Sintax :

b. Hasil Output Sintax diatas :

Tampilan awal ketikan belum di tekan tombol silang

 Ini ketika Alert sukses sudah di close

Ini ketika Alert Info sudah di close

Ketika Aler Peringatan sudah di close

Ini ketika sudah di close semua

c. Penjelasan :
Tugas Praktikum diatas hampir sama dengan latihan no 5 tetapi disini kita
menambahkan tanda silang atau tombol silang ketika di klik alert tersebut
akan hilang, dengan menggunakan <a href="#" class="close" data-
dismiss="alert" aria-label="close">.
14. TugasPratikum3.html
a. Sintax :
b. Hasil Output Sintax diatas :

c. Penjelasan :
Pada tugas praktikum diatas kita di suruh untuk membuat suatu page
yang sesuai dengan modul, disini saya membuat tampilan sederhana saja
dengan class-class sudah di pelajari di latihan-latihan. Pertama membuat
navbarnya dengan menggunakan class yang div di dalam nav seperti ini
codingnya.

Akan muncul seperti pada gambar di bawah ini

Kemudian div selanjutnya di bawah ini codingnya

Seperti ini hasilnya

Warna pada bacground ini saya mengambil class berikut

Sedang kan foto menjadi bulat saya menggunakan fungsi img-circle.

Sehingga foto yang di tampikan akan berbentuk bulat atau lonjong seperti
pada gambar diatas.
Div yang selanjutnya menggunakan coding seperti ini

Aka tampil seperti ini

Disini saya menggunakan class button dan memakai class glyphion-

search untuk memanggil icon pencarian dan warna pada latar
belakangnya saya menggunakan sintax di bawah ini