Tentu, berikut adalah artikel tutorial tentang View pada CodeIgniter.
Selamat datang kembali di seri tutorial CodeIgniter! Setelah kita memahami peran Controller sebagai pusat logika aplikasi, sekarang saatnya kita mengenal View. Dalam arsitektur MVC, View adalah komponen yang bertanggung jawab penuh atas tampilan aplikasi Anda atau apa yang dilihat oleh pengguna di browser.
Apa Itu View?
Secara sederhana, View adalah file yang berisi kode untuk menampilkan informasi ke pengguna. Ini biasanya berupa file HTML yang dicampur dengan kode PHP untuk menampilkan data dinamis yang dikirim dari Controller. View tidak memiliki logika aplikasi atau akses langsung ke database. Tugasnya murni untuk menyajikan data yang telah dipersiapkan oleh Controller.
Dengan memisahkan tampilan dari logika, CodeIgniter mempermudah:
- Manajemen Kode: Desainer dapat bekerja pada View tanpa harus menyentuh logika bisnis.
- Pengembangan Bersama: Tim pengembang dan desainer dapat bekerja secara paralel.
- Penggunaan Kembali: Bagian-bagian dari View (seperti header atau footer) dapat digunakan kembali di berbagai halaman.
Struktur Dasar View
View adalah file PHP biasa, biasanya disimpan di dalam folder app/Views. Contoh struktur dasarnya sangat sederhana:
<!DOCTYPE html>
<html>
<head>
<title>Halaman Web Saya</title>
</head>
<body>
<h1>Selamat Datang!</h1>
<p>Ini adalah halaman web sederhana.</p>
</body>
</html>
Mengirim Data dari Controller ke View
Hubungan antara Controller dan View adalah satu arah: Controller yang mengirim data, dan View yang menerimanya.
Mari kita gunakan kembali Controller dari tutorial sebelumnya. File app/Controllers/Welcome.php memiliki method index() yang mengirimkan data ke View:
// app/Controllers/Welcome.php
public function index()
{
// Mengirim array data ke View
$data['judul'] = "Halaman Profil";
$data['nama'] = "Andi Suryadi";
$data['email'] = "andi@contoh.com";
// Memuat view 'profil_pengguna' dan mengirimkan data
return view('profil_pengguna', $data);
}
Dalam kode di atas, $data adalah array yang berisi pasangan key-value. Setiap key (judul, nama, email) akan menjadi variabel yang bisa diakses di dalam file View.
Membuat View untuk Menerima Data
Sekarang, kita buat file View baru di app/Views dengan nama profil_pengguna.php. File ini akan menerima data dari Controller dan menampilkannya.
<!DOCTYPE html>
<html>
<head>
<title><?= $judul; ?></title>
</head>
<body>
<h1><?= $judul; ?></h1>
<p>Nama: <b><?= $nama; ?></b></p>
<p>Email: <b><?= $email; ?></b></p>
</body>
</html>
- Perhatikan penggunaan tag
<?= ... ?>. Ini adalah cara singkat dari<?php echo ... ?>yang direkomendasikan untuk mencetak variabel langsung ke HTML. - Variabel
$judul,$nama, dan$emailsecara otomatis tersedia di dalam View karena kita mengirimkannya dari Controller.
Ketika Anda mengakses URL yang mengarah ke Controller dan method ini, CodeIgniter akan memuat View profil_pengguna.php dan menggabungkan data yang dikirim, menghasilkan halaman HTML yang lengkap untuk ditampilkan ke pengguna.
Mengatur Bagian View
Salah satu praktik terbaik dalam pengembangan web adalah memecah tampilan menjadi beberapa bagian, seperti header, footer, dan konten utama. Ini akan membuat kode lebih mudah dikelola dan digunakan kembali.
Langkah 1: Buat Bagian-Bagian View
- Buat
header.phpdiapp/Views/templates/ - Buat
footer.phpdiapp/Views/templates/ - Buat
konten.phpdiapp/Views/
app/Views/templates/header.php:
<!DOCTYPE html>
<html>
<head>
<title>Situs Saya - <?= $judul; ?></title>
</head>
<body>
<header>
<h2>Header Situs</h2>
<nav>
<a href="#">Beranda</a> | <a href="#">Tentang Kami</a>
</nav>
<hr>
</header>
app/Views/templates/footer.php:
<footer>
<hr>
<p>© <?= date('Y'); ?> Situs Saya</p>
</footer>
</body>
</html>
app/Views/konten.php:
<main>
<h1>Selamat Datang di Halaman Utama</h1>
<p>Ini adalah konten utama dari halaman.</p>
</main>
Langkah 2: Gabungkan di Controller
Sekarang, kita gabungkan bagian-bagian ini di Controller.
// app/Controllers/Home.php
public function index()
{
$data['judul'] = "Halaman Beranda";
echo view('templates/header', $data);
echo view('konten');
echo view('templates/footer');
}
Dengan cara ini, Controller memuat setiap bagian View secara terpisah, menggabungkannya, dan mengirimkan halaman HTML yang utuh ke browser.
Kesimpulan
View adalah kunci untuk memisahkan logika aplikasi dari presentasi, sebuah prinsip utama dalam arsitektur MVC. Dengan memahami cara mengirim data dari Controller dan cara menampilkan data tersebut di View, Anda dapat membangun halaman web yang dinamis, terstruktur, dan mudah dikelola. Pada tutorial berikutnya, kita akan menyelami bagian terakhir dari MVC, yaitu Model, untuk belajar cara berinteraksi dengan database.
