Tutorial Membuat View di Codeigniter 4 - Part 5

Assalamualaikum Sahabat Gudang Ilmu IT, Salam Sejahterah Untuk kita semuanya. Oke Kali ini kita akan meneruskan pembelajaran kita tentang tutorial di Codeigniter 4, pada part 5 ini kita akan mempelajari tentang cara membuat views di Codeigniter 4.

Views memiliki fungsi untuk menampilkan tampilan web yang dapat dilihat oleh pengguna aplikasi, seperti tampilan header, content, footer, sidebar, nabvar, sidenav, data, form dll, intinya views digunakan untuk membuat tampilan yagn dapat dinikmas=ti oelh pengguna aplikasi.

secara konsep di codeigniter 4, penggunaan views sama dengan codeigniter 3, beberapa hal yang akan kita bahas antara lain :

* Cara membuat Views di codeigniter 4

* Cara Menampilkan Views di codeigniter 4

* Menampilkan Multiple Views

* Menampilkan Views didalam Subdirektori

* Menampilakn data dari Controller ke Views

* Menampilakn data array dari Controller ke Views dengan menggunakan Perulangan.

Persiapan Instalasi Codeigniter 4

Untuk proses belajar views, patikan teman-teman sudah menginstall Codeigniter 4, untuk tutorialnya bisa dilihat pada artikel sebelumnya : Cara instalasi codeigniter 4

Pada contoh ini mimin sudah install Codeigniter 4 dengan nama foldernya ciinstall.

Cara membuat Views

Di tutorial-tutorial sebelmnya kita sudah sering memberikan contoh dalam penggunaan views, tetapi disini kita akan menjelaskan ulang bagaimana cara membuat view di codeigniter 4, di direktori Codeigniter 4 file views disimpan pada folder app/Views.

Dalam tutorial ini mimin ada contoh, kita akan buat file views dengan nama komputer_page.php, file tersebut simpan dalam folder app/Views.

Untuk isi file views komputer_page,php bisa teman-teman isi dengan code di bawah ini.

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>
            Komputer Page
        </title>
    </head>
    <body>
        <h1>Ini adalah halamn komputer</h1>
    </body>
</html>

Cara menampilkan Views

Setelah kita membuat views, kita akan belajar cara utnuk menampilkan views sebagai tampilan halaman aplkiasinya.

Kita akan membuat Controller terlebih dahulu, semisal dalam contoh ini kita buat Controller dengan nama Komputer.php dan disimpan didalam folder app/Controllers.

Pada komputer,php

<?php

namespace App\Controllers;

class Kopmputer extends BaseController
{
    public function index()
    {
        return view('komputer_page');
    }
}  

Keterangan :

Perhatikan ;ine 9 pada method index, kita menuliskan perintah

return views('komputer_page');

jika artinya saat method index pada Controller Product di akases, maka akam menampilakn file views dengan nama Komputer Page.

Selain menggunakan perintah return temna-temna juga bisa menggunakan perintah :

echo view('komputer_page');

Jadi teman-teman bisa juga mengganti perintah return menjadi echo

Berikutnya kita akan mencoba mengaksesnya, kita jalankan dulu local development servernya, kit atuliskan perintah ini di terminal visual studio.

php spark serve

Lalu akses menggunakan link URL Berikut :

localhost:8080/komputer

Maka akan menampilkan halaman tampilan dari file views komputer_page.php

Cara menampilakn Views Didalam Subdirektori\

Kita akan belajar bagaimana menampilkan jika file views yang berada di dalam subdirektori, semisal kita buat fuile view dengan nama komputer_display.php, file ini akan kita simpan di dalam folde app/views/komputer.

Untuk isi kodenya adalah sebgai berikut :

<html>

<head>
    <title>Komputer Display Page</title>
</head>

<body>
    <h1>Ini adalah halaman Komputer Display</h1>
</body>

</html>

Berikutnya kita buat method baru dengan nama display, didalam controller Komputer. dan didalam method display ini menakses views komputer_display yang barusan kita buat, sehingga untuk controller Komputer kurang lebih seperti berikut :

<?php

namespace App\Controllers;

