Tutorial Codeigniter 4 – Part 4 – Membuat View di Codeigniter 4
Selamat datang di tutorial warung belajar, dalam tutorial ini kita akan melanjutkan pembahasan mengenai seri tutorial Codeigniter 4, pada part 4 kita akan membahas cara membuat view di Codeigniter 4.
Seperti yang telah kita pernah bahas terkait dengan konsep MVC yang ada di Codeigniter, pembahasan MVC bisa anda baca di Mengenal Konsep MVC di Codeigniter.
Views memiliki fungsi untuk menampilkan tampilan web yang dapat dilihat oleh pengguna aplikasi, seperti tampilan header, content, footer, data, form dll, intinya views digunakan untuk membuat tampilan yang dapat dinikmati oleh pengguna aplikasi.
Secara konsep di Codeigniter 4, penggunaan view sama dengan Codeigniter 3, beberapa hal yang akan kita bahas antara lain adalah :
- Cara Membuat View
- Cara Menampilkan View
- Menampilkan Multiple View
- Menampilkan View didalam Subdirektori
- Menampilkan Data dari Controller ke View
- Menampilkan Data Array dari Controller ke View dengan menggunakan Perulangan
Video Tutorial Belajar Codeigniter 4 – Cara Membuat View di Codeigniter 4
Persiapan Instalasi Codeigniter 4
Untuk proses belajar view, pastikan anda sudah menginstall Codeigniter 4, untuk tutorial instalasi Codeigniter 4 bisa dilihat di turorial kita sebelumnya : Cara Menginstall Tutorial Codeigniter 4
Pada contoh ini saya sudah menginstall Codeigniter 4 dengan nama foldernya adalah ci4app
Cara Membuat View
Dalam tutorial – tutorial sebelumnya kita sudah sering memberikan contoh dalam penggunaan views, tetapi disini kita akan jelaskan ulang bagaimana cara membuat view di codeigniter 4, di direktori Codeigniter 4 file view disimpan pada folder app/Views
Dalam contoh ini kita akan buat file view dengan nama product_page.php, file tersebut simpan di dalam folder app/Views
untuk isi file view product_page.php bisa anda isi dengan code dibawah ini :
|
1 2 3 4 5 6 7 8 |
<html> <head> <title>Product Page</title> </head> <body> <h1>Ini adalah halaman Product</h1> </body> </html> |
Cara Menampilkan View
Setelah kita membuat view, kita akan belajar cara untuk menampilkan view, sebagai tampilan halaman aplikasinya.
Kita akan buat Controller terlebih dahulu, semisal dalam contoh ini kita buat controller dengan nama Product.php dan disimpan didalam folder app/Controllers
Pada file Product.php isi dengan code seperti berikut :
|
1 2 3 4 5 6 7 8 9 10 11 |
<?php namespace App\Controllers; class Product extends BaseController { public function index() { return view('product_page'); } } |
Keterangan :
Perhatikan line 9 pada method index, kita menuliskan perintah :
|
1 |
return view('product_page'); |
yang artinya saat method index pada controller Product diakses, maka akan menampilkan file view dengan nama ProductPage.
Selain menggunakan perintah return anda juga bisa menggunakan perintah :
|
1 |
echo view('product_page'); |
jadi anda bisa juga mengganti perintah return menjadi echo
Berikutnya kita akan mencoba mengaksesnya, kita jalankan dulu untuk local development servernya, kita tuliskan perintah berikut ini di terminal :
|
1 |
php spark serve |
Lalu akses menggunakan URL :
|
1 |
localhost:8080/product |
Maka akan menampilkan halaman tampilan dari file view product_page.php
Cara Menampilkan Views di dalam Subdirektori
Berikutnya kita akan belajar bagaimana menampilkan jika file view yang berada didalam subdirektori, semisal kita buat file view dengan nama product_display.php, file ini kita simpan didalam folder app/views/product
untuk isi code didalam file product_display.php adalah sebagai berikut :
|
1 2 3 4 5 6 7 8 9 10 11 |
<html> <head> <title>Product Display Page</title> </head> <body> <h1>Ini adalah halaman Product Display</h1> </body> </html> |
Berikutnya kita buat method baru dengan nama display, didalam controller Product, dan didalam method display ini mengakses view product_display yang barusan kita buat, sehingga untuk controller Product kurang lebih seperti berikut ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?php namespace App\Controllers; class Product extends BaseController { public function index() { return view('product_page'); } public function display() { return view('product/product_display'); } } |
Keterangan :
Perhatikan pada line 14 di method display, kita mengakses view product_display.php didalam folder product, jadi kita perlu menuliskan foldernya terlebih dahulu dalam hal ini adalah product, baru file viewnya dengan nama product_display.php, karena itu untuk mengakses view kita menggunakan perintah
|
1 |
return view('product/product_display'); |
Berikutnya kita coba untuk mengakses method display, jangan lupa menjalankan local development server terlebih dahulu dengan perintah php spark serve
lalu akses URL berikut ini : localhost:8080/product/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 multiple 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
|
1 |
<h1>Ini adalah bagian Header</h1> |
- buat file view dengan nama content.php, simpan didalam folder app/views
|
1 2 3 |
<hr /> Ini adalah bagian content <hr /> |
- buat file view dengan footer.php, simpan didalam folder app/views
|
1 |
<h3>Ini adalah bagian footer</h3> |
Berikutnya kita akan membuat method baru dengan nama page didalam controller Product, sehingga controller Product menjadi seperti berikut ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<?php namespace App\Controllers; class Product extends BaseController { public function index() { return view('product_page'); } public function display() { return view('product/product_display'); } public function page() { echo view('header'); echo view('content'); echo view('footer'); } } |
Keterangan :
- perhatikan pada line 17 kita membuat method dengan nama page, didalamnya kita mengakses file view, dimulai dari header, content, dan footer.
- yang berbeda disini adalah karena kita mengakses beberapa view sekaligus, sehingga kita menggunakan perintah echo, karena ketika kita menggunakan return maka yang akan dijalankan adalah bagian views pertama saja.
Berikutnya kita coba untuk mengaksesnya, jangan lupa menjalankan local development server dengan perintah php spark serve
lalu akses URL berikut untuk mengakses method page di controller product :
|
1 |
localhost:8080/product/page |
maka tampilannya adalah sebagai berikut ini :
Maka akan ditampilkan isi dari file view header, content, dan footer.
Menampilkan data dari Controller ke View
Berikutnya kita akan belajar bagaimana cara passing data dari controller agar ditampilkan dibagian view, baik kita akan tambahkan method baru dengan nama catalog di controller product, sehingga controller product menjadi seperti berikut ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<?php namespace App\Controllers; class Product extends BaseController { public function index() { return view('ProductPage'); } public function display() { return view('product/ProductDisplay'); } public function page() { echo view('header'); echo view('content'); echo view('footer'); } public function catalog() { $data = [ 'product' => 'Redmi Note 9 Pro' ]; return view('product_catalog', $data); } } |
Keterangan :
- Perhatikan pada line 24 kita membuat method dengan nama catalog
- didalam method itu kita buat variabel $data yang berisi array, dengan key ‘product‘, dan value ‘Redmi Note 9 Pro‘
- ‘product‘ yang merupakan key dari array disini nantinya akan menjadi nama variabel yang bisa dipanggil dibagian view, dan ‘Redmi Note 9 Pro‘ adalah value dari variabel $product
- pada bagian line 29 kita mengakses view dengan nama product_catalog,dimana kita juga menuliskan variabel $data sebagai parameter kedua dari function view, dimana variabel $data telah berisi data array yang akan di passing kebagian view
Berikutnya kita buat file view dengan nama product_catalog.php, dan simpan didalam folder app/views, untuk isi dari file view product_catalog.php adalah
|
1 2 3 4 5 6 7 8 |
<html> <head> <title>Product Catalog Page</title> </head> <body> Nama Product Adalah <?= $product; ?> </body> </html> |
Keterangan :
Perhatikan dibagian line 6 kita menuliskan variabel $product, variabel ini adalah data yang kita kirim dari controller, yang merupakan key dari variabel $data
Berikutnya kita coba untuk mengaksesnya, Jangan lupa untuk menjalankan local development server, lalu akses dengan menggunakan URL :
|
1 |
localhost:8080/product/catalog |
Maka tampilannya adalah sebagai berikut :
Menampilkan data berupa array dari controller ke view 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 akan menampilkan data dari database untuk ditampilkan dibagian view.
secara sederhana konsepnya adalah kita membuat array multidimensi dibagian controller, array itu kita passing ke bagian view, lalu dibagian view, akan kita lakukan perulangan untuk extract array multidimensi itu agar dapat ditampilkan dibagian view.
sebagai contoh kita akan modifikasi method catalog dibagian controller product, sehingga controller product menjadi sebagai berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<?php namespace App\Controllers; class Product extends BaseController { public function index() { return view('ProductPage'); } public function display() { return view('product/ProductDisplay'); } public function page() { echo view('header'); echo view('content'); echo view('footer'); } public function catalog() { $data = [ 'title' => 'Product Catalog', 'brand' => 'Smartphone Xiaomi', 'product' => ['Redmi Note 9', 'Redmi Note 9 Pro', 'Mi Note 10', 'Mi Note 10 Pro'] ]; return view('product_catalog', $data); } } |
Keterangan :
Perhatikan di line 26 pada method catalog, kita membuat variabel $data yang berisi array multidimensi, ada beberapa data dibagian product.
jika dilihat dari isi array $data, akan terdapat 3 variabel yang dapat kita akses dibagian view yaitu title, brand, dan product.
variabel $data itu kita passing dibagian view dengan nama product_catalog.php, perhatikan line 31
Berikutnya kita modifikasi juga untuk file view dengan product_catalog.php, menjadi seperti berikut ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<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 :
- Line 4 kita menampilkan isi variabel $title agar tampil dibagian page title, ini membuat page title akan tertulis ‘Product Catalog‘
- Line 8 kita akan menampilkan isi variabel $brand, agar tampil tulisan “Smartphone Xiaomi“
- Line 11 kita menuliskan perintah foreach, untuk melakukan perulangan sesuai data pada variabel $product, dan setiap perulangan datanya disimpan di variabel $item, lalu setiap perulangan akan menampilkan value dari variabel $item, sehingga menampilkan seluruh data product.
Berikutnya kita coba mengakses method tersebut, jangan lupa menjalankan local development server, lalu akses menggunakan URL berikut ini :
|
1 |
http://localhost:8080/product/catalog |
Sehingga yang ditampilkan adalah sebagai berikut :
Keterangan :
- Maka data yang dipassing dari controller untuk ditampilkan dibagian view, akan tampil dibagian page title (Product Catalog), Header (Smartphone Xiaomi), dan content yang menampilkan data product.
Baik kurang lebih seperti itu pembahasan tutorial Codeigniter 4 kali ini, kita sudah membahas beberapa hal terkait dengan penggunaan view di Codeigniter 4, jika anda ingin membaca lebih lanjut terkait penggunaan view bisa ke dokumentasi resmi codeigniter :
https://codeigniter.com/user_guide/outgoing/views.html
Baik sekian dulu tutorial kali ini, jika ada yang ingin didiskusikan silahkan di kolom komentar, sampai jumpa di tutorial selanjutnya
