Cara Menggunakan Template Admin LTE di Codeigniter 3

-

Salam semangat untuk kita semua semoga dalam lindungan Nya. Kali ini saya akan menulis tentang cara menggunakan template Admin LTE di codeigniter 3. Untuk penjelasan yang panjang dan lebar baiknya anda membaca langsung dari web resminya Codeigniter.

Langsung saja, projek yang akan kita buat bernama sisfo dan template yang kita gunakan adalah Admin LTE 3. Kita tau bahwa Codeigniter mengusung metode MVC (model, view, controler). Untuk menerapkan template secara utuh mau tidak mau kita harus berurusan degan model, view dan kontroler. Disini saya ingin berbagi tentang konsep. Karena jika tentang tutorial, maka mungkin panjang sekali caranya. Sehingga untuk menyelesaikan masalah ini saya akan langsung berbagi projeknya, Nanti....


Nah, disini kita sudah memiliki projek bernama sisfo, yang mana adalah hasil ekstrak dari dowload-an Ci. Template admin LTE di letakkan dalam folder template. 


Nah, di view ini lah template-template kita cacah lalu disatukan kembali melalui bantuan library. Pada projek ini saya membuat tiga jenis template yaitu: HOME, FORM, dan TABEL sebagai induknya, dimana bagian yang terpisah adalah MENU dan ISI. Saya membuat 3 jenis template agar CSS dan JS dapat menyesuaikan dengan ISI nya.

Masih ingatkan dengan projek saya yang tanpa framework Ci, saya menyatukan template dengan include. Secara logika prosesnya hampir mirip menggunakan atau tanpa Ci, yaitu terpisah dan disatukan kembali.


Pada baris 14 kita meload model bernama Home Model. Model ini lah yang mengurusi model-model data. Pada baris 26 kita inilah kita menyatukan template, jenis template yang saya gunakan adalah template HOME "template_home". Menu yang diload berarti statis atau tidak mebawa data "menu", sedangkan isi "home/home" membawa data melalui variabel array $data.

Masih bingung? template adalah sebuah objek dengan fungsi load dengan 4 parameter. Nah, pertanyaannya kapan class template ini di load? ya, pada autoload.


Nah, ini dia library templatenya. dialah yang menyatukan kembali template, menu, dan isi. Library ini bisa dikembangkan lagi, misalkan templatenya mau dipecah beberapa bagian lagi.

Untuk kode template_home.php yang begitu panjang saya perlihatkan di sini.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>SISFO</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="<?php echo base_url(); ?>template/plugins/fontawesome-free/css/all.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Tempusdominus Bbootstrap 4 -->
  <link rel="stylesheet" href="<?php echo base_url(); ?>template/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
  <!-- iCheck -->
  <link rel="stylesheet" href="<?php echo base_url(); ?>template/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
  <!-- JQVMap -->
  <link rel="stylesheet" href="<?php echo base_url(); ?>template/plugins/jqvmap/jqvmap.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="<?php echo base_url(); ?>template/dist/css/adminlte.min.css">
  <!-- overlayScrollbars -->
  <link rel="stylesheet" href="<?php echo base_url(); ?>template/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
  <!-- Daterange picker -->
  <link rel="stylesheet" href="<?php echo base_url(); ?>template/plugins/daterangepicker/daterangepicker.css">
  <!-- summernote -->
  <link rel="stylesheet" href="<?php echo base_url(); ?>template/plugins/summernote/summernote-bs4.css">
  <!-- Google Font: Source Sans Pro -->
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">

   <!-- Navbar -->
  <nav class="main-header navbar navbar-expand navbar-lightblue navbar-dark">
    <!-- Left navbar links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
      </li>
      <li class="nav-item d-none d-sm-inline-block">
        <a href="index3.html" class="nav-link">Home</a>
      </li>
      <li class="nav-item d-none d-sm-inline-block">
        <a href="#" class="nav-link">Contact</a>
      </li>
    </ul>

     <!-- SEARCH FORM -->
    <form class="form-inline ml-3">
      <div class="input-group input-group-sm">
        <input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
        <div class="input-group-append">
          <button class="btn btn-navbar" type="submit">
            <i class="fas fa-search"></i>
          </button>
        </div>
      </div>
    </form>

     <!-- Right navbar links -->
    <ul class="navbar-nav ml-auto">
      <!-- Messages Dropdown Menu -->
      <li class="nav-item dropdown">
        <a class="nav-link" data-toggle="dropdown" href="#">
          <i class="far fa-comments"></i>
          <span class="badge badge-danger navbar-badge">3</span>
        </a>
        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
          <a href="#" class="dropdown-item">
            <!-- Message Start -->
            <div class="media">
              <img src="<?php echo base_url(); ?>template/dist/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 mr-3 img-circle">
              <div class="media-body">
                <h3 class="dropdown-item-title">
                  Brad Diesel
                  <span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span>
                </h3>
                <p class="text-sm">Call me whenever you can...</p>
                <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
              </div>
            </div>
            <!-- Message End -->
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item">
            <!-- Message Start -->
            <div class="media">
              <img src="<?php echo base_url(); ?>template/dist/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
              <div class="media-body">
                <h3 class="dropdown-item-title">
                  John Pierce
                  <span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span>
                </h3>
                <p class="text-sm">I got your message bro</p>
                <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
              </div>
            </div>
            <!-- Message End -->
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item">
            <!-- Message Start -->
            <div class="media">
              <img src="<?php echo base_url(); ?>template/dist/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
              <div class="media-body">
                <h3 class="dropdown-item-title">
                  Nora Silvester
                  <span class="float-right text-sm text-warning"><i class="fas fa-star"></i></span>
                </h3>
                <p class="text-sm">The subject goes here</p>
                <p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
              </div>
            </div>
            <!-- Message End -->
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
        </div>
      </li>
      <!-- Notifications Dropdown Menu -->
      <li class="nav-item dropdown">
        <a class="nav-link" data-toggle="dropdown" href="#">
          <i class="far fa-bell"></i>
          <span class="badge badge-warning navbar-badge">15</span>
        </a>
        <div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
          <span class="dropdown-item dropdown-header">15 Notifications</span>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item">
            <i class="fas fa-envelope mr-2"></i> 4 new messages
            <span class="float-right text-muted text-sm">3 mins</span>
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item">
            <i class="fas fa-users mr-2"></i> 8 friend requests
            <span class="float-right text-muted text-sm">12 hours</span>
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item">
            <i class="fas fa-file mr-2"></i> 3 new reports
            <span class="float-right text-muted text-sm">2 days</span>
          </a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
          <i class="fas fa-th-large"></i>
        </a>
      </li>
    </ul>
  </nav>
  <!-- /.navbar -->

   <!-- Main Sidebar Container -->
  <?php
  echo $menu;
  ?>

   <!-- Content Wrapper. Contains page content -->
  <?php
  echo $isi;
  ?>
  <!-- /.content-wrapper -->
  <footer class="main-footer">
    <strong>Copyright &copy; 2014-2019 <a href="http://adminlte.io">AdminLTE.io</a>.</strong>
    All rights reserved.
    <div class="float-right d-none d-sm-inline-block">
      <b>Version</b> 3.0.3-pre
    </div>
  </footer>

   <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
    <!-- Control sidebar content goes here -->
  </aside>
  <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->

 <!-- jQuery -->
<script src="<?php echo base_url(); ?>template/plugins/jquery/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="<?php echo base_url(); ?>template/plugins/jquery-ui/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
  $.widget.bridge('uibutton', $.ui.button)
</script>
<!-- Bootstrap 4 -->
<script src="<?php echo base_url(); ?>template/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- ChartJS -->
<script src="<?php echo base_url(); ?>template/plugins/chart.js/Chart.min.js"></script>
<!-- Sparkline -->
<script src="<?php echo base_url(); ?>template/plugins/sparklines/sparkline.js"></script>
<!-- JQVMap -->
<script src="<?php echo base_url(); ?>template/plugins/jqvmap/jquery.vmap.min.js"></script>
<script src="<?php echo base_url(); ?>template/plugins/jqvmap/maps/jquery.vmap.usa.js"></script>
<!-- jQuery Knob Chart -->
<script src="<?php echo base_url(); ?>template/plugins/jquery-knob/jquery.knob.min.js"></script>
<!-- daterangepicker -->
<script src="<?php echo base_url(); ?>template/plugins/moment/moment.min.js"></script>
<script src="<?php echo base_url(); ?>template/plugins/daterangepicker/daterangepicker.js"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script src="<?php echo base_url(); ?>template/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
<!-- Summernote -->
<script src="<?php echo base_url(); ?>template/plugins/summernote/summernote-bs4.min.js"></script>
<!-- overlayScrollbars -->
<script src="<?php echo base_url(); ?>template/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<!-- AdminLTE App -->
<script src="<?php echo base_url(); ?>template/dist/js/adminlte.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="<?php echo base_url(); ?>template/dist/js/pages/dashboard.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="<?php echo base_url(); ?>template/dist/js/demo.js"></script>
</body>
</html>


