Modul 10 STMIK IKMI CIREBON Oleh Dita rizki amalia
Introduction to Bootstrap Materi Pokok 1. Materi Pokok Introduction to Bootstrap
2. Pengantar Bootstrap adalah front-end framework yang solek, bagus dan luar biasa yang mengedapankan tampilan untuk mobile device (Handphone, smartphone dll.) guna mempercepat dan mempermudah pengembangan website. Bootstrap menyediakan HTML, CSS dan Javascript siap pakai dan mudah untuk dikembangkan. Pengantar
3. Capaian Pembelajaran Mata Kuliah Kemampuan dalam menggunakan Bootstrap Capaian Pembelajaran
4. Kemampuan Akhir Mahasiswa mampu menggunakan Bootsrap
5. Kegiatan Belajar a. Uraian dan Contoh 1) Tentang Bootstrap Bootstrap merupakan framework untuk membangun desain web secara responsif. Artinya, tampilan web yang dibuat oleh bootstrap akan menyesuaikan ukuran layar dari browser yang kita gunakan baik di desktop, tablet ataupun mobile device. Fitur ini bisa diaktifkan ataupun dinon-aktifkan sesuai dengan keinginan kita sendiri. Sehingga, kita bisa membuat web untuk tampilan desktop saja dan apabila dirender oleh mobile browser maka tampilan dari web yang kita buat tidak bisa beradaptasi sesuai layar. Dengan bootstrap kita juga bisa membangun web dinamis ataupun statis. Kegiatan Belajar
2) Cara sederhana untuk memahami prinsip penggunaan bootstrap a) Download bootstrap, untuk segmen kali ini saya coba dengan versi 3.0.3-dist, ekstrak file ke dalam folder yang sudah kita sediakan. b) Open folder, karena disitu baru tersedia directory css, fonts, dan js, maka kita tambahkan index.html Kegiatan Belajar
2) Cara sederhana untuk memahami prinsip penggunaan bootstrap c) Isi file index.html dengan elemen sederhana atau elemen dasar html 5, seperti di bawah ini : Kegiatan Belajar
2) Cara sederhana untuk memahami prinsip penggunaan bootstrap d) Masukan bootstrap kedalam index.html dengan cara menambahkan sebuah link yang menuju ke directory css, sebagaimana berikut : Kegiatan Belajar
3) Cara menggunakan class css bootstrap Perlu kita ingat bahwa bootstrap menggunakan 12 grids dalam design templatenya, untuk membagi grids tersebut kita akan menggunakan span, namun untuk kasus ini kita akan coba terapkan pada 2 span yaitu : • Header • Navbar Dalam hal ini kita akan membuat sebuah navigasi, maka terlebih dahulu kita integrasikan index.html kita dengan css navbar dari bootstrap dengan cara menambahkan link untuk menuju ke directory- css-navbar dari bootstrap sebagaimana di bawah ini : <link href="navbar.css" rel="stylesheet"> Jadikan elemen paling bawah pada tag <head>…</head> Kegiatan Belajar
3) Cara menggunakan class css bootstrap Contoh : Kegiatan Belajar
3) Cara menggunakan class css bootstrap Selanjutnya kita akan memasang sebuah navigasi dengan cara menambahkan beberapa kode dengan berkorelasi pada css navbar yang telah disediakan oleh bootstrap, dalam hal ini saya telah mengadobsi beberapa kode navbar yang telah disediakan oleh bootstrap. Letakan kode navbar di bagian paling bawah pada elemen <body>…</body> Kegiatan Belajar
3) Cara menggunakan class css bootstrap Contoh : Kegiatan Belajar
3) Cara menggunakan class css bootstrap Contoh : Kegiatan Belajar
4) Cara menggunakan koleksi icon pada bootstrap Kegiatan Belajar
4) Cara menggunakan koleksi icon pada bootstrap <span class="glyphicon glyphicon-search"></span> Masih dengan index.html kita, sehingga perhatikan kode warna biru pada elemen ini : <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="./">Intermeso</a></li> </ul> </div><!--/.nav-collapse --> </div> </body> </html> Kegiatan Belajar
4) Cara menggunakan koleksi icon pada bootstrap Ganti dengan kode warna biru di bawah ini : <ul class="nav navbar-nav navbar-right"> <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-star-empty"></span><a href="./">Intermeso</a> </button> </ul> </div><!--/.nav-collapse --> </div> Kegiatan Belajar
5) Cara mengintegrasikan Javascript di bootstrap Individu atau dikompilasi Plugin dapat dimasukkan secara individual menggunakan bootstrap.js atau bootstrap.min.js. Pada html sebelumnya kita telah memiliki sebuah menu dropdown akan tetapi belum aktif dikarenakan html kita belum terintegrasi dengan javascript dari bootstrap beserta jquery, coba perhatikan dibawah ini : Kegiatan Belajar
5) Cara mengintegrasikan Javascript di bootstrap Masih dengan index 5) Cara mengintegrasikan Javascript di bootstrap Masih dengan index.html kita sebelumnya, sehingga pada segmen kali ini kita akan mengintegrasikan sebuah javascript yang ada di directory dengan cara meletakan elemen javascript paling bawah pada tag <head>. Sebagaimana telah dijelaskan sebelumnya tentang dependensi plugin, maka untuk integrasi javascript bootstrap harus diiringi dengan integrasi javascript jQuery, jika salah satunya tidak ada maka plugin tidak akan bekerja. Sehingga dalam hal ini terlebih dahulu kita lengkapi directory js kita dengan cara download jQuery.js di sini http://jquery.com/download , sehingga nampak seperti ini : Kegiatan Belajar
5) Cara mengintegrasikan Javascript di bootstrap Sekarang kita integrasikan index.html kita dengan menambahkan link, sebagaimana berikut ini : Kegiatan Belajar
Buatlah form menu dengan mengunakan bootstrap seperti berikut ini: b. Latihan Buatlah form menu dengan mengunakan bootstrap seperti berikut ini: Kegiatan Belajar
c. Rangkuman Penggunaan bootstrap sekaligus menggabungkan tiga unsur bahasa pemrograman web yaitu: 1) HTML5 2) CSS 3) JavaScript Dengan adanya boostrap kita bisa memperindah tampilan dari web karena sudah berupa template yang lebih menarik. Kegiatan Belajar
Ketiklah script bootsrap sebagai berikut dan tampilkan hasilnya! d. Tes formatif Ketiklah script bootsrap sebagai berikut dan tampilkan hasilnya! Bootstrap css Kegiatan Belajar
Ketiklah script bootsrap sebagai berikut dan tampilkan hasilnya! d. Tes formatif Ketiklah script bootsrap sebagai berikut dan tampilkan hasilnya! Kode form.html Kegiatan Belajar
Ketiklah script bootsrap sebagai berikut dan tampilkan hasilnya! d. Tes formatif Ketiklah script bootsrap sebagai berikut dan tampilkan hasilnya! Kode form.html Kegiatan Belajar
Ketiklah script bootsrap sebagai berikut dan tampilkan hasilnya! d. Tes formatif Ketiklah script bootsrap sebagai berikut dan tampilkan hasilnya! Kode form.html Kegiatan Belajar
Ketiklah script bootsrap sebagai berikut dan tampilkan hasilnya! d. Tes formatif Ketiklah script bootsrap sebagai berikut dan tampilkan hasilnya! Kode form.html Kegiatan Belajar
e. Umpan Balik dan Tindak Lanjut Mahasiswa mendengar, mencatat , dan mengerjakan latihan tentang Bootstrap. Kegiatan Belajar
6. Kunci Jawaban tes formatif
7. Referensi [1] Agung, Gregorius. , HTML5 + CSS 3, PT 7. Referensi [1] Agung, Gregorius., HTML5 + CSS 3, PT. Elex Media Komputindo, 2012. [2] Lee, Christopher, Mos Wonted CSS Tips and Triks, ANDI Yogyakarta, 2012 [3] Hidayatullah,Priyanto, Pemrograman Web. INFORMATIKA Bandung,2014 Referensi