Cara Integrasi Bootstrap dan PHP

Kita akan mulai sekarang dengan melakukan persiapan coding untuk proyek php perdana kita, terlebih dahulu kita akan cari tahu bagaimana cara integrasi bootstrap dan php. Apa itu Bootstrap? Begini ceritanya, kita sudah tahu kan apa itu HTML? CSS? Ya, kita dapat mengatur tampilan website kita bila tahu cara menggunakan kode HTML dan CSS supaya terlihat lebih baik. Dan syukurnya kalau kamu tahu bootstrap, semuanya menjadi jauh lebih mudah. Mau tahu dimana mudahnya?





Nah seperti gambar di atas, kode HTML yang sudah terintegrasi dengan Bootstrap akan tampil lebih cantik dan terlihat lebih profesional. Kalau mau lihat contoh-contohnya banyak sekali. Mulai judul teks, tabel, tombol, form fields, semuanya sudah siap digunakan. Jadi tidak perlu lagi memikirkan terlalu detil tentang html dan cssnya.

Sekarang, mari kita download bootstrap. Caranya? Google "bootstrap", kemudian cari link download, dan mulai download.





Dari sini kita bisa klik tombol Download Bootstrap, dan file kompresi dari bootstrap akan terdownload secara otomatis. Ukurannya kecil hanya 370KBytes. Selanjutnya bisa kita unzip dan menghasilkan beberapa  folder, seperti berikut ini.


Sekarang kita pindahkan ke tiga folder ini ke folder web kita yang sudah dibuat sebelumnya,



Kalau ketiga folder ini sudah terpasang berarti kita siap untuk melakukan integrasi bootstrap dengan php, caranya dengan membuat sebuah file test.html dengan menggunakan bootstrap.

Untuk membuat file standard dari bootstrap, kita bisa meng-copy-paste dari website yang tersedia, kemudian melakukan testing di browser. Lihat source codenya berikut ini,


Untuk menyalin kode ini bisa bisa langsung ke halaman basic template bootstrap.

Kita tempelkan code tadi ke sublime text untuk disimpan di komputer kita.



Selanjutnya simpan dengan nama bootstrap.html untuk nama filenya. Dan bisa kita langsung test




Okay, berarti integrasi kita untuk bootstrap ke webserver dengan php sudah sukses. Kini kita siap untuk mulai melakukan desain dan coding modul pertama login. Semangat! Bismillah.








Comments