LAPORAN FINAL MODUL VII

BOOTSTRAP II

Disusun untuk Memenuhi Mata kuliah Pemrograman Web

Dibimbing oleh Bapak Achmad Hamdan

Oleh :

Thomas Andyka Putra

(170533628587)

S1 PTI’17 OFF C

UNIVERSITAS NEGERI MALANG

FAKULTAS TEKNIK
JURUSAN TEKNIK ELEKTRO
PRODI S1 PENDIDIKAN TEKNIK INFORMATIKA
MARET 2019
A. LATIHAN
1A. Latihan.htm
A. Source Code

B. Hasil
1B. Latihan.htm
A. Source Code

B. Hasil
1C. Latihan.htm
A. Source Code

B. Hasil
2. Latihan.htm
A. Source Code

B. Hasil
3. Latihan.htm
A. Source Code

B. Hasil
B. PRAKTIKUM
1. Praktikum
A. Source Code
 Source utama
 Sub Profil
 Sub Genre
 Sub contact wa
 Sub contact telepon
B. Hasil
 Home/Beranda

 Sub Profil
  Sub Contact

C. Penjelasan
 Program tersebut memiliki fungsi meta, untuk fungsi pertama digunakan
untuk mengatur karakter non latin (arab, jepang, china), kedua digunakan
untuk menyesuaikan mode dokumen dengan versi IE, lalu untuk meta
terakhir digunakan untuk mengatur lebar dari tiap perangkat agar responsif
 Bagian source code:
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style type="text/css">

Digunakan untuk melakukan pemanggilan bootstrap, jquery serta file js

dengan tujuan kita nanti dapat memanggil class dari bootstrap dimana
class tersebut sudah berisi source yang telah disiapkan
 Bagian source code:
body{
background-image: url(2819.jpg);
 background-size: cover;
background-repeat: no-repeat;
}
Digunakan untuk mengatur sebuah background dimana background
tersebut akan menyesuaikan diri dengan covernya langsung dari body
htmlnya
 Source code:
.konten{
height: 700px;
padding: 10px;
color: #fff;
}

Digunakan untuk mengatur suatu padding dan tinggi dari grid serta
memberikan warna putih pada teks yang ada pada grid selain itu pada grid
bagian ini juga menggunakan text-shadow untuk membuat efek cahaya
ungu dan putih atau glow pada judul website
 Source code:
.konten1{
background: rgb(8,22,36);
border-right: 1px dotted purple;
border-top: 2px solid purple;
border-bottom:2px solid purple;
border-left: 1px solid purple;
height: 380px;
text-align: center;
padding: 10px;
color: #fff;
opacity: 0.9;
}
Merupakan format dari grid bagian konten utama dimana nantinya konten
tersebut akan berwana ungu tua hasil dari property background lalu untuk
garis tersebut merupakan pemanggilan garis dari fungsi dotted lalu untuk
ukuran grid utama akan sesuai dengan sidebar dimana sama-sama
berukuran 380px, untuk mengatur transparansi grid kita dapat
mengaturnya menggunakan opacity sehingga memberikan efek transparan
dengan background dari body yang terlihat.

 Bagian code:
.menubar{
box-shadow: 2px -3px purple;
background: rgb(8,22,36);
 text-align: left;
height: 70px;
padding: 10px;
color: #fff;

digunakan untuk mengatur format dari grid menu bar dimana pada bagian
tertentu terdapat pengggunaan box shadow yang fungsinya memberikan
efek bayangan pada menu bar sesuai pengaturan ukuran dari shadow box
yang digunakan.

 Untuk bagian sidebar hampir sama dengan konten utama bedanya pada
sidebar tidak menggunakan dotted untuk bordernya

 untuk icon facebook dan Instagram terhubung langsung dengan akun

sosial media dimana didalamnya terdapat link yang menghubungkan
sosial media dari author website

 didalam menubar terdapat sebuah menu-menu dimana apabila terdapat

interaksi klik maka akan terhubung dengan link html lain, link html yang
dibuat ada 4 bagian, yaitu sub profil, genre dan contact.

 Setiap link pada menubar akan mengubah isi dari konten utama dimana isi
tersebut akan menyesuaikan diri dengan link yang terhubung misalnya
menu profil akan terhubung dan membuka link sub_profil.html begitu pula
untuk menu lainnya juga sama

 Selain itu program ini juga memiliki drop-toogle pada bagian contact
sehingga hampir sama dengan fungsi list yang akan menampilkan list
menu seperti contact wa atau telpon

 Untuk menambahkan icon kita dapat menambahkan glypicon dengan cara

memanggil fungsi bootstrap.