Integrasi Admin LTE ke CodeIgniter

 Mikho Rahayoni (2103197082)

D3 PJJ TI AK B 2019      💻 Politeknik Elektronika Negeri Surabaya 💻 

Tutorial Template Dinamis dan Integrasi AdminLTE dengan CodeIgniter

1. Download codeigniter versi 3.1.11 [ download ]

2. Ekstrak hasil download ke folder khusus coding

3. Ganti nama folder menjadi ci-adminlte kemudian buka di text editor

4. Buka application/config/autoload.php dan sesuaikan seperti berikut :

Code awal :

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

Ganti menjadi seperti code berikut :

$autoload['libraries'] = array('session','form_validation','template');
$autoload['helper'] = array('url','form','file');

Keterangan :

Pada libraries terdapat “template” dinama ini adalah pemanggilan class Template yang ada di application/libraries/Template.php, selain dari template itu adalah bawaan dari codeigniternya.

5. Ganti base_url menjadi dinamis Cara Membuat Base URL Dinamis

6. Buat file application/libraries/Template.php dan masukkan code berikut :

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

class Template
{
    var $template_data = array();
    function set($name, $value){
        $this->template_data[$name] = $value;
    }

    function load($template = '', $view = '' , $view_data = array(), $return = FALSE){
        $this->CI =& get_instance();
        $this->set('contents', $this->CI->load->view($view, $view_data, TRUE));
        return $this->CI->load->view($template, $this->template_data, $return);
    }
}

7. Buka application/controllers/Welcome.php dan ganti function index menjadi seperti berikut :

public function index()
{
  $this->template->load('layouts/template', 'welcome_message');
}

Keterangan :

$this->template->load(); adalah code yang kita buat core nya pada langkah 7 dan layouts/template adalah pemanggilan kerangka template yang akan digunakan, sedangkan welcome_message adalah isi atau contentnya.

