LAPORAN MODUL Bootstrap 2

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
MARET 2019
1. Membuatformvertikal.html
a. Sintax :

b. Hasil Output Sintax di atas :

c. Penjelasan :
Latihan diatas yaitu cara membuat form vertical dalam bootstrap yaitu form
yang dasar digunakan oleh bootstrap. Dengan menggunakan coding form-group
Untuk membuat form dengan menggunakan class bootstrap, anda bisa
menggunakan class “form-control” pada tag <input>, <textarea>, <select> dan
element form yang bisa digunakan lainnya, dan tambahkan class “form-group”
untuk membalut element sebuah form.
2. Membuat Form Inline.html
a. Sintax :

b. Hasil Output Sintax diatas :

c. Penejelasan :
Form Inline yaitu form yang label inputannya sejajar dengan text (nama
anda atau alamat anda). Dengan menggunakan coding form-inline Untuk membuat
form dengan menggunakan class bootstrap, anda bisa menggunakan class “form-
control” pada tag <input>, <textarea>, <select> dan element form yang bisa
digunakan lainnya, dan tambahkan class “form-group” untuk membalut element
sebuah form.
3. MembuatformHorizontal.html
a. Sintax :
b. Hasil output Sintax diatas :

c. Penjelasan :
Form yang memiliki bentuk horizontal, artinya posisi label dan input form
terletak horizontal. Untuk membuat form dengan menggunakan class bootstrap,
anda bisa menggunakan class “form-control” pada tag <input>, <textarea>,
<select> dan element form yang bisa digunakan lainnya, dan tambahkan class
“form-group” untuk membalut element sebuah form.
4. Grid.html
a. Sintax :
 b. Hasil Output Sintax Diatas :

c. Penjelasan :
Pada latihan diatas yaitu tentang laman atau grid system pada bootstrap ,
memahami cara kerja bootstrap, Anda perlu tahu tentang grid bootstrap. Pada
dasarnya grid bootstrap adalah tentang bagaimana bootstrap membagi-bagi
suatu laman web sehingga proses layout menjadi mudah dan sistematis.
Kelas Grid
Bootstrap memiliki 4 buah kelas grid:
1) col-lg-* Digunakan untuk mengatur grip pada monitor computer yang
berukuran besar.
2) col-md-* Digunakan untuk mengatur grip pada monitor computer yang
berukuran sedang.
3) col-sm-* Digunakan untuk mengatur grip pada monitor computer yang
berukuran tablet.
4) col-xs-*Digunakan untuk mengatur grip pada monitor computer yang
berukuran handphone.

5. GridLainnya.html
a. Sintax :
b. Hasil Output Sintax diatas :

c. Penjelasan :
Latihan
diatas merujuk pda pembagian-pembagian grid sebenarnya sesuai dengan yang kita
inginkan maksimal panjang grid tersebut adalah 12 grid. Span header merupakan
12 grid, span konten gabungan 9 grid span slide gabungan dari 3 drid, dan span
footer sama dengan header yaitu 12 grid. Saat menggabungkan grid perlu diingat
bahwa setiap baris harus terdiri dari total 12 grid.
6. TugasPraktikum.html
a. Sintax :
b. Hasil Output Sintax diatas :

Penjelasan : ini adalah tampilan slide dengan header diatasnya

Penjelasan : ini adalah Tentang (header dari web tersebut).

 Penjelasan : ini adalah tampilan ketika tombol login diatas di klik oleh user ketika
ingin masuk ke akunnya
c. Penjelasan umum :
Diatas merupakan Tugaspraktikum yang sesuai dengan imajinasi saya sendiri
yaitu tentang membuat jasa website clothingan online dengan membagi beberapa
bagian yaitu header, footer, slide, tentang dan login. Disini saya di header
menampilkan sebuah gambar logo yang berada di navbar .
Setelah itu baru saya membikin side yang ada di datas silde tersebut ada sedikit
tulisan promosi dan di dalamnya ada gambar, kemudian tampilan Tentang yang
sangat amat sederhana dengan membuat 2 kolom menjadi satu sintax ada diatas
serta sedikit penjelasan singkat di salam coding.
Kemudian bagian login disini saya membuat sesuai dengan yang saya inginkan.
Kemudian footer yang terdapat pada bawah website.