Praktikum Pemrograman Web Lanjut Teknik Membuat Template Admin Yang Efektif

Praktikum Pemrograman Web Lanjut
Teknik Membuat Template Admin yang Efektif

Pada pertemuan sebelumnya, kita menambahkan Bootstrap pada proyek CI.
Namun, masih ada yang kurang…
Template masih dibuat dalam satu file saja. Ini nanti akan bermasalah ketika kita membuat
halaman baru.
Permsalahannya:
Kita akan menulis kode yang sama berulang-ulang dalam file template yang berbeda.
Bagaimana nanti kalau ada perubahan?
Misal, perubahan link pada navbar.
Maka kita harus mengubah semua file template yang kita buat satu per satu.
Tentu ini kurang efektif, karena kita akan menghabiskan banyak waktu dan tentaga untuk
mengubahnya.
Salah satu solusi dari permasalahan ini yaitu dengan menggunakan partials. Dengan partials kita
akan membagi template menjadi bagian-bagian kecil yang dapat digunakan kembali.
Jika kamu pernah belajar Laravel, kamu mungkin pernah mendengar fungsi yield yang
memungkinkan kita untuk mengimpor bagian template yang lain. Fungsi yield di Laravel sering
digunakan untuk membuat layout.1
Lalu di Codeigniter, apakah ada fungsi yield?
Tidak, di Codeigniter tidak ada fungsi yield. Namun, kita bisa menggunakan fungsi $this->load-
>view() sebagai penggantinya. Karena fungsinya hampir sama dengan yield, yaitu untuk me-load
sebuah view.2
Fungsi $this->load->view() ini, nanti akan kita gunakan untuk me-load partials ke dalam
template.
Tapi sebelum itu, kita harus membuat dulu partial-nya.

Membuat Partial Template
Partial merupakan teknik untuk membagi template menjadi bagian-bagian kecil agar mudah
digunakan.
Sebenarnya teknik ini pertama saya dengar saat membuat template Hugo…
…dan rencananya akan saya coba juga terapkan untuk template aplikasi Codeigniter.
Sekarang coba buka file index.html pada SB Admin dan perhatikan, apa saja partial yang
bisa kita buat dari sana?
Berdasarkan gambar di atas, berikut ini partial yang bisa kita buat:
 head.php untuk meinyimpan isi dari tag <head>;
 navbar.php untuk menyimpan kode navbar;
 sidebar.php untuk menyimpan kode menu bagian samping (sidebar);
 breadcrumb.php untuk menyimpan kode link breadcrumb;
 scrolltop.php untuk menyimpan kode tombol scrolltop;
 footer.php untuk menyimpan kode footer;
 modal.php untuk menyimpan kode modal;
 js.php untuk meload javascript.

Tapi sebelum itu, silahkan buat dulu direktori baru bernama _partials di dalam
views/admin/.
Apakah nama direktorinya harus _partials?
Tidak harus, karena ada juga membarikan nama includes atau _includes.
Nama _partials menurut saya lebih jelas dan menggambarkan isinya.
Kenapa ada garis bawah (underscore) di depannya?
Ini untuk memudahkan dalam membedakan view dan partial. View akan kita load dari
Controller, sedangkan partial akan kita load dari view.
Biasanya dalam penulisan kode (OOP), sesuatu yang bersifat private dan lokal kadang ditulis
dengan garis bawah di depannya.
Oke, lanjut…
Berikutnya kita akan membuat semua partial yang telah kita tentukan di atas.
Partial head.php
Partial ini berisi kode-kode untuk tag <head>. Kita bisa copy dari file
views/admin/overview.php mulai dari tag <head> sampai penutupnya </head>.
Sehinggak kode untuk partial head.php akan menjadi seperti ini:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-
to-fit=no">
<title><?php echo SITE_NAME .": ". ucfirst($this->uri->segment(1)) ." - ".

ucfirst($this->uri->segment(2)) ?></title>


<link href="<?php echo base_url('assets/bootstrap/css/bootstrap.min.css') ?>"
rel="stylesheet">


<link href="<?php echo base_url('assets/fontawesome-free/css/all.min.css')
?>" rel="stylesheet" type="text/css">


<link href="<?php echo
base_url('assets/datatables/dataTables.bootstrap4.css') ?>" rel="stylesheet">


