view pada CI 4 berguna untuk menangani tampilan aplikasi kalian dibrowser
nantinya kalian akan sering menulis kode html,css,js dibagian view ini
Membuat View
untuk membuat view yaitu dengan membuat file didalam folder 'app/Views/'
misalnya saya akan membuat file view home.php, maka nanti file tersebut akan ada didalam direktori 'app/Views/home.php'
Menggunakan View
terdapat beberapa cara yang bisa digunakan untuk menggunakan view ini, tapi kali ini saya hanya mempelajari hal yang biasa saja
untuk menggunakan view cukup mudah, yang perlu kalian lakukan adalah dengan menuliskan kode
echo view('file_view');
nilai pada function view tersebut nantinya di isi dengan nama file tanpa extensi, misalnya
echo view('home');
kode view diatas nantinya akan mencari file home.php yang terletak dibagian 'app/Views/home.php'
jika file ditemukan maka akan mengeksekusi file tersebut dan jika tidak maka akan muncul error
Mengirim data ke view
seperti yang kalian ketahui view ini merupakan bagian dari Pola Desain Software MVC, maka setiap prosesnya pasti akan berkaitan dengan controller dan model
untuk mengirim data dari controller ke view caranya cukup mudah yaitu dengan membuat data array lalu letakan dinilai kedua pada function view, berikut kodenya
$data = [
'title' => 'Belajar CodeIgniter 4',
'description' => 'saya akan belajar codeigniter 4 sampai bisa membuat aplikasi',
'tags' => ['CodeIgniter 4', 'CI 4', 'Belajar CI']
];
echo view('post', $data);
untuk memanggil data array diatas kalian cukup menggunakan variable dari key array tersebut, misalnya
<?php echo $title; ?>
kode diatas akan menghasilkan output 'Belajar CodeIgniter 4'
Cara Memisahkan Kode View (Layouting)
layouting sangat dibutuhkan dalam penulisan kode view
tujuan dari layouting yaitu untuk memisah-misah setiap kode agar nantinya kode tidak ditulis secara berulang terus menerus
langsung saja saya jelaskan bagaimana cara memisahnya
Langkah 1pertama buat file layout utamanya terlebih dahulu, saya akan beri nama '_layout.php', kemudian di isi dengan kode
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kerangka Utama</title>
</head>
<body>
<header>
<?= $this->renderSection('header') ?>
</header>
<article>
<?= $this->renderSection('content') ?>
</article>
<footer>
<?= $this->renderSection('footer') ?>
</footer>
</body>
</html>
pada kode diatas terlihat ada kode php
$this->renderSection('nama_section')
kode diatas nantinya akan kita gunakan untuk menaruh kode html dibagian-bagian tersebut
Langkah 2kemudian dilanjut dengan membuat file viewnya, saya akan beri nama 'post.php', yang kemudian akan saya isi dengan kode
<?= $this->extend('_layout') ?>
<?= $this->section('header') ?>
ini akan tampil didaialm tag header
<?= $this->endSection() ?>
<?= $this->section('content') ?>
ini akan tampil didalam tag article
<?= $this->endSection() ?>
<?= $this->section('footer') ?>
ini akan tampil didalam tag footer
<?= $this->endSection() ?>
berikut penjelasan kode diatas
- $this->extend('_layout') kode extend ini digunakan untuk menjadikan file '_layout.php' sebagai kerangka utama file 'post.php'
- $this->section('xxx') kode ini digunakan untuk meletakan kode yang berada didalam section ini kebagian yang ada pada '_layout.php' dan untuk mengakhirinya harus dengan menuliskan kode $this->endSection()
ada satu kode lagi yang tidak kalah penting yaitu
<?= $this->include('file_view') ?>
fungis dari include ini sama seperti fungsi include php pada umumnya yaitu menyisipkan kode lainnya kedalam halaman
include ini menurut saya sangat penting dalam membuat layouting karena selain kita menggunakan section pasti akan selalu menginclude file lainnya di view nantinya
berikut penulisan kodenya
<?= $this->extend('_layout') ?>
<?= $this->section('header') ?>
<h1>NamaBrand</h1>
<?= $this->include('navigation') ?>
<?= $this->endSection() ?>
Praktek Membuat View
untuk lebih mendalami tentang view mari kita praktek langsung yah...
praktek membuat view ini akan meliputi
- Membuat View di sub-folder
- Menggunakan View di controller
- Menggunakan Layouting
- Membuat 3 Controller yaitu, home, post, pages
- Menggunakan data dari Controller di view
Membuat File Controller
seperti biasa kita gunakan command tools spark, silahkan jalankan command spark dibawah ini untuk membuat file controllernya
php spark make:controller home
php spark make:controller post
php spark make:controller pages
Dilanjut dengan mengatur route url
buka file 'App/Config/Routes.php' kemudian tambahkan kode dibawah ini
$routes->get('/', 'Home::index');
$routes->get('post', 'Post::index');
$routes->get('p/about', 'Pages::about');
$routes->get('p/contact-us', 'Pages::contact');
Langkah 3 Kemudian kita isi kode ke controllernya
ubah kode yang ada pada Controller Home, yang filenya terletak di 'App/Controllers/Home.php' dengan kode dibawah ini
<?php
namespace App\Controllers;
class Home extends BaseController
{
public function index()
{
$data['title'] = "Belajar CI 4 di Kurteyki";
return view('home', $data);
}
}
ubah kode Controller Post, dengan kode dibawah ini
<?php
namespace App\Controllers;
use App\Controllers\BaseController;
class Post extends BaseController
{
public function index()
{
$data['title'] = "Halaman Post dengan Data Array";
$data['posts'] = [
[
'title' => 'hallo ini post pertama',
'description' => 'post pertama dengan CI 4'
],
[
'title' => 'hallo ini post kedua',
'description' => 'post kedua dengan CI 4'
]
];
echo view('post', $data);
}
}
ubah kode Controller Pages, dengan kode dibawah ini
<?php
namespace App\Controllers;
use App\Controllers\BaseController;
class Pages extends BaseController
{
public function about()
{
$data['title'] = 'Halaman pages about';
echo view('pages/about', $data);
}
public function contact()
{
$data['title'] = 'Halaman pages contact';
echo view('pages/contact-us', $data);
}
}
Langkah 4 Membuat File View
untuk membuat file view kita tidak bisa pakai spark jadi harus manual yah, langsung saja buat file 'home.php, post.php' didalam folder 'app/Views/'
buat file view untuk controller pages dengan membuat folder baru 'app/Views/pages/', buat 2 file pages yaitu 'about.php, contact-us.php'
buat file layoutingnya, disini saya buat 1 file layout dan 1 file include silahkan buat file dengan nama '_layout.php, navigation.php'
Langkah 5kemudian isi file _layout.php dengan kode
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><?= $title ?></title>
</head>
<body>
<?= $this->renderSection('content') ?>
</body>
</html>
isi file navigation.php dengan kode
<nav>
<ul>
<li><a href="<?= base_url() ?>">home</a></li>
<li><a href="<?= base_url('post') ?>">post</a></li>
<li><a href="<?= base_url('p/about') ?>">pages-about</a></li>
<li><a href="<?= base_url('p/contact-us') ?>">pages-contact</a></li>
</ul>
</nav>
isi file home.php dengan kode
<?= $this->extend('_layout') ?>
<?= $this->section('content') ?>
<?= $this->include('navigation') ?>
<h1><?= $title ?></h1>
<article>
ini adalah halaman home page
</article>
<?= $this->endSection() ?>
isi file post.php dengan kode
<?= $this->extend('_layout') ?>
<?= $this->section('content') ?>
<?= $this->include('navigation') ?>
<h1><?= $title ?></h1>
<?php foreach ($posts as $post): ?>
<article>
<h2><?= $post['title'] ?></h2>
<p><?= $post['description'] ?></p>
</article>
<?php endforeach ?>
<?= $this->endSection() ?>
isi file pages/about.php dengan kode
<?= $this->extend('_layout') ?>
<?= $this->section('content') ?>
<?= $this->include('navigation') ?>
<h1><?= $title ?></h1>
<article>
ini adalah halaman pages about
</article>
<?= $this->endSection() ?>
isi file pages/contact-us.php dengan kode
<?= $this->extend('_layout') ?>
<?= $this->section('content') ?>
<?= $this->include('navigation') ?>
<h1><?= $title ?></h1>
<article>
ini adalah halaman pages contact-us
</article>
<?= $this->endSection() ?>
Langkah 6 sekarang saatnya uji coba praktek ini dengan menjalankan web server melalui spark, jalankan perintah
php spark serve
kemudian coba buka browser kalian dan kunjungi URL http://localhost:8080/
berikut hasilnya