Pada link CSS, dan JS banyak menggunakan fungsi base_url(). Jangan lupa disetting base urlnya di config.


Sebagai kesimpulannya, framework Ci mengharuskan penggunanya tau OOP (Oriented Object Programmin) pada PHP. Nah, di OOP terkadang orang tidak perduli lagi isi dari classnya. Orang hanya menggunakan objek dan fungsi yang terkadang tidak melihat isi class lagi.

Terima kasih sekian penjelasan konsep pemasangan template admin LTE di Ci dari saya. Terima kasih telah membaca tulisan ini.

Download
Password rar :belajarwebmedan.blogspot.com
username login : admin@admin.com
password login : password

Popular posts from this blog

Cara membuat Link ke Halaman lain dan Link ke bagian Halaman

-
Image
Link adalah bagian dari HTML yang fungsinya untuk menghubungkan satu halaman dengan halaman lain. Link juga bisa diartikan sebagai cara berpindah dari satu halaman ke halaman lain. 1. Link ke Halaman Lain Tag yang digunakan untuk membuat link adalah tag anchor atau tag <a> , yang berpasangan dengan </a> . Link biasanya menggunakan objek untuk di klik yang di letakkan diatara tag buka dan tag tutup. Teks Tombol (Button) Gambar Ketiga objek di atas sering dijadikan link, dan tidak ada kategori yang paling sering digunakan. Mimilih teks, tombol, atau gambar sebagai link sangat opsional atau tidak ada keharusan. Format link <a href="url" name="nama_link"> Objek Link </a> 1.1. Contoh Link Dengan Objek Teks <!--nama file link.html--> Untuk ke halaman selanjutnya <a href="link2.html">Klik disini</a> Teks klik disini jika di klik halaman akan berpindah ke link2.html. Pada conto
Read more

Cara Menggunakan Template Admin LTE Sebagai Template Web Dinamis

-
Image
Kali ini saya akan membuat tutorial bagaimana menggunakan template gratis sebagai template web dinamis. Pertama anda download terlebih dulu templatenya disini . Pada tutorial ini saya menggunakan template admin LTE 2. Pada template ini saya memecah bagian index.php dan menyatukan kembali dengan include, tujuannya agar template terbagi-bagi dan mudah dipahami. Selain itu, pembagian ini lah yang membuat web menjadi dinamis. Perlu diingat cara saya ini bukanlah cara satu-satu nya Cara Menggunakan template Admin LTE Sebagai Template Web Dinamis . Cara ini saya sharing karena menurut saya adalah cara yang cukup efisien dan mampu menangani semua halaman yang akan kita buat. Bagian terpenting nya adalah mampu menghasilkan program sesuai yang kita harapkan dengan cara yang lebih mudah dibuat. Pertama kita buat folder di htdocs template kemudian ekstrak file zip nya di folder tersebut. Selanjutnya buka folder template dan rename file index.html menjadi index.php  . Buka file
Read more

Cara Membuat Kalkulator Dengan Java Script

-
Image
Kali ini saya akan membagikan tutorial cara membuat kalkulator sederhana dengan java script. Kita ketahui java script adalah bahasa pemrograman klien. Artinya kode program dapat dilihat dari web browser. Kelebihan bahasa java script ini halaman tidak perlu reload. <!--nama file calc.php--> <!DOCTYPE html> <html> <head> <title>Calculator</title> <style type="text/css"> .tombol{ background-color: deepskyblue; } .tabel{ background-color: gold; margin: 10px; padding: 10px; } </style> </head> <body> <form name="calculator"> <table style="background-color: " class="tabel"> <caption>Calculator</caption> <tr> <td>Angka 1</td><td>:</td><td><input type="number" name="angka1"></td> </tr> <tr> <td>Angka 2</td&
Read more