LAPORAN RESMI

MODUL VI
(BOOTSTRAP)

PROGRAM BERBASIS WEBSITE

NAMA : GIRALDO STEVANUS

N.R.P : 220441100064
DOSEN : IBU SRI HERAWATI
ASISTEN : ABDUL WAKHID
TGL PRAKTIKUM : 29 MARET 2023

Disetujui : 11 APRIL 2023

Asisten

ABDUL WAKHID
21.04.411.00106

LABORATORIUM BISNIS INTELIJEN SISTEM

PRODI SISTEM INFORMASI
JURUSAN TEKNIK INFORMATIKA
FAKULTAS TEKNIK
UNIVERSITAS TRUNOJOYO MADURA
 BAB I
PENDAHULUAN

1.1 Latar Belakang

Bootstrap adalah suatu metode statistik yang digunakan untuk membuat estimasi
dari parameter suatu populasi dengan memanfaatkan sampel yang diambil dari
populasi tersebut. Metode ini sangat populer karena sifatnya yang mudah
digunakan, dan memerlukan sedikit asumsi mengenai distribusi data. Bootstrap
pertama kali diperkenalkan oleh Bradley Efron pada tahun 1979, dan sejak itu
telah menjadi salah satu metode yang paling banyak digunakan dalam analisis
data.

Bootstrap didasarkan pada ide bahwa jika kita ingin membuat estimasi yang baik
dari parameter populasi, maka kita dapat menggunakan informasi yang
terkandung dalam sampel yang kita miliki. Dengan kata lain, kita dapat
memanfaatkan informasi yang kita peroleh dari sampel untuk membuat perkiraan
tentang parameter populasi yang sebenarnya.

Cara kerja bootstrap adalah dengan mengambil banyak sampel acak dengan
pengembalian dari populasi yang sama, dan kemudian membuat perkiraan dari
setiap sampel ini. Dari kumpulan perkiraan ini, kita dapat menghitung estimasi
yang lebih baik dari parameter populasi yang sebenarnya.

Bootstrap sering digunakan dalam berbagai bidang, termasuk statistik, ekonomi,

ilmu sosial, dan banyak lagi. Metode ini terus berkembang dan terus digunakan di
banyak bidang, karena sifatnya yang mudah digunakan dan efektif.
1.2 Tujuan
 Mampu Mahasiswa mampu memahami konsep Class dan
 Object dalam Pemrograman Berorientasi Objek serta
 Mampu mengimplementasikannya.
 Mahasiswa mampu memahami atribut dan method dalam Pemrograman
Berorientasi Objek serta
  Mampu mengimplementasikannya.

BAB II
DASAR TEORI

2.1 Bootstrap
Bootstrap merupakan framework HTML, CSS, Javascript
populer untuk membangun situs web yang responsive. RWD
(Responsive Web Design) adalah desain situs yang otomatis
akan menyesuaikan diri agar tampil baik di semua perangkat dari
ponsel sampai dekstop. Bootstrap terdiri dari satu set file css,
javascript, dan jquery.

1.
2.
2.1
2.2 Menggunakan Bootsrap
Setelah semua file diperoleh selanjutnya mentambahkan beberapa perintah
dibagian head dokumen html untuk menggunakannya:
 Penjelasan :

 Baris ke-6 mengatur agar lebar laman web mengikuti lebar layar perangkat
(dekstop, tablet, ponsel) dengan skala awal normal, artinya tampilan tidak
diperbesar atau sebaliknya. Pengaturan ini membentuk sifat responsive
Bootstrap.
 Baris ke-7 memanggil file
css bootstrap.
 Baris ke-8 memanggil file
jquery. File ini diperlukan bootstrap untuk menjalankan berbagai animasi,
misalnya animasi silde jumbotron. Baris ke-9 memanggil file javascript
bootstrap.
 Baris ke-12 contoh penggunaan kelas ‘container-fluid’ dalam bootstrap agar
semua elemen ‘terbungkus’ mengumpul di satu wadah.

2.3 Grid Bootstrap

Untuk 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.
Bootstrap membagi laman web menjadi 12 grid (daerah vertikal laman web).
Setiap grid dapat digabungkan untuk membuat grid yang lebih besar:

Span4 merupakan gabungan dari 4 grid, span8 gabungan 8 grid,