8. Buka application/views/welcome_message.php dan ganti code nya dengan code berikut :

	<section class="content-header">
	<h1>
	Dashboard
	<small>Version 2.0</small>
	</h1>
	<ol class="breadcrumb">
	<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
	<li class="active">Dashboard</li>
	</ol>
	</section>
	<!-- Main content -->
	<section class="content">
	<!-- Info boxes -->
	<div class="row">
	<div class="col-md-3 col-sm-6 col-xs-12">
	<div class="info-box">
	<span class="info-box-icon bg-aqua"><i class="ion ion-ios-gear-outline"></i></span>
	<div class="info-box-content">
	<span class="info-box-text">CPU Traffic</span>
	<span class="info-box-number">90<small>%</small></span>
	</div>
	<!-- /.info-box-content -->
	</div>
	<!-- /.info-box -->
	</div>
	<!-- /.col -->
	<div class="col-md-3 col-sm-6 col-xs-12">
	<div class="info-box">
	<span class="info-box-icon bg-red"><i class="fa fa-google-plus"></i></span>
	<div class="info-box-content">
	<span class="info-box-text">Likes</span>
	<span class="info-box-number">41,410</span>
	</div>
	<!-- /.info-box-content -->
	</div>
	<!-- /.info-box -->
	</div>
	<!-- /.col -->
	<!-- fix for small devices only -->
	<div class="clearfix visible-sm-block"></div>
	<div class="col-md-3 col-sm-6 col-xs-12">
	<div class="info-box">
	<span class="info-box-icon bg-green"><i class="ion ion-ios-cart-outline"></i></span>
	<div class="info-box-content">
	<span class="info-box-text">Sales</span>
	<span class="info-box-number">760</span>
	</div>
	<!-- /.info-box-content -->
	</div>
	<!-- /.info-box -->
	</div>
	<!-- /.col -->
	<div class="col-md-3 col-sm-6 col-xs-12">
	<div class="info-box">
	<span class="info-box-icon bg-yellow"><i class="ion ion-ios-people-outline"></i></span>
	<div class="info-box-content">
	<span class="info-box-text">New Members</span>
	<span class="info-box-number">2,000</span>
	</div>
	<!-- /.info-box-content -->
	</div>
	<!-- /.info-box -->
	</div>
	<!-- /.col -->
	</div>
	<!-- /.row -->
	<!-- Main row -->
	<div class="row">
	<!-- Left col -->
	<div class="col-md-8">
	<!-- TABLE: LATEST ORDERS -->
	<div class="box box-info">
	<div class="box-header with-border">
	<h3 class="box-title">Latest Orders</h3>
	<div class="box-tools pull-right">
	<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
	</button>
	<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
	</div>
	</div>
	<!-- /.box-header -->
	<div class="box-body">
	<div class="table-responsive">
	<table class="table no-margin">
	<thead>
	<tr>
	<th>Order ID</th>
	<th>Item</th>
	<th>Status</th>
	<th>Popularity</th>
	</tr>
	</thead>
	<tbody>
	<tr>
	<td><a href="pages/examples/invoice.html">OR9842</a></td>
	<td>Call of Duty IV</td>
	<td><span class="label label-success">Shipped</span></td>
	<td>
	<div class="sparkbar" data-color="#00a65a" data-height="20">90,80,90,-70,61,-83,63</div>
	</td>
	</tr>
	<tr>
	<td><a href="pages/examples/invoice.html">OR1848</a></td>
	<td>Samsung Smart TV</td>
	<td><span class="label label-warning">Pending</span></td>
	<td>
	<div class="sparkbar" data-color="#f39c12" data-height="20">90,80,-90,70,61,-83,68</div>
	</td>
	</tr>
	<tr>
	<td><a href="pages/examples/invoice.html">OR7429</a></td>
	<td>iPhone 6 Plus</td>
	<td><span class="label label-danger">Delivered</span></td>
	<td>
	<div class="sparkbar" data-color="#f56954" data-height="20">90,-80,90,70,-61,83,63</div>
	</td>
	</tr>
	<tr>
	<td><a href="pages/examples/invoice.html">OR7429</a></td>
	<td>Samsung Smart TV</td>
	<td><span class="label label-info">Processing</span></td>
	<td>
	<div class="sparkbar" data-color="#00c0ef" data-height="20">90,80,-90,70,-61,83,63</div>
	</td>
	</tr>
	<tr>
	<td><a href="pages/examples/invoice.html">OR1848</a></td>
	<td>Samsung Smart TV</td>
	<td><span class="label label-warning">Pending</span></td>
	<td>
	<div class="sparkbar" data-color="#f39c12" data-height="20">90,80,-90,70,61,-83,68</div>
	</td>
	</tr>
	<tr>
	<td><a href="pages/examples/invoice.html">OR7429</a></td>
	<td>iPhone 6 Plus</td>
	<td><span class="label label-danger">Delivered</span></td>
	<td>
	<div class="sparkbar" data-color="#f56954" data-height="20">90,-80,90,70,-61,83,63</div>
	</td>
	</tr>
	<tr>
	<td><a href="pages/examples/invoice.html">OR9842</a></td>
	<td>Call of Duty IV</td>
	<td><span class="label label-success">Shipped</span></td>
	<td>
	<div class="sparkbar" data-color="#00a65a" data-height="20">90,80,90,-70,61,-83,63</div>
	</td>
	</tr>
	</tbody>
	</table>
	</div>
	<!-- /.table-responsive -->
	</div>
	<!-- /.box-body -->
	<div class="box-footer clearfix">
	<a href="javascript:void(0)" class="btn btn-sm btn-info btn-flat pull-left">Place New Order</a>
	<a href="javascript:void(0)" class="btn btn-sm btn-default btn-flat pull-right">View All Orders</a>
	</div>
	<!-- /.box-footer -->
	</div>
	<!-- /.box -->
	<!-- /.box -->
	<!-- /.row -->
	</div>
	<!-- /.col -->
	<div class="col-md-4">
	<!-- Info Boxes Style 2 -->
	<div class="info-box bg-yellow">
	<span class="info-box-icon"><i class="ion ion-ios-pricetag-outline"></i></span>
	<div class="info-box-content">
	<span class="info-box-text">Inventory</span>
	<span class="info-box-number">5,200</span>
	<div class="progress">
	<div class="progress-bar" style="width: 50%"></div>
	</div>
	<span class="progress-description">
	50% Increase in 30 Days
	</span>
	</div>
	<!-- /.info-box-content -->
	</div>
	<!-- /.info-box -->
	<div class="info-box bg-green">
	<span class="info-box-icon"><i class="ion ion-ios-heart-outline"></i></span>
	<div class="info-box-content">
	<span class="info-box-text">Mentions</span>
	<span class="info-box-number">92,050</span>
	<div class="progress">
	<div class="progress-bar" style="width: 20%"></div>
	</div>
	<span class="progress-description">
	20% Increase in 30 Days
	</span>
	</div>
	<!-- /.info-box-content -->
	</div>
	<!-- /.info-box -->
	<div class="info-box bg-red">
	<span class="info-box-icon"><i class="ion ion-ios-cloud-download-outline"></i></span>
	<div class="info-box-content">
	<span class="info-box-text">Downloads</span>
	<span class="info-box-number">114,381</span>
	<div class="progress">
	<div class="progress-bar" style="width: 70%"></div>
	</div>
	<span class="progress-description">
	70% Increase in 30 Days
	</span>
	</div>
	<!-- /.info-box-content -->
	</div>
	<!-- /.info-box -->
	<div class="info-box bg-aqua">
	<span class="info-box-icon"><i class="ion-ios-chatbubble-outline"></i></span>
	<div class="info-box-content">
	<span class="info-box-text">Direct Messages</span>
	<span class="info-box-number">163,921</span>
	<div class="progress">
	<div class="progress-bar" style="width: 40%"></div>
	</div>
	<span class="progress-description">
	40% Increase in 30 Days
	</span>
	</div>
	<!-- /.info-box-content -->
	</div>
	<!-- /.info-box -->
	</div>
	<!-- /.col -->
	</div>
	<!-- /.row -->
	</section>

