LAPORAN LATIHAN

MATA KULIAH PEMROGRAMAN INTERNET DAN E-COMMERCE

NAMA : RHEDO FRANCESCO

NPM : G1A019064

DOSEN PENGAMPU : MOCHAMMAD YUSA, S.KOM, M.KOM

PROGRAM STUDI INFORMATIKA

FAKULTAS TEKNIK

UNIVERSITAS BENGKULU

2021
Modul 3

 Latihan 1(Border)

Source code:

Output:

1
RHEDO FRANCESCO G1A019064
Penjelasan:

Pada code diatas, terdapat tag p yang mana digunakan untuk membuat paragraph.
Kemudian, dengan menggunakan internal style css dapat memberikan border style pada masing-
masing paragraph dengan menggunakan atribut border style.

 Latihan 2(Gambar)

Source code

Output:

2
RHEDO FRANCESCO G1A019064
Penjelasan:

Pada code diatas, diawali dengan mengambil selector berupa body, yang mana pada body
tersebut kita berikan background berupa gambar dengan menggunakan atribut background-
image.

 Latihan 3(Bayangan)

Source code

3
RHEDO FRANCESCO G1A019064
 Output:

Penjelasan:

Pada source code diatas, kita awali dengan membuat sebuah div class dan tag h1.
Kemudian menambahkan teks pada masing-masing tag div dan juga h1. Setelah itu, dengan
menggunakan selector masing-masing nama kelas, kita berikan warna dan posisi pada masing-
masing kelas. Dan pada tag h1 ditambahkan bayangan menggunakan atribut text-shadow.

4
RHEDO FRANCESCO G1A019064
  Latihan 4(Hyperlink)

Source Code

Output:

Penjelasan:

Pada code diatas, kita awali dengan menggunakan tag a yang digunakan untuk membuat
teks link. Dan kemudian, mengubah warna masing keadaan link yaitu link, visited, active, dan
juga hover.

5
RHEDO FRANCESCO G1A019064
  Latihan 5(Form)

Source code style.css:

Source code form:

6
RHEDO FRANCESCO G1A019064
 Output:

Penjelasan:

Source code diatas diawali dengan membuat form dengan menggunakan tag form. Lalu
membuat komponen form yang dibungkus dengan menggunakan table, Sehingga atribut form
berada dalam table yang membuat tampilan dari form lebih menarik. Terakhir adalah pemberian
style menggunakan eksternal css.

 Laporan modul 3 soal nomor 1

Buatlah border form pada latihan 5 (Form) menggunakan salah satu style border pada
latihan 1 (style border yang digunakan bebas).

Source code:

7
RHEDO FRANCESCO G1A019064
 8
RHEDO FRANCESCO G1A019064
 Output:

Penjelasan:

Source code diatas, merupakan source code pada latihan 5. Bedanya adalah di sini kita
memberi border pada form nya yaitu berupa border dashed (garis putus-putus) dengan warna
hitam dan ketebalan 5 piksel.

 Laporan modul 3 soal no 2

Isilah penggunaan cara penempatan CSS style pada latihan-latihan yang telah dicoba
pada bagian percobaan.

No Nama Latihan Penempatan CSS Style

1 Latihan 1 (Border) Internal Style
2 Latihan 2 (Gambar) Internal Style
3 Latihan 3 (Bayangan) Internal Style
4 Latihan 4 (Hyperlink) Internal Style
5 Latihan 5 (Form) Eksternal Style

9
RHEDO FRANCESCO G1A019064
Modul 4

 Latihan 1(Typography)

Source code 1.1:

10
RHEDO FRANCESCO G1A019064
 Source code 1.2:

Output:

11
RHEDO FRANCESCO G1A019064
Penjelasan:

Source code diatas merupakan contoh dalam menggunakan beberapa jenis teks dalam
bootstrap yaitu h1, h2, h3, h4, h5, h6, small, span, p, cite, text-muted, text-primary, text-success,
text-info, text-warning, dan juga text-danger.

12
RHEDO FRANCESCO G1A019064
  Latihan 2(Tabel)
Source code:

13
RHEDO FRANCESCO G1A019064
 Output:

