Skip to main content

Buat layout codeigniter lebih mudah dengan menggunakan view layouts

view layouts adalah metode tataletak yang powerfull yang disediakan codeigniter, berbeda dibandingkan dengan tulisan sebelumnya Menggunakan template Admin LTE di CodeIgniter 4 dengan menggunakan metode view layout, layout yang dibuat akan lebih sederhana, untuk rujukan kalian dapat mengunjungi laman user guide codeigniter view layouts

Langkah 1. Install CodeIgniter.

CodeIgniter terbaru dapat di download di sini, dan install sesuai petunjuk instalasi.

Langkah 2. download template Admin LTE

Admin LTE dapat di download di link ini. dan extrak, untuk mempermudah pekerjaan kita cukup gunakan halaman blanknya saja. Secara hirarki file blank.html berada pada direktori \AdminLTE-3.2.0\pages\examples\blank.html

Langkah 3. Menyalin PlugIns AdminLTE untuk projectci

Pada direktori AdminLTE salin direktori dist dan plugins.

lokasi direktori dist dan plugins adminLTE

simpan ke direktori /projectci/public buat folder baru dengan nama adminLTE di dalamnya dan simpan direktori dist dan plugins ke dalam folder adminLTE, struktur direktori kalian akan terlihat seperti gambar berikut.

copy direktori dist dan plugins kedalam project

Langkah ke 4 akan terlihat sangat lebih simpel dibandingkan dengan cara sebelumnya.

Langkah 4. Buat layout halaman

Ilustrasi halaman partial website

Pada contoh berikut yang sebelumnya saya menggunakan projectci sebagai direktori dimana saya menginstall codeigniter saya ganti dengan direktori mesinketik.layout

Buat template layout

file blank.html Admin LTE tetap akan dibagi menjadi empat (4) bagian, namun akan letakkan dalam satu file layout, sebagai contoh saya menggunakan file layout.php sebagai file layoutnya yang saya letakkan dalam direktori view

Lokasi template

dalam direktori views saya telah memiliki file layout.php, dan saatnya mengisi file layout.php tersebut, caranya dengan menyalin semua kode yang digunakan berulangkali pada file blank.html, atau seperti pada baris kode yang telah saya salin berikut ini

Lihat Kode
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title><?=$title?></title>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
        <link rel="stylesheet" href="<?=base_url('adminLTE/plugins/fontawesome-free/css/all.min.css')?>">
        <link rel="stylesheet" href="<?=base_url('adminLTE/dist/css/adminlte.min.css')?>">
    </head>
    <body class="hold-transition sidebar-mini">
        <div class="wrapper">
            <nav class="main-header navbar navbar-expand navbar-white navbar-light">
                <?= $this->renderSection('topmenu') ?>
            </nav>
            <aside class="main-sidebar sidebar-dark-primary elevation-4">
                <a href="<?=base_url()?>" class="brand-link">
                    <img src="<?=base_url('adminLTE/dist/img/AdminLTELogo.png')?>" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8">
                    <span class="brand-text font-weight-light">AdminLTE 3</span>
                </a>
                <?= $this->renderSection('sidemenu') ?>
            </div>
        </aside>
        <div class="content-wrapper">
            <?= $this->renderSection('content') ?>
        </div>
        <footer class="main-footer">
            <?= $this->renderSection('footer') ?>
        </footer>
        <aside class="control-sidebar control-sidebar-dark"></aside>
    </div>
    <script src="<?=base_url('adminLTE/plugins/jquery/jquery.min.js')?>"></script>
    <script src="<?=base_url('adminLTE/plugins/bootstrap/js/bootstrap.bundle.min.js')?>"></script>
    <script src="<?=base_url('adminLTE/dist/js/adminlte.min.js')?>"></script>
    <script src="<?=base_url('adminLTE/dist/js/demo.js')?>"></script>
</body>
</html>

Perhatikan baris 14, 21, 25 dan 28 terdapat methot renderSection sebagai penampung dari masisng-masing section tersebut, yaitu topmenu, sidemenu, content dan footer. Dan yang membuatnya menjadi powerfull adalah template ini dapat digunakan berulang kali.

topmenu, sidemenu dan footer akan dibuat lebih dinamis dengan memisahkannya dari kode utama yaitu dengan memasukkannya dalam view cell, berikut cara kerjanya

kombinasi view cell agar template lebih dinamis

Seperti namanya cell/sel adalah bagian/komponen/paritial/unit kecil yang menyusun tubuh, unit-unit tersebut dapat berdiri sendiri karena memiliki controller sendiri, sehingga tidak akan mengganggu view utamanya, kalian dapat membuat direktori cell di dalam direktori app dan membuat masing masing 2 file tiap cellnya atau kalian dapat menggunakan command line interface (CLI) untuk membuatnya lebih mudah, jika kalian menggunakan editor visual studio code (VSC) menggunakan comman line sangatlah mudah karena VSC terah terintegrasi dengan terminal powercell dalam editornya, cara dengan memilih menu view > terminal atau jika kalian memiliki banyak workspace kalian dapat mengklik kanan pada workspace kalian dan pilih Open in Integrated Terminal, jendela terminal power cell pada layar bagian bawah VSC akan terbuka sesuai dengan workspace yang terpilih. untuk lebih memahami CLI cell dapat merujuk pada userguide codeigniter make:cell

