PRAKTIKUM 5

Bootstrap (Jumbotrom, Modal, Carousel) + Font Awesome

A. Konfigurasi
1. Download file yang diperlukan untuk praktikum kali ini di learning.polibatam.ac.id terdiri dari:
- File Bootstrap
- File Fontawesome
- File jquery
- file images
2. Ekstrak file bootstrap yang telah didownload letakkan di lokasi penyimpanannya pada direktori
C > xampp > htdocs, ubah nama folder menjadi bootstrap.
3. Ekstrak file fontawesome dan file images kemudian pindahkan kedalam folder bootstrap.
4. Pindahkan file jquery kedalam folder js pada bootstrap

B. Jumbotron
1. Buat file baru ketikkan kode berikut, simpan di folder bootstrap dengan nama jumbotron.html

2. Jalankan browser ketikkan localhost/jumbotron.html, tuliskan hasilnya dibawah ini.

C. Carousel
1. Buat file baru ketikkan kode berikut, simpan di folder bootstrap dengan nama carousel.html

2. Buka browser ketikkan localhost/bootstrap/carousel.html, tuliskan hasilnya dibawah ini

D. Modal
1. Buat file baru ketikkan kode berikut, simpan di folder bootstrap dengan nama modal.html

Keterangan:

Data-target harus sama dengan id .

2. Buka browser ketikkan localhost/bootstrap/modal/html, tuliskan hasilnya dibawah ini

3. Latihan penggunaan Modal
a. Desain form berikut:

b. Ketika di klik tombol tambah data akan muncul form berikut

E. FontAwesome
1. Buat file baru ketikkan kode berikut, simpan di folder bootstrap dengan nama
fontawesome.html

2. Buka url : https://fontawesome.com/icons?d=gallery&p=2

3. Ketikkan graduation pada kotak pencarian seperti gambar berikut
 4. Klik salah satu icon yang diinginkan
5. Copy kode Html yang disediakan dan letakkan di dalam body pada file fontawesome.html

6. Tampilan akhir

7. Jalankan browser ketikkan localhost/bootstrap/fontawesome.html

8. Silahkan anda pilih icon yang berbeda minimal 10 icon.

Kegiatan Praktikum
Kerjakan semua latihan praktikum yang ada, kemudian upload hasil praktikum dalam bentuk zip dengan
nama file P5_WEB_NIM.