Cara setting template dinamis dengan CodeIgniter 4 dan Bootstrap 4

Ok, setelah sekian lama tidak menulis, akhirnya saya ingin menulis juga tentang CodeIgniter 4, karena terlalu lama sama flutter & nodes, mungkin menuggu CodeIgniter 4 benar-benar sudah stable version.

template dinamis dengan CodeIgniter 4 dan Bootstrap 4

langsung saja di sini saya akan membahas basic menggunakan template dinamis menggunakan CodeIgniter 4, Template dinamis ini merupakan template yang bisa di gunakan kembali untuk beberapa function di controller, dengan hanya mengirim parameter valu extend dan section di CodeIgniter 4.
e data, kita bisa menggunakan kembali base atau struktur template nya, jadi kita tidak perlu load ulang dengan menggunakan metode fitur

untuk bahan silahkan download dulu file CodeIgniter 4 bisa menggunakan composer atau download file langsung di site resminya.

untuk yang kedua, saya lebih merekomendasikan menggunakan live server bawaan CodeIgniter 4 dengan menggunakan php spark server, daripada menggunakan webservice apahce, atau nginx dll.

Setelah di download file CodeIgniter 4, silahkan anda bisa langsung ke folder app/Views di sini kita akan membuat templatenya.
Secara default pada saat kit download file CodeIgniter 4, maka akan tampil berupa folder dan file seperti berikut yaitu di folder views

CodeIgniter 4 Template

1. folder error merupakan folder menampung tampilan erorr laman seperti 404
2. welcome_message.php merupakan tampilan awal default codeIgniter 4

Selanjut nya untuk membuat template dinamis kita perlu buat kerangka dasarnya terlebih dahulu, disini saya membuat dengan nama base.php dan kerangka untuk menampung layout atau tampilan dinamis yaitu dengan nama layer.php
dan untuk ketiga saya buat content.php ini merupakan nanti yang di jadikan content untuk template dinamis.
baiklah langsung bagaimana membuat sturuktur kerangka dasar telebih dahulu yaitu base.php

Di sini saya buat front end nya menggunakan framework Bootstrap 4, untuk coding base.php seperti beirkut :

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans:ital,wght@0,700;1,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css"/>
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.5/css/responsive.bootstrap4.min.css">

    <link rel="icon" href="<?php echo base_url('logo.png');?>?">
    <title><?= $title?></title>
  </head>
  <body class="bg-light">
  <nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <div class="container">
  <!-- Brand -->
  <a class="navbar-brand" href="<?php echo base_url();?>">Home</a>

  <!-- Toggler/collapsibe Button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Navbar links -->
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="<?php echo base_url('home/contact');?>">Contact</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="<?php echo base_url('home/about');?>">About</a>
      </li>
    </ul>

    <div class="navbar-nav  my-2 my-lg-0"">
    <a class="nav-item nav-link active" href="<?php echo base_url('login');?>">Login <span class="sr-only">(current)</span></a>   
  </div>
  </div>
</nav>
<?= $this->renderSection('content') ?>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.5/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.5/js/responsive.bootstrap4.min.js"></script>
 </body>
</html>

dan untuk kerangka dinamis untuk merender ulang file yang berbeda, yang saya beri nama layer.php,
dengan code sebagai berikut :

<?= $this->extend('base') ?>

<?= $this->section('content') ?>

<?= $this->include($con) ?>

<?= $this->endSection() ?>

Dan untuk content yang berinama contet.php dengan membuat tampilan table yaitu code sebagai berikut :

<div class="container">

<div class="table-responsive pt-5"> 
    <table class="table table-bordered dt-responsive nowrap tabel" style="width:100%">
      <thead class="bg-dark text-white">
          <tr>
              <th>No.</th>
              <th>Nama</th>
              <th>Email</th>
              <th>Gender</th>                            
              <th>Photo</th>
              <th>Action</th>
          </tr>
      </thead>
      <tbody>      
        <tr>
          <td>1</td>
          <td>Nama1</td>
          <td>Email1</td>
          <td>Gender1</td>
          <td>Photo1</td>
          <td>Action1</td>
        </tr>  
        <tr>
          <td>2</td>
          <td>Nama2</td>
          <td>Email2</td>
          <td>Gender2</td>
          <td>Photo2</td>
          <td>Action2</td>
        </tr>    
        <tr>
          <td>3</td>
          <td>Nama3</td>
          <td>Email3</td>
          <td>Gender3</td>
          <td>Photo3</td>
          <td>Action3</td>
        </tr>  
      </tbody>
    </table>
  </div>

</div>

ok sekarang kita ke Controller, di sini dengan nama controller home.php, yaitu sebagai berikut :

<?php
namespace App\Controllers;

class Home extends BaseController
{
 
 public function index()
 {
  // psaing data variable
  $data = ['title'=>'Templte dinamis',   
    'con'=>'content',    
       ];
  echo view('layer',$data);
 }

 public function contact()
 {
  // psaing data variable
  $data = ['title'=>'Templte dinamis',    
  'con'=>'contact',    
  ];
  echo view('layer',$data);
 }


 public function about()
 {
  // psaing data variable
  $data = ['title'=>'Templte dinamis',    
  'con'=>'about',    
  ];
  echo view('layer',$data);
 }

dan untuk tampilan laman Contact dan About sebagai berikut :
code untuk contact.php

<div class="container">
 <div class="mt-5 h-1">Laman Contact</div>
</div>

Code untuk about.php

<div class="container">
 <div class="mt-5 h-1">Laman About</div>
</div>

Penjelasan :
Template dinamis ini mengambil kerangka dasar statis, dengan nama base.php, yang biasanya kerangka awal dari struktur html dan beserta file css atau js untuk templating,
kemudian pada code <?= $this->renderSection('content') ?> pada base.php ini merupakan yang di jadikan fungsi untuk merender content yang dinamis.
selanjutnya kita buat kerangka lagi untuk menampung data dinamis yang saya beri nama layer.php
dengan code <?= $this->extend('base') ?> di sini kita mengambil file base.php yang akan render berserta juga content dinamis dengan menggunakan section fungsi pembuka <?= $this->section('content') ?> , kemudian fungsi <?= $this->include($con) ?>, memasukan data dinamis yang di jadikan variable $con di mana kita akan memanggil sesuai yang di inginkan dengan mengirim passing data di function controllernya. dan terkahir section ini juga harus di tutup dengan <?= $this->endSection() ?> untuk menandakan bahwa render file sampai di situ.

Manfaat membuat template dinamis ini, tentu membuat coding kita menjadi ringkas dan rapi, kita tidak perlu menulis code kerangka dari awal lagi untuk membuat suatu tampilan baru lagi.

Ok, terima kasih semoga bermanfaat, begitu tutorial bagaimana membuat template dinamis di CodeIgniter 4, next saya akan bikin tutorial tentang crud CodeIgniter 4 dengan bootstrap dan validasi serverside

FFA-Note