dan seterusnya. Saat menggabungkan grid perlu diingat bahwa
setiap baris harus terdiri dari total 12 grid.
2.4 Kelas Grid
Bootstrap memiliki 4 buah kelas grid:
 xs : grid untuk layout di layar ponsel
 sm : grid untuk layout di layar tablet
 md : grid untuk layout di layar dekstop
 lg : grid untuk layout di layar dekstop besar
Artinya ketika Anda ingin mengatur grid untuk tampilan dilayar ponsel maka
gunakan kelas xs, untuk tablet gunakan kelas sm, dan seterusnya.
Ketika menggunakan sistem grid bootstrap:
 Baris-baris harus berada didalam sebuah kelas container atau container-
fluid agar obyek-obyek dalam laman teratur rapi.
 Gunakan kelas row untuk membuat kelompok kolom
 Tempatkan konten laman dalam kolom
 Setiap kolom memiliki jarak dengan kolom lain
Berikut contoh penerapan grid bootstrap:

Dokumen diatas akan membagi laman web menjadi dua kolom dengan kelas grid
‘col-sm-6’ yang artinya ini pengaturan untuk layar tablet. Lalu bagaimana dengan
layar dekstop, dan ponsel? Di layar desktop, laman web ini juga akan terbagi dua
kolom karena pengaturan dalam kelas grid ini bersifat naik keatas, artinya kelas
grid md (desktop) dan lg (desktop besar) akan mengikuti pengaturan kelas sm.
Sedangkan kelas xs (ponsel) tidak mengikuti aturan ini.
 BAB IV
IMPLEMENTASI
4.1 Source Code
5 <!doctype html>
6 <html lang="en">
7   <head>
8     <!-- Required meta tags -->
9     <meta charset="utf-8">
10     <meta name="viewport" content="width=device-width, initial-
scale=1">
11
12     <!-- Bootstrap CSS -->
13     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-
alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH
301p5ILy+dN9+nJOZ" crossorigin="anonymous">
14
15     <title>My Websited | Giraldo Stevanus</title>
16
17     <!-- Navbar -->
18     <nav class="navbar bg-body-tertiary fixed-top">
19       <div class="container-fluid">
20         <a class="navbar-brand" href="#"> <span>pbw</span>
Selamat Datang, Giraldo Stevanus </a>
21         <button class="navbar-toggler" type="button" data-bs-
toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-
controls="offcanvasNavbar" aria-label="Toggle navigation">
22           <span class="navbar-toggler-icon"></span>
23         </button>
24         <div class="offcanvas offcanvas-end" tabindex="-1"
id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
25           <div class="offcanvas-header">
26             <h5 class="offcanvas-title"
id="offcanvasNavbarLabel">Offcanvas</h5>
27             <button type="button" class="btn-close" data-bs-
dismiss="offcanvas" aria-label="Close"></button>
28           </div>
29           <div class="offcanvas-body">
30             <ul class="navbar-nav justify-content-end flex-grow-1
pe-3">
31               <li class="nav-item">
32                 <a class="nav-link active" aria-current="page"
href="#">Home</a>
33               </li>
34               <li class="nav-item">
35                 <a class="nav-link" href="#">Link</a>
36               </li>
37               <button type="button" class="btn btn-danger
position-absolute bottom-0" style="width: 90%;">Danger</button>  
38             </ul>
39            
40           </div>
41         </div>
42       </div>
43     </nav>
44     <!-- Akhiran Navbar -->
45   <body>
46     <!-- Optional JavaScript; choose one of the two! -->
47
48     <!-- Option 1: Bootstrap Bundle with Popper -->
49     <script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstr
ap.bundle.min.js"
50     integrity="sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
51     crossorigin="anonymous"> </script>
52
53     <!-- Option 2: Separate Popper and Bootstrap JS -->
54
55     <script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/p
opper.min.js" integrity="sha384-
IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
crossorigin="anonymous"></script>
56     <script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstr
ap.min.js" integrity="sha384-
cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
crossorigin="anonymous"></script>
57
58     <h1 style="text-align: center;">WEBSITE PRAKTIKUM</h1>
59       <h1 style="text-align: center;">PEMROGAMAN BERBASIS
WEB</h1>
60       <br>
61       <div class="row row-cols-1 row-cols-md-3 g-4">
62         <div class="col">
63           <div class="card" style="height: 25vw; width: 20vw;
margin-left: 10vw;">
64             <img src="Pertemuan 5/work1.jpg" class="card-img-top"
alt="...">
65             <div class="card-body">
66               <h5 class="card-title">Work 1</h5>
67               <p class="card-text">Ini adalah sebuah kerajinan
tangan ku dimana aku membuat sebuah pembatas buku karna aku hobi
baca buku</p>
68             </div>
69           </div>
70         </div>
71         <div class="col">
72           <div class="card" style="height: 27vw; width: 20vw;
margin-left: 5vw;">
73             <img src="Pertemuan 5/work2.jpg" class="card-img-top"
alt="...">
74             <div class="card-body">
75               <h5 class="card-title">Work 2</h5>
76               <p class="card-text">Gambar ini adalah buku harian
ku yang saya gunakan untuk membuat daftar acara penting atau
curhatan kecil tentang keadaan sekitarku</p>
77             </div>
78           </div>
79         </div>
80         <div class="col">
81           <div class="card" style="height: 28vw; width: 20vw;">
82             <img src="Pertemuan 5/work3.jpg" class="card-img-top"
alt="...">
83             <div class="card-body">
84               <h5 class="card-title">Work 3</h5>
85               <p class="card-text">Gambar ini adalah gambar
puzzel yang terbaku saat aku mau masuk kuliah tapi ini sangat
berarti banyak makna bagiku</p>
86             </div>
87           </div>
88         </div>
89       </div>
90    
91 </body>
92 </html>
2
3
4
4.1
4.2 Hasil

