Mengenal Boostrap - Jumat, 25 Oktober 2013 ~ okyuanda

Hari ini, kita lanjut lagi ke pelajaran Web Dynamic. Sekarang kita akan mengenal apa itu Bootstrap dan bagaimana cara menggunakannya.

Tadi di sekolah awalnya kita membahas tentang perbedaan properti dan method. Apakah perbedaan dari keduanya tersebut ?

Properti : sifat yang menyertai object.

Method : gaya / perilaku object saat dikenai gaya.

Kita bayangkan saja sebuah handphone, pada handphone tersebut di ibaratkan mempunyai properti seperti baterai,tombol keypad, layar, dll sedangkan yang menjadi methodnya adalah jika semisal kita memencet huruf a pada keypad, efect pada layar nantinya akan muncul huruf a, atau semisal kita pencet tombol shutdown maka hp tersebut akan mati.

Syntax untuk memanggil properti

$this=>nama variabel=>"value"

Syntax untuk memanggil method

function nama_fungsi () {

}

Bootstrap merupakan sebuah framework CSS dari twitter, yang menyediakan kumpulan komponen-komponen antarmuka dasar pada web yang telah dirancang sedemikian rupa untuk digunakan bersama-sama. Selain komponen antarmuka, Bootstrap juga menyediakan sarana untuk membangun layout halaman dengan mudah dan rapi, serta modifikasi pada tampilan dasar HTML untuk membuat seluruh halaman web yang dikembangkan senada dengan komponen-komponen lainnya.

Sumber : http://bertzzie.com/post/31/bootstrap-sebuah-framework-css-dari-twitter

Untuk download bootstrap kita bisa download disini

Memasukkan css bootstrap ke file html
1. Copykan terlebih dahulu 4 file yang berada di bootstrap -> dist -> css kedalam ppdb2014-tkjb -> public -> css

2. Masukkan css bootstrap ke dalam file html yang akan kita tampilkan ke homepage. Disini saya akan menambahkan css signin

Copykan file signin.css dibawah ini ke dalam folder public --> css

Buka file index.html pada folder signin. Copy syntax dibawah ini.

Pastekan link file css ke dalam file html (peserta_display_view.php) pada tag head, agar file html tersebut dapat meload css bootstrap . Edit seperti keterangan gambar berikut ini.