Membuat template dinamis admin lte bootstrap dan codeigniter CI dengan ajax

Dalam kesempatan ini, kita akan memasang template admin dari framework bootstrap yang cukup terkenal yaitu ADMIN LTE, ya template ini cukup popular untuk template backend admin. Selain cukup responsive template ini lengkap dokumentasinya.

Untuk bahan bakunya (kaya mau bikin kue aja :D)

1. HMVC CI 2, disini saya masi pake versi 2 :D dan yg sudah hmvc karena lebih enak untuk pengembangan lebih lanjut menurut saya, bisa di dapat disini, download hmvc ci 2

2. Admin LTE template, saya masih menggunakan versi 2.4.0 bisa di dapat disini atau langsung download yg versi paling update

3. Webserver, disini saya menggunakan WAPP karna saya akan menggunakan postgresql sebagai databasenya, tapi menggunakan XAMPP atapun WAMP tetep lancar jaya.

4. Editor Text, yang saya gunakan Notepad++, bisa pake yg lain

5. Kopi dan cemilan (ini ga wajib, tp kalau ada sukurlah)

Ok, setelah semua sudah tersedia, maka exctralah, ke folder htdocs atau folder yg anda buat, utk, dan juga extract file admin lte.

Utk templating kita akan bagi menjadi 4 bagian, yaitu header, sidebar, content, dan footer, dan buat satu folder assets utk menampung css,js dll dari template .

copy folder dist,plugins,bower_components,build ke folder assets yang tadi di buat, dan buat folder image utk menampung gambar yg mungkin akan kita butuhkan kedepannya strukturnya di CI akan seperti ini

-Application

-assets

--dist

--plugins

--image

-system

-user_guide

-index.php

kita buat sebuah file library di application/libraries dengan nama template.php



class Template {

 protected $_ci;

 function __construct()
 {
  $this->_ci =&get_instance();
 }
 function display($template,$data=null)
 {
  if(!$this->is_ajax()){  
   $data['_head']=$this->_ci->load->view('adminlte/head',$data, true);
   $data['_header']=$this->_ci->load->view('adminlte/header',$data, true);
   $data['_sidebar']=$this->_ci->load->view('adminlte/sidebar',$data, true);
   $data['_content']=$this->_ci->load->view($template, $data, true);
   $data['_footer']=$this->_ci->load->view('adminlte/footer',$data, true);
   $data['_js']=$this->_ci->load->view('adminlte/js',$data, true);
   $this->_ci->load->view('/adminlte.php',$data);
  }
  else
  {
   $this->_ci->load->view($template,$data);
  }
 }

 function is_ajax()
 {
  return ($this->_ci->input->server('HTTP_X_REQUESTED_WITH')&&($this->_ci->input->server('HTTP_X_REQUESTED_WITH')=='XMLHttpRequest'));
 }
}

di library template kita akses beberapa file dari view yaitu head,header,sidebar,content, footer dan js

kita buat sebuah file adminlte.php copykan isi file index.html dari template Admin lte ke file ini.

dan lakukan modifikasi seperti berikut.

<!DOCTYPE html>

<html>

<?php echo $_head; ?>

<?php echo $_header; ?>

<?php echo $_sidebar; ?>

</aside>

<h1>

Dashboard

<small>Control panel</small>

</h1>

<li class="active">Dashboard</li>

</ol>

</section>

<?php echo $_content; ?>

</section>

</div>

<?php echo $_footer; ?>

<!-- Add the sidebar's background. This div must be placed

immediately after the control sidebar -->

</div>

<?php echo $_js; ?>

</div>

