Site Loader
  Chat

Sebelum melakukan konfigurasi pastikan anda sudah menginstal web server dan Codeigniter, apabila belum silahkan baca postingan saya sebelum.

Apabila instalasi codeigniter dan menginstall XAMPP sudah dilakukan silahkan anda unduh template admin LTE di situs https://github.com/almasaeed2010/AdminLTE. Silahkan anda ekstrak untuk menghasilkan suatu folder dan file.

Konfigurasi Template Admin LTE dengan framework Codeigniter 

1. Langkah pertama yang perlu dilakukan yaitu menambah suatu library template guna mengubah sistem menjadi konten yang dinamis. Di bawah ini library template

Konfigurasi Template Admin LTE dengan framework Codeigniter

Silahkan letakan di folder applicationlibraries

2. Langkah berikutnya melakukan konfigurasi pengaturan, silahkan anda pergi ke folder config dan ubah script $config[‘base_url’] = ‘namaalamathost’; menjadi $config[‘base_url’] = ‘namaalamathost‘;
3. Langkah berikutnya silahkan anda pergi ke folder config kemudian edit file autoload menjadi seperti di bawah ini :
  
4. Apabila sudah silahkan anda buat folder dengan nama assets sejajar dengan isi nama project anda , kemudian pindahkan CSS dan javascript anda ke dalam folder yang anda buat, punya saya dengan nama folder assets.

5. Langkah berikut nya yaitu membuat controller baru , beri nama dashboard.php di folder Application kemudian Controller. Dibawah ini scriptnya.

 class Dashboard extends CI_Controller
  {
public function index()
{
$this->template->load(‘template’,’dashboard1′);
}
}

6. Kemudian membuat halaman view untuk menampilkan template dinamis admin LTE. Cara dengan membuat file baru pada folder application kemudian views, buat file dengan nama template.php. di bawah ini script nya  

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<title>Administrator Olshop </title>
<!– Tell the browser to be responsive to screen width –>
<meta content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no” name=”viewport”>
<!– Bootstrap 3.3.7 –>
<link rel=”stylesheet” href=”<?php echo base_url() ;?>assets/bower_components/bootstrap/dist/css/bootstrap.min.css”>
<!– Font Awesome –>
<link rel=”stylesheet” href=”<?php echo base_url() ;?>assets/bower_components/font-awesome/css/font-awesome.min.css”>
<!– Ionicons –>
<link rel=”stylesheet” href=”<?php echo base_url() ;?>assets/bower_components/Ionicons/css/ionicons.min.css”>
<!– Theme style –>
<link rel=”stylesheet” href=”<?php echo base_url() ;?>assets/dist/css/AdminLTE.min.css”>
<!– AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. –>
<link rel=”stylesheet” href=”<?php echo base_url() ;?>assets/dist/css/skins/_all-skins.min.css”>

<link rel=”stylesheet” href=”<?php echo base_url() ;?>assets/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css”>



<!– Google Font –>
<link rel=”stylesheet” href=”https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic”>

<link rel=”stylesheet” href=”<?php echo base_url() ;?>assets/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css”>

<link rel=”stylesheet” href=”<?php echo base_url() ;?>assets/plugins/iCheck/all.css”>
<!– Bootstrap Color Picker –>
<link rel=”stylesheet” href=”<?php echo base_url() ;?>assets/bower_components/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.min.css”>
<!– Bootstrap date Picker –>

<link rel=”stylesheet” href=”<?php echo base_url() ;?>assets/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css”>
<link rel=”stylesheet” href=”<?php echo base_url() ;?>assets/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css”>
<style type=”text/css”>

