Mengintegrasikan Segala Template UI dengan CodeIgniter (Material Dashboard)

Mengintegrasikan Segala Template UI dengan CodeIgniter (Material Dashboard)
Di Posting Oleh : wandi
Kategori : CodeIgniter PHP Programming

UI adalah singkatan dari User Interface yang berarti tampilan antarmuka yang menjembatani antara sistem dengan pengguna. di era yang semakin maju teknologi tampilan UI semakin lebih baik pula dan juga semakin mudah untuk digunakan, tentu kita sebagai Programmer atau Web Designer selalu memaksimalkan tampilan UI pada aplikasi.





Untuk artikel kali ini, saya akan memberikan suatu tips mengintegrasikan segala macam template UI dengan CodeIgniter. UI yang akan kita gunakan adalah suatu template dari Creative Tim yang paling populer saat ini yaitu Material Dashboard.

Saya tulis "Segala template" pada judul, karena kita tidak hanya implementasi kode, melainkan juga mempelajari konsepnya



Sementara CodeIgniter seperti kita tahu adalah sebuah framework untuk PHP yang paling banyak digunakan di tahun 2018 ini,

Metode pengintegrasian ini, tidak hanya menyambungkan keduanya melainkan mempelajari trik agar dapat bekerja cepat dan efisien saat proses pembuatan aplikasi.

Sebelum anda memasuki langkah ini, untuk diperhatikan saya membuat langkah-langkah ini beserta penjelasan untuk membantu anda agar dapat memahami. Arti memahami dalam konteks ini adalah Tidak hanya copy-paste melainkan tahu konsepnya. 

Mari kita kumpulkan bahan bahannya dulu

CodeIgniter 3, ~2,7Mb

Material Dashboard Template, ~1,5Mb

Daftar Isi

---

• Menyiapkan Lembar Kerja
• Menganalisa Template (perencanaan)
• Proses Mengintegrasikan Template
• Selesai, sekarang membuat contoh halaman

Menyiapkan Lembar Kerja

• Instalasi

• Install server seperti XAMPP atau WAMP
• Buat folder project, (pada artikel ini: "Materialdashboard") di
  folder htdocs untuk server XAMPP atau
  folder www untuk server WAMP
• Extract isi file codeigniter dan taruh di folder project tersebut

• Jalankan server, coba akses folder project (localhost/materialdashboard), pastikan muncul halaman welcome CodeIgniter

• Menghilangkan Index.php pada URL

• Pada kondisi default CodeIgniter, URL yang dimasukkan harus ada index.php, contohnya: localhost/materialdashboard/index.php/welcome. Kita harus mengetikkan index.php pada kolom url untuk memanggil controller Welcome

• Tambahkan file .htaccess pada folder project. Struktur folder seperti berikut

• Didalam file .htaccess tersebut, tambahkan kode berikut

RewriteCond $1 !^(index\.php|resources|robots\.txt)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L,QSA]

Mohon maaf sekali tidak dapat menjelaskan kode yang satu ini. kode ini bertugas sebagai engine yang mengatur URL.

• Buka file project > application > config > config.php. Edit menggunakan text editor. Saran saya, gunakan text editor "Sublime Text".
  

• Atur parameter bawaan CodeIgniter seperti dibawah.
  Untuk kotak merah yang pertama (base_url), itu adalah alamat project anda

• Setelah diatur parameternya, jika anda mengakses dengan URL "http://localhost/materialdashboard/welcome" maka muncul halaman welcome bawaan codeigniter

• Menambahkan helper
• Tambahkan helper url pada autoload.php di applications/config/autoload.php, karena nantinya kita banyak menggunakan site_url() untuk mengambil url project CodeIgniter

Menganalisa Template (Perencanaan)

• Untuk menganalisa, kita perlu membuka halaman template. Extract template ke folder lain
• Karena file statis, buka dengan double klik pada file html

Konsep Dasar

Konsep pengintegrasian cukup mudah, simak alur berikut ini: 

1. Cari elemen yang sekiranya dapat berubah-ubah (Elemen dinamis). Misalnya: Link navigasi, Title halaman, Judul.
2. Bagian script yang memiliki konten dinamis dipisahkan pada file view tersendiri. Sehingga kita cukup memanggilnya saja.
3. Kemudian nilai elemen-elemen dinamis tersebut di tetapkan dari controller. Contoh skenario: Judul diambil dari database (yang berarti lewat controller juga), Link navigasi berdasarkan level user yang login dan lain sebagainya.

Pada artikel ini, saya menemukan elemen dinamis seperti gambar dibawah

Proses

• Elemen sudah ditentukan, mari kita analisa dibagian source code / codingannya.

