Seri 4# Sistem Templating Layout Dengan Modular HMVC Pada Codeigniter 3 Bagian 2

Selamat malam guys. pembahasan kali ini adalah pembahasan lanjutan dari sistem templating layout dengan codeigniter 3 dengan model HMVC bagian 1. Dimana pembahasan sebelumnya mengenai teknik pemisahan layout yang di bagi dalam beberapa file, diantaranya header, content dan footer.

Khusus pembahasan ini yaitu menggabungkan komponen dari pemisahan layout menjadi satu kerangka layout yang utuh.

(Baca: Sistem Templating Layout Codeigniter 3 Dengan HMVC Bagian 1 )

Pada bagian 2 ini pembahasan akan fokus kepada pemanis aja. Pemanis disini dalam artian layout sudah di lengkapi dengan file css, sehingga user akan merasakan penggunaan yang mudah, tidak hanya sekedar halaman putih polos.

1# Menambahkan Kode header.php

Struktur file header merupahan struktur kerangka kepala dalam sebuah layout website. Didalamnya termuat struktur tag html bagian atas. Disini header akan saya isi dengan pemanggilan css dan judul situs. Silahkan buka kembali file header.php yang pernah anda buat. Ubah kodenya menjadi seperti seperti ini:

Yang terpenting untuk kode bagian header.php saya memanggil file external css yang saya letakkan pada direktori assets/css/ direktori ini bisa anda buat secara manual pada root folder codeigniternya. Kemudian saya menambahkan judul untuk bagian header dengan alamat css yaitu id=”pageHeader”

2# Menambahkan Kode Content.php

Disini isi content cenderung kepada struktur menu pada bagian kiri dan kanan. Biasanya untuk bagian menu sebagian developer website meletakkan struktur menu pada file navbar.php. Disini jutru antara menu dan konten dinamis akan saya gabungkan dalam satu file. Tapi tetap ada pemisah di antaranya. Silahkan tulis kodenya seperti ini:

3# Menambahkan Kode Footer.php

Yang terakhir adalah bagian footer.php. Didalam footer biasanya berisi kerangka penutup tag HTML serta sebuah tulisan hakcipta pada suatu website. Tapi disini footer akan saya isi dengan pemanggilan javascript external dan penulisan javascript mandiri. Footer akan dapat juga berisi penutup dari suatu kontent. Contohnya seperti kode dibawah ini: 

Bisa dilihat hasilnya akan menjadi seperti ini :

4# Tambahkan Pemanis Tampilan

Jika kode siatas keseluruhan dijalankan, maka akan berantakan. Untuk itu kita membutuhkan kode css sebagai pemanis. buat folder baru beri nama assets buat lagi folder baru dan berinama dengan css tambahkan 1 file baru pada folder css dan beri nama dengan style_gue.css 

File style_gue akan kita pangil di bagian header.php. Silahkan tulis kode css seperti berikut:

Hasil yang didapat untuk pembuatan template dengan kode diatas kurang lebih seperti ini:

Kesimpulan

Masuk pada kesimpulan. Jadi intinya untuk membuat kerangka utuh layout di butuhkan pemisahan antar file yang berisi layout terpotong. Kemudian di panggil dalam satu file pada controller layout.

Untuk agar lebih bagus lagi anda bisa menggunakan Framework css yang sudah banyak digunakan oleh developer di dunia. Dengan menggunakan framework css, anda tidak usah di pusingkan dengan code css yang banyak. Cukup memahaminya sedikit, kemudian terapkan pada website yang sedang anda bangun, dan selesai. Anda hanya tinggal fokus untuk menyelesaikan permasalahan backendnya saja.. Dan akhirnya selesai sudah tutorial pada edisi ini. Silahkan lanjutkan untuk membaca artikel berikutnya. Semoga ilmu ini bermanfaat buat kalian semua dan menjadi amal ibadah buat saya..Amin.

( Baca : Membuat hak Akses User Login Dengan Codeigniter 3 Bagian 1 )

You May Also Like

About the Author: admin initekno

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *