Belajar Codeigniter View

Pada tutorial sebelumnya, kita sudah belajar banyak tentang Controller.

Kini saatnya kita fokus ke View.

Pada tutorial ini, kita akan belajar:

  • Apa itu View?
  • Cara menampilkan data di View;
  • Bagaiaman cara membuat templete view yang efektif.

Siap?

Mari kita mulai!

Apa itu View?

View adalah kode yang bertugas untuk membuat tampilan aplikasi. View berisi kode campuran dari PHP, HTML, JS, dan CSS.

Ingat:

Fokusnya untuk membuat tampilan aplikasi, bukan yang lain. Kita tidak boleh query data dari view, meskipun itu bisa dilakukan.

Kadang juga kita akan membuat sedikit logika di dalam view, seperti logika untuk menampilkan dan menghilangkan elemen tertentu.

Apa yang kita lihat di aplikasi, itu adalah kode dari View.

MVC pada Codeigniter

Aturan Penulisan View

View dibuat di dalam folder application/views/ dan ada beberapa aturan penulisan view yang harus diperhatikan:

1. Penulisan Nama File

Nama file menggunakan huruf kecil dan jika terdiri dari dua suku kata, bisa dipisah dengan undescore.

✅ Contoh yang benar:

📜 welcome_message.php
📜 about.php
📜 overview.php

👎 Contoh yang tidak dianjurkan:

📜 WelcomeMessage.php
📜 ABOUT.php
📜 over View.php

Sebaiknya konsisten menggunakan huruf kecil dan undescore, jangan yang aneh-aneh agar kodemu lebih rapi.

2. Penulisan Kode

File view bisa berisi kode PHP, HML, CSS, dan JS. Karena tugasnya view untuk menampilkan output.. maka kita akan banyak menggunakan echo di sini.

Contoh:

<?php echo $name ?>

Sangat tidak dianjurkan melakukan query data di sini, meskipun itu bisa dilakukan..

Contoh yang buruk: ❌

<?php
$this->db->query('SELECT * from user');
?>

Kalau tidak boleh query data, lalu datanya didapat dari mana?

Datanya akan kita dapatkan dari Controller.

Mari kita pelajari:

Cara Load View dan Data

View bisa kita load dari controller dan juga view dengan fungsi $this->load->view().

Contoh:

$this->load->view('home_page.php');

Kita juga bisa me-loadnya, tanpa harus menggunakan ekstensi .php seperti ini:

$this->load->view('home_page');

Kita juga bisa mengirim data ke View pada parameter kedua.

Contoh:

$data = ['name' => 'Petani Kode'];
$this->load->view('product.php', $data);

Data yang dikirim ke View berupa array asosiatif.

Apa itu array asosiatif?

Silahkan pelajari di:

Cara Menampilkan Data di View

Saat kita melakukan load view dengan data seperti ini:

$data['name'] = 'Petani Kode';
$this->load->view('product.php', $data);

Kita bisa menampilkan isi datanya di dalam view dengan kode seperti ini:

<?php echo $name ?>

Variabel $name dapatnya dari mana?

Variabel $name didapatkan dari $data, perhatikanlah di sana ada key bernama name. Ini akan menjadi variabel di dalam view.

Paham?

Bagus..

Sekarang mari kita pelajari lebih lanjut tentang cara menampilkan data.

1. Shorcut untuk Echo

Selain menggunakan fungsi echo, kita juga bisa memanfaatkan shortcut atau bentuk pendeknya dari echo.

Perhatikan kode ini:

<?php echo $name ?>

Kita bisa menyingkatnya seperti ini:

<?= $name ?>

Kedua kode ini sebenarnya sama, hanya saja menggunakan <?= akan lebih pendek dibandingkan harus menulis <?php echo.

2. Percabangan di View

Seperti yang saya bilang tadi, di View kita juga bisa membuat ligika untuk menampikan data.

Contohnya:

Pada controller kita load view dan mengirimkan data seperti ini:

$data['user'] ='petanikode';
$this->load->view('dashboard', $data);

Lalu pada view, kita bisa buat logika if/else seperti ini:

<?php 
if ($user === 'petanikode'){
  echo "Welcome admin";
} else {
  echo "Hello guest";
}
?>