Jika terlalu kecil, klik kanan gambar dibawah, kemudian klik open link in new tab agar bisa di zoom

• Pada gambar diatas, 1 file html ini dipecah menjadi beberapa bagian, posisi kita coding berada pada kontennya.php dan yang lainnya kita panggil dari sini (nama file bisa yang lainnya, misal buku.php)

Proses Mengintegrasikan Template

• Oke, kita sudah dapat gambaran templatingnya. Sekarang langkah awal pada sistem CodeIgniter adalah membuat folder assets. Template UI membutuhkan file external pendukung seperti file JS, CSS.  File tersebut diletakkan di folder assets. Buat folder assets didalam folder project

• Agar lebih rapi buat folder lagi didalam folder assets dan beri nama materialdashboard untuk mendefinisikan nama plugin. Jaga-jaga jika nantinya ada file pendukung / plug-in lain, kita bisa taruh di folder assets ini.

• Buka file html di template tadi dengan text editor. Nantinya kita akan copy-paste perbagian yang telah dipecah tadi ke file view di CodeIgniter
• Pada folder project masuk ke folder application/views buat folder template kemudian buat 4 file tadi (header.php, footer.php, js_script.php, navigation.php) didalam folder template

• kita kerjakan file header.php terlebih dahulu, Copy-paste dari file html template tadi sesuai dengan pembagian yang direncanakan. Sehingga isinya seperti berikut

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="apple-touch-icon" sizes="76x76" href="assets/img/apple-icon.png">
    <link rel="icon" type="image/png" href="assets/img/favicon.png">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>
        <?=$ui_title?>
    </title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
    <!--     Fonts and icons     -->
    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
    <link rel="stylesheet" href="<?=site_url('assets/custom/css/default.css)?>">
    <!-- CSS Files -->
    <link href="<?=site_url('assets/materialdashboard/css/')?>material-dashboard.css?v=2.1.0" rel="stylesheet" />
    <?php 
        foreach ($ui_css as $css) {
    ?>
    <link rel="stylesheet" type="text/css" href="<?=site_url('assets/' .$css)?>">
    <?php
        }
    ?>
</head>

<body class="">
    <div class="wrapper">

Penjelasan

• pada elemen dinamis, buat kode php untuk menampilkan variabel. misal pada elemen <title> saya tampilkan variabel $ui_title. $ui_title ini nantinya ditetapkan pada controller
• Sedikit berbeda dengan bagian CSS, karena variabel css dapat berisi lebih dari satu / array. Maka ditampilkan menggunakan foreach

• kemudian kita akan melanjutkan navigation.php, Isi kode sesuai dengan bagian diatas tadi

<div class="sidebar" data-color="purple" data-background-color="white">
    <!--
    Tip 1: You can change the color of the sidebar using: data-color="purple | azure | green | orange | danger"
    Tip 2: you can also add an image using data-image tag
    -->
    <div class="logo">
        <a href="<?=base_url()?>" class="simple-text logo-normal">
            <?=$ui_app_name?>
        </a>
    </div>
    <div class="sidebar-wrapper">
        <ul class="nav">
            <?php 
                foreach ($ui_sidebar_nav as $nav) {
                    $nav = explode('|', $nav);
                    $class = '';
                    if ($nav[0] == $ui_sidebar_active) {
                        $class = 'active';
                    }
                    else {
                        $class = '';
                    }
            ?>
            <li class="nav-item <?=$class?>">
                <a class="nav-link" href="<?=$nav[2]?>">
                    <i class="material-icons"><?=$nav[1]?></i>
                    <p><?=$nav[0]?></p>
                </a>
            </li>
            <?php
                }
            ?>
        </ul>
    </div>
    <div class="sidebar-background" style="background-image: url('<?=site_url('assets/materialdashboard/img/sidebar-1.jpg')?>') "></div>
</div>
<div class="main-panel">
    <nav class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top ">
        <div class="container-fluid">
            <div class="navbar-wrapper">
                <a class="navbar-brand" href="#pablo">Dashboard</a>
            </div>
            <button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="navigation-index" aria-expanded="false" aria-label="Toggle navigation">
                <span class="sr-only">Toggle navigation</span>
                <span class="navbar-toggler-icon icon-bar"></span>
                <span class="navbar-toggler-icon icon-bar"></span>
                <span class="navbar-toggler-icon icon-bar"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-end">
                <ul class="navbar-nav"> 
                    <?php 
                        foreach ($ui_top_nav as $top_nav) {
                            $nav_top = explode('|', $top_nav);
                            $nav_top_title = $nav_top[0];
                            $nav_top_icon = $nav_top[1];
                            $nav_top_link = $nav_top[2];

                            if ($ui_top_nav_active == $nav_top_title) {
                                $nav_top_class = 'active';
                            }
                            else {
                                $nav_top_class = '';
                            }
                    ?>
                    <li class="nav-item <?=$nav_top_class?>"> 
                        <a class="nav-link" href="<?=$nav_top_link?>">
                            <i class="material-icons"><?=$nav_top_icon?></i> <?=$nav_top_title?>
                        </a>
                    </li>
                    <?php 
                        }
                    ?>
                </ul>
            </div>
        </div>
    </nav>
    <div class="content">

