Cara Mengadopsi Standard Website Template (.html) ke dalam Code Igniter

Assalamu’alaikum warahmatullahi wabarakatuh

Hey guys, jumpa lagi bersama saya. Kali ini saya akan berbagi ilmu kanuragan yang baru saya dapati setelah bertapa goa. Haha (tapi boong)

Kali ini saya akan membahas tentang Code Igniter. Mungkin untuk kawan yang setingkatan dengan saya sudah tidak asing lagi dengan hal ini, karena emang tugas lab menuntut kita untuk memahami ini. Sebenarnya apa sih Code Igniter? Pengertian code igniter dapat kawan cari di mbah gugel sudah banyak kok..hehe

(Lah kok disuruh nyari sendiri di gugel sih? Terus saya mau posting apa? Katanya tentang Code igniter?) Memang yang akan saya bahas itu tentang Code Igniter, tapi yang akan saya bahas itu cara mengadopsi atau menculik template HTML agar menjadi Code Igniter. Bagaimana caranya? Cekidot !!!

Berikut langkah-langkahnya:

Sebelum masuk ke proses, siapkan dahulu bahan dasarnya (kayak mau bikin kue)

Bahan dasarnya terdiri dari:

1. Xampp
2. Template yang mau dipakai (pilih template yang simple namun tetap terlihat elegan, dapat download di http://all-free-download.com/free-website-templates/page/3/) disini saya menggunakan “victory_pro_template_2162”
3. Code Igniter (dapat download di http://ellislab.com/codeigniter/user-guide/installation/downloads.html) disini saya menggunakan versi 2.1.0
4. Notepad++
5. Air (persiapan jika sewaktu proses mengadopsi kita merasa haus kan jadi ga perlu ambil air lagi karena sumber air sudekaat..hehe)

Wokeh, sekiranya bahan dasar sudah cukup, mari kita memulainya :)

Buka xampp lalu aktifkan Apache dan Mysql.

Setelah itu ekstrak hasil download CI nya lalu pindahkan ke dalam direktori C: xampp/htdocs/ (rename folder jika ingin)

Dan ini merupakan tampilan default CI

 

Ekstrak template yang ingin digunakan, disini saya menggunakan template (hasil download seperti). Tampilan default CI yang tadinya seperti gambar di atas, nantinya akan menjadi seperti gambar di bawah ini.

Buka folder C://xampp/htdocs/andi-punya/application/views

Di dalam folder views sejatinya terdapat dua penghuni ini.

Copy template yang kita punya lalu, pastekan filenya di folder views ini (default hasil download template ka nada index.html juga, agar tidak mengganggu dua penghuni di atas lebih baik di rename terlebih dahulu template yang kita punya). Saya rename namanya menjadi template.html

 Lokasikan semua file berekstensi *.html di folder views. Kini penghuni folder views menjadi lebih ramai.

 

Agar lebih rapi, buat 1 folder public di C:xampp/htdocs/andi-punya untuk menyimpan folder-folder seperti javascript, css, dan image.

 

Yuk kita mulai coding (baca basmallah dulu biar dibantu sama Allah)

Buka file template.html yang ada di folder views menggunakan editor seperti Notepad++

Karena CI menggunakan konsep pemrograman php, jadi untuk link seperti :

Kita harus menambahkan perintah php berikut 

<?php echo base_url();?>

Coding di atas mengindikasikan url yang kita miliki, url yang saya punya adalah  http://localhost/andi-punya, maka coding di atas akan terbaca seperti link project kita. 

Sehingga menjadi seperti

public/ css mengindikasikan letak dari file style.css yang terletak di folder css yang ada di dalam folder public

setelah semua link sudah ditambahkan, save dengan format file *.php (ex: template.php)

selanjutnya kita buka folder ../application/controllers

di dalam folder tersebut sejatinya juga ada 2 penghuninya, seperti

 

Buka file welcome.php menggunakan editor text 

Ganti ‘welcome_message’ yang di blok hijau menjadi ‘template’. Fungsinya adalah memanggil file template.php yang terdapat di folder views.

Selanjutnya buka folder ../application/config

Buka file config.php dan isikan link project yang kita punya (http://localhost/andi-punya), lalu simpan

Buka file autoload.php dan isi dengan pada tanda kurung isikan ’url’ dan ‘html’, lalu simpan

 

Sekarang coba running http://localhost/andi-punya pada browser

dan inilah hasilnya… taraaaaaaaaaaaaaaaaaap :)

Saatnya untuk mengucapkan alhamdulillah

Lakukan hal yang serupa untuk mengaktifkan menu support dan yang lainnya. Artikel berikutnya saya akan membahas bagaimana cara memecah 1 file template.php yang terdapat pada view menjadi beberapa bagian, yaitu header.php, content.php, sidebar.php dan footer.php

source code CI yang ini menyusul ya, soalnya lemot bener ini koneksinya..huuhu

Nah sekian dulu yang dapat saya share kepada kawan, semoga bermanfaaat. (aamiin)

Akhir kata "tiada kesan tanpa komentarmu", terima kasih dan ...

Wassalamu'alaikum warahmatullahi wabarakatuh