class Komputer extends BaseController
{
    public function index()
    {
        return view('komputer_page');
    }

    public function display()
    {
        return view('komputer/komputer_display');
    }
}

Keterangan :

Perhatikan pada line 14 di method display, teman-tmena mengakses view komputer_display.php didalam folder komputer, jadi teman-teman perlu menuliskan foldernya terlebih dahulu dalam hal ini adalah komputer, baru file viewsnya dengan nama komputer_display.php, karena untuk mengakses views kita menggunakan perintah.

return view('komputer/komputer_display');

Berikutnya kita coba akses method display, jangan lupa menjalankan local development server terlebih dahulu dengan perintah php spark serve.

Laku akses URL berikut ini : localhost:8080/komputer/display

Maka akan menampilkan tampilan seperti berikut ini :

Mengakses Multiple View

Berikutnya kita akan belajar untuk mengakses beberapa view sekaligus, atau biasanya kita kenal dengan istilah load multpile views.

Konsep ini dapat digunakan untuk menampilkan template disertai dengan content webnya, meskipun dari codeigniter 4 sendiri sudah menyediakan fitur untuk menggunakan template, mungkin dalam beberapa part mendatang kita akan membahasnya terkait penggunaan template di codeigniter 4.

Baik sebagai contoh kita akan membuat beberapa file view :

* Buat file view dengan nama header.php, simpan didalam folder app/views

<h1>Ini adalah bagian Header</h1>

* Buat file dengan nama content.php, simpan didalam folder app/views

<hr>
ini adalah bagian content
</hr>

* Buat file vies dengan nama footer.php, simpan didalam folder app/views

<h3>Ini adalah bagian footer</h3>

Berikutnya kita akan membuat method baru dengan nama page didalam controller Komputer, sehingga controller Komputer menjadi seperti berikut ini :

<?php

namespace App\Controllers;

class Komputer extends BaseController
{
    public function index()
    {
        return view('komputer_page');
    }

    public function display()
    {
        return view('komputer/komputer_display');
    }

    public function page()
    {
        echo view('header');
        echo view('content');
        echo view('footer');
    }
}

Keterangan :

* Perhatikam pada line 17 kita membuat method dengan nama page, didalamnya kita mengakses fiel views, dimulai dari header, content, dan footer.

* Yang berbeda disini adalah karena kita mengakses beberapa views sekaligus, sehingga kita menggunakan perintah echo, karena ketika kita menggunakan return maka akan dijalankan adalah bagian views pertama saja.

Berikutnya kita coba untuk mengaksesnya, jangan lupa menjalankan local development server degan perintah php spark serve

Lalu akses URL berikut untuk mengakses method page di controller Komputer :

http://localhost:8080/komputer/page

Maka di browser akan tampil seperti berikut :

Maka akan ditampilkan isi dari file views header, content, dan footer

Menampilakn data dari Controller Ke Views

Selanjutnya kita akan belajar bagaimana cara passing data dari controller agar di tampilakn di bagian view, baik kita akan tambahkan method baru dengan nama katalog di controller Komputer, sehingga controller Komputer menjadi seperti berikut :

<?php

namespace App\Controllers;

class Komputer extends BaseController
{
    public function index()
    {
        return view('komputer_page');
    }

    public function display()
    {
        return view('komputer/komputer_display');
    }

    public function page()
    {
        echo view('header');
        echo view('content');
        echo view('footer');
    }

    public function katalog()
    {
        $data = [
            'product' => 'Acer ES-14E'
        ];
        return view('komputer_catalog', $data);
    }
}

Keterangan :

* Perhatikan pada line kita membuat method dengan nama katalog

* Didalam method itu kita buat variabel $data berisi array, dengan key 'product', dan value 'Acer ES-14E'

