Page Template adalah sebuah pola layout pada sebuah halaman web di mana kita akan selalu memakai pola tersebut sesuai kebutuhan kita untuk meload halaman lengkap beserta header, content, dan footernya.. dengan menggunakan page template, kita tidak harus meload header dan footer di setiap fungsi pada controller di CodeIgniter.
Contoh misalnya ada kasus seperti ini:
Pada sebuah halaman web, ketika diload harus selalu load header, sidebar, content, footer, dsb.. maka secara normal di program akan berbentuk seperti ini:
PHP Code:
<?php
class Home extends Controller {
function index() {
$data['title'] = 'Webku';
$this->load->view('header');
$this->load->view('topmenu');
$this->load->view('home_view', $data);
$this->load->view('footer');
}
}
?>
Menggunakan Page Template Helper
Untuk mempermudah penggunaan code, kita akan membuat sebuah helper baru yang akan kita namakan Page Template Helper (page_template_helper.php) yang akan kita gunakan untuk merender layout yang sudah kita buat. Jadi layaknya seperti gabungan dari function $this->layout() dan $this->render() di Framework CakePHP.
OK, pertama-tama buatlah layout untuk template kita, dan simpan di folder /system/application/view/layout/ (seperti biasa, base_url() website kita adalah ‘webku’) dengan nama default.php, kodenya adalah sebagai berikut:
HTML Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Webku<?php echo isset ($title)?" | ".$title:'' ?></title> </head> <body> <div id="header"> <?php $this->load->view('layout/element/header') ?> </div> <div id="topmenu"> <?php $this->load->view('layout/element/topmenu') ?> </div> <div id="content"> <?php $this->load->view($view) ?> </div> <div id="footer"> <?php $this->load->view('layout/element/footer') ?> </div> </body> </html>
Contoh ini belum menggunakan CSS, pembahasan tentang CSS akan dijelaskan pada tutorial selanjutnya
Setelah membuat file default.php, buatlah semua file ‘layout element’ (header, topmenu, dan footer) dan simpan di direktori /system/application/view/layout/element/. Berikut adalah isi dari masing-masing elemen:
Isi dari file-file di bawah ini hanya pemisalan/contoh
../view/layout/element/header.php
HTML Code:
<img src="images/banner.jpg" /> Ini adalah HEADERHTML Code:
<a href="#">MENU 1</a> | <a href="#">MENU 2</a> | <a href="#">MENU 3</a>
HTML Code:
Copyright © 2010 by assembuh
Nah, untuk pemanggil template tersebut dan yang akan digunakan di controller adalah Page Template Helper… jadi rencananya kode kita yang sebelumnya:
PHP Code:
<?php
class Home extends Controller {
function index() {
$data['title'] = 'Webku';
$this->load->view('header');
$this->load->view('topmenu');
$this->load->view('home_view', $data);
$this->load->view('footer');
}
}
?>
PHP Code:
<?php
class Home extends Controller {
function index() {
$data['title'] = 'Webku';
show('home_view',$data);
}
}
?>
Sekarang, kita buat sebuah helper page_template_helper.php di /system/application/helper/ dengan kode seperti berikut:
PHP Code:
<?php
if ( ! function_exists('element')) {
function show($view, $data=array(), $template='default') {
$ci = &get_instance();
$data['view'] = $view;
$data = $ci->load->view('layout/'.$template, $data);
}
}
/* End of file page_template_helper.php */
/* Location: ./system/helpers/page_template_helper.php */
Di kode itu terlihat bahwa $view yang ada di parameter 1 di function show() ini akan dimasukkan ke dalam variable array $data, yang kemudian akan diload view yang bernama $template (diubah sesuai nama layout, defaultnya adalah default.php) dengan $data tetap dari parameter ke-2.. dan parameter ke-3 ($default) adalah nama file template yang kita buat… secara default file template yang akan diload adalah ../layout/default.php.
Nah, di controller Home tadi, kita dapat mengubahnya menjadi seperti ini:
PHP Code:
<?php
class Home extends Controller {
function index() {
$data['title'] = 'Webku';
show('home_view',$data);
}
function about(){
$data['title'] = 'About';
show('home_view',$data);
}
function other(){
$data['title'] = 'Other (layout tanpa topmenu)';
show('home_view',$data, 'other');
}
}
?>
PHP Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Webku<?php echo isset ($title)?" | ".$title:'' ?></title>
</head>
<body>
<div id="header">
<?php $this->load->view('layout/header') ?>
</div>
<?php // menghilangkan topmenu untuk action tertentu ?>
<div id="content">
<?php $this->load->view($view) ?>
</div>
<div id="footer">
<?php $this->load->view('layout/footer') ?>
</div>
</body>
</html>
Tambahkan ‘page_template’ pada bagian kode berikut:
PHP Code:
..
$autoload['helper'] = array('page_template');
..
Go Indonesia!!! 
