LAPORAN MODUL IV

PRAKTIKUM PEMROGRAMAN WEB

“BOOTSTRAP 1”

Disusun untuk Memenuhi Matakuliah Praktikum Pemrograman Web

Dibimbing oleh Achmad Hamdan, S.Pd., M.Pd.

Oleh:
Fajri Novitasari 170533628549

S1 PTI ‘17 OFF A

UNIVERSITAS NEGERI MALANG

FAKULTAS TEKNIK
JURUSAN TEKNIK ELEKTRO
PRODI S1 PENDIDIKAN TEKNIK INFORMATIKA
Maret 2019
I. Tugas Latihan
1. Nama Program : Membuat Tombol
Source Code :

Hasil Program :
2. Nama Program : Membuat Tombol
Source Code :
 Hasil Program :

3. Nama Program : Menampilkan Gambar

Source Code :
 Hasil Program :

4. Nama Program : Membuat Tabel

Source Code :
 Hasil Program :

5. Nama Program : Membuat Pesan Alert

Source Code :
 Hasil Program :

6. Nama Program : Membuat Jumbotron

Source Code :
 Hasil Program :

7. Nama Program : Membuat Icon

Source Code :
 Hasil Program :

8. Nama Program : Membuat Pagination dan Breadcrumb

Source Code :
 Hasil Program :

9. Nama Program : Membuat Navigation Bar

Source Code :
 Hasil Program :

10. Nama Program : Membuat Menu Drop Down pada Navigation Bar
Source Code :

Hasil Program :
11. Nama Program : Membuat Form
Source Code :

Hasil Program :
II. Tugas Praktikum
1. Fungsi dari ketiga tag <meta>
 <meta charset=”utf-8”/> berfungsi untuk memberi informasi terhadap
browser dan search engine untukmelakukan pengkodean karakter sesuai
ketentuan UTF-8.
 <meta http-equiv=”X-UA-Compatible” content=”IE=edge”/> digunakan
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.
 <meta name=”viewport” content=”width=device-width, initial-
scale=1”/> digunakan pada web dengan desain responsive. Secara garis
besar, meta tag viewport ditambahkan agar desain responsive dapat
tampil sempurna layar berukuran kecil (seperti tablet atau smartphone).
Tag meta viewport akan memberikan intruksi ke browser untuk mengatur
dimensi dan sekala web. Nilai width=device-width, artinya lebar web
akan mengikuti lebar dari layar perangkat yang digunakan. Nilai inital-
scale=1, artinya web akan diberikan skala (zoom) menjadi 1 (normal).
2. Nama Program : Pesan Alert Memiliki Tombol Silang “X” (Close)
Source Code :

Hasil Program :

Penjelasan :
Pada tampilan web diatas, menunjukkan pesan alert yang terdapat tombol
silang “x” yang berfungsi untuk menutup pesan alert tersebut. Untuk
membuat pesan alert tersebut menggunakan class alert alert-success fade in,
alert alert-info fade in, alert alert-warning fade in, dan alert alert-danger fade
 in. Fungsi fade in adalah untuk memberikan efek pada saat pesan alert ditutup
yaitu efek memudar. Untuk menambahkan tombol silang menggunakan <a
href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
3. Nama Program : Halaman Profil
Source Code :
Hasil Program :

Penjelasan :
Pada tampilan halaman profil diatas menggunakan bantuan CSS dalam
memberikan style ke dalam halaman profil. Pada header terdapat tampilan
sapaan “Hallo, Salam Kenal” yang pada css dengan selector navbar-brand
diatur letter-spacing sebesar 5px dan padding left: 30px. Kemudian pada
navbar-right terdapat Profil, Hobi, dan Kontak, pada css dengan selector
navbar-nav diatur letter-spacing sebesar 5px dan padding left: 30px. Pada isi
dari halaman profil terdapat Kalimat perkenalan dengan disertai foto yang
pada css diatur pada selector isi, h3, dan img. Selanjutnya dibawah isi dari
halaman profil terdapat footer dengan terdapat button dibawahnya, pada css
diatur penulisan text dengan h5.