Tutorial Codeigniter 4 – Part 6 – Membuat Layout / Template di Codeigniter 4

Selamat datang di tutorial warung belajar, dalam tutorial kali ini kita akan melanjutkan pembahasan dari seri tutorial Codeigniter 4, pada part 6 kita akan belajar mengenai cara membuat layout / template di Codeigniter 4.

Istilah layout / template disini digunakan untuk mempermudah anda dalam mengatur tampilan aplikasi yang sedang dibuat , seperti kebanyakan template yang kita temui, ada beberapa bagian template yang bersifat tetap (statis), dan ada beberapa bagian yang bersifat dinamis, nah bagian dinamis ini yang akan berisi content yang akan berubah – ubah tergantung menu mana yang akan diakses.

baik agar teman – teman mudah memahami .. saya akan ilustrasikan dalam bentuk gambar…. untuk mewakili sebuah template web

Keterangan :

Jika kita perhatikan pada gambar diatas ada 4 bagian :

  1. header
  2. sidebar
  3. content
  4. footer

dari 4 bagian itu… yang biasanya kita buat  tampilannya tidak berubah (statis) adalah header, sidebar, dan footer, tetapi untuk bagian content tampilannya akan berubah – ubah menyesuaikan menu apa yang diakses (dinamis)

nah pengaturan semacam ini sudah terfasilitasi di Codeigniter 4, kalau di codeigniter 3 sebelumnya saya perlu menambahkan library tambahan untuk membuat template semacam ini, ya meskipun di codeigniter 3 sendiri ada, hanya saya kurang nyaman untuk menggunakannya.

Nah buat teman – teman mungkin yang sudah pernah belajar framework Laravel, konsep pembuatan layout di codeigniter 4 ini sama seperti konsep penggunaan blade di laravel untuk proses pembuatan template, jadi saya rasa untuk teman – teman yang sudah belajar laravel, akan mudah memahami konsep layout di codeigniter 4.

Oke biar tutorial tidak terlalu panjang kita akan mulai proses pembahasannya.


 

Video Tutorial Belajar Codeigniter 4 – Cara Membuat Model dan Interaksi Database Melalui Model di Codeigniter 4


 

 

 

Install Codeigniter 4

Untuk proses belajar anda diharuskan untuk menginstall Codeigniter 4, tutorialnya bisa dilihat di tutorial kita sebelumnya : Cara Menginstall Codeigniter 4

Dalam contoh ini saya menginstallnya didalam folder C:/xampp/htdocs/ci4app


 

 

Preview Tampilan Template

Berikutnya kita akan membahas tampilan template yang kita akan gunakan, kita gunakan template dari bootstrap dengan nama sticky footer navbar, bisa anda akses di alamat ini : https://getbootstrap.com/docs/4.5/examples/sticky-footer-navbar/

hanya saja disini scriptnya akan saya sedikit modifikasi ya, kita buat library CSS dan JS akan mengakses library bootstrap langsung secara online.

Jadi saya sarankan ketika belajar membuat layout menggunakan template bootstrap yang kita sediakan, gunakan koneksi internet.

Baik tampilannya seperti berikut ini :

Kalau kita melihat tampilan diatas, template dibagi menjadi 3 bagian :

  1. header
  2. content
  3. footer

bagian header dan footer tidak akan berganti (statis), dan bagian content akan selalu berganti tergantung menu yang diakses (dinamis)

baik ya teman – teman setidaknya paham dulu perbedaan bagian yang statis dan dinamis ya.


 

 

Membuat View untuk bagian template

Berikutnya kita akan mulai membuat layoutnya, buat folder dengan nama layout didalam folder app/Views, lalu berikutnya buat file dengan nama template.php didalam folder app/Views/layout, untuk code dari file template.php adalah sebagai berikut :


 

 

Mengatur bagian content agar bersifat dinamis

Berikutnya kita akan mengatur bagian dari template yang sifatnya dinamis, seperti yang telah kita bahas sebelumnya bagian content itu bersifat dinamis, akan menyesuaikan menu yang diakses didalam aplikasi.

kita dapat menggunakan perintah renderSection() untuk mengatur bagian dari template yang isinya akan menyesuaikan apa yang kita set dibagian view, method renderSection memiliki 1 argument yaitu nama dari section, semisal dalam contoh ini namanya kita buat content.

kita akan gunakan method renderSection() untuk set bagian content, jadi kita perlu merubah file template.php pada line 74 – 77 menjadi :

Jadi kurang lebih menjadi seperti berikut ini :

Nah sampai disini kita sudah set section dengan nama content pada bagian template, agar nanti isinya akan menyesuaikan dari view.


 

 

Menggunakan Layout dibagian View

Berikutnya kita akan belajar untuk menggunakan layout dibagian view, untuk dapat menggunakan layout / template dibagian view kita menggunakan method extend(), method extend memiliki 1 argument yaitu nama file view yang digunakan sebagai template.

baik sebelum kita akan belajar menggunakan layout, kita akan buat dulu sebuah controller, semisal kita buat controller dengan nama Product.php dan kita simpan di folder app/Controllers, untuk isi code file controller Product.php adalah sebagai berikut ini :