<link href="<?php echo base_url('css/sb-admin.css') ?>" rel="stylesheet">
Perhatikan kode pada tag <title>, di sana kita menggunakan sebuah konstanta SITE_NAME
untuk menambil nama web.
Berikutnya perhatikan di bagian:
ucfirst($this->uri->segment(1)) ." - ". ucfirst($this->uri->segment(2))
Ini akan menjadi judul yang akan tampil di browser. Fungsi ucfirst() untuk membuat huruf
besar di awal kata. Lalu judulnya kita ambil dari segment URL.
Sehingga nanti pada browser akan tampil seperti ini:

Partial navbar.php
Partial ini hanya berisi kode untuk menu navbar. Berikut ini isi kode dari partial navbar.php:
<nav class="navbar navbar-expand navbar-dark bg-success static-top">
<a class="navbar-brand mr-1" href="<?php echo site_url('admin') ?>"><?php

echo SITE_NAME ?></a>
<button class="btn btn-link btn-sm text-white order-1 order-sm-0"

id="sidebarToggle" href="#">
<i class="fas fa-bars"></i>
</button>


<form class="d-none d-md-inline-block form-inline ml-auto mr-0 mr-md-3
my-2 my-md-0">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search
for..." aria-label="Search" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-light" type="button">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</form>


<ul class="navbar-nav ml-auto ml-md-0">
<li class="nav-item dropdown no-arrow mx-1">
<a class="nav-link dropdown-toggle" href="#" id="alertsDropdown"
role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
<i class="fas fa-bell fa-fw"></i>
<span class="badge badge-danger">9+</span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-
labelledby="alertsDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown no-arrow mx-1">

<a class="nav-link dropdown-toggle" href="#"
id="messagesDropdown" role="button" data-toggle="dropdown" aria-
haspopup="true"
<i class="fas fa-envelope fa-fw"></i>
<span class="badge badge-danger">7</span>
</a>
labelledby="messagesDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown no-arrow">

<a class="nav-link dropdown-toggle" href="#" id="userDropdown"
<i class="fas fa-user-circle fa-fw"></i> Admin
</a>
labelledby="userDropdown">
<a class="dropdown-item" href="#">Settings</a>
<a class="dropdown-item" href="#">Activity Log</a>
<a class="dropdown-item" href="#" data-toggle="modal" data-
target="#logoutModal">Logout</a>
</div>
</li>
</ul>
</nav>
Pada kode navbar, kita menggunakan konstanta SITE_NAME untuk menampilkan nama web di
navbar.
Lalu kita menggunakan class bg-success untuk mengubah warnanya menjadi hijau. Supaya
selaras dengan brand aplikasinya .
Ini tampilannya:
Partial sidebar.php
Partial ini berisi kode untuk menampilkan menu bagian samping (sidebar). Berikut ini isi kode
sidebar.php:


<ul class="sidebar navbar-nav">
<li class="nav-item <?php echo $this->uri->segment(2) == '' ? 'active':
'' ?>">
<a class="nav-link" href="<?php echo site_url('admin') ?>">
<i class="fas fa-fw fa-tachometer-alt"></i>
<span>Overview</span>
</a>
</li>
<li class="nav-item dropdown <?php echo $this->uri->segment(2) ==
'products' ? 'active': '' ?>">
<a class="nav-link dropdown-toggle" href="#" id="pagesDropdown"
<i class="fas fa-fw fa-boxes"></i>
<span>Products</span>
</a>
<div class="dropdown-menu" aria-labelledby="pagesDropdown">
<a class="dropdown-item" href="<?php echo
site_url('admin/products/add') ?>">New Product</a>
<a class="dropdown-item" href="<?php echo
site_url('admin/products') ?>">List Product</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-fw fa-users"></i>
<span>Users</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-fw fa-cog"></i>
<span>Settings</span></a>
</li>
</ul>
Pada kode di atas, kita menggunakan segment URI untuk mengecek apakah menu itu sedang
dibuka atau tidak.
Jika menu sedang dibuka, maka tambahkan class active.
Misalnya ini:
<?php echo $this->uri->segment(2) == 'products' ? 'active': '' ?>
Kode ini akan mengecek, apakah halaman /admin/products sedang dibuka atau tidak.
Oya, halaman untuk menu products, users, dan settings belum kita buat. Insya’allah di tutorial
berikutnya akan kita buat.
Partial breadcrumb.php
Partial ini berisi kode untuk menampilkan breadcrumb. Breadcrumbs adalah sebuah link navigasi
yang menampilkan link halaman sebelumnya dari halaman tempat kita berada.
Berikut ini kode untuk parital breadcrumb.php:

