Framework atau bahasa indonesianya kerangka kerja adalah sebuah
software untuk memudahkan para programmer membuat aplikasi atau web yang isinya
adalah berbagai fungsi, plugin, dan konsep sehingga membentuk suatu sistem
tertentu. Dengan menggunakan framework, sebuah aplikasi akan tersusun dan
terstruktur dengan rapi. Dan kali ini saya akan menggunakan aplikasi Bootstrap
dan Jquery.
Bootstrap
Bootstrap adalah sebuah framework css yang dapat digunakan untuk
mempermudah membangun tampilan web. Kita bisa memantau perkembangan proyek
Bootstrap dan mendownload Bootstrap di web resminya getbootstrap.com dan Githubnya di https://github.com/twbs/bootstrap.
1.
Download terlebih dahulu aplikasi
Bootstrap pada alamat website yang tertera di atas, dan setelah selesai
mendownload maka kita akan mendapatkan sebuah file dalam bentuk zip. Atau untuk
menghemat kuota anda bisa memintanya kepada teman anda (hehe)
2.
Extrak file bootsrap tersebut, sehingga
file nya menjadi folder biasa.
3.
Kemudian letakan di folder xampp yang
sebelumnya telah anda punya, tepatnya di folder : xampp>htdocs>praktikum>asset
(folder ini merupakan folder yang saya buat dan berisikan tentang web sederhana
yang saya buat)
4. Kemudian buat sebuah file dan beri nama
index.php, dan pastikan file tersebut di letakan di folder dimana anda
menyimpan folder bootstrap tadi (karna saya meletakkannya di folder praktikum
yang berada di dlaam folder xampp tadi maka saya harus meletakkan file tersebut
ke folder praktikum), dan kemudia kita bermain dengan coding seperti gambar di
bawah ini:
Ada beberapa hal yang perlu di
perhatikan dalam peng-codingan di atas:
a) Pastikan
link stylesheet Bootstrap mengarah pada path yang tepat dimana file CSS Bootstrap berada,
relative terhadap file html yang memanggilnya.
Karena file index.php yang kita
buat berada di dalam folder praktikum dan di dalamnya langsung
bersisi file Bootstrap, maka kita tulis asset/css/bootstrap.min.css.
b) Pastikan juga script
JavaScript Bootstrap mengarah pada path yang tepat dimana file JavaScript
Bootstrap berada, relative terhadap file html yang memanggilnya.
NOTE: Karena pada contoh kita, file index.php yang
kita buat di dalam folder praktikum dan di dalamnya sudah ada
file Bootstrap, maka path-nya bisa kita tulis asset/js/bootstrap.min.js.
Jika nanti kamu membuat file index.php nya tidak seperti path yang kita buat di
atas nggak usah masalah, tinggal disesuaikan saja path-nya.
c) Pastikan JQuery terpanggil
NOTE:
Bootstrap membutuhkan JQuery agar berjalan dengan sempurna. Karena
JavaScript-nya Bootstrap tidak akan bekerja jika tidak ada JQuery. So, pastikan
JavaScript-nya terpanggil dengan baik. Sebagai contoh di atas, kita panggil
JQuery langsung dari library-nya.
Demikianlah tutorial yang saya praktekkan, silahkan tinggalkan komentar dan sarannya dibawah, sekian dan terimakasih......
Tidak ada komentar:
Posting Komentar