# 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
<?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]
```
- http://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`.

```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
<?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.

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

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

File `header.php`
```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`
```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`
```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`
```php
<main class="container">

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

</main>
```

### Uji Route

Halaman home

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1619663861150/5VbkPurDd.png)

Halaman About

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1619663918444/InuSoBsm4.png)

> Catatan untuk view saya menambahkan bootstrap dan jquery
