Beranda / Awalan / Bootstrap 4 / CI4 / Codeigniter

Layout Template pada Website Berbasis Codeigniter 4 #3

Oleh Prototez Posting Komentar

Pada artikel sebelumnya kita sudah mempelajari bagaimana menambahkan template pada proyek web kita, dalam template tersebut kalau kita perhatikan terdapat beberapa bagian:

  1. Atas ada Navbar atau Header
  2. Samping kiri ada Menu
  3. Samping kanan ada Konten atau isi dari website
  4. Bawah ada Footer

Perhatikan gambar berikut ini:

Pada gambar di atas bisa kita lihat garis bantu yang menjelaskan bagian-bagian dari template tersebut, untuk memudahkan dalam mengembangkan website, maka kita dapat membagi template tersebut tidak dalam satu file, tapi disimpan dibeberapa file. Nantinya file-file tersebut dapat kita gabungkan lagi menjadi file template yang utuh.

Kenapa harus membagi template dalam beberapa bagian?

  1. Tidak semua bagian halaman pada website yang dibangun isinya berubah-ubah atau dinamis, contoh pada bagian footer atau header, bagian tersebut biasanya tidak banyak perubahan isi, jadi halaman statis kita pisahkan dengan halaman dinamis, untuk memudahkan dalam proses pembuatan aplikasi website yang sedang dibangun
  2. Kita akan mengalami kesulitan ketika membuat aplikasi dengan banyak menu dan halaman, karena harus meng-update link pada setiap halaman dan menu.

Teknik membagi layout template

Pada gambar di atas layout template dibagi menjadi empat bagian, sebenarnya ini lebih bersifat opsional. Saya pribadi memilih membagi layout menjadi tiga bagian:

  1. Navbar dan footer dikategorikan menjadi bagian inti atau main
  2. Sidebar dikategorikan menjadi bagian menu
  3. Konten dikategorikan menjadi bagian konten atau isi.

Pembagian ini juga berdasarkan pada fungsi halaman, dimana bagian inti atau main (navbar dan footer) termasuk kedalam bagian halaman statis dan bagian menu juga konten termasuk kedalam bagian halaman dinamis.

Perhatikan sintak template berikut ini:

Kode Template 

        
html

        

            
        

     

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="">
        <meta name="author" content="">
        <link href="<?= base_url() ?>/assets/img/logo/logo.png" rel="icon">
        <title>RuangAdmin - Blank Page</title>
        <link href="<?= base_url() ?>/assets/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
        <link href="<?= base_url() ?>/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
        <link href="<?= base_url() ?>/assets/css/ruang-admin.min.css" rel="stylesheet">
    </head>
    <body id="page-top">
        <div id="wrapper">
            <!-- Sidebar - Menu -->
            <ul class="navbar-nav sidebar sidebar-light accordion" id="accordionSidebar">
                <a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
                    <div class="sidebar-brand-icon">
                        <img src="<?= base_url() ?>/assets/img/logo/logo2.png">
                    </div>
                    <div class="sidebar-brand-text mx-3">RuangAdmin</div>
                </a>
                <hr class="sidebar-divider my-0">
                <li class="nav-item">
                    <a class="nav-link" href="index.html">
                        <i class="fas fa-fw fa-tachometer-alt"></i>
                        <span>Dashboard</span></a>
                </li>
                <hr class="sidebar-divider">
                <div class="sidebar-heading">
                    Features
                </div>
                <li class="nav-item">
                    <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseForm" aria-expanded="true" aria-controls="collapseForm">
                        <i class="fab fa-fw fa-wpforms"></i>
                        <span>Forms</span>
                    </a>
                    <div id="collapseForm" class="collapse" aria-labelledby="headingForm" data-parent="#accordionSidebar">
                        <div class="bg-white py-2 collapse-inner rounded">
                            <h6 class="collapse-header">Forms</h6>
                            <a class="collapse-item" href="form_basics.html">Form Basics</a>
                            <a class="collapse-item" href="form_advanceds.html">Form Advanceds</a>
                        </div>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="ui-colors.html">
                        <i class="fas fa-fw fa-palette"></i>
                        <span>UI Colors</span>
                    </a>
                </li>
                <hr class="sidebar-divider">
                <div class="version" id="version-ruangadmin"></div>
            </ul>
            <!-- Akhir Sidebar - Menu -->
            <div id="content-wrapper" class="d-flex flex-column">
                <div id="content">
                    <!-- Navbar - Main-->
                    <nav class="navbar navbar-expand navbar-light bg-navbar topbar mb-4 static-top">
                        <button id="sidebarToggleTop" class="btn btn-link rounded-circle mr-3">
                            <i class="fa fa-bars"></i>
                        </button>
                        <ul class="navbar-nav ml-auto">
                            <li class="nav-item dropdown no-arrow">
                                <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <img class="img-profile rounded-circle" src="<?= base_url() ?>/assets/img/boy.png" style="max-width: 60px">
                                    <span class="ml-2 d-none d-lg-inline text-white small">Maman Ketoprak</span>
                                </a>
                                <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
                                    <a class="dropdown-item" href="#">
                                        <i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
                                        Profile
                                    </a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="javascript:void(0);" data-toggle="modal" data-target="#logoutModal">
                                        <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
                                        Logout
                                    </a>
                                </div>
                            </li>
                        </ul>
                    </nav>
                    <!-- Navbar - Main -->
                    <div class="container-fluid" id="container-wrapper">
                        <!-- Konten - Isi -->
                        <div class="d-sm-flex align-items-center justify-content-between mb-4">
                            <h1 class="h3 mb-0 text-gray-800">Halaman konten</h1>
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="./">Home</a></li>
                                <li class="breadcrumb-item">Pages</li>
                                <li class="breadcrumb-item active" aria-current="page">Blank Page</li>
                            </ol>
                        </div>
                        <div class="text-center">
                            <img src="<?= base_url() ?>/assets/img/think.svg" style="max-height: 90px">
                            <h4 class="pt-3">Pada halaman ini akan diisi oleh konten dinamis, yang akan berganti sesuai dengan menu yang dipilih</h4>
                        </div>
                        <!-- Akhir Konten - Isi -->
                        <!-- Modal Logout -->
                        <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabelLogout" aria-hidden="true">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabelLogout">Ohh No!</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">×</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <p>Are you sure you want to logout?</p>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-outline-primary" data-dismiss="modal">Cancel</button>
                                        <a href="login.html" class="btn btn-primary">Logout</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!---Container Fluid-->
                </div>
                <!-- Footer -->
                <footer class="sticky-footer bg-white">
                    <div class="container my-auto">
                        <div class="copyright text-center my-auto">
                            <span>copyright © <script>
                                    document.write(new Date().getFullYear());
                                </script> - developed by
                                <b><a href="https://indrijunanda.gitlab.io/" target="_blank">indrijunanda</a></b>
                            </span>
                        </div>
                    </div>
                </footer>
                <!-- Footer -->
            </div>
        </div>
        <!-- Scroll to top -->
        <a class="scroll-to-top rounded" href="#page-top">
            <i class="fas fa-angle-up"></i>
        </a>
        <script src="<?= base_url() ?>/assets/vendor/jquery/jquery.min.js"></script>
        <script src="<?= base_url() ?>/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
        <script src="<?= base_url() ?>/assets/vendor/jquery-easing/jquery.easing.min.js"></script>
        <script src="<?= base_url() ?>/assets/js/ruang-admin.min.js"></script>
</body>
</html>

Baris kode di atas merupakan bagian dari template yang sudah dimodifikasi menjadi lebih sederhana dengan menghilangkan beberapa menu dan link juga sudah saya beri tanda berdasarkan kategori yang akan kita bagi yaitu: main, menu dan konten. Contohnya bagian konten seperti berikut ini: 


        
html

        

            
        

     
<!-- Konten - Isi -->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">Halaman konten</h1>
     <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="./">Home</a></li>
            <li class="breadcrumb-item">Pages</li>
            <li class="breadcrumb-item active" aria-current="page">Blank Page</li>
     </ol>