Atau bisa juga menggunakan operator ternary seperti ini:

<?= $user === 'admin' ? "Welcome admin" : "Hello guest"; ?>

Kadang kita juga akan menampilkan banyak kode HTML di dalam blok if/else.

Kita bisa saja melakukannya seperti ini:

<?php if ($user === 'petanikode'){ ?>
  <h1>Hello Admin</h1>
<?php } else { ?>
  <h1>Hello guest</h1?>
<?php } ?>

Ini boleh-boleh saja dilakukan, namun agak sulit terbaca karena harus mengingat tutup kurung }. Kadang-kadang ini membuat kita kesulitan.

Karena itu, gunakanlah bentuk if/else seperti ini:

<?php if ($user === "admin"): ?>
  <h1>Hello Admin</h1>
<?php else: ?>
  <h1>Hello guest</h1>
<?php endif ?>

Bentuk seperti ini lebih mudah dibaca karena kita tidak menggunakan kurung {}, melainkan menggunakan endif untuk menutup blok percabangan if/else.

3. Perulangan di View

Sama seperti percabangan, kita juga bisa melakukan perulangan pada View. Perulangan biasanya digunakan untuk menampilkan banyak data dari array.

Contoh:

// load view di Controller
$data['names'] = [
  "Foo",
  "Bar",
  "Bob"
];
$this->load->view('name', $data);

Maka di View kita bisa menggunakan perulangan seperti ini:

<?php

for ($i = 0, $i < count($names); $i++)
{
  echo $names[$i];
}

?>

Bisa juga dengan perulangan while seperti ini:

<?php
$i = 0;
while ($i < count($names))
{
  echo $names[$i];
  $i++;
}

?>

atau dengan perulangan foreach seperti ini:

<?php

foreach ($names as $name)
{
  echo $name;
}

?>

..dan yang paling saya rekomendasikan adalah menggunakan foreach tanpa kurung {}.

Contoh:

<ul>
<?php foreach ($names as $name): ?>
  <li><?= $name ?><li>
<?php endforeach ?>
</ul>

Bentuknya lebih bersih dan mudah dibaca.

Selain foreach, kita juga bisa menggunakan for dan while tanpa kurung {}.

Contoh:

<ul>
<?php for ($i = 0, $i < count($names); $i++): ?>
  <li><?= $name ?><li>
<?php endfor ?>
</ul>

dan conoth while:

<ul>
<?php $i = 0; ?>
<?php while ($i < count($names)): ?>
  <li><?= $name ?><li>
<?php endwhile ?>
</ul>

👨‍💻 Latihan: Membuat Template View

Mari kita lanjutkan project beritacoding, kali ini kita akan membaat template view agar lebih rapi.

Pada kode beritacoding, kita sudah membuat tiga view seperti ini:

📜 views/articles/list_article.php

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Llist of Article</title>
</head>
<body>

<h1>List Artikel</h1>
<ul>
	<?php foreach($articles as $article): ?>
	<li><?= $article['title'] ?></li>
	<?php endforeach ?>
</ul>

</body>
</html>

📜 views/articles/empty_article.php

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Llist of Article</title>
</head>
<body>

<h1>Tidak ada artikel</h1>

</body>
</html>

📜 views/articles/show_article.php

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Read Article</title>
</head>
<body>

<h1>Halaman untuk baca artikel</h1>

</body>
</html>

Sejauh ini tidak ada masalah, tapi akan lebih baik jika membuatkan template supaya tidak mengulang kode yang sama terus-menerus.

Mari kita buat!

1. Membuat Template Partials

Buatlah folder baru di dalam application/views dengan nama _partials. Folder ini berisi bagian kode View yang akan dipakai di beberapa view.

Buatlah tiga file di dalam folder _partials dengan nama head.php, navbar.php, dan footer.php.

file partials

Kemudian isi masing-masing kode seperti berikut ini:

📜 _partials/head.php

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= isset($meta['title']) ? $meta['title'] : 'Beritacoding.com' ?></title>

Pada partial ini, kita menggunakan data dari variabel $meta yang nanti akan kita kirim melalui Controller. Pada contoh di atas, kita menggunakan data meta untuk judul.

