Membuat Web Sederhana menggunakan PHP, Twig Template Engine dan MySQL: Part 3
Menggunakan Bootstrap
Bootstrap adalah salah satu CSS Framework yang cukup populer dan banyak digunakan untuk pengembangan Web. Bootstrap adalah pustaka yang dimana pustaka ini telah memiliki banyak sekali komponen-komponen yang dapat kita gunakan kembali dengan sangat mudah.
Cara menggunakan Bootstrap didalam web sederhana kita ini terbilang cukup mudah, hal yang perlu dilakukan hanyalah memanggil file css dan js dari pustaka Bootstrap kedalam file-file html kita.
-
Menambahkan link css kita ke head.html dan js ke foot.html serta menambahkan beberapa komponen-komponen.
Yang diatas kita lakukan adalah menambahkan link ke /static/css/bootstrap.min.css yang merupakan pustaka utama dari Bootstrap CSS Framework. Pada bagian ini kita menggunakan versi minified (.min). Dan juga menambahkan sebuah navbar. Kenapa disimpan dalam head.html? Tujuannya adalah, agar setiap kali kita memanggil file head.html ini di file-file lain selain index.html (untuk galeri nanti atau yang lain) maka kita tidak perlu lagi menuliskan navbar ini secara berulang-ulang.
Didalam foot.html, kita menambahkan komponen untuk memunculkan suatu kalimat, hal ini dapat diubah sesuai dengan keinginan. Dan juga kita menambahkan jquery dari remote file. Jquery merupakan salah satu framework untuk javascript (akan dijelaskan detail ditopik lain) yang cukup populer dan sering digunakan banyak orang. Begitu pula dengan file bootstrap.min.js kita masukkan setelah jquery, dikarenakan file js dari bootstrap ini membutuhkan jquery untuk berjalan.
Untuk dapat paham dengan komponen-komponen yang disediakan dari Bootstrap, akan sangat baik jika anda membaca-baca Komponen-komponen dari Boostrap, disini.
-
Merubah index.html,
Membuat halaman galeri
Setelah halaman index telah kita buat, selanjutnya adalah halaman Galeri. (gallery.php dan gallery.html untuk templatenya)
-
Membuat file-file yang dibutuhkan
-
Menambahkan Pustaka Twig, Tumpukan Data, dan memanggil template di gallery.php
Apa yang berbeda antara index.php dan gallery.php? Hanya ada dua, yaitu isi dari tumpukan data dan template yang akan dirender. Apa arti dari daftar_gambar?
Halaman yang kita buat adalah gallery, yang dimana memiliki arti bahwa akan ada beberapa gambar yang terpajang. Gambar-gambar ini dibuat menjadi satu tumpukan data dengan nama daftar_gambar dan kita masukkan ke dalam tumpukan data $data (Biasanya disebut multidimensional array). Gambar-gambar ini saya ambil dari halaman Demo untuk salah satu template yang dibuat menggunakan Bootstrap. Stanley dari blacktie.
-
Mengatur tatap muka dan komponen-komponen untuk gallery.html
Masih sama seperti template untuk halaman index, kita memanggil file head.html dan foot.html. Lalu yang berbeda hanyalah komponen-komponen yang hanya akan kita tampilkan di halaman gallery saja.
Pada bagian
kita melakukan looping atau perulangan dari tumpukan data daftar_gambar yang kita kirimkan dari gallery.php. Lalu apa itu gambar? gambar merupakan representatif dari nilai-nilai dari tumpukan data daftar_gambar yang sebelumnya kita definisikan. Jadi, ketimbang kita menuliskan semuanya satu persatu, seperti ini:
-
Mana yang anda pilih? Menuliskan secara statis satu persatu, atau menuliskan dengan cara pertama menggunakan Template Engine? Nah, sebenarnya kelebihannya bukan itu saja. Kelebihan lainnya adalah jika suatu saat kita ingin merubah alamat gambar yang ingin kita tampilkan caranya akan sangat mudah. Yaitu hanya dengan mengganti nilai dari tumpukan data daftar_gambar yang ada di gallery.php. Mudah bukan?
-
Untuk memastikan output dari gallery.php atau untuk melakukan pengecekan sangatlah mudah. Cukup dengan menjalankan perintah berikut:
Maka output yang akan keluar adalah sebagai berikut:
Uji coba halaman index dan gallery
Mari jalankan kembali PHP Builtin Web Server dengan perintah yang sama seperti sebelumnya.
Kemudian untuk memeriksa satu persatu bisa dengan membuka alamat http://localhost:9000/index.php dan http://localhost:9000/gallery.php