CodeIgniter

Belajar CodeIgniter Part 4: Cara Membuat Template Web Dengan CodeIgniter

Belajar CodeIgniter Part 4: Cara Membuat Template Web Dengan CodeIgniter 1
Ditulis oleh Irvan Nurfazri

IRVAN GEN – Selamat datang. Salam jumpa kembali di pertemuan yang ke-4 dalam sesi belajar CodeIgniter. Sebelumnya kita pernah membahas Memahami Helper HTML Pada CodeIgniter. Pada pertemuan yang ke-4 saya akan mengulas tentang Cara Membuat Template Web Dengan CodeIgniter.

Dalam sesi ini saya akan menjelaskan cara membuat template website sederhana dengan CodeIgniter, dan akan dijelaskan cara menggunakan teknik multiple view untuk membuat template web yang dinamis.

Caranya sama seperti menggunakan include() pada bagian header dan footer untuk penggunaan PHP native, tetapi untuk CodeIgniter kita membuatnya dengan me-load view CodeIgniter yang sudah kita pisahkan sesuai keinginan.

Misalkan, kamu dapat memisahkan bagian header, sidebar, footer dan konten untuk mencegah pengulangan penulisan syntax, hal ini dapat memudahkan kita dalam memodifikasi template website.


Tutorial Membuat Template Website Dengan Multiple View CodeIgniter

Langkah pertama, buat controller yang menampilkan sebuah view, saya membuat controller baru dengan nama web.php dan view nya diberi nama contoh_index.php

application/controllers/web.php

Dan kode program untuk view contoh_index.php

letakkan pada application/views/contoh_index.php

Nah sekarang kita buat file css nya. Karena dalam folder installan CodeIgniter belum terdapat css, maka kita perlu membuat sendiri.

Buat folder dengan nama assets/css/ dan kemudian buat file cssnya dengan memberi nama style.css

masukan kode program dibawah ini

assets/css/style.css

Jangan lupa setting base_url() terlebih dahulu agar nanti kita dapat menghubungkan CodeIgniter dengan file css.

edit file config.php pada folder application/config/config.php dan masukan kode program dibawah ini

Belajar CodeIgniter Part 4: Cara Membuat Template Web Dengan CodeIgniter 2

Sesuaikan dengan nama folder teman – teman yang di install CodeIgniter, kemudian dapat diperhatikan contoh diatas bahwa untuk menghubungkan file css dengan bantuan base_url()

Jadi hasil dari <?php echo base_url() ?>assets/css/style.css”> adalah http://localhost/irvan_gen/assets/css/style.css (sesuai kita meletakan file css nya).

Karena disini kita menggunakan base_url() CodeIgniter, maka kita perlu mengaktifkan helper url seperti yang sudah saya buat diatas, pada controller web.php dan saya mengaktifkan helper url pada function construct.

Nah untuk melihat hasilnya seperti apa, silahkan ketik alamat pada browser localhost/nama_folder/index.php/web

localhost/irvan_gen/index.php/web

Cara membuat template website dengan codeigniter - #IRVANGEN

Cara membuat template website dengan codeigniter – #IRVANGEN

Sampai disini kita sudah berhasil membuat template web sederhana, namun halaman ini belum dinamis, kita perlu membuat bagian header dan footer secara berulang pada halaman lainnya.

Kita harus memecah template ini menjadi beberapa bagian, seperti header dan footer. Berikut dibawah ini cara membuat Template Web Dinamis Dengan CodeIgniter.


Membuat Template Website Dinamis Dengan CodeIgniter

Langkah pertama buat kembali view header, disini saya memberi nama contoh_header.php dan meletakkan pada folder views

application/views/contoh_header.php

Kemudian buat view footer

application/views/contoh_footer.php

Untuk konten halaman utama, buat view dengan nama contoh_index.php (file sebelumnya hapus saja ganti dengan yang ini)

application/views/contoh_index.php

Sekarang template ini sudah menjadi 3 bagian, yaitu view header, view footer, dan view index. Cara pemanggilannya harus berurutan dimulai dari

  1. contoh_header
  2. contoh_index
  3. contoh_footer

Selanjutnya kita buat controller, oh iya controller web.php sebelumnya hapus saja dan ganti dengan ini.

application/controllers/web.php

Jika dijalankan hasilnya akan sama, tapi kelebihannya kita dengan mudah bisa membuat halaman lain dan tinggal memanggil view saja yang sudah kita buat tadi untuk halaman lainnya.

Belajar CodeIgniter Part 4: Cara Membuat Template Web Dengan CodeIgniter 3

Coba perhatikan lagi kode program yang ada di contoh_header disana terdapat hyperlink pada menu Beranda dan Tentang, nah disini belum sempat saya setting. Untuk menyesuaikannya kita perlu membuat halaman tentang yang kemudian akan disambungkan pada menu tersebut.

Sekarang kita buat view baru dengan nama contoh_tentang.php

application/views/contoh_tentang.php

Tambahkan lagi method Tentang pada controller web.php atau bisa replace untuk membuat halaman baru

application/contorollers/web.php

Sekarang jalankan, dan klik Tentang maka kamu akan diarahkan ke halaman Tentang dan alamatnya akan mengarah ke http://localhost/irvan_gen/index.php/

Halaman Tentang - #IRVANGEN

Halaman Tentang – #IRVANGEN


Kesimpulan

Dengan cara membuat template website multiple view atau memecah template menjadi beberapa bagian, maka akan mempermudah kita karena tidak perlu menulis syntax secara berulang.

Tinggal panggil saja misalkan, memanggil header, index, footer dan halaman lainnya. Khusus untuk halaman index tidak perlu lagi membuat halaman header dan footer dan tidak perlu juga membuat halaman about. Intinya dengan menggunakan cara ini semua halaman yang kita buat dapat digunakan tanpa menulis syntax kembali.


Penutup

Mungkin itu saja yang dapat saya sampaikan di pertemuan ini tentang Tutorial Membuat Template Website Sederhada Dengan CodeIgniter. Jika kurang mengerti atau salah dalam penulisan maupun penyampaian, silahkan diskusikan di form komentar, semoga apa yang sudah kita pelajari dapat bermanfaat bagi kita semua.

Terimakasih.


Income Search

  • cara membuat website dinamis dengan codeigniter
  • membuat halaman web dinamis dengan codeigniter
  • pengertian multiple view
  • membuat web dengan codeigniter
  • cara membuat web dengan codeigniter
  • template codeigniter
  • template web CI
  • membuat header di codeigniter
  • template ci
  • membangun website dengan ci

Tentang Penulis

Irvan Nurfazri

No one can bring you true happiness except Allah

Instagram : ig.com/irvan_gen

Tinggalkan Komentar