view rawwelcome_message.php hosted with  by GitHub

9. Buat file di application/views/layouts sesuai dengan nama yang ada di bawah kotak code :

	<link href="<?php echo base_url('assets');?>/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<link href="<?php echo base_url('assets');?>/vendor/iCheck/minimal/blue.css" rel="stylesheet">
	<link href="<?php echo base_url('assets');?>/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet">
	<link href="<?php echo base_url('assets');?>/vendor/Ionicons/css/ionicons.min.css" rel="stylesheet">
	<link href="<?php echo base_url('assets');?>/vendor/AdminLTE-2.4.3/css/AdminLTE.min.css" rel="stylesheet">
	<link href="<?php echo base_url('assets');?>/vendor/AdminLTE-2.4.3/css/skins/_all-skins.min.css" rel="stylesheet">

view raw_css.php hosted with  by GitHub

	<footer class="main-footer">
	<div class="pull-right hidden-xs">
	<?php if (ENVIRONMENT=='development'): ?>
	<b>CodeIgniter</b> <?php echo CI_VERSION; ?>
	<b>AdminLTE</b> 2.4.3
	<?php endif; ?>
	</div>
	<strong>Copyright &copy; 2014-2019 <a href="https://adminlte.io">AdminLTE</a>.</strong> All rights reserved.
	</footer>

view raw_footer.php hosted with  by GitHub

	<header class="main-header">
	<!-- Logo -->
	<a href="<?php echo base_url(); ?>" class="logo">
	<!-- mini logo for sidebar mini 50x50 pixels -->
	<span class="logo-mini"><small><b>SK</b></small></span>
	<!-- logo for regular state and mobile devices -->
	<span class="logo-lg"><b>SUSANTOKUN</b>.COM</span>
	</a>
	<!-- nav -->
	<?php require_once('_nav.php') ;?>
	</header>

view raw_header.php hosted with  by GitHub

	<!-- JavaScript -->
	<script src="<?php echo base_url('assets');?>/vendor/bootstrap/js/bootstrap.min.js"></script>
	<script src="<?php echo base_url('assets');?>/vendor/iCheck/icheck.min.js"></script>
	<script src="<?php echo base_url('assets');?>/vendor/AdminLTE-2.4.3/js/adminlte.min.js"></script>
	<script>
	window.onload = function() {
	<?php if ($this->session->flashdata('msg') != '') {
	echo "effect_msg();";
	}?>
	}
	function effect_msg_form() {
	$('.form-msg').slideDown(1000),
	setTimeout(function() {
	$('.form-msg').slideUp(1000);
	}, 3000)
	}
	function effect_msg() {
	$('.msg').show(1000),
	setTimeout(function() {
	$('.msg').fadeOut(1000);
	}, 3000)
	}
	</script>

view raw_js.php hosted with  by GitHub

	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

