Tutorial Codeigniter Part 11, Cara Membuat Template di Codeigniter

Selamat datang di tutorial warung belajar, dalam tutorial kali ini kita akan belajar untuk mengatur tampilan template di codeigniter.

Dalam proses pembuatan aplikasi, pastinya kita membutuhkan tampilan template, dimana pada bagian – bagian tertentu seperti contohnya header, menu, serta bagian footer akan bersifat statis (tidak berubah), sedangkan untuk bagian content akan bersifat dinamis karena akan menyesuaiakan tampilan dari menu yang diakses.

Baik kita disini akan contohkan menggunakan template contoh dari bootstrap, bisa teman teman akses dalam alamat berikut ini :

https://getbootstrap.com/docs/4.0/examples/sticky-footer-navbar/

Untuk pembagian bagian templatenya adalah sebagai berikut :

 

 

Secara garis besar template diatas kita akan bagi menjadi 3 bagian ya :

  • Header
  • Content
  • Footer

Untuk bagian header dan footer akan bersifat statis, dan untuk bagian content akan bersifat dinamis dimana akan menyesuaikan dari fitur yang sedang diakses.

Baik untuk langkah – langkahnya adalah sebagai berikut :

 

Mempersiapkan File codeigniter

disini kita telah mempersiapkan file framework codeigniter, yang telah kita letakkan di dalam direktori web server, karena kita menggunakan xampp, jadi kita letakkan di Drive C:/xampp/htdocs

saya simpan dalam folder dengan nama codeignitertemplate

 

Setting Bagian Config

Sebelum kita mengatur untuk bagian tampilan template, kita akan setting terlebih dahulu untuk file config, silahkan buka file application/config/config.php

Rubah bagian base_url

kita set menjadi http://localhost/codeignitertemplate karena kita akan sesuaikan dengan folder dari framework codeigniternya

 

Lalu buka file dengan nama application/config/autoload.php

pada bagian autoload helper kita menuliskan helper url, agar dapat mengakses dari url dari aplikasinya.

 

Membuat Bagian Template

Berikutnya kita akan membuat bagian dari templatenya, silahkan buat folder dengan nama _partials didalam folder application/views

dalam folder _partials ini nanti kita akan simpan bagian dari templatenya, seperti header dan footer, untuk penamaan folder tidak selalu _partials anda bisa memberikan nama lainnya.

 

Membuat Bagian Header

buat file dengan nama header.php dan simpan pada folder _partials, dan untuk isi codenya adalah sebagai berikut :

Untuk bagian menu dimulai dari line 40 kita menggunakan helper base_url serta memanggil controller page, disertai dengan function yang akan kita buat di controller page nantinya.

 

Membuat bagian footer

Berikutnya buat file dengan nama footer.php dengan isi code seperti berikut ini :

Sehingga untuk isi dari folder _partials kurang lebih seperti berikut ini :

 

Mempersiapkan library JS dan CSS

Untuk dapat menampilkan template sesuai dari contoh, anda perlu mempersiapkan untuk library CSS dan JS, silahkan buat folder dengan nama assets didalam direktori project codeigniter.

Berikutnya silahkan download untuk file berikut yang berisi library css dan js untuk keperluan template, untuk download klik disini

setelah download dan extract, berikutnya letakkan file library css dan library js, ke dalam folder assets

 

Buat Controller

Berikutnya silahkan buat controller, dalam contoh ini saya buat controller dengan nama Page.

untuk isi codenya adalah sebagai berikut :

Keterangan :

kita buat 3 function yaitu :

  • index
  • profil
  • about

dimana masing – masing function menuliskan 3 kali load view, yaitu :

  • load view header untuk file berada di folder _partials/header.php
  • load view yang berisi content, nah untuk bagian ini akan berbeda ditiap function, karena nantinya isinya juga dinamis disesuaikan dengan menu yang diakses.
  • load view footer untuk file berada di folder _partials/footer.php

yang terpenting adalah load view content, setiap anda membuat menu baru, anda harus membuat view baru.

 

Membuat File View

Buat file home.php didalam folder view, dengan code seperti berikut ini :

Buat file profil.php didalam folder view, dengan code seperti berikut ini :

Buat file about.php didalam folder view, dengan code seperti berikut ini :

Jadi kurang lebih seperti berikut ini :

Keterangan :

Jadi kita buat 3 file view, dengan berbeda tampilan, harapannya nanti ketika kita mengakses halaman yang berbeda maka tampilannya akan juga berbeda.

 

Testing tampilan template

Berikutnya kita akan coba untuk mengakses tampilan templatenya.

akses alamat : http://localhost/codeignitertemplate/index.php/page

akses alamat : http://localhost/codeignitertemplate/index.php/page/profil

akses alamat : http://localhost/codeignitertemplate/index.php/page/about

Jadi ketika kita mengakses dimenu yang berbeda yang berubah hanyalah tampilan content saja (bagian tengah) untuk bagian header dan footer tidak akan berubah.

Baik sekian dulu teman – teman tutorial kali ini, untuk download dari hasilnya bisa klik disini : Download Source Code

Jika ada yang ingin didiskusikan silahkan di kolom komentar, sekian dulu sampai jumpa di tutorial selanjutnya.

 

 

 


ANDA INGIN SERIUS BELAJAR FRAMEWORK CODEIGNITER ?

Seperti yang anda ketahui bahwa saat ini skill di bidang pemrograman sangatlah dibutuhkan, salah satunya adalah pemograman PHP.
Untuk anda yang ingin serius belajar pemrograman PHP, Khususnya menggunakan Framework PHP Codeigniter, Warung Belajar Memiliki Beberapa Paket Tutorial yang bisa membantu anda dalam belajar menggunakan Framework PHP Codeigniter, dari mulai step – step dasar hingga mampu membuat aplikasi berbasis web dengan menggunakan Framework PHP Codeigniter.

Paket Tutorial ini berisi video tutorial belajar pemrograman berbahasa indonesia, cocok sekali untuk anda yang sedang belajar Framework PHP Codeigniter, bahkan untuk orang awam sekalipun.

Paket Tutorial ini juga dilengkapi dengan study kasus yang akan mempermudah pemahaman anda dalam belajar pemrograman, Mari berinvestasi untuk menambah skill dalam menguasai Framework PHP Codeigniter

One thought on “Tutorial Codeigniter Part 11, Cara Membuat Template di Codeigniter

Leave a Reply

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