Install dan Setting Awal Bootstrap
Pada artikel ini kita akan membahas bagaimana mendesain halaman website menggunakan bootstrap. Bootstrap sendiri adalah framework yang opensource dan gratis untuk mendesaib website atau aplikasi berbasis web. Bootstrap juga dirancang untuk memungkinkan developer web untuk menampilkan dalam tampilan mobile yang responsif, Bootstrap menyediakan kumpulan sintak untuk desain template. Sebagai faremwork, Bootstrap menyertakan perintah dasar-dasar web responsif, sehingga developer hanya perlu memasukkan kode ke dalam sistem grid yang telah ditentukan sebelumnya. Framework Bootstrap dibangun di atas Hypertext Markup Language ( HTML ) , cascading style sheet ( CSS ) dan JavaScript . para developer web yang menggunakan Bootstrap dapat membangun aplikasi web lebih cepat karena tidak perlu menuliskan beberapa perintah dari awal.
Baik sekarang kita langsung memulai bagaimana membuat template web menggunakan bootstrap. Langkah pertama tentu kita harus mendownload framework bootstrap. Ketika tulisan ini dibuat versi bootstrap yang ada adalah versi 5.3. Ada 2 cara penggunaan bootstrap, kita bisa manggunakan CDN (Content Delivery Network atau sebagian ada juga yang menyatakan Content Delivery Network). Untuk menggunakan CDN kita cukup menyertakan link yang kita letakkan bada bagian tag header HTML. Jika ingin menggunakan CDN ketika mengakses halaman webnya kita harus memiliki akses internet. Pada bahasan kita kali ini kita akan menggunakan versi yang langsung didownload file bootstrapnya. Silahkan dowload dengan cara mengklik button download ynag ditunjukkan pada gambar dibawah ini. Link downloadnya disini.
Buatlah sebuah folder dengan nama pweb di folder htdocs di komputer kalian. Setelah didownload extract hasil download tadi kedalam folder yang telah dibuat sehingga struktur filenya terlihat seperti berikut.
Oke mantap, sekarang kita sudah punya kumpulan file CSS dan Javascript yang siap kita gunakan untuk mendesain halaman web site kita. Yuk kita mulai mendesainnya…
Buka folder pweb dengan text editor yang kalian miliki.. saya menggunakan VS Code. Tambahkan satu file dengan nama index.php yang diletakkan sejajar denagn folder css dan js. Sehingga sekarang struktur file kita ada tambahan 1 file index.php.
Berikutnya tambahkan kode program seperti berikut kedalam file index.php.
<!doctype html><html lang="en"><head> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!. </h1>
<h2>Ini Halaman Web Bootstrap ku yang pertama. semoga kalian semangat ya belajarnya</h2>
<script src="js/bootstrap.bundle.min.js">
</script>
</body>
</html>
Dari script diatas kita dapat mlihat bahawa file index.php sudah terhubung ke file bootstrap.min.css. untuk mengincludekan file tersebut kita bisa lihat pada baris <link href="css/bootstrap.min.css" rel="stylesheet">. Sedangkan untuk menyertakan file javascriptnya kita bisa lihat melalui baris perintah <script src="js/bootstrap.bundle.min.js"></script>.
Kalau kita jalankan script tersebut maka tampilannya akan seperti berikut ini
Sekarang kita sudah berhasil menginstal dan menggunakan bootstrap di halaman web yang sangat sederhana..
Selamat mencoba!!!