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 dan :

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 . 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

Selain fungsi dasar .table tersebut, bootstrap juga menyediakan beberapa fungsi tambahan

yaitu:

.table-striped .table-bordered

.table-hover .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?