$(document).ready(function(){

$( document ).ajaxStart(function() {

$(".loading").fadeIn();

}).ajaxStop(function(){

$(".loading").fadeOut();

});

$('.ajax').click(function(e){

e.preventDefault();

$.get($(this).attr('href'),function(Res){

$('.content').html(Res);

});

})

</script>

</body>

</html>

kemuadian buat folder adminlte di view hingga struktrnya menjadi seperti ini

-application

--view

---adminlte.php

---adminlte

----head.php

----header.php

----siderbar.php

----footer.php

----js.php

isi dari head.php seperti ini, berikut adalah potongan dari file index.html yang hanya menggambil bagian head yg berisi css dan link di sesuaikan.

<head>

<title>AdminLTE 2 | Dashboard</title>

<!-- AdminLTE Skins. Choose a skin from the css/skins

folder instead of downloading all of them to reduce the load. -->

<!--[if lt IE 9]>

<![endif]-->

</head>

file header berisi bagian template yang kita potong sebagai header, file ini nantinya akan berhubungan dengan session utk login di admin. potongan ini berasal dari file index.html bagian <header>

<a href="<?php echo site_url('welcome'); ?>" class="logo">

<span class="logo-lg"><b>Admin</b>LTE</span>

</a>

<span class="sr-only">Toggle navigation</span>

</a>

</a>

<li class="header">You have 4 messages</li>

<li>

<img src="<?php echo base_url(); ?>assets/dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">

</div>

<h4>

Support Team

</h4>

<p>Why not buy a new awesome theme?</p>

</a>

</li>

<li>

<img src="<?php echo base_url(); ?>assets/dist/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>

<img src="<?php echo base_url(); ?>assets/dist/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>

<img src="<?php echo base_url(); ?>assets/dist/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>

<img src="<?php echo base_url(); ?>assets/dist/img/user4-128x128.jpg" class="img-circle" alt="User Image">

</div>

<h4>

Reviewers

</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>

</a>

<li class="header">You have 10 notifications</li>

<li>

<li>

<i class="fa fa-users text-aqua"></i> 5 new members joined today

</a>

</li>

<li>

<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>

<i class="fa fa-users text-red"></i> 5 new members joined

</a>

</li>

<li>

<i class="fa fa-shopping-cart text-green"></i> 25 sales made

</a>

</li>

<li>

<i class="fa fa-user text-red"></i> You changed your username

</a>

</li>

</ul>

</li>

</ul>

</li>

</a>

<li class="header">You have 9 tasks</li>

<li>

<h3>

Design some buttons

</h3>

<div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar"

aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">

<span class="sr-only">20% Complete</span>

</div>

</a>

</li>

<h3>

Create a nice theme

</h3>

<div class="progress-bar progress-bar-green" style="width: 40%" role="progressbar"

aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">

<span class="sr-only">40% Complete</span>

</div>

</a>

</li>

<h3>

Some task I need to do

</h3>

<div class="progress-bar progress-bar-red" style="width: 60%" role="progressbar"

aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">

<span class="sr-only">60% Complete</span>

</div>

</a>

</li>

<h3>

Make beautiful transitions

</h3>

<div class="progress-bar progress-bar-yellow" style="width: 80%" role="progressbar"

aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">

<span class="sr-only">80% Complete</span>

</div>

</a>

</li>

</ul>

</li>

<a href="#">View all tasks</a>

</li>

</ul>

</li>

<img src="<?php echo base_url(); ?>assets/dist/img/user2-160x160.jpg" class="user-image" alt="User Image">

<span class="hidden-xs">Alexander Pierce</span>

</a>

<img src="<?php echo base_url(); ?>assets/dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">

<p>

Alexander Pierce - Web Developer

<small>Member since Nov. 2012</small>

</p>

</li>

<a href="#">Followers</a>

</div>

<a href="#">Sales</a>

</div>

<a href="#">Friends</a>

</div>

</li>

<a href="#" class="btn btn-default btn-flat">Profile</a>

</div>

</div>

</li>

</ul>

</li>

</ul>

</div>

</nav>

</header>

berikutnya adalah sidebar, di file sidebar ini kita nantinya akan membuat manajemen menu, ini adalah potongan dari index.html yang berisi class sidebar

<img src="<?php echo base_url(); ?>assets/dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">

</div>

<p>Alexander Pierce</p>

<a href="#"><i class="fa fa-circle text-success"></i> Online</a>

</div>

</button>

</span>

</div>

</form>

<li class="header">MAIN NAVIGATION</li>

<i class="fa fa-dashboard"></i> <span>Dashboard</span>

</span>

</a>

<li class="active"><a class="ajax" href="<?php echo base_url('welcome/welcome');?>"><i class="fa fa-circle-o"></i> Welcome</a></li>

<li><a class="ajax" href="<?php echo base_url('welcome/trial'); ?>"><i class="fa fa-circle-o"></i> Trial</a></li>

</ul>

</li>

<li class="header">LABELS</li>

<li><a href="#"><i class="fa fa-circle-o text-red"></i> <span>Proses Template</span></a></li>

</ul>

</section>

kemudian file footer, file untuk memberikan keterangan footer admin panel anda

<b>Version CI</b> 0.0.1

</div>

</footer>

dan terakhir adalah file js.php file ini berisi link javascript yg di butuhkan

$.widget.bridge('uibutton', $.ui.button);

</script>

dan yang paling penting karena kita menggunakan hmvc dan menghilangkan index.php di url supaya lebih enak di lihat. kita harus membuat file httaces untuk menghilangkan index.php di url dan setting file config dapat di baca disini.

untuk menjalankan template secara otomatis maka ubah application/config/config.php

baris $autoload['libraries'] = array(); menjadi $autoload['libraries'] = array('template');

maka template anda sudah bisa di gunakan

Catatan Koding

Search This Blog

Membuat template dinamis admin lte bootstrap dan codeigniter CI dengan ajax

Labels

Comments

Post a Comment

Popular posts from this blog

Koneksi CI (Codeigniter) dengan Postgresql

Konfigurasi XAMPP dengan Postgresql (Cara menyambungkan XAMPP dengan postgresql)

Menghilangkan index.php di url codeigniter dengan httacces