Keterangan :

  • kita membuat class Product sesuai nama controller, lalu kita membuat method dengan index, dibagian method index kita mengakses view dengan nama productpage

 

Langkah berikutnya kita akan membuat file view dengan nama productpage.php yang kita simpan didalam folder app/Views, untuk code dari file productpage.php adalah sebagai berikut :

Keterangan :

  • Line 1 kita menggunakan perintah extend dengan nilai parameter ‘layout/template‘, yang artinya view ini akan menggunakan template dengan nama template.php yang berada pada folder  app/views/layout, jadi default foldernya itu ada didalam app/views, karena file template.php terdapat dalam folder layout, jadi kita perlu menuliskan layout/template
  • Line 3 kita menggunakan perintah section(‘content’) yang artinya kita akan mengisi section dengan nama content, di file template.php, perintah section() diakhiri dengan perintah endSection()
  • jadi kita kita perhatikan pada line 4 – 7, code dibagiani ini yang akan ditampilkan disection content pada bagian file template.php yang sudah kita set agar isinya dinamis

Berikutnya kita akan coba untuk mengaksesnya, kita jalankan dulu local development servernya gunakan perintah di terminal : php spark serve

lalu kita mengakses method index di controller Product dengan URL :

Hasilnya sebagai berikut :

Keterangan :

  • Coba perhatikan dibagian content, dibagian content menampilkan apa yang kita tulis dibagian view productpage.php pada line 4 – 7

 

Biar teman – teman lebih memahami lagi, kita akan buat lagi sebuah method di controller Product, dalam contoh ini kita buat method dengan nama catalog, sehingga controller Product isi codenya menjadi seperti berikut ini :

Keterangan :

  • pada line 12 kita buat method dengan nama catalog, pada method ini kita mengakses view dengan nama catalogproduct

 

Berikutnya kita akan membuat view dengan nama catalogproduct.php untuk isi codenya adalah sebagai berikut :

Berikutnya kita akan coba mengakses method catalog di controller Product, jangan lupa untuk menjalankan local development server, lalu kita akses dengan URL : localhost:8080/product/catalog

Keterangan :

  • Terlihat yang berubah hanya dibagian content, terdapat tulisan Catalog Product, bagian ini sesuai code dibagian view, yang kita set dibagian section content, jika dilihat ada di line 4 – 7 di view catalogproduct.php

 

 

Method Include untuk menambahkan View Partial

Pada Codeigniter 4 anda bisa menggunakan method include yang digunakan untuk memanggil view didalam file view, istilah ini biasanya dikenal nama view partial.

Fitur ini dapat anda gunakan untuk membagi bagian template menjadi beberapa file view, tujuannya untuk memudahkan anda saat proses maintenance file template, karena file template akan dibagi menjadi beberapa file view sesuai dengan bagian templatenya.

Perhatikan File template.php saat ini yang kita buat :

kita akan coba bagi code di file template.php menjadi beberapa bagian, langkah – langkahnya adalah sebagai berikut :

1. Buat file header.php simpan di folder app/Views/layout, untuk isi file ini cut dari file template.php diatas line 4 – 46, sehingga file header.php berisi code seperti ini :

 

2. Buat file nav.php simpan di folder app/Views/layout, untuk isi file ini cut dari file template.php diatas line 51 – 69, sehingga file nav.php berisi code seperti ini :

 

3. Buat file footer.php simpan di folder app/Views/layout, untuk isi file ini cut dari file template.php diatas line 77 – 81, sehingga file footer.php berisi code seperti ini :

 

4. Berikutnya kita akan modifikasi file template.php menjadi seperti berikut ini :

Keterangan :

Line 4 kita tulisankan perintah method include dengan parameter layout/header artinya kita akan menyisipkan file view dengan nama header.php di folder app/views/layout, karena sebelumnya code di file template.php bagian tag <head> hingga </head> sudah kita pindah ke file app/views/layout/header.php

Line 4 kita tulisankan perintah method include dengan parameter layout/nav artinya kita akan menyisipkan file view dengan nama nav.php di folder app/views/layout, karena sebelumnya code di file template.php bagian tag <nav> hingga </nav> sudah kita pindahkan ke file app/views/layout/nav.php

Line 19  kita tulisankan perintah method include dengan parameter layout/footer artinya kita akan menyisipkan file view dengan nama footer.php di folder app/views/layout, karena sebelumnya code di file template.php bagian tag <footer> hingga </footer> sudah kita pindahkan ke file app/views/layout/footer.php

Jika teman – teman bingung mengenai penjelasan kita, bisa melihat di tutorial versi video yang kita sertakan di tutorial ini, karena penjelasannya agak sulit untuk ditulis..

 

Baik kurang lebih seperti itu ya teman – teman penjelasan tutorial kali ini, kita sudah belajar mengenai cara membuat layout di codeigniter 4, jika ada yang ingin didiskusikan silahkan di kolom komentar, sekian dulu sampai jumpa di tutorial selanjutnya.

Leave a Reply

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