Integrasi Template Ace Admin Bootstrap di Website CodeIgniter

Salah satu template bootstrap yang bisa Anda gunakan scara gratis dalam membangun sebuah website khususnya untuk halaman Admin atau halaman Dashboard adalah Ace Admin Boostrap. Desain template ini cukup bagus dan mudah di optimasi dalam pembuatan website yang sifatnya backend website. Ace Admin Template sudah di lengkapi dengan dataTables.net yang bisa Anda gunakan untuk menampilkan data dalam bentuk table. DataTables sangat perlu Anda gunakan untuk pengolahan data dari database secara dinamis.


Pada artikel ini saya akan membantu Anda meng-integrasikan Ace Admin Template dengan Framework CodeIgniter di akhir artikel saya sudah siapkan video yang dimulai dengan Install dan konfigurasi CodeIgniter.

A. Persiapan

  • Download CodeIgniter [https://github.com/bcit-ci/CodeIgniter/archive/3.1.2.zip]
  • Download Ace Admin Template [https://github.com/bopoda/ace/archive/master.zip]

B. Install dan Configurasi CodeIgniter

Install CodeIgniter
  1. Buat folder webci. Untuk XAMPP [C:\xampp\htdoc] dan WAMP [C:\wamp\www]
  2. Extract CodeIgniter dan Ace Admin Template yang telah di download ke dalam folde webci
  3. Struktur folder webci:

    Ket:
    Folder assets pada gambar di atas berisi file dan folder dari Ace Admin Template, sedangkan folder dan file selain dari folder assets adalah file dari CodeIgniter
  4. Buat file .htaccess dan isi dengan script berikut:
    
    <IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ index.php/$1 [L]
    </IfModule>
    
Konfigurasi CodeIgniter [webci/application/config/]
  1. autoload.php
    
    $autoload['libraries'] = array('database','session');
    $autoload['helper'] = array('url');
    
  2. config.php
    
    $config['base_url'] = 'http://localhost/webci';
    $config['index_page'] = '';
    $config['encryption_key'] = 'VWMa4aPwD48w97BH0kKH6kntEp4SgVxf';
    
  3. database.php
    
    'hostname' => 'localhost',
    'username' => 'root',
    'password' => '',
    'database' => 'webci',
    
  4. routes.php
    
    $route['default_controller'] = 'home';
    $route['404_override'] = 'notfound';
    

C. Membuat Mockup Website dengan Template Ace Admin

1. Buat 2 Controller
  • Home.php
    
    <?php
    defined('BASEPATH') OR exit('No direct script access allowed');
    class Home extends CI_Controller {
      public function index(){
        $data['title'] = "WEBCI";
        $data['subtitle'] = "Website CodeIgniter";
        $data['description'] = "Description halaman home";
        $data['view_isi'] = "view_home";
        $this->load->view('layout/template',$data);
      }
    }
    
  • Notfound.php
    
    <?php
    defined('BASEPATH') OR exit('No direct script access allowed');
    class Notfound extends CI_Controller {
      public function index(){
        $data['title'] = "Error 404";
        $data['subtitle'] = "Page Not Found";
        $data['description'] = "Description halaman page not found";
        $data['view_isi'] = "view_404";
        $this->load->view('layout/template',$data);
      }
    }
    
2. Buat folder layout di dalam folder view.
3. Buat file-file berikut di dalam folder layout (isi file blank.html dari Ace Admin template yang saya bagi menjadi 4 bagian):

 a. template.php

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta charset="utf-8" />
    <title><?php echo $title.' - '.$subtitle;?></title>
    <meta name="description" content="<?php echo $description;?>" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <!-- bootstrap & fontawesome -->
    <link rel="stylesheet" href="<?php echo base_url();?>assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="<?php echo base_url();?>assets/font-awesome/4.5.0/css/font-awesome.min.css" />
    <!-- page specific plugin styles -->
    <!-- text fonts -->
    <link rel="stylesheet" href="<?php echo base_url();?>assets/css/fonts.googleapis.com.css" />
    <!-- ace styles -->
    <link rel="stylesheet" href="<?php echo base_url();?>assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
    <!--[if lte IE 9]>
      <link rel="stylesheet" href="<?php echo base_url();?>assets/css/ace-part2.min.css" class="ace-main-stylesheet" />
    <![endif]-->
    <link rel="stylesheet" href="<?php echo base_url();?>assets/css/ace-skins.min.css" />
    <link rel="stylesheet" href="<?php echo base_url();?>assets/css/ace-rtl.min.css" />
    <!--[if lte IE 9]>
      <link rel="stylesheet" href="<?php echo base_url();?>assets/css/ace-ie.min.css" />
    <![endif]-->
    <!-- inline styles related to this page -->
    <!-- ace settings handler -->
    <script src="<?php echo base_url();?>assets/js/ace-extra.min.js"></script>
    <!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->
    <!--[if lte IE 8]>
    <script src="<?php echo base_url();?>assets/js/html5shiv.min.js"></script>
    <script src="<?php echo base_url();?>assets/js/respond.min.js"></script>
    <![endif]-->
  </head>
  <body class="skin-2">
    <?php $this->load->view('layout/header');?>
    <div class="main-container ace-save-state" id="main-container">
      <script type="text/javascript">try{ace.settings.loadState('main-container')}catch(e){}</script>
      <?php $this->load->view('layout/sidebar');?>
      <?php $this->load->view($view_isi);?>
      <?php $this->load->view('layout/footer');?>
      <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse"><i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i></a>
    </div><!-- /.main-container -->
    <!-- basic scripts -->
    <!--[if !IE]> -->
    <script src="<?php echo base_url();?>assets/js/jquery-2.1.4.min.js"></script>
    <!-- <![endif]-->
    <!--[if IE]>
      <script src="<?php echo base_url();?>assets/js/jquery-1.11.3.min.js"></script>
    <![endif]-->
    <script type="text/javascript">if('ontouchstart' in document.documentElement) document.write("<script src='<?php echo base_url();?>assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");</script>
    <script src="<?php echo base_url();?>assets/js/bootstrap.min.js"></script>
    <!-- page specific plugin scripts -->    
    <!-- ace scripts -->
    <script src="<?php echo base_url();?>assets/js/ace-elements.min.js"></script>
    <script src="<?php echo base_url();?>assets/js/ace.min.js"></script>
    <!-- inline scripts related to this page -->
  </body>
</html>

 b. header.php

<div id="navbar" class="navbar navbar-default ace-save-state">
  <div class="navbar-container ace-save-state" id="navbar-container">
    <button type="button" class="navbar-toggle menu-toggler pull-left" id="menu-toggler" data-target="#sidebar">
      <span class="sr-only">Toggle sidebar</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="navbar-header pull-left">
      <a href="index.html" class="navbar-brand">
        <small><i class="fa fa-leaf"></i> Web CI</small>
      </a>
    </div>
    <div class="navbar-buttons navbar-header pull-right" role="navigation">
      <ul class="nav ace-nav">
        <li class="grey dropdown-modal">
          <a data-toggle="dropdown" class="dropdown-toggle" href="#">
            <i class="ace-icon fa fa-tasks"></i>
            <span class="badge badge-grey">4</span>
          </a>
          <ul class="dropdown-menu-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">
            <li class="dropdown-header">
              <i class="ace-icon fa fa-check"></i>
              4 Tasks to complete
            </li>
            <li class="dropdown-content">
              <ul class="dropdown-menu dropdown-navbar">
                <li>
                  <a href="#">
                    <div class="clearfix">
                      <span class="pull-left">Software Update</span>
                      <span class="pull-right">65%</span>
                    </div>
                    <div class="progress progress-mini">
                      <div style="width:65%" class="progress-bar"></div>
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <div class="clearfix">
                      <span class="pull-left">Hardware Upgrade</span>
                      <span class="pull-right">35%</span>
                    </div>
                    <div class="progress progress-mini">
                      <div style="width:35%" class="progress-bar progress-bar-danger"></div>
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <div class="clearfix">
                      <span class="pull-left">Unit Testing</span>
                      <span class="pull-right">15%</span>
                    </div>
                    <div class="progress progress-mini">
                      <div style="width:15%" class="progress-bar progress-bar-warning"></div>
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <div class="clearfix">
                      <span class="pull-left">Bug Fixes</span>
                      <span class="pull-right">90%</span>
                    </div>
                    <div class="progress progress-mini progress-striped active">
                      <div style="width:90%" class="progress-bar progress-bar-success"></div>
                    </div>
                  </a>
                </li>
              </ul>
            </li>
            <li class="dropdown-footer">
              <a href="#">
                See tasks with details
                <i class="ace-icon fa fa-arrow-right"></i>
              </a>
            </li>
          </ul>
        </li>
        <li class="purple dropdown-modal">
          <a data-toggle="dropdown" class="dropdown-toggle" href="#">
            <i class="ace-icon fa fa-bell icon-animated-bell"></i>
            <span class="badge badge-important">8</span>
          </a>
          <ul class="dropdown-menu-right dropdown-navbar navbar-pink dropdown-menu dropdown-caret dropdown-close">
            <li class="dropdown-header">
              <i class="ace-icon fa fa-exclamation-triangle"></i>
              8 Notifications
            </li>
            <li class="dropdown-content">
              <ul class="dropdown-menu dropdown-navbar navbar-pink">
                <li>
                  <a href="#">
                    <div class="clearfix">
                      <span class="pull-left">
                        <i class="btn btn-xs no-hover btn-pink fa fa-comment"></i>
                        New Comments
                      </span>
                      <span class="pull-right badge badge-info">+12</span>
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <i class="btn btn-xs btn-primary fa fa-user"></i>
                    Bob just signed up as an editor ...
                  </a>
                </li>
                <li>
                  <a href="#">
                    <div class="clearfix">
                      <span class="pull-left">
                        <i class="btn btn-xs no-hover btn-success fa fa-shopping-cart"></i>
                        New Orders
                      </span>
                      <span class="pull-right badge badge-success">+8</span>
                    </div>
                  </a>
                </li>
                <li>
                  <a href="#">
                    <div class="clearfix">
                      <span class="pull-left">
                        <i class="btn btn-xs no-hover btn-info fa fa-twitter"></i>
                        Followers
                      </span>
                      <span class="pull-right badge badge-info">+11</span>
                    </div>
                  </a>
                </li>
              </ul>
            </li>
            <li class="dropdown-footer">
              <a href="#">
                See all notifications
                <i class="ace-icon fa fa-arrow-right"></i>
              </a>
            </li>
          </ul>
        </li>
        <li class="green dropdown-modal">
          <a data-toggle="dropdown" class="dropdown-toggle" href="#">
            <i class="ace-icon fa fa-envelope icon-animated-vertical"></i>
            <span class="badge badge-success">5</span>
          </a>
          <ul class="dropdown-menu-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">
            <li class="dropdown-header">
              <i class="ace-icon fa fa-envelope-o"></i>
              5 Messages
            </li>
            <li class="dropdown-content">
              <ul class="dropdown-menu dropdown-navbar">
                <li>
                  <a href="#" class="clearfix">
                    <img src="<?php echo base_url();?>assets/images/avatars/avatar.png" class="msg-photo" alt="Alex's Avatar" />
                    <span class="msg-body">
                      <span class="msg-title">
                        <span class="blue">Alex:</span>
                        Ciao sociis natoque penatibus et auctor ...
                      </span>
                      <span class="msg-time">
                        <i class="ace-icon fa fa-clock-o"></i>
                        <span>a moment ago</span>
                      </span>
                    </span>
                  </a>
                </li>
                <li>
                  <a href="#" class="clearfix">
                    <img src="<?php echo base_url();?>assets/images/avatars/avatar3.png" class="msg-photo" alt="Susan's Avatar" />
                    <span class="msg-body">
                      <span class="msg-title">
                        <span class="blue">Susan:</span>
                        Vestibulum id ligula porta felis euismod ...
                      </span>
                      <span class="msg-time">
                        <i class="ace-icon fa fa-clock-o"></i>
                        <span>20 minutes ago</span>
                      </span>
                    </span>
                  </a>
                </li>
                <li>
                  <a href="#" class="clearfix">
                    <img src="<?php echo base_url();?>assets/images/avatars/avatar4.png" class="msg-photo" alt="Bob's Avatar" />
                    <span class="msg-body">
                      <span class="msg-title">
                        <span class="blue">Bob:</span>
                        Nullam quis risus eget urna mollis ornare ...
                      </span>
                      <span class="msg-time">
                        <i class="ace-icon fa fa-clock-o"></i>
                        <span>3:15 pm</span>
                      </span>
                    </span>
                  </a>
                </li>
                <li>
                  <a href="#" class="clearfix">
                    <img src="<?php echo base_url();?>assets/images/avatars/avatar2.png" class="msg-photo" alt="Kate's Avatar" />
                    <span class="msg-body">
                      <span class="msg-title">
                        <span class="blue">Kate:</span>
                        Ciao sociis natoque eget urna mollis ornare ...
                      </span>
                      <span class="msg-time">
                        <i class="ace-icon fa fa-clock-o"></i>
                        <span>1:33 pm</span>
                      </span>
                    </span>
                  </a>
                </li>
                <li>
                  <a href="#" class="clearfix">
                    <img src="<?php echo base_url();?>assets/images/avatars/avatar5.png" class="msg-photo" alt="Fred's Avatar" />
                    <span class="msg-body">
                      <span class="msg-title">
                        <span class="blue">Fred:</span>
                        Vestibulum id penatibus et auctor  ...
                      </span>
                      <span class="msg-time">
                        <i class="ace-icon fa fa-clock-o"></i>
                        <span>10:09 am</span>
                      </span>
                    </span>
                  </a>
                </li>
              </ul>
            </li>
            <li class="dropdown-footer">
              <a href="inbox.html">
                See all messages
                <i class="ace-icon fa fa-arrow-right"></i>
              </a>
            </li>
          </ul>
        </li>
        <li class="light-blue dropdown-modal">
          <a data-toggle="dropdown" href="#" class="dropdown-toggle">
            <img class="nav-user-photo" src="<?php echo base_url();?>assets/images/avatars/user.jpg" alt="Jason's Photo" />
            <span class="user-info">
              <small>Welcome,</small>
              <?php echo $this->session->userdata('nama');?>
            </span>
            <i class="ace-icon fa fa-caret-down"></i>
          </a>
          <ul class="user-menu dropdown-menu-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
            <li>
              <a href="#">
                <i class="ace-icon fa fa-cog"></i>
                Settings
              </a>
            </li>
            <li>
              <a href="profile.html">
                <i class="ace-icon fa fa-user"></i>
                Profile
              </a>
            </li>
            <li class="divider"></li>
            <li>
              <a href="<?php echo base_url('logout');?>">
                <i class="ace-icon fa fa-power-off"></i>
                Logout
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div><!-- /.navbar-container -->
</div>

 c. sidebar.php

<div id="sidebar" class="sidebar responsive ace-save-state">
 <script type="text/javascript">
  try{ace.settings.loadState('sidebar')}catch(e){}
 </script>
 <div class="sidebar-shortcuts" id="sidebar-shortcuts">
  <div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
   <button class="btn btn-success">
    <i class="ace-icon fa fa-signal"></i>
   </button>
   <button class="btn btn-info">
    <i class="ace-icon fa fa-pencil"></i>
   </button>
   <button class="btn btn-warning">
    <i class="ace-icon fa fa-users"></i>
   </button>
   <button class="btn btn-danger">
    <i class="ace-icon fa fa-cogs"></i>
   </button>
  </div>
  <div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
   <span class="btn btn-success"></span>
   <span class="btn btn-info"></span>
   <span class="btn btn-warning"></span>
   <span class="btn btn-danger"></span>
  </div>
 </div><!-- /.sidebar-shortcuts -->
 <ul class="nav nav-list">
  <li class="">
   <a href="index.html">
    <i class="menu-icon fa fa-tachometer"></i>
    <span class="menu-text"> Dashboard</span>
   </a>
   <b class="arrow"></b>
  </li>
  
  <li class="">
   <a href="#" class="dropdown-toggle">
    <i class="menu-icon fa fa-list"></i>
    <span class="menu-text"> Tables </span>
    <b class="arrow fa fa-angle-down"></b>
   </a>
   <b class="arrow"></b>
   <ul class="submenu">
    <li class="">
     <a href="tables.html">
      <i class="menu-icon fa fa-caret-right"></i>
      Simple &amp; Dynamic
     </a>
     <b class="arrow"></b>
    </li>
    <li class="">
     <a href="jqgrid.html">
      <i class="menu-icon fa fa-caret-right"></i>
      jqGrid plugin
     </a>
     <b class="arrow"></b>
    </li>
   </ul>
  </li>
  <li class="">
   <a href="#" class="dropdown-toggle">
    <i class="menu-icon fa fa-pencil-square-o"></i>
    <span class="menu-text"> Forms </span>
    <b class="arrow fa fa-angle-down"></b>
   </a>
   <b class="arrow"></b>
   <ul class="submenu">
    <li class="">
     <a href="form-elements.html">
      <i class="menu-icon fa fa-caret-right"></i>
      Form Elements
     </a>
     <b class="arrow"></b>
    </li>
    <li class="">
     <a href="form-elements-2.html">
      <i class="menu-icon fa fa-caret-right"></i>
      Form Elements 2
     </a>
     <b class="arrow"></b>
    </li>
    <li class="">
     <a href="form-wizard.html">
      <i class="menu-icon fa fa-caret-right"></i>
      Wizard &amp; Validation
     </a>
     <b class="arrow"></b>
    </li>
    <li class="">
     <a href="wysiwyg.html">
      <i class="menu-icon fa fa-caret-right"></i>
      Wysiwyg &amp; Markdown
     </a>
     <b class="arrow"></b>
    </li>
    <li class="">
     <a href="dropzone.html">
      <i class="menu-icon fa fa-caret-right"></i>
      Dropzone File Upload
     </a>
     <b class="arrow"></b>
    </li>
   </ul>
  </li>
  <li class="">
   <a href="widgets.html">
    <i class="menu-icon fa fa-list-alt"></i>
    <span class="menu-text"> Widgets </span>
   </a>
   <b class="arrow"></b>
  </li>
  <li class="">
   <a href="calendar.html">
    <i class="menu-icon fa fa-calendar"></i>
    <span class="menu-text">
     Calendar
     <span class="badge badge-transparent tooltip-error" title="2 Important Events">
      <i class="ace-icon fa fa-exclamation-triangle red bigger-130"></i>
     </span>
    </span>
   </a>
   <b class="arrow"></b>
  </li>
  <li class="">
   <a href="gallery.html">
    <i class="menu-icon fa fa-picture-o"></i>
    <span class="menu-text"> Gallery </span>
   </a>
   <b class="arrow"></b>
  </li>
  <li class="">
   <a href="#" class="dropdown-toggle">
    <i class="menu-icon fa fa-tag"></i>
    <span class="menu-text"> More Pages </span>
    <b class="arrow fa fa-angle-down"></b>
   </a>
   <b class="arrow"></b>
   <ul class="submenu">
    <li class="">
     <a href="profile.html">
      <i class="menu-icon fa fa-caret-right"></i>
      User Profile
     </a>
     <b class="arrow"></b>
    </li>
    <li class="">
     <a href="inbox.html">
      <i class="menu-icon fa fa-caret-right"></i>
      Inbox
     </a>
     <b class="arrow"></b>
    </li>
    <li class="">
     <a href="pricing.html">
      <i class="menu-icon fa fa-caret-right"></i>
      Pricing Tables
     </a>
     <b class="arrow"></b>
    </li>
    <li class="">
     <a href="invoice.html">
      <i class="menu-icon fa fa-caret-right"></i>
      Invoice
     </a>
     <b class="arrow"></b>
    </li>
    <li class="">
     <a href="timeline.html">
      <i class="menu-icon fa fa-caret-right"></i>
      Timeline
     </a>
     <b class="arrow"></b>
    </li>
    <li class="">
     <a href="search.html">
      <i class="menu-icon fa fa-caret-right"></i>
      Search Results
     </a>
     <b class="arrow"></b>
    </li>
    <li class="">
     <a href="email.html">
      <i class="menu-icon fa fa-caret-right"></i>
      Email Templates
     </a>
     <b class="arrow"></b>
    </li>
    <li class="">
     <a href="login.html">
      <i class="menu-icon fa fa-caret-right"></i>
      Login &amp; Register
     </a>
     <b class="arrow"></b>
    </li>
   </ul>
  </li>
  <li class="active open">
   <a href="#" class="dropdown-toggle">
    <i class="menu-icon fa fa-file-o"></i>
    <span class="menu-text">
     Other Pages
     <span class="badge badge-primary">5</span>
    </span>
    <b class="arrow fa fa-angle-down"></b>
   </a>
   <b class="arrow"></b>
   <ul class="submenu">
    <li class="">
     <a href="faq.html">
      <i class="menu-icon fa fa-caret-right"></i>
      FAQ
     </a>
     <b class="arrow"></b>
    </li>
    <li class="">
     <a href="error-404.html">
      <i class="menu-icon fa fa-caret-right"></i>
      Error 404
     </a>
     <b class="arrow"></b>
    </li>
    <li class="">
     <a href="error-500.html">
      <i class="menu-icon fa fa-caret-right"></i>
      Error 500
     </a>
     <b class="arrow"></b>
    </li>
    <li class="">
     <a href="grid.html">
      <i class="menu-icon fa fa-caret-right"></i>
      Grid
     </a>
     <b class="arrow"></b>
    </li>
    <li class="active">
     <a href="blank.html">
      <i class="menu-icon fa fa-caret-right"></i>
      Blank Page
     </a>
     <b class="arrow"></b>
    </li>
   </ul>
  </li>
 </ul><!-- /.nav-list -->
 <div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
  <i id="sidebar-toggle-icon" class="ace-icon fa fa-angle-double-left ace-save-state" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
 </div>
</div>

 d. footer.php

<div class="footer">
 <div class="footer-inner">
  <div class="footer-content">
   <span class="bigger-120">
    <span class="blue bolder"><?php echo $title;?></span>
    <?php echo $subtitle;?> &copy; 2013-<?php echo date('Y');?>
   </span>
      
   <span class="action-buttons">
    <a href="#">
     <i class="ace-icon fa fa-twitter-square light-blue bigger-150"></i>
    </a>
    <a href="#">
     <i class="ace-icon fa fa-facebook-square text-primary bigger-150"></i>
    </a>
    <a href="#">
     <i class="ace-icon fa fa-rss-square orange bigger-150"></i>
    </a>
   </span>
  </div>
 </div>
</div>

4. Buat 2 file view untuk halaman home dan halaman error 404

 a. view_home.php

<div class="main-content">
 <div class="main-content-inner">
  <div class="breadcrumbs ace-save-state" id="breadcrumbs">
   <ul class="breadcrumb">
    <li>
     <i class="ace-icon fa fa-home home-icon"></i>
     <a href="<?php echo base_url();?>">Home</a>
    </li>
    <li class="active">Blank Page</li>
   </ul><!-- /.breadcrumb -->
   <div class="nav-search" id="nav-search">
    <form class="form-search">
     <span class="input-icon">
      <input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off" />
      <i class="ace-icon fa fa-search nav-search-icon"></i>
     </span>
    </form>
   </div><!-- /.nav-search -->
  </div>
  <div class="page-content">
   <div class="page-header">
    <h1>
     Welcome to
     <small>
      <i class="ace-icon fa fa-angle-double-right"></i>
      Website CodeIgniter
     </small>
    </h1>
   </div><!-- /.page-header -->
   <div class="row">
    <div class="col-xs-12">
     <!-- PAGE CONTENT BEGINS -->
     
     <!-- PAGE CONTENT ENDS -->
    </div><!-- /.col -->
   </div><!-- /.row -->
  </div><!-- /.page-content -->
 </div>
</div><!-- /.main-content -->

 b. view_404.php

<div class="main-content">
 <div class="main-content-inner">
  <div class="breadcrumbs ace-save-state" id="breadcrumbs">
   <ul class="breadcrumb">
    <li>
     <i class="ace-icon fa fa-home home-icon"></i>
     <a href="<?php echo base_url();?>">Home</a>
    </li>
    <li class="active">Error 404</li>
   </ul><!-- /.breadcrumb -->
   <div class="nav-search" id="nav-search">
    <form class="form-search">
     <span class="input-icon">
      <input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off" />
      <i class="ace-icon fa fa-search nav-search-icon"></i>
     </span>
    </form>
   </div><!-- /.nav-search -->
  </div>
  <div class="page-content">
   
   <div class="row">
    <div class="col-xs-12">
     <!-- PAGE CONTENT BEGINS -->
     <div class="error-container">
      <div class="well">
       <h1 class="grey lighter smaller">
        <span class="blue bigger-125">
         <i class="ace-icon fa fa-sitemap"></i>
         404
        </span>
        Page Not Found
       </h1>
       <hr />
       <h3 class="lighter smaller">We looked everywhere but we couldn't find it!</h3>
       <div>
        <form class="form-search">
         <span class="input-icon align-middle">
          <i class="ace-icon fa fa-search"></i>
          <input type="text" class="search-query" placeholder="Give it a search..." />
         </span>
         <button class="btn btn-sm" type="button">Go!</button>
        </form>
        <div class="space"></div>
        <h4 class="smaller">Try one of the following:</h4>
        <ul class="list-unstyled spaced inline bigger-110 margin-15">
         <li>
          <i class="ace-icon fa fa-hand-o-right blue"></i>
          Re-check the url for typos
         </li>
         <li>
          <i class="ace-icon fa fa-hand-o-right blue"></i>
          Read the faq
         </li>
         <li>
          <i class="ace-icon fa fa-hand-o-right blue"></i>
          Tell us about it
         </li>
        </ul>
       </div>
       <hr />
       <div class="space"></div>
       <div class="center">
        <a href="javascript:history.back()" class="btn btn-grey">
         <i class="ace-icon fa fa-arrow-left"></i>
         Go Back
        </a>
        <a href="#" class="btn btn-primary">
         <i class="ace-icon fa fa-tachometer"></i>
         Dashboard
        </a>
       </div>
      </div>
     </div>
     <!-- PAGE CONTENT ENDS -->
    </div><!-- /.col -->
   </div><!-- /.row -->
  </div><!-- /.page-content --> -->
 </div>
</div><!-- /.main-content -->

Video Install & Config CI + Integrasi Ace Admin Bootstrap




Sekian artikel Cara Integrasi Template Ace Admin Bootstrap di Website CodeIgniter, semoga bermanfaat...
Previous Post