view raw_meta.php hosted with  by GitHub

	<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>
	</a>
	<div class="navbar-custom-menu">
	<ul class="nav navbar-nav">
	<!-- Messages: style can be found in dropdown.less-->
	<li class="dropdown messages-menu">
	<a href="#" class="dropdown-toggle" data-toggle="dropdown">
	<i class="fa fa-envelope-o"></i>
	<span class="label label-success">4</span>
	</a>
	<ul class="dropdown-menu">
	<li class="header">You have 4 messages</li>
	<li>
	<!-- inner menu: contains the actual data -->
	<ul class="menu">
	<li>
	<!-- start message -->
	<a href="#">
	<div class="pull-left">
	<img src="<?php echo base_url() ?>assets/vendor/AdminLTE-2.4.3/img/user2-160x160.jpg"
	class="img-circle" alt="User Image">
	</div>
	<h4>
	Support Team
	<small><i class="fa fa-clock-o"></i> 5 mins</small>
	</h4>
	<p>Why not buy a new awesome theme?</p>
	</a>
	</li>
	<!-- end message -->
	<li>
	<a href="#">
	<div class="pull-left">
	<img src="<?php echo base_url() ?>assets/vendor/AdminLTE-2.4.3/img/user3-128x128.jpg"
	class="img-circle" alt="User Image">
	</div>
	<h4>
	AdminLTE Design Team
	<small><i class="fa fa-clock-o"></i> 2 hours</small>
	</h4>
	<p>Why not buy a new awesome theme?</p>
	</a>
	</li>
	<li>
	<a href="#">
	<div class="pull-left">
	<img src="<?php echo base_url() ?>assets/vendor/AdminLTE-2.4.3/img/user4-128x128.jpg"
	class="img-circle" alt="User Image">
	</div>
	<h4>
	Developers
	<small><i class="fa fa-clock-o"></i> Today</small>
	</h4>
	<p>Why not buy a new awesome theme?</p>
	</a>
	</li>
	<li>
	<a href="#">
	<div class="pull-left">
	<img src="<?php echo base_url() ?>assets/vendor/AdminLTE-2.4.3/img/user3-128x128.jpg"
	class="img-circle" alt="User Image">
	</div>
	<h4>
	Sales Department
	<small><i class="fa fa-clock-o"></i> Yesterday</small>
	</h4>
	<p>Why not buy a new awesome theme?</p>
	</a>
	</li>
	<li>
	<a href="#">
	<div class="pull-left">
	<img src="<?php echo base_url() ?>assets/vendor/AdminLTE-2.4.3/img/user4-128x128.jpg"
	class="img-circle" alt="User Image">
	</div>
	<h4>
	Reviewers
	<small><i class="fa fa-clock-o"></i> 2 days</small>
	</h4>
	<p>Why not buy a new awesome theme?</p>
	</a>
	</li>
	</ul>
	</li>
	<li class="footer"><a href="#">See All Messages</a></li>
	</ul>
	</li>
	<!-- Notifications: style can be found in dropdown.less -->
	<li class="dropdown notifications-menu">
	<a href="#" class="dropdown-toggle" data-toggle="dropdown">
	<i class="fa fa-bell-o"></i>
	<span class="label label-warning">10</span>
	</a>
	<ul class="dropdown-menu">
	<li class="header">You have 10 notifications</li>
	<li>
	<!-- inner menu: contains the actual data -->
	<ul class="menu">
	<li>
	<a href="#">
	<i class="fa fa-users text-aqua"></i> 5 new members joined today
	</a>
	</li>
	<li>
	<a href="#">
	<i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the
	page and may cause design problems
	</a>
	</li>
	<li>
	<a href="#">
	<i class="fa fa-users text-red"></i> 5 new members joined
	</a>
	</li>
	<li>
	<a href="#">
	<i class="fa fa-shopping-cart text-green"></i> 25 sales made
	</a>
	</li>
	<li>
	<a href="#">
	<i class="fa fa-user text-red"></i> You changed your username
	</a>
	</li>
	</ul>
	</li>
	<li class="footer"><a href="#">View all</a></li>
	</ul>
	</li>
	<!-- Tasks: style can be found in dropdown.less -->
	<!-- 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="<?= base_url('assets/uploads/images/admin.png'); ?>" class="user-image">
	<span class="hidden-xs">SUSANTOKUN</span>
	</a>
	<ul class="dropdown-menu">
	<!-- User image -->
	<li class="user-header">
	<img src="<?= base_url('assets/uploads/images/admin.png'); ?>" class="img-circle">
	<p>
	admin@mail.com
	<small>Terakhir Masuk , 13 Maret 2020</small>
	</p>
	</li>
	<!-- Menu Footer-->
	<li class="user-footer">
	<div class="pull-left">
	<a href="#" class="btn btn-default btn-flat"><i class="fa fa-user" aria-hidden="true"></i> Profil</a>
	</div>
	<div class="pull-right">
	<a href="#" class="btn btn-default btn-flat"><i class="fa fa-sign-out" aria-hidden="true"></i> Keluar</a>
	</div>
	</li>
	</ul>
	</li>
	<!-- Control Sidebar Toggle Button -->
	</ul>
	</div>
	</nav>