Penjelasan

• Ada 3 elemen dinamis pada file ini, yaitu judul, navigasi sidebar, navigasi atas.
• Judul ditampilkan dengan mudah dengan variabel $ui_app_name
• Berbeda dengan kedua navigasi, terdapat data lebih dari 1, dan memiliki atribut seperti Teks, ikon dan linknya. Untuk mengatasi ini saya gunakan formatting pada setiap isi array menjadi array("Teks|Ikon|Link")
• Pada navigasi Material Dashboard juga terdapat status Active, maka saya buat juga variabel dari controller yang mendefinisikan mana item navigasi yang sedang aktif. 
• untuk mencari mana navigasi yang aktif, saya tambahkan pengkondisian (IF) disetiap perulangan link. Jika sama, link itulah yang aktif.

• File js_script.php. file ini hanya berisi konten dinamis load script javascript. jika tadi kita bisa load css lewat controller, maka kita juga bisa me-load file javascript juga, inilah fungsi dari file ini. Mengapa tidak kita satukan dengan footer.?, karena ada kemungkinan kita menulis script embedded (seperti jquery) di setiap halaman yang berbeda. dan suatu script embedded harus terletak setelah load script. Maka pada halaman konten, kita bisa menulis script js embedded setelah kita memanggil js_script.php. 
• oh iya, pada script ini kita akan menutup tag div wrapper juga karena tidak ada file konten lagi setelah file ini kurang lebih isi dari file js_script seperti berikut: 

        </div> <!-- Penutup dari div.content -->
    </div> <!-- Penutup dari div.main-panel -->
</div> <!-- Penutup dari div.wrapper -->
<!--   Core JS Files   -->
<script src="<?=site_url('assets/materialdashboard/')?>/js/core/jquery.min.js" type="text/javascript"></script>
<script src="<?=site_url('assets/materialdashboard/')?>/js/core/popper.min.js" type="text/javascript"></script>
<script src="<?=site_url('assets/materialdashboard/')?>/js/core/bootstrap-material-design.min.js" type="text/javascript"></script>
<script src="<?=site_url('assets/materialdashboard/')?>/js/plugins/perfect-scrollbar.jquery.min.js"></script>

<!-- Chartist JS -->
<script src="<?=site_url('assets/materialdashboard/')?>/js/plugins/chartist.min.js"></script>
<!--  Notifications Plugin    -->
<script src="<?=site_url('assets/materialdashboard/')?>/js/plugins/bootstrap-notify.js"></script>
<!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
<script src="<?=site_url('assets/materialdashboard/')?>/js/material-dashboard.min.js?v=2.1.0" type="text/javascript"></script>

<?php 
foreach ($ui_js as $js) {
    ?>
    <script type="text/javascript" src="<?=site_url('assets/' .$js)?>"></script>
    <?php
}
?>

Penjelasan

• kita ganti src dari script bawaan template karena CodeIgniter membutuhkan helper site_url(lokasi/filejs) 
• kemudian kita menggunakan variabel array $ui_js yang nantinya kita isi di controller, variabel tersebut di keluarkan pada file ini menggunakan perulangan foreach

• File Footer.php, File footer hanya berisi akhiran dokumen seperti </body></html>. file ini dipisahkan dengan js_script karena ada kemungkinan kita menuliskan embedded js script diantara 2 file tersebut. file tersebut berisi seperti berikut

</body>
</html>

Selesai, Sekarang membuat contoh halaman

• membuat controller pada CI.
  sebagai contoh, kita akan membuat data buku. pada applications/controllers/ buat file bernama Data.php (karena aturan pembuatan kelas ci harus huruf kapital)

• buat method / fungsi buku. pada fungsi ini kita menyiapkan atribut ui yang telah kita buat tadi. pada templating yang kita buat, kita sudah mendefinisikan variabel berikut:
• $ui_app_name   (Judul Aplikasi di atas sidebar)
• $ui_title  (title pada head / judul tab)
• $ui_css (berupa array, mendefinisikan css yang akan kita gunakan)
• $ui_js (berupa array, mendefinisikan js yang akan kita gunakan)
• $ui_sidebar_nav (berupa array, mendefinisikan link-link sidebar)
• $ui_sidebar_active (adalah nav yang sedang aktif)
• $ui_top_nav (berupa array, mendefinisikan link-link nav atas)
• $ui_top_nav_active (mendefinisikan nav yang sedang aktif)