📜 _partials/navbar.php

<nav class="navbar">
	<a href="<?= site_url() ?>">Home</a>
	<a href="<?= site_url('article') ?>">Article</a>
	<a href="<?= site_url('page/about') ?>">About</a>
	<a href="<?= site_url('page/contact') ?>">Contact</a>
	<a href="<?= site_url('auth/login') ?>" style="margin-left:auto">Login</a>
</nav>

📜 _partials/footer.php

<footer class="footer">
	&copy; <?= Date('Y') ?> Beritacoding.com
</footer>

2. Menggunakan Helper URL

Perhatikan pada kode _partials/navbar.php, kita menggunakan fungsi site_url() di sana.

Fungsi ini berasal dari Helper url, jika kamu tidak melakukan autolaod helper url, maka fungsi tersebut tidak akan bisa digunakan.

Karena itu, silahkan lakukan load untuk helper tersebut.

Caranya:

Buka file config/autoload.php, kemudian ubah nilai pada $autoload menjadi seperti ini.

$autoload['helper'] = array('url');

Ini artinya, kita akan melakukan load otomatis untuk helper url sehingga kita bisa menggunakan fungsi site_url(), base_url(), dan fungsi-fungsi URL lainnya.

Tapi fungsi ini tidak akan bekerja dengan baik, kalau base_url belum diataur.

Silahkan atur dulu base_url pada file congfig/config.php.

Set seperti ini:

$config['base_url'] = 'http://localhost/beritacoding/';

Atau bisa juga dengan alamat domain virtual yang sudah kita buat:

$config['base_url'] = 'http://beritacoding.test';

Setelah itu, silahkan lanjutkan:

3. Menggunakan Partials di View

Kita bisa menggunakan partials yang sudah dibuat dengan fungsi $this->load->view() di dalam view.

Sekarang silahkan ubah kode view:

  • home.php;
  • about.php;
  • contact.php;
  • articles/list_article.php;
  • articles/show_article.php;
  • articles/empty_article.php;

Masing-masing menjadi seperti ini:

📜 home.php

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

<head>
	<?php $this->load->view('_partials/head.php'); ?>
</head>

<body>
	<?php $this->load->view('_partials/navbar.php'); ?>

	<h1>Home Page</h1>

	<?php $this->load->view('_partials/footer.php'); ?>
</body>

</html>

📜 about.php

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

<head>
	<?php $this->load->view('_partials/head.php'); ?>
</head>

<body>
	<?php $this->load->view('_partials/navbar.php'); ?>
	
	<h1>About Page</h1>

	<?php $this->load->view('_partials/footer.php'); ?>
</body>

</html>

📜 contact.php

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

<head>
	<?php $this->load->view('_partials/head.php'); ?>
</head>

<body>
	<?php $this->load->view('_partials/navbar.php'); ?>

	<h1>Contact Us</h1>
	<p>Hubungi kami melalui form berikut</p>
	<form action="" method="post">
		<div>
			<label for="name">Name</label>
			<input type="text" name="name" placeholder="your name" required />
		</div>
		<div>
			<label for="email">Email</label>
			<input type="email" name="email" placeholder="your email address" required />
		</div>
		<div>
			<label for="messaage">Message</label><br>
			<textarea name="message" cols="30" rows="5" placeholder="write your message" required></textarea>
		</div>

		<div>
			<input type="submit" value="Kirim">
			<input type="reset" value="Reset">
		</div>
	</form>

	<?php $this->load->view('_partials/footer.php'); ?>
</body>

</html>

📜 articles/list_article.php

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

<head>
	<?php $this->load->view('_partials/head.php'); ?>
</head>

<body>
	<?php $this->load->view('_partials/navbar.php'); ?>

	<h1>List Artikel</h1>
	<ul>
		<?php foreach ($articles as $article) : ?>
			<li><?= $article['title'] ?></li>
		<?php endforeach ?>
	</ul>

	<?php $this->load->view('_partials/footer.php'); ?>
</body>

</html>

📜 articles/show_article.php

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

<head>
	<?php $this->load->view('_partials/head.php'); ?>
</head>

