Menerapkan Template Ace Admin Pada Framework Codeigniter

Aceadmin adalah salah satu template yang sering digunakan oleh developer sebagai template backend nya, dulu nya template ini berbayar tapi entah kenapa sekarang template ini tidak dijual lagi jadi sudah otomatis tidak dikembangkan lagi, walaupun begitu kita masih tetap bisa menggunakan nya sebagai salah satu pilihan untuk template backend.

Menggabungkan Source Codeigniter Dan Template Ace-Admin

1. Download Framework Codeigniter
2. Extrack file CodeIgniter-3.1.0.zip
3. Rename Folder CodeIgniter-3.1.0 Menjadi codeigniter
4. Download Template Ace Admin Melalui Github
5. Extrack ace-master.zip
6. Rename Folder ace-master Menjadi aceadmin
7. Copy Folder aceadmin Ke Folder ci-aceadmin
8. Copy Folder ci-aceadmin Ke C:\xampp\htdocs

Konfigurasi Dasar Codeigniter

Langkah selanjutnya setelah mengabungkan source codeigniter dan tempate aceadmin adalah mengatur beberapa konfigurasi dasar pada framework codeigniter, yang pertama adalah pengaturan autoload, silahkan buka file autoload.php yang ada di dalam folder application/config/. lalu load helper url dengan cara seperti berikut :

$autoload['helper'] = array('url');

Kemudian yang tidak kalah penting adalah pengaturan base_url yang bisa anda temukan pada folder application/config/config.php, lalu sesuaikanlah seperti dibawah ini :

$config['base_url'] = 'http://localhost/ci-aceadmin/';

Membuat Controller

Kita akan membuat sebuah controller baru sebagai contoh, silahkan buat sebuah controller baru dengan nama example dan masukan script berikut :

<?php
Class Example extends CI_Controller{
    
    function __construct() {
        parent::__construct();
    }
    
    function index(){
        $this->load->view('template');
    }
}

Membuat View Template Utama

Kemudian kita akan membuat view nya, seperti yang anda lihat pada script controller di atas bahwa function index akan memanggil view dengan nama template.php, sekarang silahkan buat sebuah filde baru di dalam folder views, kemudian kita akan memilih salah satu halaman dari template ace-admin lalu mengcopy script nya ke dalam ciew template.php tadi, sebagai contoh kita akan menggunakan halaman tabel jadi silahkan buka http://localhost/ci-aceadmin/aceadmin/tables.html melalui web browser

Kemudian kamu bisa menggunakan shortcut Cntrl + u untuk melihat script dari halaman tabel ini :

silahkan copy semua script (Ctrl+a) lalu lakukan paste pada file template.php tadi setelah itu simpan.

Memperbaiki Link Asset Yang Broken

Sampai pada tahap ini memang tampilan nya masih berantakan, itu disebabkan karena link asset (CSS, JS dan gambar) tidak bisa diload karena ada kesalahan URL. oleh karena itu kita harus memperbaikinya terlebih dahulu, cara memperbaikiny adalah mengubah script :

Dari seperti ini :
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
Menjadi seperti ini : 
<link rel="stylesheet" href="<?php echo base_url()?>aceadmin/assets/css/bootstrap.min.css" />

anda bisa memanfaatkan fitur Find And Replace pada software text editor yang anda gunakan, sebagai contoh dibawah ini saya menggunakan fitur find and replace pada software Netbeans.

Find : assets
Replace : <?php echo base_url()?>aceadmin/assets

Memisahkan Content Dan Template Utama

Langkah selanjutnya adalah memisahkan template utaman dan content, karna biasnya dalam sebuah web yang selalu berubah adalah content nya, sedangkan navigasi, footer dan elemen lain nya tetap sama. agar lebih mudah dalam pemanggilan view dengan teknik pemisahan konten dan template utama maka kita akan menggunakan sebuah library yang bisa anda download melalui situs jeromejaglale.com, setelah mengdownload lalu extrack file template.php ke dalam folder library.

karna library ini akan selalu kita gunakan maka kita akan meload library template ini melalui autoload, silahkan buka file autoload.php yang ada dalam folder application/connfig lalu load libray ini dengan cara:

$autoload['libraries'] = array('template');

Kemudian Cut (Ctrl + x) script dari line lalu silahkan buat file template.php yang ada di dalam folder views kemudian Cut script dari line 917 sampai 3751, kemudian buat file baru dengan nama tabel.php dan pastekan script tersebut. setelah itu tambahkan script <?php echo $contents;?> di antara class=’page-content’ untuk meload content secara dinamis.

<div class="page-content">
<?php echo $contents;?>
</div><!-- /.page-content -->

lalu silahkan buka web browser dan akses http://localhost/ci-aceadmin/index.php/example untuk melihat hasilnya, jika anda melakukan nya dengan benar maka akan muncul seperti dibawah ini :

jika anda ingin mendapatkan source ini secara utuh maka anda bisa mengdownlonya pada repository Github saya.

Nuris Akbar SST, M.Kom

Senior Backend Web Developer Dengan Pengalaman Lebih Dari 8 Tahun, Sekarang Menjadi CTO Di Startup Globalvillage, Founder Academy Diigtal Dan Instruktur Training Di PT Brainamtics Cipta Informatika.

See author's posts