</div>
<div class="text-center">
<img src="<?= base_url() ?>/assets/img/think.svg" style="max-height: 90px">
 <h4 class="pt-3">Pada halaman ini akan diisi oleh konten dinamis, yang akan berganti sesuai dengan menu yang dipilih</h4>
 </div>
<!-- Akhir Konten - Isi -->

Pada bagian konten tersebut nantinya akan kita pindahkan atau cut ke bagian view yang lain, misalnya bagian index.php.

Bagian lainnya yang akan kita pindahkan adalah bagian sidebar, nantinya akan dipindahkan ke view menu.php.

Lalu bagaimana dengan sisanya yaitu kategori main?, bagian kategori main tidak akan dipindahkan, tapi nantinya bagian ini akan menjadi bagian inti template, maka saya menyebutnya sebagai main.php.

Jadi dari satu buah file kode utuh (kode template), akan dibagi menjadi tiga bagian yaitu:

  1. main.php dan menu.php, yang akan kita simpan ke dalam folder Views/template/
  2. index.php (konten), disimpan dengan menyesuaikan konten yang akan dibuat, misal konten user, maka file index.php akan kita simpan ke dalam folder Views/user/, cara ini dapat diulangi menyesuaikan konten apa yang akan dibuat.

Mulai membagi layout

  1. Silahkan buka teks editor anda, misalnya: Notepad, Atom, Visual Studio Code
  2. Buat sebuah folder baru di Views pada proyek web, misal kita beri nama folder tersebut template
  3. Buat sebuah file baru di dalam folder template dengan nama main.php
  4. Copy semua baris kode template di atas (Kode Template), lalu paste pada file main.php di folder template
  5. Masih pada file main.php, silahkan tambahkan pada bagian menu 
    
        
    php
    
        
    
            
        
    
     
    
   <?= $this->renderSection('menu') ?>

    dan pada bagian konten

    
        
    php
    
        
    
            
        
    
     
    
   <?= $this->renderSection('konten') ?>

    Perhatikan contoh berikut:

    
        
    html
    
        
    
            
        
    
     
    
  <!-- Sidebar - Menu -->
       <?= $this->renderSection('menu') ?>
       <ul class="navbar-nav sidebar sidebar-light accordion" id="accordionSidebar">
           <a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
              <div class="sidebar-brand-icon">
                   <img src="<?= base_url() ?>/assets/img/logo/logo2.png">
               </div>
           <div class="sidebar-brand-text mx-3">RuangAdmin</div>
      </a>
  <hr class="sidebar-divider my-0">
  
    
        
    html
    
        
    
            
        
    
     
    
  <!-- Konten - Isi -->
     <?= $this->renderSection('konten') ?>
        <div class="d-sm-flex align-items-center justify-content-between mb-4">
           <h1 class="h3 mb-0 text-gray-800">Halaman konten</h1>
           <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="./">Home</a></li>
              <li class="breadcrumb-item">Pages</li>
              <li class="breadcrumb-item active" aria-current="page">Blank Page</li>
           </ol>
        </div>
  6. Jika sudah, silahkan buat file menu.php, lalu simpan di folder template, cut atau pindahkan dari file main.php ke menu.php, pada bagian setelah ini.
    
        
    php
    
        
    
            
        
    
     
    <!-- Sidebar - Menu -->
<?= $this->renderSection('menu') ?>

    ....bagian yang dipindahkan....
    
<!-- Akhir Sidebar - Menu -->

    buka file menu.php dan tambahkan pada bagian paling atas dan bawah, seperti baris kode berikut:

    
        
    php
    
        
    
            
        
    
     
    
<?= $this->extend('template/main'); ?>
<?= $this->section('menu'); ?>
menu
    .
    .
    .
    .
akhir menu
<?= $this->endsection(''); ?>

    Hasilnya seperti berikut ini (menu.php)

    
        
    html
    
        
    
            
        
    
     
    