<body>
	<?php $this->load->view('_partials/navbar.php'); ?>

	<h1>Halaman untuk baca artikel</h1>

	<?php $this->load->view('_partials/footer.php'); ?>
</body>

</html>

📜 articles/empty_article.php

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

<head>
	<?php $this->load->view('_partials/head.php'); ?>
</head>

<body>
	<?php $this->load->view('_partials/navbar.php'); ?>
	
	<h1>Tidak ada artikel</h1>

	<?php $this->load->view('_partials/footer.php'); ?>
</body>

</html>

4. Mengirim Data ke View

Karena kita menggunakan variabel $meta pada view partial head.php, maka kita harus mengirimkan data ini saat kita load view agar data yang ditampilkan dinamis.

Kita akan mengirimkan data meta seperti ini:

$data['meta'] = [
		'title' => 'About BeritaCoding',
];

Sekarang ubahlah kode controller Page menjadi seperti ini:

<?php
defined('BASEPATH') or exit('No direct script access allowed');

class Page extends CI_Controller
{
	public function index()
	{
		$data['meta'] = [
			'title' => 'BeritaCoding',
		];

		$this->load->view('home', $data);
	}

	public function about()
	{
		$data['meta'] = [
			'title' => 'About BeritaCoding',
		];

		$this->load->view('about', $data);
	}

	public function contact()
	{
		$data['meta'] = [
			'title' => 'Contact Us',
		];
		
		if($this->input->method() === 'post'){
			print_r($this->input->post());
		}

		$this->load->view('contact', $data);
	}
}

Sekarang mari kita coba!

Maka hasilnya akan seperti ini:

about page

5. Menambahkan CSS 💄

Tinggal sentuhan terakhir nih.

Nah, untuk menambahkan CSS. Kita bisa tambahkan pada _partials/head.php.

Mari kita coba!

Tambahkanlah kode CSS berikut di _partials/head.php:

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= isset($meta['title']) ? $meta['title'] : 'Beritacoding.com' ?></title>

<style>
	.navbar {
		display: flex;
		gap: 1em;
		background-color: teal;
	}

	.navbar a {
		font-family: sans-serif;
		font-weight: 500;
		color: white;
		text-decoration: none;
		padding: 1rem;
	}

	.navbar a:hover {
		background-color: rgba(255, 255, 255, 0.1);
	}

	.footer {
		font-family: sans-serif;
		background-color: whitesmoke;
		padding: 1em;
		text-align: center;
		border-top: 1px solid lightgray;
	}
</style>

Maka sekarang hasilnya akan seperti ini:

tampilan view dengan css

Biar lebih rapi, kita akan menggunakan eksternal CSS.

6. Menggunakan Eksternal CSS

Buatlah folder baru bernama assets di dalam project beritacoding. Lalu di dalamnya buat lagi dua folder dengan nama css dan js.

Setelah itu, buatlah file baru di dalam css dengan nama main.css.

folder assets

Kemudian pindahkan css pada _partials/head.php ke dalam main.css.

Sehingga kode di main.css akan menjadi seperti ini:

.navbar {
	display: flex;
	gap: 1em;
	background-color: teal;
}

.navbar a {
	font-family: sans-serif;
	font-weight: 500;
	color: white;
	text-decoration: none;
	padding: 1rem;
}

.navbar a:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

.footer {
	font-family: sans-serif;
	background-color: whitesmoke;
	padding: 1em;
	text-align: center;
	border-top: 1px solid lightgray;
}

Lalu ubah kode _partials/head.php menjadi seperti ini:

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= isset($meta['title']) ? $meta['title'] : 'Beritacoding.com' ?></title>

<link rel="stylesheet" href="<?= base_url('assets/css/main.css') ?>" />

Dan cobalah lihat hasilnya!

Jika CSS-nya tidak berhasil, coba lihat link CSS-nya dari View Source.

link css

Apa Selanjutnya?

Selamat, kamu sudah belajar tentang View di Codeigniter.

Sampai di sini ada pertanyaa?

Kalau ada silahkan sampaikan di komentar ya!

Nah, berikutnya kita akan belajar tentang:

Source code tutorial ini bisa kamu donwload di Github.

[🎁 Download Source Code]