• tinggal kita isi saja, isi controller-nya seperti berikut:

<?php 
class Data extends CI_Controller {
 public function buku()
 {
  $data['ui_app_name'] = 'Perpus-Sys';
  $data['ui_title'] = 'Perpus-Sys - Data Buku';

  $data['ui_css'] = array('custom/css/default.css');
  $data['ui_js'] = array();
  // ----------------------------
  // format penulisan: array(
  //   'Teks|ikon|alamat_link', 
  // );
  // ----------------------------
  $data['ui_sidebar_nav'] = array(
   'Data Buku|book|' .site_url('data/buku'),
   'Data Siswa|face|' .site_url('data/siswa'),
  );
  $data['ui_top_nav'] = array(
   'Buku|book|' .site_url('data/buku'),
   'Pegawai|face|' .site_url('data/Pegawai')
  );
  $data['ui_sidebar_active'] = 'Data Buku';
  $data['ui_top_nav_active'] = 'Pegawai';
  $this->load->view('data/buku/daftar', $data);
 }

}
?>

• controller sudah jadi, tinggal kita buat view. pada kode controller diatas kita sudah tulis load view ke data/buku/daftar. berarti kita tinggal buat saja filenya di applications/views/

• tinggal kita panggil saja file file tersebut berdasarkan template aslinya. anda bisa memulai membuat tata letak sesuai dengan kebutuhan anda. untuk membuat UI silahkan baca dokumentasi dari template ini. contoh seperti saya dibawah sedang membuat daftar buku yang memuat tabel saja seperti dibawah: 

<?php $this->view('template/header.php')?>
<?php $this->view('template/sidebar.php')?>

<div class="content">
  <div class="row">
    <div class="col-sm-12">
      <div class="card">
        <div class="card-header card-header-primary">
          <h4 class="card-title">Daftar Buku Tersedia</h4>
        </div>
        <div class="card-body">
          <div class="table-responsive">
            <table class="table table-striped table-hover">
              <thead>
                <tr>
                  <th>No</th>
                  <th>Judul</th>
                  <th>Penulis</th>
                  <th>Stok</th>
                  <th>Penerbit</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>HTML Dasar</td>
                  <td>Badar Wildanie</td>
                  <td>12</td>
                  <td>BLogspot</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>Webmastering dalam 1 bulan</td>
                  <td>Seseorang</td>
                  <td>551</td>
                  <td>Elexmedia</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Belajar Google Adsense</td>
                  <td>Seseorang Juga</td>
                  <td>22</td>
                  <td>Elexmedia</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>

  <?php $this->view('template/js_script.php') ?>
  <script type="text/javascript">

// Script Javascript DISINI

</script>
<?php $this->view('template/footer.php')?>

• semua sudah selesai tinggal kita akses lewat browser.

Link Project

Material Dashboard (Sudah diperbarui), ~4 MB

bisa simpulkan dari trik diatas, bahwa kita tidak harus menuliskan elemen-elemen berulang kali.

misal menuliskan link sidebar berulang kali, menuliskan judul aplikasi disetiap view yang kita tulis. Namun kita cukup memanggil file view saja yang memuat elemen-elemen berulang tersebut dan dapat diatur secara dinamis langsung dari controller.

Hal ini memungkinkan kita saat mengerjakan suatu project hanya berfokus kepada konten-konten utama tanpa harus meladeni elemen tersebut. Sehingga kita hanya fokus tentang halaman CRUD dan logic sistemnya pada controller dan model.

Anda juga dapat bereksperimen lebih jauh lagi, seperti membuat konfigurasi, yang datanya tersimpan pada database dengan menerapkan cara diatas.

Saya harap anda dapat mengerti dengan trik yang saya tuliskan diatas. dan juga semoga bisa bermanfaat untuk anda. sebagai informasi saja, saya menggunakan teknik ini, hasilnya dapat mengurangi durasi project 1 orang (sistem inventory dan penjualan) yang awalnya 1 bulan menjadi 15 hari saja. Namun tidak dengan trik ini saja, Ada banyak trik yang saya gunakan, maka dari itu
Stay Tune, Bookmark laman ini, karena saya akan terus menuliskan pada artikel selanjutnya.

Sekian.

Mau liat atau download source code aplikasi premium bisa disini.

Tweet