view raw_nav.php hosted with  by GitHub

	<!-- Left side column. contains the logo and sidebar -->
	<aside class="main-sidebar">
	<!-- sidebar: style can be found in sidebar.less -->
	<section class="sidebar">
	<!-- Sidebar user panel (optional) -->
	<div class="user-panel">
	<div class="pull-left image">
	<img src="<?php echo base_url('assets/uploads/images/admin.png'); ?>" class="img-circle">
	</div>
	<div class="pull-left info">
	<p>admin</p>
	<!-- Status -->
	<a href="#"><i class="fa fa-circle text-success"></i> Online</a>
	</div>
	</div>
	<!-- search form (Optional) -->
	<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 -->
	<ul class="sidebar-menu" data-widget="tree">
	<li class="header">HEADER</li>
	<!-- Optionally, you can add icons to the links -->
	<li class="active"><a href="<?=base_url()?>"><i class="fa fa-dashboard"></i> <span>Dashboard</span></a></li>
	<li><a href="#"><i class="fa fa-link"></i> <span>Link</span></a></li>
	<li class="treeview" style="height: auto;">
	<a href="#">
	<i class="fa fa-share"></i> <span>Multilevel</span>
	<span class="pull-right-container">
	<i class="fa fa-angle-left pull-right"></i>
	</span>
	</a>
	<ul class="treeview-menu" style="display: none;">
	<li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
	<li class="treeview" style="height: auto;">
	<a href="#"><i class="fa fa-circle-o"></i> Level One
	<span class="pull-right-container">
	<i class="fa fa-angle-left pull-right"></i>
	</span>
	</a>
	<ul class="treeview-menu" style="display: none;">
	<li><a href="#"><i class="fa fa-circle-o"></i> Level Two</a></li>
	<li class="treeview">
	<a href="#"><i class="fa fa-circle-o"></i> Level Two
	<span class="pull-right-container">
	<i class="fa fa-angle-left pull-right"></i>
	</span>
	</a>
	<ul class="treeview-menu" style="display: none;">
	<li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
	<li><a href="#"><i class="fa fa-circle-o"></i> Level Three</a></li>
	</ul>
	</li>
	</ul>
	</li>
	<li><a href="#"><i class="fa fa-circle-o"></i> Level One</a></li>
	</ul>
	</li>
	</ul>
	<!-- /.sidebar-menu -->
	</section>
	<!-- /.sidebar -->
	</aside>

view raw_sidebar.php hosted with  by GitHub

	<!DOCTYPE html>
	<html>
	<head>
	<title>
	CodeIgniter AdminLTE
	</title>
	<link href='<?php echo base_url("assets/uploads/images/admin.png"); ?>' rel='shortcut icon' type='image/x-icon' />
	<!-- meta -->
	<?php require_once('_meta.php') ;?>
	<!-- css -->
	<?php require_once('_css.php') ;?>
	<link rel="stylesheet"
	href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
	<!-- jQuery 2.2.3 -->
	<script src="<?php echo base_url('assets');?>/vendor/jquery/jquery.min.js"></script>
	</head>
	<body class="hold-transition skin-blue fixed sidebar-mini">
	<div class="wrapper">
	<!-- header -->
	<?php require_once('_header.php') ;?>
	<!-- sidebar -->
	<?php require_once('_sidebar.php') ;?>
	<!-- content -->
	<div class="content-wrapper">
	<!-- Main content -->
	<section class="content">
	<?php echo $contents ;?>
	</section>
	</div>
	<!-- footer -->
	<?php require_once('_footer.php') ;?>
	<div class="control-sidebar-bg"></div>
	</div>
	<!-- js -->
	<?php require_once('_js.php') ;?>
	</body>
	</html>

view rawtemplate.php hosted with  by GitHub

10. Buat folder assets, folder ini berfungsi untuk menyimpan semua asset seperti images, js, css dan template adminlte. Data dari assets bisa didownload pada link di bawah kemudian ekstrak di ci-adminlte.

11. Coba buka di browser http://ci-adminlte.test/ dan hasilnya akan seperti gambar berikut :

Jika tampilannya seperti gambar di atas maka tutorial template dinamis dan integrasi adminlte dengan codeigniter sudah berhasil dilakukan.