Masing-masang pasangan cell yang dibuat menggunakan CLI dapat mengikuti langkah berikut

  1. buat cell TopMenu dengan mengetikkan php spark make:cell TopMenu suffix dan tekan enter
  2. begitu juga dengan cell SideMenu yaitu dengan mengetikkan php spark make:cell SideMenu suffix dan tekan enter
  3. Kemudian cell Footer dengan mengetikkan php spark make:cell Footer suffix dan tekan enter
make:cell

setelah ketiga cell tersebut dibuat, direktori cell pada project kalian akan dibuat dan berisi ketiga cell tersebut dengan tiap cell memiliki 2 file, lihat gambar berikut

lokasi file cell

Disinilah letak keunikannya dari pembuatan template sebelumnya, dalam direktori cell kita telah diberikan masing file view dan controller yang tidak mengganggu controller utamanya,

saatnya mengisi file-file tersebut

Cell Top Menu

top_menu_cell.php

diambil dari potongan bagian atas blank.html

Lihat kode
<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="<?=base_url()?>" 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>

<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
    <!-- Navbar Search -->
    <li class="nav-item">
        <a class="nav-link" data-widget="navbar-search" href="#" role="button">
            <i class="fas fa-search"></i>
        </a>
        <div class="navbar-search-block">
            <form class="form-inline">
                <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>
                        <button class="btn btn-navbar" type="button" data-widget="navbar-search">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </li>

    <!-- 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="<?=base_url('adminLTE/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="<?=base_url('adminLTE/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="<?=base_url('adminLTE/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="fullscreen" href="#" role="button">
            <i class="fas fa-expand-arrows-alt"></i>
        </a>
    </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>

TopMenu.php

Controller pada cell juga dapat bekerja seperti controller pada umumnya, guanakan kode berikut untuk membentuk file TopMenu.php

<?php
namespace App\Cells;
use CodeIgniter\View\Cells\Cell;
class TopMenu extends Cell
{
    public function show(): string
    {
        return $this->view('top_menu_cell');
    }
}

dari contoh pembuatan cell tersebut kalian telah mampu membuat cell berikutnya yaitu cell side menu dan cell footer.

Menggunakan template layout

halaman view

Untuk menggunakan tempale layout yang telah dibuat, harus menggunakan method extend() diawal kode, contohnya saya akan menerapkan template layout dalam view/dashboard.php,

Buat file baru di direktori views beri nama dashboard.php

lokasi view

Isi kode berikut untuk file dashboad.php

Lihat Kode
<?=$this->extend('layout') ?>
<?=$this->section('topmenu') ?>
<?=view_cell('TopMenu::show')?>
<?=$this->endSection() ?>
<?=$this->section('sidemenu') ?>
<?=view_cell('SideMenu::show')?>
<?=$this->endSection() ?>
<?=$this->section('content') ?>
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Blank Page</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item">
                        <a href="#">Home</a>
                    </li>
                    <li class="breadcrumb-item active">Blank Page</li>
                </ol>
            </div>
        </div>
    </div>
</section>
<section class="content">
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Title</h3>
            <div class="card-tools">
                <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
                    <i class="fas fa-minus"></i>
                </button>
                <button type="button" class="btn btn-tool" data-card-widget="remove" title="Remove">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
        <div class="card-body">
            Start creating your amazing application!
        </div>
        <div class="card-footer">
            Footer
        </div>
    </div>
</section>
<?=$this->endSection() ?>
<?=$this->section('footer') ?>
<?=view_cell('Footer::show')?>
<?=$this->endSection() ?>

Penjelasan dari masing masing kode adalah sebagai berikut

#baris 1 Syarat untuk menggunakan template adalah dengan menggunakan method extend(‘diikuti lokasi file dengan mengabaikan extensi php’).

#baris 2 Pembuka section(‘topmenu’) dengan merujuk lokasi renderSection(‘topmenu’) pada file layout.php

#baris3 Isi dari topmenu

#baris 4 Penutup dari section(‘topmenu’)

begitu pula dengan section section berikutnya, namun pada section topmenu, sidemenu, dan footer akan lebih dinamis karena menggunakan controller yang berbeda dengan controller utamanya, contoh paling mencolok adalah pada sidemenu, menu yang aktif akan berbeda dengan menu yang tidak aktif.

Controller

Perhatikan kode berikut

<?php
namespace App\Controllers;
class Home extends BaseController
{
    public function index()
    {
        return view('dashboard');
    }
}

Sebagai contoh saya menjalankan file view dashboard.php dalam File controller Home.php, tapi file controller tersebut terlihat berbeda, file terlihat lebih simpel tanpa partial partial view didalamnya karena file partial lainnya telah dirender dan menjadi bagian dari file dashboard.php

Terima kasih telah membaca, bila di pelajari lebih seksama penggunaan view layout akan lebih efektif dan penanganan yang lebih mudah dalam mengatur partial partial website yang dibuat.

Tinggalkan Balasan