* 'product' yang merupakan key dari array disini nantinya akan menjadi nama variabel yang bisa di[anggil view, dan 'Acer ES-14E' adalah value dari variabel $product

*pada bagian views kita mengakses view dengan nama komputer_catalog, dimana kita juga menuliskan variable $data sebagai parameter kedua dati function view, dimana variable $data telah berisi data array yang akan di passing kebagian views.

Berikutnya kita buat file views dengan nama komputer_catalog.php, dan simpan didalam folder app/views, untuk isi dari file view komputer_catalog.php :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Komputer catalog page</title>
</head>

<body>
    Nama product adalah <?= $product; ?>
</body>

</html>

Keterangan :

Perhatikan dibagian line kita menuliskan variable $product, variable ini adalah data yang akan kita kirim dari controller, yang merupakan key dari variable $data

Berikutnya kita coba untuk mengaksesnya, jengan lpa untuk menjalankan local development server, lalu akses dnegan menggunakan URL :

http://localhost:8080/komputer/katalog

Maka tamplilannya adalah sbb :

Menampilakn Data Berupa Array Dari Controller Ke Views Menggunakan Looping

Berikutnya kita akan belajar bagaimana cara menampilkan data berupa Array dari controller agar dapat ditampilkan dibagian view, cara ini nantinya sangat sering digunakan saat kita menampilkan data dari database untuk ditampilkan ke Views.

Secara sederhana konsepnya adalah kita membuat array multidimensi dibagian controller, array itu kita passing kebagian view, lalu dibagian views, akan kita lakukan perulangan untuk extract array multidimensi itu agar dapat ditampilan dibagian view.

Sebagai contoh kita akan modifikasi method katalog dibagian controller komputer, sehingga controller komputer menjadi seperti berikut :

<?php

namespace App\Controllers;

class Komputer extends BaseController
{
    public function index()
    {
        return view('komputer_page');
    }

    public function display()
    {
        return view('komputer/komputer_display');
    }

    public function page()
    {
        echo view('header');
        echo view('content');
        echo view('footer');
    }

    public function katalog()
    {
        $data = [
            'title' => 'Product Catalog',
            'brand' => 'Laptop',
            'product' => ['Acer ES-14E Pro', 'Acer ES-1456 Pro', 'Acer ES-1478 Pro', 'Acer ES-148E Pro']
        ];
        return view('komputer_catalog', $data);
    }
}

Keterangan :

* Perhatikan di line pada method katalog, kita membuat variable $data yang berisi array multidimensi, ada beberapa data dibagian product

* Jika dilihat dari isi array $data, akan terdapat 3 variable yang dapat kita akses dibagian view yaitu title, brand, dan product .

* Variable $data itu kita passing dibagian view dengan nama komputer_catalog.php.

Berikutnya kita medifikasi juga untuk file view dengan komputer_catalog.php, menjadi seperti berikut :

<html>

<head>
    <title><?= $title ?></title>
</head>

<body>
    <h1><?= $brand ?></h1>
    <hr />
    <ul>
        <?php foreach ($product as $item) : ?>

            <li><?= $item ?></li>

        <?php endforeach; ?>
    </ul>
</body>

</html>

Keterangan :

* Kita menampilakn isi variable $title agar tampil dibagian page title, ini membuat page title akan tertulis 'Komputer Catalog'

* Kita juga menampilak isi variable $brand, agar tampil tulisan 'Laptop'

* Kita juga menuliskan perintah foreach, untuk melakukan perulangan sesuai data pada variable $product, dan setiap perulangan datanya disimpan variabel $item, lalu setiap perulangannya akan menampilkan value dari variabel $item, sehingga menampilkan seluruh data product.

Berikutnya kita coba mengakses method tersebut, jangna lupa menjalankan local development server, lalu akses menggunakan URL berikut :

http://localhost:8080/komputer/katalog

Sehingga tampilannya :

Keterangan :

* Maka data yang dipassing dari controller untuk ditampilka dibagian views, akan tampil di bagian page title ( Komputer catalog ), Header ( Laptop ), dan content yang menampilakn data product komputer.

Oke teman-teman kurang lebihnya seperti ini, mudah-mudahn bermamfaat, jika teman-teman ingin lebih lanjut lagi terkait views bisa lihat kedocumentasinya resmi codeigniter.

AE-KOMPUTER

Tutorial Membuat View di Codeigniter 4 - Part 5

0 Response to "Tutorial Membuat View di Codeigniter 4 - Part 5"

Posting Komentar