Ep2: Template Halaman Statis CodeIgniter

Hal yang sangat perlu untuk diperhatikan sebelum lebih lanjut adalah untuk membuat helper untuk mengelola view, dalam hal ini berbentuk template dasar dari web yang akan kita jalankan misal membutuhkan header, footer, dan diantaranya ada content (page) yang dinamis.

Membuat Controller

Tambahkan file baru dengan nama Page.php pada folder application/controllers/ kemudian tambahkan kode berikut.

<?php
class Pages extends CI_Controller {
    public function index($page = 'home')
    {
        return userView($page);
    }
}

Controller Pages memiliki function index dengan parameter $page yang dapat diubah melalui route untuk dirender ke views dengan bantuan helper userViews.

Setting Routes

Cara membaca rute url pada CodeIgniter3 adalah dengan cara berikut.

http://asrul.dev/[controller-class]/[controller-method]/[arguments]

asrul.dev mengartikan base_url website tersebut
/[controller-class], pada segment setelah host yaitu nama class controller
/[controller-method], setelah segment nama class controller, akan membaca nama method pada controller tersebut
/[arguments], segment selanjutnya adalah argument atau parameter dapat ditulis sebanyak apapun dengan dibatasi tanda /

Jangan lupa setting file routes untuk mengarahkan halaman default web tersebut di application/config/routes.php.

$route['default_controller'] = 'pages/index';
$route['(:any)'] = 'pages/index/$1';

Membuat Helper

Buat file helper dengan nama view_helper.php dalam folder application/helpers yang isi filnya seperti berikut.

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

if ( ! function_exists('userView'))
{
    function userView($page = 'home', $data = [])
    {
        $CI = &get_instance();
        $CI->load->view('templates/header', $data);
        $CI->load->view('pages/'.$page, $data);
        $CI->load->view('templates/footer', $data);
    }   
}

Kemudian jadikan helper tersebut autoload dengam menambahkan kode berikut di file application/config/autoload.php yang isinya.

$autoload['helper'] = array('url', **'view_helper'**, 'file');

Selanjutnya buatlah file header.php dan file footer.php dalam folder application/views/pages/.

File header.php

<!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.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>AsrulDev</title>

    <style>
        /* Sticky footer styles
        -------------------------------------------------- */
        html {
            position: relative;
            min-height: 100%;
        }
        body {
            margin-bottom: 60px; /* Margin bottom by footer height */
            padding-top: 4.5rem;
        }
        .footer {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 60px; /* Set the fixed height of the footer here */
            line-height: 60px; /* Vertically center the text there */
            background-color: #f5f5f5;
        }


        /* Custom page CSS
        -------------------------------------------------- */
        /* Not required for template or sticky footer method. */

        .container {
            width: auto;
            max-width: 680px;
            padding: 0 15px;
        }
    </style>
  </head>
  <body>
    <header class="container">
        <!-- Fixed navbar -->
        <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
          <a class="navbar-brand" href="/">AsrulDev</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
              </li>
            </ul>
            <form class="form-inline mt-2 mt-md-0">
              <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
              <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
          </div>
        </nav>
      </header>

File footer.php

    <footer class="footer">
      <div class="container text-center">
        <span class="text-muted">AsrulDev - &copy; 2021</span>
      </div>
    </footer>
  </body>
</html>

Maka sampai disini kita telah memiliki template yang dapat kita gunakan disemua halaman. Mari kita uji dengan menambahkan file home.php dan about.php pada application/views/pages.

File home.php

<main class="container">

      <div class="starter-template">
        <h1>Ini Halaman Home</h1>
        <p class="lead">Mari Belajar CodeIgniter3<br> bersama AsrulDev</p>
      </div>

</main>

File about.php

<main class="container">

      <div class="starter-template">
        <h1>Ini Halaman About</h1>
      </div>

</main>

Uji Route

Halaman home

Halaman About

Catatan untuk view saya menambahkan bootstrap dan jquery