Dalam pembuatan website tampilan yang elegant pasti sangat dibutuhkan, dan tentunya kalian bakalan kewalahan jika membuat nya dari nol terlbih lagi akan menghabiskan banyak waktu, oleh karena itu semarsoft akan berbagi tentang cara integrasi template adminlte dengan codeigniter. Dengan adanya template kalian tidak perlu susah payah mendesain sendiri dari nol untuk membuat tampilan yang keren, cukup bermodalkan copy paste fitur – fitur yang terdapat dalam template, kalian sudah mendapatkan tampilan web yang sangat cantik.
Apa sih Template AdminLTE itu?
AdminLTE merupakan desain yang secara default digunakan untuk backend atau bisa dikatakan administrator, namun tergantung selera juga ingin digunakan untuk backend ataupun frontend. AdminLTE ini sangat banyak fitur-fitur yang sudah tersedia, tinggal pilih fitur yang akan kita gunakan, AdminLTE juga memiliki berbagai versi, nah kali ini versi yang kita gunakan adalah AdminLTE-2.4.18, kalian bisa download melalui tautan berikut ini
Download AdminLTE-2.4.18
Karena bahasan kita kali ini berkaitan dengan codeigniter maka akan ada beberapa perubahan dalam mengelola template adminlte yang dinamakan integrasi template adminlte dengan codeigniter. selain inegrasi kita juga akan membuat layout atau kerangka agar code pada aplikasi web kita menjadi lebih rapi dan simpel. Template dinamis merupakan suatu kerangka template yang digunakan dalam medesain view yang lebih simpel, ketika meload suatu halaman maka kita tidak perlu memanggil header, footer dan lainnya terus menerus dalam halaman tersebut. cukup 1 file layout yang dipanggil, semua file pendukungnya otomatis terpanggil. yuk langsung saja kita simak cara pembuatannya
Tutorial Template Dinamis
- Setelah berhasil mendownload AdminLTE, langkah berikutnya adalah mengekstrak file tersebut ke dalam folder asset yang terdapat pada project kita, misal project kita bernama lspweb maka strukturnya akan seperti gambar berikut
- Buka application/config/autoload.php menggunakan editor dan sesuaikan codingnya 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 file “template” dimana file ini merupakan pemanggilan class Template yang terdapat di application/libraries/Template.php, selain dari template itu adalah bawaan dari codeigniternya. - Ganti
$config['base_url'] =''Menjadi$config['base_url'] = 'http://localhost/lspweb/';lspweb bisa kalian sesuaikan dengan nama projectnya masing-masing - Buat file Template.php di dalam folder namaproject/application/libraries/ 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); } } - 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(); merupakan code yang sudah kita buat pada langkah 4 dan layouts/template adalah memanggil kerangka template yang akan digunakan, sedangkan welcome_message adalah view yang akan kita buka
- Buka application/views/welcome_message.php dan ganti seluruh code nya dengan code berikut ini :
<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> - Buat file dengan nama _css.php di dalam folder application/views/layouts kemudian isi dengan code berikut
<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"> <!-- Morris chart --> <link rel="stylesheet" href="<?php echo base_url('assets');?>/bower_components/morris.js/morris.css"> <!-- jvectormap --> <link rel="stylesheet" href="<?php echo base_url('assets');?>/bower_components/jvectormap/jquery-jvectormap.css"> <!-- Date Picker --> <link rel="stylesheet" href="<?php echo base_url('assets');?>/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css"> <!-- Daterange picker --> <link rel="stylesheet" href="<?php echo base_url('assets');?>/bower_components/bootstrap-daterangepicker/daterangepicker.css"> <!-- bootstrap wysihtml5 - text editor --> <link rel="stylesheet" href="<?php echo base_url('assets');?>/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <!-- Google Font --> <link rel="stylesheet" href="<?php echo base_url('assets');?>/https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic"> - Buat file dengan nama _footer.php di dalam folder application/views/layouts kemudian isi dengan code berikut
<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.18 <?php endif; ?> </div> <strong>Copyright © 2014-2020 <a href="https://adminlte.io">AdminLTE</a>.</strong> All rights reserved. </footer> - Buat file dengan nama _header.php di dalam folder application/views/layouts kemudian isi dengan code berikut
<header class="main-header"> <!-- Logo --> <a href="<?php echo base_url() ?>index.php/welcome" class="logo"> <!-- mini logo for sidebar mini 50x50 pixels --> <span class="logo-mini"><b>S</b>I</span> <!-- logo for regular state and mobile devices --> <span class="logo-lg"><b>LSP</b></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/images/admin.png" class="user-image" width='48' height='48' alt="User Image"> <span class="hidden-xs">Syauqi</span> </a> <ul class="dropdown-menu"> <!-- User image --> <li class="user-header"> <img src="<?php echo base_url() ?>assets/images/admin.png" class="img-circle" alt="User Image"> <p> <?php echo "Syauqi" ?> <small>Member since Dec. 2020</small> </p> </li> <!-- Menu Footer--> <li class="user-footer"> <div class="pull-left"> <?php echo anchor('user/profile', 'Profile', array('class' => 'btn btn-default btn-flat')); ?> <!--<a href="#" class="btn btn-default btn-flat">Profile</a>--> </div> <div class="pull-right"> <?php echo anchor('auth/logout', 'Logout', array('class' => 'btn btn-default btn-flat')); ?> <!--<a href="#" 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> - Buat file dengan nama _js.php di dalam folder application/views/layouts kemudian isi dengan code berikut
<!-- jQuery 3 --> <script src="<?php echo base_url('assets');?>/bower_components/jquery/dist/jquery.min.js"></script> <!-- jQuery UI 1.11.4 --> <script src="<?php echo base_url('assets');?>/bower_components/jquery-ui/jquery-ui.min.js"></script> <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip --> <script> $.widget.bridge('uibutton', $.ui.button); </script> <!-- Bootstrap 3.3.7 --> <script src="<?php echo base_url('assets');?>/bower_components/bootstrap/dist/js/bootstrap.min.js"></script> <!-- Morris.js charts --> <script src="<?php echo base_url('assets');?>/bower_components/raphael/raphael.min.js"></script> <script src="<?php echo base_url('assets');?>/bower_components/morris.js/morris.min.js"></script> <!-- Sparkline --> <script src="<?php echo base_url('assets');?>/bower_components/jquery-sparkline/dist/jquery.sparkline.min.js"></script> <!-- jvectormap --> <script src="<?php echo base_url('assets');?>/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script> </script src="<?php echo base_url('assets');?>/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script> <!-- jQuery Knob Chart --> <script src="<?php echo base_url('assets');?>/bower_components/jquery-knob/dist/jquery.knob.min.js"></script> <!-- daterangepicker --> <script src="<?php echo base_url('assets');?>/bower_components/moment/min/moment.min.js"></script> <script src="<?php echo base_url('assets');?>/bower_components/bootstrap-daterangepicker/daterangepicker.js"></script> <!-- datepicker --> <script src="<?php echo base_url('assets');?>/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script> <!-- Bootstrap WYSIHTML5 --> <script src="<?php echo base_url('assets');?>/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.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 dashboard demo (This is only for demo purposes) --> <script src="<?php echo base_url('assets');?>/dist/js/pages/dashboard.js"></script> <!-- AdminLTE for demo purposes --> <script src="<?php echo base_url('assets');?>/dist/js/demo.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> - Buat file dengan nama _meta.php di dalam folder application/views/layouts kemudian isi dengan code berikut
<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">
- Buat file dengan nama _sidebar.php di dalam folder application/views/layouts kemudian isi dengan code berikut
<!-- Main Sidebar Container --> <aside class="main-sidebar sidebar-dark-primary elevation-4"> <!-- 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/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>Data Master</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="<?php echo base_url('index.php/Kelas')?>"><i class="fa fa-circle-o"></i> Data Kelas</a></li> <li><a href="<?php echo base_url('index.php/Jurusan')?>"><i class="fa fa-circle-o"></i> Data Jurusan</a></li> <li><a href="<?php echo base_url('index.php/Siswa')?>"><i class="fa fa-circle-o"></i> Data Siswa</a></li> </ul> </li> </ul> <!-- /.sidebar-menu --> </section> <!-- /.sidebar --> </aside> <!-- /.sidebar --> </aside> - Buat file dengan nama template.php di dalam folder application/views/layouts kemudian isi dengan code berikut
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Semarsoft Crud Tutorial</title> <!-- Tell the browser to be responsive to screen width --> <!-- meta --> <?php require_once('_meta.php') ;?> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"> <!-- Bootstrap 3.3.7 --> <!-- css --> <?php require_once('_css.php') ;?> <!-- Google Font --> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic"> </head> <body class="hold-transition skin-blue sidebar-mini"> <div class="wrapper"> <!-- header --> <?php require_once('_header.php') ;?> <!-- Left side column. contains the logo and sidebar --> <!-- sidebar --> <?php require_once('_sidebar.php') ;?> <!-- js --> <?php require_once('_js.php') ;?> <!-- Main content --> <section class="content"> <?php echo $contents ;?> </section> <!-- footer --> <?php require_once('_footer.php') ;?> </div> </body> </html> - Jika langkah-langkah diatas sudah selesai, sekarang buka di browser http://localhost/lspweb dan hasilnya akan seperti gambar berikut :
- Jika tampilannya seperti gambar di atas maka tutorial template dinamis dan integrasi adminlte dengan codeigniter sudah berhasil dilakukan.
- Setelah berhasil mendownload AdminLTE, langkah berikutnya adalah mengekstrak file tersebut ke dalam folder asset yang terdapat pada project kita, misal project kita bernama lspweb maka strukturnya akan seperti gambar berikut
