Home » Codeigniter 4 » Tutorial Codeigniter 4 #5: Menampilkan View

Tutorial Codeigniter 4 #5: Menampilkan View

Published by Ade Kurniawan on

View adalah halaman web yang muncul saat dakses oleh pengguna. View halaman web ini tersusun atas header, sidebar, navbar, footer dan lainnya. Untuk memulai pembuatan view codeigniter 4 lakukan instalasi terlebih dahulu.

Menampilkan View Codeigniter 4

Buatlah file view pada directory app/Views

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Halaman data mahasiswa</title>
</head>
<body>
    <p>Nama Mahasiswa : Ade Kurniawan</p>
</body>
</html>

Simpan dengan nama data_mahasiswa.php

load view menggunakan perintah

echo view(‘data_mahasiswa’);

load view pada codeigniter 3 menggunakan $this->load->view() sedangkan di codeigniter 4 cukup menggunakan echo view().

Part 1. Menampilkan Banyak View di codeigniter 4

Memecah view menjadi header, navigation, content dan footer

1. Buatlah file header pada directory app/views

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://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <title>Sistem Informasi Indonetsource</title>
  </head>
  <body>

Disini digunakan bootstrap starter template.

Bagian header dicopy dari awal sampai body

2. Buat bagian navigation

navigation.php

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Indonetsource</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <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>                 
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

3. Bagian Content

content.php

<div class="container">
    <h1>Ini adalah content</h1>    
</div>

4. Bagian footer

footer.php

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>

Menampilkan view lewat controller

Setelah memiliki ke 4 file view di atas. Tampilkan melalui sebuah controller

Buat controller di directory app/Controllers seperti berikut:

Mahasiswa.php

<?php namespace App\Controllers;

class Mahasiswa extends BaseController
{
	public function data()
	{
		echo view('template/header');
		echo view('template/navigation');
		echo view('template/content');
		echo view('template/footer');
	}
}

akses url controller

http://localhost:8080/mahasiswa/data //menggunakan local server

http://localhost/projectci4/public/mahasiswa/data //menggunakan xampp apache.

hasil

view codeigniter 4

Part 2. Menyederhanakan echo view menjadi 1 file template

Setelah menyelesaikan pembuatan view pada langkah di part 1 diatas kita masih dapat melakukan penyederhanaan untuk menampilkan view.

dari yang sebelumnya untuk menampilkan view kita echo di controller dengan perintah berikut:

public function data()
	{
		$data = [
			'title' => 'Data Mahasiswa',
			'content' => 'Mahasiswa Content'			
		];
		echo view('template/header');
		echo view('template/navigation');
		echo view('template/content',$data);
		echo view('template/footer');
	}

kita buat lebih sederhana menjadi seperti berikut:

	public function data()
	{
		$data = [
			'title' => 'Data Mahasiswa',
			'content' => 'Isi data mahasiswa'			
		];			
		echo view('data_mahasiswa',$data);		
		
	}

Langkah menyederhanakan view

1. buat file baru di directory view/template dengan nama template.php

template.php

satukan header, navigation dan footer pada file ini sehingga menjadi seperti berikut :

<!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://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <title>Sistem Informasi Indonetsource</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Indonetsource</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <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>                 
        </ul>
        <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
    </nav>

    <?= $this->renderSection('isi')?>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>

bagian yang belum kita satukan adalah content karena content. Terlihat pada script di atas kita membuat renderSection(‘isi’). perintah ini digunakan untuk merender template ke content atau isi.

2. Buatlah file content dengan nama data_mahasiswa.php di directory Views

data_mahasiswa.php

<?php $this->extend('template/template');?>
<?php $this->section('isi');?>
<div class="container">
    <div class="card mt-3">  
        <div class="card-header">
            <b><?= $title ?></b>
        </div>
        <div class="card-body"><?= $content ?></div>
    </div>
</div>
<?php $this->endSection();?>

perintah extend pada data_mahasiswa.php diatas memanggil file template.php yang merupakan file template yang kita buat tadi. selanjutnya bagian yang ingin ditampilkan pada content atau isi diawali dengan $this->section dan diakhiri dengan $this->endSection.

3. Load view dari controller

public function data()
	{
		$data = [
			'title' => 'Data Mahasiswa',
			'content' => 'Isi data mahasiswa'			
		];			
		echo view('data_mahasiswa',$data);		
		
	}

Setelah membuat file di atas silahkan akses controller mahasiswa melalui url http://localhost:8080/mahasiswa/data

Jika berhasil maka hasilnya sama dengan menampilkan view pada part 1


0 Comments

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *