Skip to main content
admin template di codeigniter

Memasang Admin Template di Codeigniter

Memasang admin template di Codeigniter sangat membantu anda dalam mempercantik website yang anda rancang. Kesulitan dalam mendesain sebuah website adalah tampilan website itu sendiri. Desain yang artistik dan juga menarik merupakan kesulitan yang dihadapi oleh banyak web developer, karena membutuhkan sentuhan seni di dalamnya. Hal ini sekarang bukanlah menjadi sebuah masalah, dengan banyak tersedianya admin template yang dapat didownload secara online baik gratis atau pun berbayar.

BACA:

Pada kesempatan kali ini, saya ingin membahas bagaimana memasang template yang didownload secara online dan gratis ke dalam codeigniter. Template yang saya pilih adalah template Klorofil, dimana anda bisa mendapatkan secara gratis di www.themeineed.comTemplate ini tersedia dalam 2 versi yakni : gratis dan berbayar, dimana perbedaannya adalah kelengkapan atribut template itu sendiri. Untuk versi yang berbayar memiliki atribut yang jauh lebih lengkap hingga ratusan, sehingga anda bisa bebas mendesain beragam page/halaman sesuai dengan kebutuhan,

Pada tutorial kali ini saya menggunakan versi yang gratis untuk membantu anda memberikan gambaran bagaimana menerapkan admin template di codeigniter.

Panduan Memasang Admin Template di Codeigniter

1. Setelah anda download file tersebut, maka segera anda extract isi dari file template klorofil tersebut. Copas keseluruhan folder assets dan tempatkan di folder codeigniter anda.

admin template di codeigniter gb1

2. copas ke folder codeigniter anda, perhatikan gambar dibawah ini folder asli codeigniter hanya application dan system.

admin template di codeigniter gb2

3.Selanjutnya adalah silahkan buka di notepad file klorofil/index.html.

admin template di codeigniter gb3

4. Kemudian anda rancang demikian: file dipecah menjadi 4 bagian yakni header, navigasi ,sidebar dan konten. dimana penjelasannya adalah sebagai berikut:

File Header ( v_header.php)

File  ini berisi komponen header pada html yang dimulai dari tag <!doctype html> sampai dengan </head> , kemudian copas ke dalam file baru v_header.php yang anda tempatkan di folder application/views/v_header.php. Akan tetapi pada bagian link/URL yang memanggil file css anda ubah menjadi


<?php echo base_url('assets/vendor/bootstrap/css/bootstrap.min.css')?>

dimana anda menambahkan kode:


<?php echo base_url('....')?>

hasilnya akan seperti gambar dibawah ini.

admin template di codeigniter gb4

 

File Navigasi (v_navigasi.php)

File ini berisi navigasi atau tombol horizontal yang anda temukan di admin template klorofil ini. Copas file mulai dari tag <body> sampai dengan </nav> (sebelum baris kode sidebar) dan letakkan di folder apllication/views/v_navigasi.php

admin template di codeigniter gb5

File Sidebar (v_sidebar.php)

File ini berisi baris kode sidebar , yakni baris kode yang mengatur instrumen sidebar yang berupa tombol navigasi sidebar. Silahkan anda copy dimulai dari tag <!– LEFT SIDEBAR –> sampai dengan <!– END LEFT SIDEBAR –>. Kemudian anda copas di application/views/v_sidebar.php

admin template di codeigniter gb6

File Konten (v_konten.php)

File ini berisi baris kode konten, anda bisa mengcopas sisa dari code index.html tepatnya setelah tag <!– END LEFT SIDEBAR –> tadi. Letakkan pada folder application/views/v_konten.php

admin template di codeigniter gb7

5. Setelah lengkap anda memiliki file di folder view tersebut, selanjutnya silahkan buka application/controller/autoload.php dan edit file


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

menjadi


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

6. Lanjutkan dengan buka file application/controller/config.php dan edit file berikut:


$config['base_url'] = '';

menjadi:


$config['base_url'] = 'http://localhost/latihan/';

(perhatikan bahwa base url diatas adalah lokasi dari folder codeigniter anda)

7. Langkah berikutnya adalah memanggil template view tersebut, dengan mengubah file application/controller/Welcome.php menjadi seperti berikut:


<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Welcome extends CI_Controller {

/**
* Index Page for this controller.
*
* Maps to the following URL
* http://example.com/index.php/welcome
* - or -
* http://example.com/index.php/welcome/index
* - or -
* Since this controller is set as the default controller in
* config/routes.php, it's displayed at http://example.com/
*
* So any other public methods not prefixed with an underscore will
* map to /index.php/welcome/<method_name>
* @see https://codeigniter.com/user_guide/general/urls.html
*/

public function index()
{
$this->load->view('v_header');
$this->load->view('v_navigasi');
$this->load->view('v_sidebar');
$this->load->view('v_konten');
}
}

8. Setelah semua persiapan selesai silahkan anda akses codeigniter anda, pada latihan ini saya menempatkan di folder latihan, sehingga diakses di browser menjadi http://localhost/latihan

admin template di codeigniter gb8

Catatan Penulis

Anda bisa mendowonload FILE Latihannya DISINI. Agar membantu anda dalam memahami tutorial diatas. Setelah anda paham, maka dengan mudah anda mendesain halaman admin, member, login, kontak dll. Sehingga anda bisa mendesain secara utuh sebuah website dengan beragam halaman didalamnya.

Jika anda membutuhkan bantuan atau ingin belajar bersama, silahkan tulis di kolom komentar. Saya dengan senang hati akan belajar bersama anda.

Leave a Reply

Your email address will not be published. Required fields are marked *