BAB 5 – View: Menampilkan Halaman Web dengan CodeIgniter

BAB 5 – View: Menampilkan Halaman Web dengan CodeIgniter

Setelah memahami Controller di BAB 4, sekarang saatnya fokus pada View.

View adalah bagian yang menampilkan data ke pengguna, biasanya berisi HTML, CSS, dan sedikit PHP. Dengan View, aplikasi Anda bisa menyajikan tampilan yang rapi, interaktif, dan mudah dibaca.

Pada BAB ini, kita akan membahas:

  • Pengertian view
  • Membuat file view
  • Memanggil view dari controller
  • Mengirim data ke view
  • Menggabungkan HTML + PHP di view

Tujuan Pembelajaran

Setelah menyelesaikan BAB 5, Anda akan mampu:

  1. Memahami fungsi view dalam CodeIgniter
  2. Membuat file view baru
  3. Memanggil view dari controller
  4. Mengirim data ke view
  5. Menggunakan HTML dan PHP di view

5.1 Pengertian View

View adalah tampilan atau UI aplikasi. Fungsi utamanya:

  • Menampilkan data dari controller
  • Memisahkan logika aplikasi dari tampilan (prinsip MVC)
  • Menyediakan antarmuka yang bisa diakses user

📌 Catatan:

  • View tidak boleh mengandung logika berat seperti query database.
  • Gunakan controller atau model untuk memproses data sebelum dikirim ke view.

5.2 Membuat File View

5.2.1 CI 3

Buat file view di:

application/views/halo_view.php

Isi file:

<h1>Halo, <?= $nama; ?>!</h1>
<p>Selamat datang di CodeIgniter 3</p>

5.2.2 CI 4

Buat file view di:

app/Views/halo_view.php

Isi file:

<h1>Halo, <?= $nama; ?>!</h1>
<p>Selamat datang di CodeIgniter 4</p>

📌 Tips:

  • Simpan file view dengan nama deskriptif agar mudah diingat
  • Gunakan folder untuk kategori view jika aplikasi besar

5.3 Memanggil View dari Controller

5.3.1 CI 3

Controller:

class Halo extends CI_Controller {
    public function index() {
        $data['nama'] = "CodeIgniter 3";
        $this->load->view('halo_view', $data);
    }
}

Akses:

http://localhost/ci3/index.php/halo

5.3.2 CI 4

Controller:

namespace App\Controllers;

class Halo extends BaseController {
    public function index() {
        $data['nama'] = "CodeIgniter 4";
        return view('halo_view', $data);
    }
}

Akses:

http://localhost/ci4/public/halo

5.4 Mengirim Data ke View

Data dikirim melalui array atau associative array.
Ini membuat view fleksibel menampilkan berbagai jenis data.

Contoh CI 3

$data = [
    'nama' => 'Andi',
    'umur' => 25
];
$this->load->view('halo_view', $data);

Contoh View

<h1>Halo, <?= $nama; ?>!</h1>
<p>Usia: <?= $umur; ?> tahun</p>

Contoh CI 4

$data = [
    'nama' => 'Andi',
    'umur' => 25
];
return view('halo_view', $data);

📌 Tips:

  • Gunakan nama variabel jelas dan deskriptif
  • Data array bisa berisi string, angka, atau bahkan array multidimensi

5.5 Menggunakan HTML + PHP di View

View memungkinkan kita menggabungkan HTML dengan PHP untuk menampilkan konten dinamis.

Contoh Looping Data

<h2>Daftar Siswa</h2>
<ul>
<?php foreach($siswa as $s) : ?>
    <li><?= $s ?></li>
<?php endforeach; ?>
</ul>

Controller:

$data['siswa'] = ['Andi', 'Budi', 'Citra'];
$this->load->view('halo_view', $data);

Contoh Conditional

<?php if($umur >= 18) : ?>
    <p>Anda sudah dewasa</p>
<?php else : ?>
    <p>Anda masih di bawah umur</p>
<?php endif; ?>

📌 Tips:

  • Pisahkan logika kompleks ke controller atau helper
  • View fokus pada tampilan

Penutup

View adalah wajah dari aplikasi. Dengan memahami view:

  • Anda bisa menampilkan data dari controller dengan rapi
  • Bisa menggabungkan HTML + PHP untuk tampilan dinamis
  • Memisahkan logika dan tampilan sesuai prinsip MVC

Pada BAB selanjutnya, kita akan membahas Model, sehingga aplikasi bisa mengambil dan menyimpan data ke database dengan aman dan efisien.

Related Posts