PRAKTIKUM PEMROGRAMAN WEB MODUL 7 TWITTER BOOTSTRAP Disusun oleh: (Nama) (NIM) PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS TEKNIK UNIVERSITAS MUHAMMADIYAH JEMBER 2015
Modul 7 Twitter Bootstrap I. Tujuan: 1. Mengenalkan tentang Twitter Bootstrap 2. Memahami penggunaan Twitter Bootstrap sebagai framework CSS 3. Mengetahui cara menerapkan Twitter Bootstrap untuk template website 4. Mengetahui cara membuat desain layout dengan Twitter Bootstrap II. Dasar Teori 1. DEFINISI TWITTER BOOTSTRAP Twitter Bootstrap merupakan sebuah framework CSS dari twitter yang menyediakan berbagai macam komponen antarmuka web untuk digunakan bersama-sama. Selain komponen antarmuka, bootstrap juga menyediakan layout halaman dengan mudah dan rapi. Twitter bootstrap ini menerapkan konsep responsive template sehingga layout dapat menyesuaikan dengan lebar dari media yang mengaksesnya.
III. Tools yang digunakan: 1) Notepad++ / Sublime Text / Aptana Studio / Netbeans / Eclipse / dan lain-lain 2) Web Browser (Mozilla Firefox / Google Chrome / Opera / dan lain-lain) 3) XAMPP (sebagai paket tools untuk menjalankan program berbasis PHP) IV. Latihan Praktikum Aturan Praktikum: Sebelum melakukan praktikum dibawah ini, buatlah sebuah folder kerja dengan nama praktikum7 didalam folder htdocs. Ikuti format penamaan file pada praktikum ini. Pastikan bahwa service dari Apache dan MySQL sudah dalam status running. Harap ditanyakan kepada asisten praktikum atau dosen pengampu jika mengalami kesulitan. Setiap selesai melaksanakan latihan, diharuskan dijalankan melalui browser untuk memastikan bahwa latihan kita sukses. Bagi yang menggunakan komputer laboratorium, DIHARUSKAN MENGHAPUS folder praktikum7 di htdocs setelah selesai melaksanakan praktikum ini. 1) Menyiapkan Twitter Bootstrap Silahkan ekstrak file bootstrap.zip pada direktori kerja praktikum7. Hasil ekstraksi terdapat 3 folder: css, js, img. Maka akan didapatkan struktur file seperti berikut:
2) Mengakses Twitter Bootstrap Untuk dapat mengakses twitter bootstrap, maka perlu dipanggil dengan sintaks berikut diantara tag <head> dan </head>: Buatlah file dengan nama latihan2.php yang diletakkan pada direktori utama dari praktikum7, kemudian isikan dengan syntax berikut: 3) Layout Fix layout bootstrap adalah dengan menggunakan class.container, sehingga format penulisannya:
Buatlah latihan3.php, kemudian modifikasi sintaks dari latihan 2 sehingga dimasukkan didalam <div class= container > </div>. Berikut isi lengkap codenya: Layout 2 kolom: Untuk dapat membuat layout dalam 2 kolom: sidebar dan body content, maka format codenya adalah sebagai berikut:
Class container-fluid dapat menjadikan sebuah halaman menjadi halaman yang responsif. Modifikasilah latihan diatas sehingga pada bagian body menjadi seperti berikut: 4) Grid System Bootstrap Standar grid pada bootstrap menggunakan 12 kolom. Dengan sistem grid inilah yang menjadikan sebuah halaman memiliki fitur responsif. Berikut ini adalah gambar dari panjang kolom tiap macam grid:
Bagaimana membuat sebuah grid kolomnya? Buatlah sebuah class.row kemudian tambahkan didalamnya class baru dengan nama.span* (tanda bintang adalah nilai angka mulai dari 1 sampai 12). Semakin besar nilainya, semakin panjang kolomnya. latihan4.php Silahkan dimodifikasi nilai dari span4 dan span8 sesuka anda untuk dapat mengetahui perbedaannya. 5) Basic Boostrap: Text Buatlah file bernama latihan5.php
6) Basic Bootstrap: Table Fungsi dasar tabel pada bootstrap dengan memanggil class.table pada tag <table> Selain fungsi dasar.table tersebut, bootstrap juga menyediakan beberapa fungsi tambahan yaitu:.table-striped.table-hover.table-bordered.table-condensed Buatlah file latihan6.php kemudian isikan dengan kode berikut: Pada contoh kode diatas menggunakan fungsi tambahan yaitu.table-striped, cobalah diganti dengan menggunakan class-class tambahan yang lain.
Modifikasilah dengan memanfaatkan fungsi dari table row sehingga code dari table adalah sebagai berikut: Kemudian lihatlah perubahannya! 7) Basic Bootstrap: Form Buatlah file latihan5.php. Basic class form pada twitter bootstrap adalah sebagai berikut:
Selain hal diatas, terdapat opsional form:.form-search.form-inline.form-horizontal Cobalah modifikasi dengan menggunakan class diatas!!
V. Tugas Praktikum Buatlah laporan praktikum modul ini dengan disertai SCREENSHOT dan PENJELASAN dari setiap langkah yang telah dikerjakan pada latihan diatas. Laporan dikumpulkan kepada Asisten Praktikum pada pertemuan yang akan datang dalam bentuk hardcopy. VI. Kesimpulan Dari praktikum diatas, jawab pertanyaan berikut dalam bentuk kesimpulan: 1. Apa yang anda ketahui tentang Twitter Bootstrap? 2. Apakah anda sudah memahami cara penggunaan Twitter Bootstrap pada halaman web?