<ol class="breadcrumb">
<?php foreach ($this->uri->segments as $segment): ?>
<?php
$url = substr($this->uri->uri_string, 0, strpos($this->uri-
>uri_string, $segment)) . $segment;
$is_active = $url == $this->uri->uri_string;
?>
<li class="breadcrumb-item <?php echo $is_active ? 'active': '' ?>">

<?php if($is_active): ?>
<?php echo ucfirst($segment) ?>
<?php else: ?>
<a href="<?php echo site_url($url) ?>"><?php echo
ucfirst($segment) ?></a>
<?php endif; ?>
</li>
<?php endforeach; ?>
</ol>
Partial scrolltop.php
Partial ini berisi kode untuk tombol scrolltop. Berikut ini isinya:


<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
Partial footer.php
Partial ini berisi kode untuk bagian footer, berikut ini isi kode untuk partial footer.php:


<footer class="sticky-footer">
<div class="container my-auto">
<div class="copyright text-center my-auto">
<span>Copyright <?php echo SITE_NAME ." ". Date('Y') ?></span>

</div>
</div>
</footer>
Pada kode partial footer.php, kita menggunakan konstanta SITE_NAME untuk menampilkan
nama website. Lalu menggunakan fungsi Date('Y') untuk menampilkan tahun saat ini.
Partial modal.php
Partial ini berisi kode-kode untuk modal. Berikut ini isinya:


<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-
labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
<button class="close" type="button" data-dismiss="modal" aria-
label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Select "Logout" below if you are ready to end
your current session.</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-
dismiss="modal">Cancel</button>
<a class="btn btn-primary" href="login.html">Logout</a>
</div>
</div>
</div>
</div>
Kita juga nanti bisa tambahkan beberapa modal di sini.
Partial js.php
Partial ini berisi kode-kode untuk me-load Javascript. Berikut ini kode untuk js.php:


<script src="<?php echo base_url('assets/jquery/jquery.min.js') ?>"></script>
<script src="<?php echo
base_url('assets/bootstrap/js/bootstrap.bundle.min.js') ?>"></script>


<script src="<?php echo base_url('assets/jquery-easing/jquery.easing.min.js')
?>"></script>

<script src="<?php echo base_url('assets/chart.js/Chart.min.js')
?>"></script>
<script src="<?php echo base_url('assets/datatables/jquery.dataTables.js')
?>"></script>
<script src="<?php echo
base_url('assets/datatables/dataTables.bootstrap4.js') ?>"></script>

<script src="<?php echo base_url('js/sb-admin.min.js') ?>"></script>

<script src="<?php echo base_url('js/demo/datatables-demo.js') ?>"></script>
<script src="<?php echo base_url('js/demo/chart-area-demo.js') ?>"></script>
Kita juga nanti bisa tambahkan beberapa kode javascript di sini.
Menggunakan Partials pada Template

Kita sudah membuat semua partial yang dibutuhkan:
Langkah berikutnya, kita harus menggunakannya dalam template.
Silahkan ubah isi views/admin/overview.php menjadi seperti ini:
<!DOCTYPE html>
<html lang="en">
<head>
<?php $this->load->view("admin/_partials/head.php") ?>
</head>
<body id="page-top">
<?php $this->load->view("admin/_partials/navbar.php") ?>
<div id="wrapper">
<?php $this->load->view("admin/_partials/sidebar.php") ?>
<div id="content-wrapper">
<div class="container-fluid">

<?php //$this->load->view("admin/_partials/breadcrumb.php") ?>


<div class="row">
<div class="col-xl-3 col-sm-6 mb-3">
<div class="card text-white bg-primary o-hidden h-100">
<div class="card-body">
<div class="card-body-icon">
<i class="fas fa-fw fa-comments"></i>
</div>
<div class="mr-5">26 New Messages!</div>
</div>
<a class="card-footer text-white clearfix small
z-1" href="#">
<span class="float-left">View Details</span>
<span class="float-right">
<i class="fas fa-angle-right"></i>
</span>
</a>
</div>
</div>
<div class="card text-white bg-warning o-hidden h-100">
<i class="fas fa-fw fa-list"></i>
</div>
<div class="mr-5">11 New Tasks!</div>
</div>
z-1" href="#">
</span>
</a>
</div>
</div>
<div class="card text-white bg-success o-hidden h-100">
<i class="fas fa-fw fa-shopping-cart"></i>
</div>
<div class="mr-5">123 New Orders!</div>
</div>
<a class="card-footer text-white clearfix small z-1" href="#">
</span>
</a>
</div>
</div>
<div class="card text-white bg-danger o-hidden h-100">
<i class="fas fa-fw fa-life-ring"></i>
</div>
<div class="mr-5">13 New Tickets!</div>
</div>
z-1" href="#">
</span>
</a>
</div>
</div>
</div>