Pada source codenya sudah ditentukan untuk mendesain pada BOOTSRAP

sehingga kita hannya perlu mengubah sedikit saja. Ketika kita membuat
navigation pada tampilan navbarnya dengan penyesuaian dari paddingnya lalu
tambahkan burgernya sesuai ketentuan dari praktikumnya sendiri. Lalu kita buat
bodynya tambahkan autocard tiga kolom dengan ukuran yang minimalis
penyesuaian dari gambar beserta teks didalamnya.
 BAB V
PENUTUP

5.1 Analisa
Dari hasil praktikum, praktikan menganalisa Bootstrap adalah suatu
teknik statistika yang digunakan untuk memperoleh informasi tentang
kesalahan standar dan interval kepercayaan suatu statistik populasi dengan
cara mengambil sampel acak berulang kali dari data yang sama.
Secara umum, bootstrap dapat dilakukan dengan langkah-langkah
sebagai berikut:
1. Ambil sampel acak sebanyak n dari populasi data yang diberikan, dengan
pengulangan.
2. Hitung statistik tertentu dari sampel yang diambil, misalnya rata-rata atau
proporsi.
3. Ulangi langkah 1 dan 2 sebanyak B kali, sehingga kita memiliki B sampel
bootstrap yang berbeda.
4. Hitung interval kepercayaan atau kesalahan standar dari statistik yang
dihitung pada B sampel bootstrap.
Keuntungan dari penggunaan bootstrap adalah fleksibilitasnya yang
dapat digunakan pada banyak jenis statistik dan distribusi yang kompleks.
Selain itu, bootstrap juga dapat digunakan untuk mengatasi masalah kecilnya
sampel pada data.
Namun, kelemahan dari bootstrap adalah waktu komputasi yang cukup
lama, terutama jika B (jumlah iterasi bootstrap) sangat besar atau data
memiliki ukuran yang besar. Selain itu, hasil dari bootstrap juga dapat
dipengaruhi oleh bagaimana sampel bootstrap diambil dan seberapa
representatif sampel tersebut terhadap populasi. Oleh karena itu, penting
untuk mempertimbangkan dengan hati-hati pengambilan sampel bootstrap dan
interpretasi hasilnya dengan tepat.
5.2 Kesimpulan
1. Kermanfaat untuk menghitung kesalahan standar dan
2. Menghitung interval kepercayaan suatu statistik populasi dengan cara
mengambil sampel acak berulang kali dari data yang sama. Metode ini
memiliki keuntungan dalam fleksibilitasnya yang
3. Dapat digunakan pada banyak jenis statistik dan distribusi yang kompleks,
serta dapat mengatasi masalah kecilnya sampel pada data.