Ahmad Muhardian · 23 Sep 2020

Tutorial Codeigniter 4: Membuat Widget dengan View Cells

---

#Codeigniter #Framework #PHP

Pada tutorial sebelumnya, kita sudah belajar cara membuat template view dengan View Layout dan View Partial.

View Partial memang bagus buat memisah kode view yang sering digunakan. Ia juga sebenarnya sudah mampu mengenali variabel data yang dikirim dari Controller.

Namun kekurangannya.. ia tidak bisa menerima data parameter saat kita menggunakannya di dalam View.

Misalnya gini:

<?= $this->include('header', ['title' => "Belajar CI 4"]) ?>

Pada kode ini, kita ingin include view partial header dengan memberikan data title.

Namun ini tidak bisa dilakukan..

Kode tersebut akan membuat error.

Tapi jangan khawatir.

Karena kita bisa menggunakan View Cell untuk masalah ini.

Apa itu View Cell?

Bagaimana cara menggunakan View Cell?

Mari kita bahas..

Apa itu View Cell?

Cell artinya Sel.. merupakan bagian terkecil dari makhluk hidup.

Kalau View Cell?

View Cell adalah bagian terkecil dari View. Secara teknis, View Cell sebenarnya adalah sebuah Class yang bertugas membuat kode HTML (generate HTML) dengan method-method-nya. ¹

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 ya.

Namun perlu diingat:

Class View Cell bukanlah Controller, karena ia tidak bertugas untuk membalas sebuah request. Ia hanya Class yang bertugas membuat HTML.

Biar lebih jelas..

Mari kita coba membuat View Cell.

Membuat View Cell

Buatlah folder baru di dalam app/Views dengan nama widget.

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>

Setelah itu buatlah Class baru bernama Widget.php di dalam folder app/Libraries .

Kemudian isi dengan kode berikut.

<?php namespace App\Libraries;

class Widget
{

    public function recentPost()
    {
        return view('widget/recent_post');
    }
}

Pembuatan widget sudah selesai, namu belum kita gunakan.

Kita akan gunakan widget recentPost di dalam view sidebar.php.

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.

Sekarang mari kita coba lihat hasilnya.

Bukalah localhost:8080/news.

Hasilnya:

Sekila mirip seperti View Partial ya..

Nah, sekarang mari kita coba menggunakan parameter.

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.

Mari kita coba..

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>

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);
    }

}

Terakhir.. ubah kode Views/layout/sidebar.php menjadi seperti ini:

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

Sekarang mari kita coba lihat hasilnya:

View Cells vs View Partials

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

Apa Selanjutnya?

Oke.. sekian dulu materi tentang View di Codeigniter 4.

Sebenarnya masih ada lagi yang belum dibahas, seperti View Parser. Silakan pelajari sendiri di dokumentasi.

Kita akan lanjutkan tutorial ini dengan membahas Model, Migrasi Database, dan membuat CRUD.

Silakan lanjut ke:

• ➡️ Tutorial CI 4 (Part #08): Migrasi Database

Untuk tutorial Codeigniter yang lainnya, cek di 📚 List Tutorial Codeigniter