<div class="card mb-3">
<div class="card-header">
<i class="fas fa-chart-area"></i>
Visitor Stats</div>
<canvas id="myAreaChart" width="100%"
height="30"></canvas>
</div>
<div class="card-footer small text-muted">Updated
yesterday at 11:59 PM</div>
</div>
</div>



<?php $this->load->view("admin/_partials/footer.php") ?>
</div>

</div>

<?php $this->load->view("admin/_partials/scrolltop.php") ?>

<?php $this->load->view("admin/_partials/modal.php") ?>
<?php $this->load->view("admin/_partials/js.php") ?>
</body>
</html>
Pada kode template tersebut, kita me-load partial dengan fungsi $this->view->load().
Maka hasilnya akan seperti ini:

Praktikum Pemrograman Web Lanjut Teknik Membuat Template Admin Yang Efektif

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Praktikum Pemrograman Web Lanjut Teknik Membuat Template Admin Yang Efektif

Diunggah oleh

Hak Cipta:

Format Tersedia

Praktikum Pemrograman Web Lanjut

Teknik Membuat Template Admin yang Efektif

Namun, masih ada yang kurang…

Bagaimana nanti kalau ada perubahan?

Misal, perubahan link pada navbar.

Lalu di Codeigniter, apakah ada fungsi yield?

Tapi sebelum itu, kita harus membuat dulu partial-nya.

 head.php untuk meinyimpan isi dari tag <head>;

 navbar.php untuk menyimpan kode navbar;

 sidebar.php untuk menyimpan kode menu bagian samping (sidebar);

 breadcrumb.php untuk menyimpan kode link breadcrumb;

 scrolltop.php untuk menyimpan kode tombol scrolltop;

 footer.php untuk menyimpan kode footer;

 modal.php untuk menyimpan kode modal;

 js.php untuk meload javascript.

Apakah nama direktorinya harus _partials?

Nama _partials menurut saya lebih jelas dan menggambarkan isinya.

Kenapa ada garis bawah (underscore) di depannya?

Sehinggak kode untuk partial head.php akan menjadi seperti ini:

<title><?php echo SITE_NAME .": ". ucfirst($this->uri->segment(1)) ." - ".

Berikutnya perhatikan di bagian:

ucfirst($this->uri->segment(1)) ." - ". ucfirst($this->uri->segment(2))

Sehingga nanti pada browser akan tampil seperti ini:

<nav class="navbar navbar-expand navbar-dark bg-success static-top">

<a class="navbar-brand mr-1" href="<?php echo site_url('admin') ?>"><?php

<button class="btn btn-link btn-sm text-white order-1 order-sm-0"

<li class="nav-item dropdown no-arrow mx-1">

<li class="nav-item dropdown no-arrow">

selaras dengan brand aplikasinya .

Jika menu sedang dibuka, maka tambahkan class active.

<?php echo $this->uri->segment(2) == 'products' ? 'active': '' ?>

Berikut ini kode untuk parital breadcrumb.php:

<li class="breadcrumb-item <?php echo $is_active ? 'active': '' ?>">

<span>Copyright <?php echo SITE_NAME ." ". Date('Y') ?></span>

Partial ini berisi kode-kode untuk modal. Berikut ini isinya:

Kita juga nanti bisa tambahkan beberapa modal di sini.

Kita juga nanti bisa tambahkan beberapa kode javascript di sini.

Menggunakan Partials pada Template

Silahkan ubah isi views/admin/overview.php menjadi seperti ini:

<?php $this->load->view("admin/_partials/navbar.php") ?>

<?php $this->load->view("admin/_partials/sidebar.php") ?>

<?php $this->load->view("admin/_partials/scrolltop.php") ?>

Maka hasilnya akan seperti ini:

Anda mungkin juga menyukai