Tutorial Integrasi AdminLTE dengan CodeIgniter (Template Dinamis)

Dalam pembuatan website tampilan yang elegant pasti sangat dibutuhkan, dan tentunya kalian bakalan kewalahan jika membuat nya dari nol terlbih lagi akan menghabiskan banyak waktu, oleh karena itu semarsoft akan berbagi tentang cara integrasi template adminlte dengan codeigniter. Dengan adanya template kalian tidak perlu susah payah mendesain sendiri dari nol untuk membuat tampilan yang keren, cukup bermodalkan copy paste fitur – fitur yang terdapat dalam template, kalian sudah mendapatkan tampilan web yang sangat cantik.

Apa sih Template AdminLTE itu?

AdminLTE merupakan desain yang secara default digunakan untuk backend atau bisa dikatakan administrator, namun tergantung selera juga ingin digunakan untuk backend ataupun frontend. AdminLTE ini sangat banyak fitur-fitur yang sudah tersedia, tinggal pilih fitur yang akan kita gunakan, AdminLTE juga memiliki berbagai versi, nah kali ini versi yang kita gunakan adalah AdminLTE-2.4.18, kalian bisa download melalui tautan berikut ini
Download AdminLTE-2.4.18

Karena bahasan kita kali ini berkaitan dengan codeigniter maka akan ada beberapa perubahan dalam mengelola template adminlte yang dinamakan integrasi template adminlte dengan codeigniter. selain inegrasi kita juga akan membuat layout atau kerangka agar code pada aplikasi web kita menjadi lebih rapi dan simpel. Template dinamis merupakan suatu kerangka template yang digunakan dalam medesain view yang lebih simpel, ketika meload suatu halaman maka kita tidak perlu memanggil header, footer dan lainnya terus menerus dalam halaman tersebut. cukup 1 file layout yang dipanggil, semua file pendukungnya otomatis terpanggil. yuk langsung saja kita simak cara pembuatannya

Tutorial Template Dinamis

    1. Setelah berhasil mendownload AdminLTE, langkah berikutnya adalah mengekstrak file tersebut ke dalam folder asset yang terdapat pada project kita, misal project kita bernama lspweb maka strukturnya akan seperti gambar berikut
    2. Buka application/config/autoload.php menggunakan editor dan sesuaikan codingnya seperti berikut :
      Code awal

      Ganti menjadi seperti code berikut :

      Keterangan :
      Pada libraries terdapat file “template” dimana file ini merupakan pemanggilan class Template yang terdapat di application/libraries/Template.php, selain dari template itu adalah bawaan dari codeigniternya.
    3. Ganti $config['base_url'] ='' Menjadi $config['base_url'] = 'http://localhost/lspweb/'; lspweb bisa kalian sesuaikan dengan nama projectnya masing-masing
    4. Buat file Template.php di dalam folder namaproject/application/libraries/ dan masukkan code berikut :

       
    5. Buka application/controllers/Welcome.php dan ganti function index menjadi seperti berikut

      Keterangan :

      $this->template->load(); merupakan code yang sudah kita buat pada langkah 4 dan layouts/template adalah memanggil kerangka template yang akan digunakan, sedangkan welcome_message adalah view yang akan kita buka

    6. Buka application/views/welcome_message.php dan ganti seluruh code nya dengan code berikut ini :

       
    7. Buat file dengan nama _css.php di dalam folder application/views/layouts kemudian isi dengan code berikut

       
    8. Buat file dengan nama _footer.php di dalam folder application/views/layouts kemudian isi dengan code berikut

       
    9. Buat file dengan nama _header.php di dalam folder application/views/layouts kemudian isi dengan code berikut

       
    10. Buat file dengan nama _js.php di dalam folder application/views/layouts kemudian isi dengan code berikut

       
    11. Buat file dengan nama _meta.php di dalam folder application/views/layouts kemudian isi dengan code berikut

       
    12. Buat file dengan nama _sidebar.php di dalam folder application/views/layouts kemudian isi dengan code berikut

       
    13. Buat file dengan nama template.php di dalam folder application/views/layouts kemudian isi dengan code berikut

       
    14. Jika langkah-langkah diatas sudah selesai, sekarang buka di browser http://localhost/lspweb dan hasilnya akan seperti gambar berikut :
    15. Jika tampilannya seperti gambar di atas maka tutorial template dinamis dan integrasi adminlte dengan codeigniter sudah berhasil dilakukan.

Leave a Comment