CodeIgniter 4 / Pemrograman Web Lanjut · January 9, 2022

Memahami Views Pada CodeIgniter 4 #5

image_pdf

Selanjutnya kita akan membahas mengenai Views pada CodeIgniter 4, langkah awal untuk membuat tampilan pada CI4 adalah sebagai berikut :

  • Silahkan membuat Controller baru dengan nama Halaman.php, tuliskan code dibawah ini :
<?php

namespace App\Controllers;

class Halaman extends BaseController
{
    public function index()
    {
        
        echo view('template/header', $data);
        return view('halaman/home');
        echo view('template/footer');
    }
    public function aboutme()
    {

        echo view('template/header', $data);
        return view('halaman/aboutme');
        echo view('template/footer');
    }
}
  • Selanjutnya buat file home.php pada folder Views, kemudian ketikan code dibawah ini :
<!doctype html>
<html lang="en">
  <head>
    <title>Belajar CodeIgniter4</title>
  </head>
  <body>
    <h1>Hello, world!</h1>


  </body>
</html>
  • Buat folder halaman pada Views, lalu pindahkan home.php pada folder halaman
  • Selanjutnya tambahkan file aboutme.php pada folder halaman, isi code nya sebagai berikut :
<!doctype html>
<html lang="en">
  <head>
    
    <title>Belajar CodeIgniter4</title>
  </head>
  <body>
    <h1>About Me</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore enim explicabo ipsum, accusamus unde similique nesciunt numquam. Vel amet iste inventore commodi excepturi cupiditate quae suscipit dolorem rem. Consequuntur, ipsum.</p>
   
  </body>
</html>
  • pada controller Halaman tambahkan Methode baru yaitu aboutme, seperti code dibawah ini :
<?php

namespace App\Controllers;

class Halaman extends BaseController
{
    public function index()
    {
        return view('halaman/home');
    }
    public function aboutme()
    {
        return view('halaman/aboutme');
    }
}

Agar supaya tampilan-nya bisa menarik kita perlu memanfaatkan bootsrap, silahkan klik link berikut untuk menggunakan bootstrap [link], lalu copy dan paste pada halaman home.php dan aboutme.php kemudian sesuaikan.

home.php
aboutme.php

Untuk membuat tampilannya supaya rapi, buatlah folder baru dengan nama template, setelah itu kita akan memisahkan halaman html yang ada pada home dan aboutme menjadi beberapa bagian, yaitu :

  1. header.php
  2. footer.php

isi dari header.php adalah :

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title><?= $title; ?></title>
</head>

<body>
  • isi dari footer.php adalah :
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

</body>

</html>
  • Setelah selesai, silahkan ubah controller Halaman.php seperti code dibawah ini :
<?php

namespace App\Controllers;

class Halaman extends BaseController
{
    public function index()
    {
        echo view('template/header');
        return view('halaman/home');
        echo view('template/footer');
    }
    public function aboutme()
    {
        echo view('template/header');
        return view('halaman/aboutme');
        echo view('template/footer');
    }
}

Sekarang struktur dari views sudah tersusu dengan rapi, sehingga ketika akan menambahkan file baru tidak harus membuat sintak html yang lengkap, cukup isi nya saja yang kita buat.

  • Selanjutnya kita akan membuat sebuah Navigasi Menu untuk mempermudah user dalam menggunakan aplikasi, yang kita buat, silahkan klik link ini lalu copy code dibawah ini pada header.php, seperti code dibwah ini :
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title><?= $title; ?></title>
</head>

<body>

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="/">Belajar CI4</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarScroll">
                <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="/">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/halaman/aboutme">About Me</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                            Link
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
                            <li><a class="dropdown-item" href="#">Action</a></li>
                            <li><a class="dropdown-item" href="#">Another action</a></li>
                            <li>
                                <hr class="dropdown-divider">
                            </li>
                            <li><a class="dropdown-item" href="#">Something else here</a></li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled">Link</a>
                    </li>
                </ul>
                <form class="d-flex">
                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success" type="submit">Search</button>
                </form>
            </div>
        </div>
    </nav>
  • Setelah itu ubah file routes.php arahkan halaman yang diakses pertama kali ke controller Halaman dan methode Index, seperti dibawah ini :
$routes->get('/', 'Halaman::index');
  • Selanjutnya rapikan code html pada home.php dan aboutme.php seperti dibawah ini
<div class="container">
    <div class="row">
        <div class="col">
            <h1>Hello, world!</h1>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col">
            <h1>About Me</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore enim explicabo ipsum, accusamus unde similique nesciunt numquam. Vel amet iste inventore commodi excepturi cupiditate quae suscipit dolorem rem. Consequuntur, ipsum.</p>
        </div>
    </div>
</div>
  • Selanjutnya kita akan membuat title dari masing-masing halaman sesuai dengan yang kita akses dengan cara mengirimkan data melalui controller Halaman.php, seperti code dibawah ini:

untuk methode index

        $data = [
            'title' => 'Home - Belajar CodeIgniter 4'
        ];

untuk methode aboutme

        $data = [
            'title' => 'About Me'
        ];
  • Lalu pada header.php, tambahkan code berikut
<title><?= $title; ?></title>

Tags:

You may also like...