<?= $this->extend('template/main'); ?>
<?= $this->section('menu'); ?>
<ul class="navbar-nav sidebar sidebar-light accordion" id="accordionSidebar">
        <a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
            <div class="sidebar-brand-icon">
                <img src="<?= base_url() ?>/assets/img/logo/logo2.png">
            </div>
            <div class="sidebar-brand-text mx-3">RuangAdmin</div>
        </a>
        <hr class="sidebar-divider my-0">
        <li class="nav-item">
            <a class="nav-link" href="index.html">
                <i class="fas fa-fw fa-tachometer-alt"></i>
                <span>Dashboard</span></a>
        </li>
        <hr class="sidebar-divider">
        <div class="sidebar-heading">
            Features
        </div>
        <li class="nav-item">
            <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseForm" aria-expanded="true" aria-controls="collapseForm">
                <i class="fab fa-fw fa-wpforms"></i>
                <span>Forms</span>
            </a>
            <div id="collapseForm" class="collapse" aria-labelledby="headingForm" data-parent="#accordionSidebar">
                <div class="bg-white py-2 collapse-inner rounded">
                    <h6 class="collapse-header">Forms</h6>
                    <a class="collapse-item" href="form_basics.html">Form Basics</a>
                    <a class="collapse-item" href="form_advanceds.html">Form Advanceds</a>
                </div>
            </div>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="ui-colors.html">
                <i class="fas fa-fw fa-palette"></i>
                <span>UI Colors</span>
            </a>
        </li>
        <hr class="sidebar-divider">
        <div class="version" id="version-ruangadmin"></div>
    </ul>
<?= $this->endsection(''); ?>
  7. Selanjutnya kita akan membuat view user, jika anda belum membuat folder user silahkan buat terlebih dahulu, jika sudah maka kita buat file index.php yang akan kita simpan ke dalam folder user
  8. Jika sudah silahkan cut bagian konten di file main.php, setelah bagian ini. 
    
        
    php
    
        
    
            
        
    
     
    
<!-- Konten - Isi -->
<?= $this->renderSection('konten') ?>

    ....bagian yang dipindahkan....
    
<!-- Akhir Konten - Isi -->
  9. Buka file index.php, lalu tambahkan pada bagian paling atas dan bawah, seperti pada baris kode berikut ini 
    
        
    php
    
        
    
            
        
    
     
    
<?= $this->extend('template/main'); ?>
<?= $this->extend('template/menu'); ?>
<?= $this->section('konten'); ?>
 .
 .
<?= $this->endsection(''); ?>

    Hasilnya seperti berikut ini (index.php)

    
        
    html
    
        
    
            
        
    
     
    
<?= $this->extend('template/main'); ?>
<?= $this->extend('template/menu'); ?>
<?= $this->section('konten'); ?>
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">Halaman konten</h1>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="./">Home</a></li>
            <li class="breadcrumb-item">Pages</li>
            <li class="breadcrumb-item active" aria-current="page">Blank Page</li>
        </ol>
    </div>
    <div class="text-center">
        <img src="<?= base_url() ?>/assets/img/think.svg" style="max-height: 90px">
        <h4 class="pt-3">Pada halaman ini akan diisi oleh konten dinamis, yang akan berganti sesuai dengan menu yang dipilih</h4>
    </div>
<?= $this->endsection(''); ?>
  10. Jika sudah sesuai, maka tinggal kita panggil view-nya pada Controller User.php Baris kode Controller User.php 
    
        
    php
    
        
    
            
        
    
     
    
<?php
namespace App\Controllers;
class User extends BaseController
{
        public function index()
        {
            return view('user/index');
        }
}

Penjelasan kode baris di atas, ketika controller user/index dipanggil atau dijalankan via web browser, maka controller user akan mengarahkan ke Views/user/index, isi yang ditampilkan sesuai dengan isi konten yang kita buat, karena kita sudah menggabungkan antara layout main dan menu, maka akan menampilkan halaman template secara utuh, ada navbar, sidebar, konten dan footer.

Jalankan perintah php spark serve, lalu buka web browser anda, lalu ketikan http://localhost:8080/user, jika berhasil maka akan menampilkan halaman RuangAdmin seperti gambar berikut.