.none-border tr ,.none-border th,.none-border td
{
border: none !important;


</style>
</head>
<body class=”hold-transition skin-white sidebar-mini fixed”>
<!– Site wrapper –>
<div class=”wrapper”>

<header class=”main-header”>
<!– Logo –>
<a href=”#” class=”logo”>
<!– mini logo for sidebar mini 50×50 pixels –>
<span class=”logo-mini”><b>A</b>LT</span>
<!– logo for regular state and mobile devices –>
<span class=”logo-lg”><b>OL</b>SHOP <small>v1</small></span>
</a>
<!– Header Navbar: style can be found in header.less –>
<nav class=”navbar navbar-static-top”>
<!– Sidebar toggle button–>
<a href=”#” class=”sidebar-toggle” data-toggle=”push-menu” role=”button”>
<span class=”sr-only”>Toggle navigation</span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</a>

<div class=”navbar-custom-menu”>
<ul class=”nav navbar-nav”>

    <!– User Account: style can be found in dropdown.less –>
<li class=”dropdown user user-menu”>
        <a href=”#” class=”dropdown-toggle” data-toggle=”dropdown”>
            <img src=”<?php echo base_url();?>assets/dist/img/user2-160×160.jpg” class=”user-image” alt=”User Image”>
            <span class=”hidden-xs”><?php echo $this->session->userdata(‘username’); ?></span>
        </a>
        <ul class=”dropdown-menu”>
            <!– User image –>
<li class=”user-header”>
                <img src=”<?php echo base_url();?>assets/dist/img/user2-160×160.jpg” class=”img-circle” alt=”User Image”>

                <p><?php echo $this->session->userdata(‘username’); ?>
                    <small>Member since Nov. 2012</small>
                </p>
</li>
<!– Menu Body –>
            <!– Menu Footer–>
<li class=”user-footer”>
                <div class=”pull-left”>
                    <!– <a href=”#” class=”btn btn-default btn-flat”>Profile</a> –>
                </div>
<div class=”pull-right”>
                    <a href=”<?php echo site_url();?>auth/out” class=”btn btn-default btn-flat”>Sign out</a>
                </div>
</li>
</ul>
</li>
<!– Control Sidebar Toggle Button –>
<li>
        <a href=”#” data-toggle=”control-sidebar”><i class=”fa fa-gears”></i></a>
    </li>
</ul>
</div>
</nav>
</header>

<!– =============================================== –>

<!– Left side column. contains the sidebar –>
<aside class=”main-sidebar”>
<!– sidebar: style can be found in sidebar.less –>
<section class=”sidebar”>
<!– Sidebar user panel –>
<div class=”user-panel”>
<div class=”pull-left image”>
    <img src=”<?php echo base_url();?>assets/dist/img/user2-160×160.jpg” class=”img-circle” alt=”User Image”>
</div>
<div class=”pull-left info”>
    <p><?php echo $this->session->userdata(‘username’); ?></p>
<a href=”#”><i class=”fa fa-circle text-success”></i> Online</a>
</div>
</div>
<!– search form –>
<form action=”#” method=”get” class=”sidebar-form”>
<div class=”input-group”>
    <input type=”text” name=”q” class=”form-control” placeholder=”Search…”>
    <span class=”input-group-btn”>
        <button type=”submit” name=”search” id=”search-btn” class=”btn btn-flat”><i class=”fa fa-search”></i>
        </button>
    </span>
</div>
</form>
<!– /.search form –>
<!– sidebar menu: : style can be found in sidebar.less –>
<ul class=”sidebar-menu” data-widget=”tree”>
<li class=”header”>MAIN NAVIGATION</li>
<!–
<li class=”treeview”>
          <a href=”#”>
            <i class=”fa fa-dashboard”></i> <span>Dashboard</span>
            <span class=”pull-right-container”>
              <i class=”fa fa-angle-left pull-right”></i>
            </span>
          </a>
          <ul class=”treeview-menu”>
<li><a href=”../../index.html”><i class=”fa fa-circle-o”></i> Dashboard v1</a></li>
<li><a href=”../../index2.html”><i class=”fa fa-circle-o”></i> Dashboard v2</a></li>
</ul>
</li>
–>
<li><a href=”<?php echo site_url();?>dashboard”><i class=”fa fa-tachometer”></i><span>Dashboard</span></a></li>
<!–
<li class=”header”>LABELS</li>
–>
<li class=”treeview”>
    <a href=”#”>
        <i class=”fa fa-database”></i> <span>Data Master</span>
        <span class=”pull-right-container”>
            <i class=”fa fa-angle-left pull-right”></i>
        </span>
    </a>
    <ul class=”treeview-menu”>
<li><a href=”<?php echo base_url();?>kategori”><i class=”fa fa-gg”></i><span>Daftar Sub & Kategori</span></a></li>
<li><a href=”<?php echo base_url();?>produk”><i class=”fa fa-database”></i><span>Daftar Produk/corpus</span></a></li>
</ul>
</li>
<li class=”treeview”>
    <a href=”#”>
        <i class=”fa fa-list-ol”></i> <span>Manajemen Corpus</span>
        <span class=”pull-right-container”>
            <i class=”fa fa-angle-left pull-right”></i>
        </span>
    </a>
    <ul class=”treeview-menu”>
<li><a href=”<?php echo base_url();?>sambung”><i class=”fa fa-hourglass-o”></i><span>Daftar Kata Sambung</span></a></li>
<li><a href=”<?php echo base_url();?>himbauan”><i class=”fa fa-adn”></i><span>Daftar Himbauan</span></a></li>
<li><a href=”<?php echo base_url();?>index_corpus”><i class=”fa fa-adn”></i><span>Daftar index Corpus</span></a></li>
</ul>
</li>
<li><a href=”<?php echo base_url();?>index_corpus/retrival”><i i class=”fa fa-bar-chart-o”></i><span>Hasil Retrival Pembobotan</span></a></li>
<li><a href=”<?php echo site_url();?>auth/admin”><i i class=”fa fa-users”></i><span>Pengguna</span></a></li>
<li><a href=”<?php echo site_url();?>” target=”_blank”><i class=”fa fa-file-o”></i><span>Lihat Website</span></a></li>
</ul>
</section>
<!– /.sidebar –>
</aside>

<!– =============================================== –>

<!– Content Wrapper. Contains page content –>
<div class=”content-wrapper”>
<!– Content Header (Page header) –>
<!– <section class=”content-header”>
<h1>
Blank page
<small>it all starts here</small>
</h1>
<ol class=”breadcrumb”>
<li><a href=”#”><i class=”fa fa-dashboard”></i> Home</a></li>
<li><a href=”#”>Examples</a></li>
<li class=”active”>Blank page</li>
</ol>
</section> –>

<!– Main content –>
<section class=”content”>

<?php echo $contents ;?>

</section>
<!– /.content –>
</div>
<!– /.content-wrapper –>

<footer class=”main-footer”>
<div class=”pull-right hidden-xs”>
<b>Version</b> 2.4.0
</div>
<strong>Template by Copyright © 2014-2016 <a href=”https://adminlte.io”>Almsaeed Studio</a>.</strong> All rights
reserved. Di Buat Oleh Galih, Universitas AHmad Dahlan Yogyakarta
</footer>

<!– Control Sidebar –>
<aside class=”control-sidebar control-sidebar-dark”>
<!– Create the tabs –>
<ul class=”nav nav-tabs nav-justified control-sidebar-tabs”>
<li><a href=”#control-sidebar-home-tab” data-toggle=”tab”><i class=”fa fa-home”></i></a></li>
<li><a href=”#control-sidebar-settings-tab” data-toggle=”tab”><i class=”fa fa-gears”></i></a></li>
</ul>
<!– Tab panes –>
<div class=”tab-content”>
<!– Home tab content –>
<div class=”tab-pane” id=”control-sidebar-home-tab”>
<h3 class=”control-sidebar-heading”>
    Recent Activity</h3>
<ul class=”control-sidebar-menu”>
<li>
        <a href=”javascript:void(0)”>
            <i class=”menu-icon fa fa-birthday-cake bg-red”></i>

            <div class=”menu-info”>
                <h4 class=”control-sidebar-subheading”>
                    Langdon’s Birthday</h4>
<p>Will be 23 on April 24th</p>
</div>
</a>
    </li>
<li>
        <a href=”javascript:void(0)”>
            <i class=”menu-icon fa fa-user bg-yellow”></i>

            <div class=”menu-info”>
                <h4 class=”control-sidebar-subheading”>
                    Frodo Updated His Profile</h4>
<p>New phone +1(800)555-1234</p>
</div>
</a>
    </li>
<li>
        <a href=”javascript:void(0)”>
            <i class=”menu-icon fa fa-envelope-o bg-light-blue”></i>

            <div class=”menu-info”>
                <h4 class=”control-sidebar-subheading”>
                    Nora Joined Mailing List</h4>
<p>[email protected]</p>
</div>
</a>
    </li>
<li>
        <a href=”javascript:void(0)”>
            <i class=”menu-icon fa fa-file-code-o bg-green”></i>

            <div class=”menu-info”>
                <h4 class=”control-sidebar-subheading”>
                    Cron Job 254 Executed</h4>
<p>Execution time 5 seconds</p>
</div>
</a>
    </li>
</ul>
<!– /.control-sidebar-menu –>

<h3 class=”control-sidebar-heading”>
    Tasks Progress</h3>
<ul class=”control-sidebar-menu”>
<li>
        <a href=”javascript:void(0)”>
            <h4 class=”control-sidebar-subheading”>
                Custom Template Design
                <span class=”label label-danger pull-right”>70%</span>
            </h4>
<div class=”progress progress-xxs”>
                <div class=”progress-bar progress-bar-danger” style=”width: 70%”>
                </div>
</div>
</a>
    </li>
<li>
        <a href=”javascript:void(0)”>
            <h4 class=”control-sidebar-subheading”>
                Update Resume
                <span class=”label label-success pull-right”>95%</span>
            </h4>
<div class=”progress progress-xxs”>
                <div class=”progress-bar progress-bar-success” style=”width: 95%”>
                </div>
</div>
</a>
    </li>
<li>
        <a href=”javascript:void(0)”>
            <h4 class=”control-sidebar-subheading”>
                Laravel Integration
                <span class=”label label-warning pull-right”>50%</span>
            </h4>
<div class=”progress progress-xxs”>
                <div class=”progress-bar progress-bar-warning” style=”width: 50%”>
                </div>
</div>
</a>
    </li>
<li>
        <a href=”javascript:void(0)”>
            <h4 class=”control-sidebar-subheading”>
                Back End Framework
                <span class=”label label-primary pull-right”>68%</span>
            </h4>
<div class=”progress progress-xxs”>
                <div class=”progress-bar progress-bar-primary” style=”width: 68%”>
                </div>
</div>
</a>
    </li>
</ul>
<!– /.control-sidebar-menu –>

</div>
<!– /.tab-pane –>
<!– Stats tab content –>
<div class=”tab-pane” id=”control-sidebar-stats-tab”>
Stats Tab Content</div>
<!– /.tab-pane –>
<!– Settings tab content –>
<div class=”tab-pane” id=”control-sidebar-settings-tab”>
<form method=”post”>
    <h3 class=”control-sidebar-heading”>
        General Settings</h3>
<div class=”form-group”>
        <label class=”control-sidebar-subheading”>
            Report panel usage
            <input type=”checkbox” class=”pull-right” checked>
        </label>

        <p>Some information about this general settings option
        </p>
</div>
<!– /.form-group –>

    <div class=”form-group”>
        <label class=”control-sidebar-subheading”>
            Allow mail redirect
            <input type=”checkbox” class=”pull-right” checked>
        </label>

        <p>Other sets of options are available
        </p>
</div>
<!– /.form-group –>

    <div class=”form-group”>
        <label class=”control-sidebar-subheading”>
            Expose author name in posts
            <input type=”checkbox” class=”pull-right” checked>
        </label>

        <p>Allow the user to show his name in blog posts
        </p>
</div>
<!– /.form-group –>

    <h3 class=”control-sidebar-heading”>
        Chat Settings</h3>
<div class=”form-group”>
        <label class=”control-sidebar-subheading”>
            Show me as online
            <input type=”checkbox” class=”pull-right” checked>
        </label>
    </div>
<!– /.form-group –>

    <div class=”form-group”>
        <label class=”control-sidebar-subheading”>
            Turn off notifications
            <input type=”checkbox” class=”pull-right”>
        </label>
    </div>
<!– /.form-group –>

    <div class=”form-group”>
        <label class=”control-sidebar-subheading”>
            Delete chat history
            <a href=”javascript:void(0)” class=”text-red pull-right”><i class=”fa fa-trash-o”></i></a>
        </label>
    </div>
<!– /.form-group –>
</form>
</div>
<!– /.tab-pane –>
</div>
</aside>
<!– /.control-sidebar –>
<!– Add the sidebar’s background. This div must be placed
immediately after the control sidebar –>
<div class=”control-sidebar-bg”>
</div>
</div>
<!– ./wrapper –>

<!– jQuery 3 –>
<script src=”<?php echo base_url() ;?>assets/bower_components/jquery/dist/jquery.min.js”></script>
<!– Bootstrap 3.3.7 –>
<script src=”<?php echo base_url() ;?>assets/bower_components/bootstrap/dist/js/bootstrap.min.js”></script>
<!– SlimScroll –>
<script src=”<?php echo base_url() ;?>assets/bower_components/jquery-slimscroll/jquery.slimscroll.min.js”></script>
<!– FastClick –>
<script src=”<?php echo base_url() ;?>assets/bower_components/fastclick/lib/fastclick.js”></script>
<!– AdminLTE App –>
<script src=”<?php echo base_url() ;?>assets/dist/js/adminlte.min.js”></script>
<!– AdminLTE for demo purposes –>
<script src=”<?php echo base_url() ;?>assets/dist/js/demo.js”></script>
<!– DataTables –>
<script src=”<?php echo base_url() ;?>assets/bower_components/datatables.net/js/jquery.dataTables.min.js”></script>
<script src=”<?php echo base_url() ;?>assets/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js”></script>
<script src=”<?php echo base_url() ;?>assets/bower_components/ckeditor/ckeditor.js”></script>
<!– Bootstrap WYSIHTML5 –>
<script src=”<?php echo base_url() ;?>assets/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js”></script>
<script src=”<?php echo base_url() ;?>assets/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js”></script>
<script>
</script>
</body>
</html>

 Kemudian buat file dengan nama dashboard1.php

<div class=”error-page”>
<h2 class=”headline text-yellow”>
404</h2>
<div class=”error-content”>
<h3>
<i class=”fa fa-warning text-yellow”></i> Oops! Page not found.</h3>
<p>We could not find the page you were looking for.
Meanwhile, you may <a href=”<?php echo site_url(‘dashboard’);?>”>return to dashboard</a> or try using the search form.
</p>
</div>
<!– /.error-content –>
</div>

Kemudian jalankan file yang anda buat tadi dengan mengetikan http:://localhost/dashboard

Post Author: Didik Prabowo

Seoarang Software enginering, Instruktur terutama di bifang pemrograman berbasis website, sekaligus admin di situs didikprabowo.com.

Leave a Reply

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

PRODUK UNGGULAN

Anda tertarik ?

Subscribe to Blog via Email

Dapat kan informasi terbaru dengan memasukan email di kolom ini