Bagi seorang Web Developer dan menggunakan PHP Framework Codeigniter kadang merasa bingung Bagaimana cara Intregasi Template Bootstrap Dengan Codeigniter dengan efisien dan cepat dalam pemanggilan di setiap Controller / setiap Fungsi yang ada di dalam struktur Codeigniter. Kali ini mari kita bahas bagaimana cara Integrasi Template Bootstrap Dengan Codeigniter secara efisien dan cepat ? apalagi untuk pemula yang baru saja mengenal Codeigniter. Baik kita mulai.

Persiapan :

  1. Codeigniter 3.x
  2. Template Bootsrap yang akan di intregasi ke codeigniter disini saya menggunakan template Gentelella.

Apa yang di perlukan ?

  • Keteletian.
  • Kesabaran.
  • Kepintaran :v.
  • Buat project codeigniter dan beri nama citemplate

Estimasi Pengerjaan :

  • 45 Menit s/d 1 Jam.

Level Programming :

  • Easy.
Info

Untuk kalian yang masih belum punya template bootstrapsilahkan download ya 🙂

Struktur template yang akan kita buat :

  • _layout_index.php digunakan untuk memanggil semua file template kita pisahkan.
  • page_head.php digunakan untuk menulis kode html berdasarkan tag .
  • page_top.php digunakan untuk menulis kode html pada top menu header.
  • page_menu.php digunakan untuk menulis kode html pada bagian menu aplikasi yang akan kita buat.
  • page_footer.php digunakan untuk menulis kode html pada bagian footer.

Untuk lebih jelas silahkan lihat gambar berikut :

Lokasi template yang akan kita buat :

  • _layout_index.php application/views/.
  • page_head.php application/views/template/.
  • page_top.php  application/views/template/.
  • page_menu.php  application/views/template/.
  • page_footer.php  application/views/template/.

Sebelum memulai alangkah baiknya kita pahami struktur html pada template Gentelella untuk memudahkan kita mapping file html yang akan kita intregasikan ke Codeigniter berikut adalah struktur template Gentelella :

 

Kenapa hanya header dan footer dalam kode tersebut ? karna hal yang paling penting dalam intregasi bootstrap ini adalah di bagian header dan footernya. Dapat kita lihat ada beberapa file css dan js yang tidak di salam satu folder jadi kita akan memperbaikinya. Berikut adalah struktur folder di dalam template Gentelella :

Seperti dalam file html yang saya tunjukan di atas file css maupun js mengarah ke folder build dan vendors lalu file mana yang akan kita ambil ? file yang akan kita ambil adalah di dalam folder production cukup penjelasanya mari kita mulai.

Apa yang harus dilakukan pertama kali ?

Yang pertama kali kita lakukan adalah mengcopy file yang ada di folder production :

  • css
  • images
  • js

Lalu kita buat folder assets di dalam project folder Codeigniter kita dan paste folder :

  • css
  • images
  • js

Ke folder assets yang kita buat tadi di project codeigniter langkah yang sama copy folder build dan vendors ke dalam project folder Codeigniter yang kita buat maka hasilnya akan seperti ini :

Setelah semua selesai mari kita buat file berikut :

  • _layout_index.php application/views/.
  • page_head.php application/views/template/.
  • page_top.php  application/views/template/.
  • page_menu.php  application/views/template/.
  • page_footer.php  application/views/template/.

_layout_index.php

Simpan file tersebut di application/views

page_head.php

Simpan file tersebut di application/views/template

page_top.php

Simpan file tersebut di application/views/template

page_menu.php

Simpan file tersebut di application/views/template

page_footer.php

Simpan file tersebut di application/views/template

Setelah semua selesai maka struktur folder project codeigniter kita akan menjadi seperti :

Semangat sedikit lagi broooo 🙂

Untuk menampilkan semuanya mari kita buat dashboard untuk melihat semua pekerjaan yang sudah kita buat tadi

  • Buat Dashboard.php di application/controller copy kode ini :

  • Buat Dashboard.php di application/views copy kode ini :

Lalu coba buka url di browser kamu

localhost/projectci/dashboard

Note : projectci adalah nama sesuai dengan project yang kamu buat ya.

Berikut hasil yang sudah kita buat :

Akhirnyaaaa, selesai dan selamat ilmu baru sudah kita punya tinggal kita implementasi dan selalu terus ingin belajar jika ada error dalam pengkodean yang saya lakukan silahkan benarkan semampu kamu terlebih dahulu jika sudah mentok alias stuck saat memulai tutorial ini silahkan berkomentar dibawah ya, atau kamu bisa email di me@xssdp.net.

Terimakasih Sukses Selalu.

 

Satrio Dwi Prabowo