Selamat anda sudah berhasil membagi layout berdasarkan fungsinya, pembahasan selanjutnya kita akan belajar Create, Read, Update, Delete (CRUD), sampai jumpa lagi pada artikel selanjutnya. Silahkan kirim komentar jika ada hal yang kurang jelas. Selamat mencoba.

Tambahan

Kode file main.php, setelah dipisahkan dengan menu.php dan index.php.

Baris kode main.php 

        
html

        

            
        

     

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="">
        <meta name="author" content="">
        <link href="<?= base_url() ?>/assets/img/logo/logo.png" rel="icon">
        <title>RuangAdmin - Blank Page</title>
        <link href="<?= base_url() ?>/assets/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
        <link href="<?= base_url() ?>/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
        <link href="<?= base_url() ?>/assets/css/ruang-admin.min.css" rel="stylesheet">
    </head>
    <body id="page-top">
        <div id="wrapper">
            <!-- Sidebar - Menu -->
            <?= $this->renderSection('menu') ?>
            <!-- Akhir Sidebar - Menu -->
            <div id="content-wrapper" class="d-flex flex-column">
                <div id="content">
                    <!-- Navbar - Main-->
                    <nav class="navbar navbar-expand navbar-light bg-navbar topbar mb-4 static-top">
                        <button id="sidebarToggleTop" class="btn btn-link rounded-circle mr-3">
                            <i class="fa fa-bars"></i>
                        </button>
                        <ul class="navbar-nav ml-auto">
                            <li class="nav-item dropdown no-arrow">
                                <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <img class="img-profile rounded-circle" src="<?= base_url() ?>/assets/img/boy.png" style="max-width: 60px">
                                    <span class="ml-2 d-none d-lg-inline text-white small">Maman Ketoprak</span>
                                </a>
                                <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="userDropdown">
                                    <a class="dropdown-item" href="#">
                                        <i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
                                        Profile
                                    </a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="javascript:void(0);" data-toggle="modal" data-target="#logoutModal">
                                        <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
                                        Logout
                                    </a>
                                </div>
                            </li>
                        </ul>
                    </nav>
                    <!-- Navbar - Main -->
                    <div class="container-fluid" id="container-wrapper">
                        <!-- Konten - Isi -->
                        <?= $this->renderSection('konten') ?>
                        <!-- Akhir Konten - Isi -->
                        <!-- Modal Logout -->
                        <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabelLogout" aria-hidden="true">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabelLogout">Ohh No!</h5>
                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">×</span>
                                        </button>
                                    </div>
                                    <div class="modal-body">
                                        <p>Are you sure you want to logout?</p>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-outline-primary" data-dismiss="modal">Cancel</button>
                                        <a href="login.html" class="btn btn-primary">Logout</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!---Container Fluid-->
                </div>
                <!-- Footer -->
                <footer class="sticky-footer bg-white">
                    <div class="container my-auto">
                        <div class="copyright text-center my-auto">
                            <span>copyright © <script>
                                    document.write(new Date().getFullYear());
                                </script> - developed by
                                <b><a href="https://indrijunanda.gitlab.io/" target="_blank">indrijunanda</a></b>
                            </span>
                        </div>
                    </div>
                </footer>
                <!-- Footer -->
            </div>
        </div>
        <!-- Scroll to top -->
        <a class="scroll-to-top rounded" href="#page-top">
            <i class="fas fa-angle-up"></i>
        </a>
        <script src="<?= base_url() ?>/assets/vendor/jquery/jquery.min.js"></script>
        <script src="<?= base_url() ?>/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
        <script src="<?= base_url() ?>/assets/vendor/jquery-easing/jquery.easing.min.js"></script>
        <script src="<?= base_url() ?>/assets/js/ruang-admin.min.js"></script>
    </body>
</html>

Prototez
Prototez Bercerita mencari jawaban

Anda mungkin menyukai postingan ini

Tidak ada komentar untuk "Layout Template pada Website Berbasis Codeigniter 4 #3"

Posting Komentar

Komentarnya dong cuuuy :D