Untuk membuat header kita bisa menggunakan dua cara:
Yang pertama yaitu mendesain header dengan menggunakan file css, dimana file css-nya terpisah dengan file php, kemudian file php akan memanggil file css tersebut untuk eksekusi. Biasanya file css ini dibuat untuk mendesain bentuk website secara menyeluruh. Untuk lebih jelasnya bisa melihat penjelasan tentang css di materi belajar css.
Yang kedua yaitu membuat header dengan menggunakan kode css tetapi kode css tersebut langsung dituliskan di file php (dalam materi ini kita namakan file header.php) dimana kode tersebut langsung di eksekusi. Tetapi dengan metode seperti ini akan membuat kode program kita akan sangat panjang. Sebagai seorang programer saya sarankan menghindari penulisan kode yang sangat panjang karena akan mempersulit kita nantinya dalam mengembangkan aplikasi tersebut.
Meskipun demikian pada tahap ini kita akan tetap belajar penulisan kode header dengan cara yang kedua. Nanti bisa anda bandingkan perbedaan keduanya. Berikut kode php untuk header-nya:
- <?php merupakan tag pembuka kode php dan ditutup dengan ?> sebagai tag penutup, dan didalamnyalah kita akan menuliskan kode php yang akan di eksekusi nantinya.
- include "koneksi.php" merupakan pemanggilan file koneksi.php yang telah kita buat sebelumnya. Jadi pada saat file header.php ini dijalankan maka secara otomatis file koneksi.php juga akan dibaca, meskipun filenya terpisah(tetapi masih tetap dalam satu folder).
- <html> merupakan tag pembuka untuk sebuah halaman website dan diakhiri oleh </html> yang nantinya akan ditempatkan di footer.
- <head> merupakan tag pembuka untuk header (kepala wesbite) dan diakhiri oleh </head> dibagian paling bawah header.
- <title> merupakan tag pembuka untuk nama website dan diakhiri oleh tag </title>
- <style type ="text/css"> merupakan tag pembuka untuk kode-kode css yang akan dieksekusi dan diakhiri oleh tag <style> nah diantara tag inilah kita akan menuliskan kode-kode css yang akan mengatur bentuk header yang kita inginkan.
- .header merupakan id css yang kita gunakan untuk menjelaskan bahwa kode-kode program yang ada didalam id tersebut hanya akan dipakai oleh pemilik id-nya yaitu header, sehingga tidak akan mempengaruhi bagian lain di dalam website.
- width:950px; merupakan lebar header
- Height:200px; tinggi header
- Dan yang paling penting disini adalah background-image:url(../images/Header.jpg); kode ini akan memanggil header yang sudah kita desain dalam bentuk file gambar yaitu jpg yang terletak di folder images. Berikut contoh header yang akan kita gunakan:
Salam
No comments:
Post a Comment