Penjelasan:
Source code diatas merupakan cara untuk membuat tabel dengan menggunakan bootstrap
dan memberi warna pada tiap-tiap kolom atau baris pada table menggunakan warna yang telah
disediakan oleh bootstrap yaitu active, success, info, warning, dan danger.

 Latihan 3(Form)

Source code:

14
RHEDO FRANCESCO G1A019064
 15
RHEDO FRANCESCO G1A019064
 16
RHEDO FRANCESCO G1A019064
 Output:

17
RHEDO FRANCESCO G1A019064
Penjelasan:

Source code diatas adalah contoh untuk membuat form dengan menggunakan kelas yang
tersedia di bootstrap. Pada contoh diatas, saya menambahkan CSS style untuk membuat
background abu-abu pada form tersebut. Untuk membuat form, kita dapat menggunakan kelas
form-horizontal pada tag form. Untuk tag input menggunakan kelas form-control, kemudian
untuk tag label menggunakan kelas control-label, lalu untuk tag checkbox menggunakan kelas
checkbox-inline, dan terakhir untuk tombol submit menggunakan kelas btn.

 Latihan 4(Dropdown Menu)

Source code:

18
RHEDO FRANCESCO G1A019064
 Output:

19
RHEDO FRANCESCO G1A019064
Penjelasan:

Source code diatas merupakan contoh untuk membuat navigation bar dengan
menggunakan kelas yang ada pada bootstrap. Yang mana, navbarnya sendiri, itu sudah bersifat
responsive. Artinya, apabila pada layar kecil, maka navbar akan tergabung dalam hamburger
navigation seperti gambar output yang bawah.
 Latihan 5(Grid System)
Source code:

20
RHEDO FRANCESCO G1A019064
 21
RHEDO FRANCESCO G1A019064
 Output:

Penjelasan:

22
RHEDO FRANCESCO G1A019064
 Code di atas merupakan contoh untuk membuat sebuah grid atau tata letak menggunakan
kelas yang telah disediakan oleh bootstrap. Pertama-tama, kita harus membuat row terlebih
dahulu, kemudian membuat kolom dengan menggunakan kelas col. Untuk col, ada beberapa
macam, yaitu col-sm artinya untuk layar kecil, col-md untuk layar menengah, dan col-lg untuk
layar besar atau desktop.

 Latihan 6(Jumbotron)

Source code:

Output:

23
RHEDO FRANCESCO G1A019064
Penjelasan:

Code diatas merupakan cara membuat sebuah jumbotron dengan menggunakan kelas
yang ada pada bootstrap. Yang paling penting dalam membuat jumbotron dengan menggunakan
bootstrap adalah menambahkan kelas jumbotron pada kelas yang kita inginkan.

 Laporan modul 4 soal 1

Halaman Berikut ini adalah gabungan dari berbagai latihan yang telah anda coba di atas
yaitu Navigasi Menu, Jumbotron, dan Grid System. Berdasarkan latihan-latihan di atas
gabungkanlah ketiga latihan tersebut menjadi satu halaman web seperti gambar berikut. Jangan
lupa ganti JUDUL BRAND dengan NIM anda masing-masing. Kemudian Printscreen hasilnya
dengan berbagai resolusi seperti Large Size, medium size dan small size. Lampirkan Source
code-nya pada lembar kerja Laporan anda masing-masing.

Source code:

24
RHEDO FRANCESCO G1A019064
 25
RHEDO FRANCESCO G1A019064
 26
RHEDO FRANCESCO G1A019064
 Output:

Penjelasan:

Code di atas merupakan contoh untuk membuat sebuah tampilan awal web yang
sederhana, yaitu dengan memasukkan beberapa komponen web diantaranya navigation bar,
jumbotron, dan juga content. Pada contoh diatas, terdapat 3 jenis tampilan pada saat web dibuka
yaitu pada layar besar, menengah, dan kecil. Tentunya, komponen web ini dibuat dengan
menggunakan kelas yang telah tersedia pada bootstrap. Dan hanya menambahkan kelas tersebut
pada komponen yang telah disesuaikan dengan kebutuhan pembuatan web.

27
RHEDO FRANCESCO G1A019064