Mempelajari View CodeIgniter 4

irfan-photo irfan · 2 bulan lalu

belajar view codeigniter 4

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 1

pertama 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 2

kemudian 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()
Tambahan

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
Langkah 1

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

Langkah 2

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 5

kemudian 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

hasil belajar view codeigniter 4

Terakhir diupdate 09 Jun 2022 04:57 WIB
Daftar Konten Belajar CodeIgniter 4