Tutorial Codeigniter #05: Menggunakan View dan CSS pada Codeigniter
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;
- Bagaimana 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.
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 underscore.
✅ Contoh yang benar:
📜 welcome_message.php
📜 about.php
📜 overview.php👎 Contoh yang tidak dianjurkan:
📜 WelcomeMessage.php
📜 ABOUT.php
📜 over View.phpSebaiknya konsisten menggunakan huruf kecil dan underscore, 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?
Silakan 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. Shortcut 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 logika 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 membuat 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>List 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>List 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.
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">
© <?= 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 autoload helper url, maka fungsi tersebut tidak akan bisa digunakan.
Karena itu, silakan 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.
Silakan 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, silakan lanjutkan:
3. Menggunakan Partials di View
Kita bisa menggunakan partials yang sudah dibuat dengan fungsi $this->load->view() di dalam view.
Sekarang silakan 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="message">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:
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:
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.
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.
Apa Selanjutnya?
Selamat, kamu sudah belajar tentang View di Codeigniter.
Sampai di sini ada pertanyaan?
Kalau ada silakan sampaikan di komentar ya!
Nah, berikutnya kita akan belajar tentang:
Source code tutorial ini bisa kamu download di Github.