Modul 6: Praktikum Rekweb

Modul Praktikum Rekayasa Web

 

 

Pertemuan ke-6:

Bootstrap

 

 

 

 

 

 

 

Disusun oleh

Dr. Uung Ungkawa, MT

 

 


Modul 5

Bootstrap

 

Tujuan :

  1. Menunjang mata kuliah Rekayasa Web
  2. Mengetahui, mengenal dan memahami Javascript, jQuery dan Bootstrap
  3. Mengenal dan memahami pemrograman web front end dengan Javascript dan Bootstrap

Jenis Praktikum :

  1. Eksplorasi Javascript, jQuery, Bootstrap

Persyaratan :

  1. Praktikan harus menyiapkan terminal (Windows) perintah.
  2. Praktikan harus menyiapkan penyunting teks (text editor). Disrankan menggunakan Eclipse, Visual Studio Code, Netbean, Notepad++.
  3. Praktikan harus menyiapkan browser (Chrome, Firefox).

Perangkat praktikum :

  1. PC / Notebook

Materi

Jika kita dihadapkan pad tantangan untuk membuat situs web dengan tampilan yang menarik, maka kita membutuhkan banyak definisi kelas dalam pencorakan (styling). Contoh tampilan yang menarik misalnya pengaturan tata letak yang berimbang, corak tabel, elemen yang animatif dan sebagainya. Untuk itu diperlukan banyak definisi style (umumnya dalam bentuk kelas dan elemen/komponen). Bahkan kadang juga diperlukan manipulasi elemen tertentu di halaman web. Untuk itu kita perlu framework CSS yang siap digunakan tanpa kita mendefinisikan berbagai kelas tersebut. Dengan demikian akan dapat menghemat waktu pembuatan situs web.

Bootstrap (BS) adalah framework front-end (sisi depan) agar pengembangan web lebih cepat dan mudah. Dikatakan front-end karena BS lebih banyak menangani antar muka dengan pengguna. BS mencakup template rancangan berbasis HTML dan CSS untuk penulisan, form, tombol, tabrl, navigasi, modal, karosel gambar dan banyak lagi dan adapula plugin JS (opsional). BS juga memberi kita kemampuan untuk dengan mudah membuat rancangan web responsif.

Versi BS terakhir adalah versi 4 dengan komponen baru, lembar style yang lebih cepat dan lebih responsif. BS 4 mendukung hampir semua browser dan platform (OS) kecuali IE 9 dan sebelumnya. Jika ingin bisa mendukung IE 8-9, gunakan BS 3 yang merupakan versi yang paling stabil (sudah tidak berubah lagi), masih didukung team untuk perbaikan bug dan dokumentasi. Akan tetapi BS 3 tidak memiliki fitur baru.

Keuntungan BS

Mudah digunakan: siapa saja dengan bekal HTML dan CSS dapat memakai BS

Fitur responsif: CSS responsif BS dapat menyesuaikan media: handphone, tablet dan desktop

Pendekatan mobile-first: utamakan perangkat mobile dari pada desktop.

Kompatibilitas browser: BS kompatibel dengan dengan semua browser modern

Mendapatkan Bootstrap

Seperti jQuery, BS dapat:

Disertakan dari CDN (Content Delivery Network).

Diunduh dari situs getbootstrap.com

Contoh penggunaan BS melalui CDN adalah dengan pemanggilan sumber daya dari MaxCDN:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"> </script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"> </script>

Perhatikan cara memanggil BS: dengan elemen <link>, ada atribut rel dengan nilai “stylesheet” karena memang BS adalah kumpulan lembar corak (style sheet) CSS. Nama file yang dipanggil adalah bootstrap.min.css. Dibandingkan dengan cara kedua (diunduh dan disimpan di server sendiri), cara pertama lebih menguntungkan karena umumnya orang lain telah mengunjungi situs lain dan menyimpan BS dari CDN di komputer klien sehingga tidak perlu mengunduh lagi dan memuatnya dari cache sehingga akan lebih cepat. Kedua, umumnya CDN memilihkan server terdekat untuk klien, sehingga relatif lebih cepat.

Perhatikan juga elemen beberapa <script> di atas: jquery.min.js, popper,min,js dan bootstrap.min.js. Semua script tersebut berekstensi .js karena memang berupa kode JS. Script-script tersebut dibutuhkan untuk implementasi beberapa komponen BS seperti modal tooltip, popover dsb. Jika memang tidak membutuhkan komponen seperti itu, hanya membutuhkan bagian CSS dari BS, tidak perlu menyertakan script.

 

 

 

Latihan

Eksplorasi Boostrap

Siapkan browser Chrome atau Firefox

Siapkan penyunting teks (text editor) seperti Eclipse, VS Code, Netbean, Notepad++ atau yang lainnya.

Cobalah perhatikan penggunaan Bootstrap terutama untuk layout, progress bars, spinners, pagination, menu navigasi, tooltip, popover, toast, scrollspy, dsb.

Tugas Akhir

  • Buatkan form dengan Bootstrap:

Buatkan halaman web statik yang menampilkan form.

Form terdiri dari isian teks untuk nama awal (first name) dan nama akhir (last name).

Tambahkan dalam form: tombol radio untuk jenis kelamin L dan P

Tambahkan switch (toggle) yang menentukan alamat yang dipilih

Tambahkan range (rentang) untuk tinggi badan sampai 2 meter

Buatkan sarana upload foto seperti di bawah

  • Buatkan sebuah carousel untuk memajang foto produk yang dijual sebagai berikut:

Sediakan minimal tiga buah foto produk apa saja.

Buatkan carousel yang menampilkan foto-foto tersebut.

Sediakan satu foto untuk latar belakang carousel

  • Buatkan sebuah modal untuk menampilkan video produk yang dijual sebagai berikut:

Sediakan satu file video format apa saja (misal mp4) tentang produk.

Buatkan tombol yang bertuliskan Video Produk yang apabila diklik, akan menampilkan modal yang menampilkan video.

Ukuran modal/video bebas

 


Last modified: Sunday, 22 November 2020, 10:11 PM