Modern Codeigniter Project Part 4 – Membuat Layout Frontend

Advertisements

Seperti pada tutorial aplikasi alumni tentang templating pada codeigniter sebelumnya, kali ini kita akan membuat layout frontend untuk aplikasi voting yang akan kita bangun bersama. Di project ini kita akan menggunakan materialize css yang pada saat artikel ini ditulis sudah dalam versi 1.0.0.

Membuat Layout Codeigniter Frontend

Seperti judul diatas, kita akan membuat layout yang dapat diakses oleh public user. Layout ini akan dibagi menjadi tiga bagian besar yaitu header, master, dan footer yang akan kita simpan pada folder application/views/layouts/frontend. Jadi teman-teman yang belum membuat folder tersebut dipersilahkan meninggalkan lapangan upacara.

File application/views/layouts/frontend/header.blade.php akan berisi kode berikut:

Kenapa kita menggunakan ekstensi .blade.php saya harap teman-teman masih ingat dengan Blade templating yang sudah kita bahas kan? Oke lanjut ke file berikutnya yaitu application/views/layouts/frontend/master.blade.php berisi:

Beberapa poin penting yang teman-teman perlu ketahui yaitu:

  • Pada baris ke 19 dan 25 terdapat directive @include() yang berfungsi untuk memanggil file view lain dalam kasus ini kita kingin memanggil file view header dan file view footer.
  • Pada baris ke 16, 22, dan 30 terdapat directive @yield() yang akan kita bahas sebentar lagi.
Advertisements

File view berikutnya adalah footer.blade.php yang masih berada dalam satu folder yang sama yaitu application/views/layouts/frontend/footer.blade.php

Setelah membuat file view di atas mari kita coba untuk menampikan file tersebut melalui controller baru yang bernama Page. Controller ini akan berisi kode berikut:

Seperti yang bisa kita lihat di atas,  method home() akan memanggil file view home.blade.php yang berada pada folder applications/views/pages.

Pada file view home.blade.php diatas, terdiri dari 2 macam blade directive yang fungsinya adalah sebagai berikut:

  • Directive @extends() bertugas untuk memanggil file view lain, dalam hal ini view (application/views/layouts/frontend/master.blade.php).
  • Setelah itu blade engine akan menempatkan directive @section() sesuai dengan tempat yang telah disediakan oleh file master.blade.php pada directive @yield().
codeigniter membuat layout
Blade Templating Engine
Advertisements

Sebagai ilustrasi lain pada sebuah bangunan rumah, @extends() bertugas sebagai kerangka atau pondasi sedangkan @section bertugas sebagai pintu, jendela, atap dsb. Sehingga saat kita jalankan pada web browser hasilnya seperti gambar di bawah.

codeigniter membuat layout aplikasi voting online
Tampilan Home Page

Lanjutan tutorial ada di halaman berikutnya..

Author: kaceManaf

Founders of kcdev.id, freelance full stack web developer and also a web-tech wanderer. Passionate about code readability and simplicity. https://www.linkedin.com/in/nafplann/

Leave a Reply

Your email address will not be published. Required fields are marked *