Membuat Widget dengan View Cells

Pada materi sebelumnya, kita telah mempelajari cara membuat template view dengan View
Layout dan View Partial.

View partial memang bagus untuk memisahkan kode view yang sering digunakan. Ia juga
sebenarnya mampu mengenai variable data yang dikirim dari controller. Namun
kekurangannya, ia tidak bisa menerima data parameter saat kita menggunakannya di dalam
View.

View layout memang akan memudahkan kita dalam membuat template untuk halaman, Namun,
pada partial layout tidak bisa menerima parameter data saat kita menggunakannya di dalam
View. Misalnya :
<?= $this->include('header', ['title' => "Belajar CI 4"]) ?>

Pada kode ini, kita ingin include view partial header dengan memberikan data title. Namun
tidak bisa dilakukan, oleh karena itu kita bisa menggunakan View Cell untuk masalah ini.

1. Apa itu View Cell

Sama seperti halnya Cell yang memiliki arti bagian terkecil dari makhluk hidup, maka View Cell
adalah bagian terkecil dari View. Secara teknis, view cell sebenarnya adalah sebuah Class yang
bertugas membuat Kode HTML (generate HTML) dengan method-methodnya.

Kita bisa bayangkan view cell seperti widget yang bisa kita tempel di view mana saja

Class view cell bisa menerima data dari parameter dan juga bisa mengakses data dari model.
Cara kerjanya mirip seperti controller. Namun perlu diingat, class view cell bukanlah controller,
karena itu tidak bertugas untuk membalas sebuah request. Ia hanya class yang bertugas
membuat HTML.

2. Membuat View Cell

a. Buatlah folder baru di dalam app/Views dengan nama widget.
b. Setelah itu, buatlah file baru di dalam folder widget dengan nama recent_post.php
dan isilah dengan kode berikut:
<div class="card">
<div class="card-body">
<h5 class="h5">Recent Posts</h5>
<hr>
<div class="list-group list-group-flush">
<div class="media mb-3">
<div class="media-body">
<h6 class="mt-0 mb-1 h6">Komunitas Codeigniter Indonesia
Mengadakan Meetup</h6>
<small class="text-secondary">23 Sep 2020 · baca 2
menit</small>
</div>
<img class="rounded ml-3" src="http://lorempixel.com/60/60/nature/"
width="60" height="60">
</div>
<div class="media mb-3">
<div class="media-body">
<h6 class="mt-0 mb-1 h6">9 Fitur Terbaru Codeigniter 4</h6>
<small class="text-secondary">23 Sep 2020 · baca 2
menit</small>
</div>
<img class="rounded ml-3" src="http://lorempixel.com/60/60/"
width="60" height="60">
</div>
<div class="media mb-2">
<div class="media-body">
<h6 class="mt-0 mb-1 h6">Tutorial Codeigniter Terlengkap Bahasa
Indonesia</h6>
<small class="text-secondary">23 Sep 2020 · baca 2
menit</small>
</div>
<img class="rounded ml-3" src="http://lorempixel.com/60/60/cats/"
width="60" height="60">
</div>
</div>
</div>
</div>
c. Setelah itu buatlah Class baru bernama Widget.php di dalam folder app/Libraries.
 d. Kemudian isi dengan kode berikut:
<?php namespace App\Libraries;

class Widget
{

public function recentPost()

{
return view('widget/recent_post');
}
}

e. Pembuatan widget sudah selesai, namu belum kita gunakan. Kita akan gunakan
widget recentPost di dalam view sidebar.php.
f. Bukalah file app/Views/layout/sidebar.php, kemudian ubah semua kodenya menjadi
seperti ini:
<?= view_cell('\App\Libraries\Widget::recentPost') ?>
Fungsi view_cell() adalah fungsi untuk menggunakan View Cell
g. Bukalah localhost:8080/news. Hasilnya:

3. View Cells dengan Parameter

Parameter adalah data atau variabel yang diberikan ke View Cell. Parameter ini diberikan
saat kita menggunakan View Cell. Parameter ini sama seperti saat kita mengirim data ke
view. Contoh:
<?= view_cell('\App\Libraries\Widget::recentPost', ['limit' => 5]) ?>
Pada contoh ini, kita memberikan parameter berupa asosiatif array dengan key limit dan
value-nya 5. Nantinya key title akan dikenali sebagai variabel di dalam View Cell.
1. Ubahlah kode app/Views/widget/recent_post.php menjadi seperti ini:
<div class="card">
<div class="card-body">
<h5 class="h5">Recent Posts</h5>
<hr>
<div class="list-group list-group-flush">
<?php for($i=0; $i < $limit; $i++): ?>
<div class="media mb-3">
<div class="media-body">
<h6 class="mt-0 mb-1 h6">Komunitas Codeigniter Indonesia
Mengadakan Meetup</h6>
<small class="text-secondary">23 Sep 2020 · baca 2
menit</small>
</div>
<img class="rounded ml-3" src="http://lorempixel.com/60/60/"
width="60" height="60">
</div>
<?php endfor; ?>
</div>
</div>
</div>

2. Kemudian ubah class Libraries/Widget.php menjadi seperti ini:

<?php namespace App\Libraries;

class Widget
{

public function recentPost(array $params)

{
return view('widget/recent_post', $params);
}

3. Ubah kode Views/layout/sidebar.php menjadi seperti ini:

<?= view_cell('\App\Libraries\Widget::recentPost', ['limit' => 5]) ?>

4. Sekarang mari kita coba lihat hasilnya:

4. View Cells vs View Partials
View Cell dan View Partials memang agak mirip, namun terdapat beberapa perbedaan
yang perlu diketahui.

Perbedaan View Cells View Partials

Bisa baca Variabel yang

ya ya
dikirim dari Controller?

Bisa menerima parameter

ya tidak
saat digunakan di View?

Bisa akses data dari Model? ya, karena punya class sendiri tidak, harus melalui controller

Memecah kode yang sama dan sering

Cocok digunakan untuk Widget, Metadata SEO digunakan (cth: sidebar, footer, header,
navbar, dll)