Level: Basic
Karena banyak komentar dari temen2 tentang tutorial ini ada error, maka saya update postingan ini dengan menambahkan sedikit catatan ini. Perlu diperhatikan bahwa ini adalah tutorial CI untuk versi 1.7.x, bukan CI versi 2.x.. karena banyak perbedaan yang ada pada CI sekarang, maka mungkin nanti saya akan buat tutorial CI untuk versi 2.x.. Salah satu perbedaannya yaitu folder ‘applications’ yang ada di luar folder ‘system’ (CI 2.0), sedangkan CI versi 1.7.x masih di dalam folder system.. Jadi ketika mengalami error, silakan download versi 1.7.x (misal: 1.7.2/1.7.3).
Oh iya, sekarang saya sudah buat situs tutorial pemrograman berbahasa Indonesia lengkap. Saya akan selalu mengupdate tutorial-tutorial saya di situs tersebut. Penasaran? jika kamu ingin semakin jago coding, kamu harus kunjungi situs Jagocoding.com
Kali ini, Cheyuz akan ngebahas tentang Page Template, apa itu?
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 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'); } } ?>
Di dalam function index, kode tersebut akan meload view header.php, sidebar.php, home_view.php, dan footer.php. Cara ini sebenarnya kurang efektif, walaupun yang dihasilkan adalah sama, yaitu nge-load lengkap sebuah halaman web (dari tag [html] sampai [/html]). Kenapa kurang efektif? karena di setiap function kita harus meload lagi semua elemen di atas… Ini baru satu function, bagaimana jika di dalam satu controller terdapat 50 function? tentu hal ini dapat merepotkan, dan sangat tidak efektif karena membuat redudansi kode.
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:
<!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>Kode di atas adalah sebuah template default website kita, yang berarti setiap action/function yang akan kita panggil akan selalu meload tag html di atas, mulai dari title, kemudian load CSS atau JS misalnya, terus header-nya, topmenu, footer, dan sebagainya. Kita cukup menambahkan elemen di file tersebut.
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:
../view/layout/element/header.php
<img src="images/banner.jpg" /> Ini adalah HEADER
../view/layout/element/topmenu.php
<a href="#">MENU 1</a> | <a href="#">MENU 2</a> | <a href="#">MENU 3</a>
../view/layout/element/footer.php
Copyright © 2010 by Cheyuz
Jadi ketika file default.php dirender, maka element/header.php, element/topmenu.php, dan element/footer.php akan selalu diload.
Nah, untuk pemanggil template tersebut dan yang akan digunakan di controller adalah Page Template Helper… jadi rencananya kode kita yang sebelumnya:
<?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'); } } ?>
menjadi seperti ini:
<?php class Home extends Controller { function index() { $data['title'] = 'Webku'; show('home_view',$data); } } ?>
Singkatnya, kita tidak menggunakan function $this->load->view() lagi di Controller, tetapi kita menggunakan function show() yang berfungsi sama dan meload seluruh elemen yang kita tentukan.
Sekarang, kita buat sebuah helper page_template_helper.php di /system/application/helper/ dengan kode seperti berikut:
<?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 */
OK, akan Cheyuz jelaskan..
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 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'); } } ?>
Ada function other(), yang akan memanggil halaman dengan template yang berbeda, yaitu menghilangkan topmenu.. karena kita sudah membuat helpernya, maka untuk membuat template baru untuk function other() tersebut, kita tinggal membuat file template bernama other.php di /system/application/view/layout/ dengan isi file seperti berikut:
<!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>Setelah semua langkah selesai, selanjutnya adalah meload helper tersebut. Karena kita akan selalu meload helper ini, maka kita atur konfigurasi autoloadnya di file /system/application/config/autoload.php
Tambahkan ‘page_template’ pada bagian kode berikut:
.. $autoload['helper'] = array('page_template'); ..
Tutorial selesai, selamat mencoba…
bila ada pertanyaan, kritik saran, silakan comment/email…
mas, aku make template yg udh ad css’nya. tp begitu diload kok letaknya jadi berantakan dan images’nya gak mau keluar. aku ngletakin style css-nya di luar folder system…..
untuk image nya biar keluar di simpen dimna ia ??
@kadek: pake echo base_url() dulu mas..
@Jang743: image simpen di folder /image, trus nanti pake img(‘images/nama_file.jpg’);
maap gan ane nubie
menyimak dr tutorial di atas
ane mau tanya nih gan
function other and about digunain buat apa?
kapan bisa memanggil function other/about yg ada di controller home.php????
caranya gimana nulis di addressbarx browser?
klo localhost/webku kan keluar yg bagian function index()
klo yg bagian function other sama about gimana caranya?
thx sebelumnya gan
kang cheyuz…
kalo misalkan template nya harus load dulu database gmana ya kang??
misalkan untuk menu nya kita mau load dari database..
mohon pencerahan kang pliss…
Kok saya Error di bagian (‘home_view’, $data);
Home_view tu maksudnya apa ya????
@xiang: maaf, saya baru buka blog lagi, udah lama ga update karena skripsi.. cara penulisan di address barnya yaitu home/about atau home/other.. jadi [controller]/[function]
File home_view.php-nya udah dibuat belum? itu fungsinya untuk load file view bernama home_view.php..
di situ disebutin hanya contoh aja..
kang cheyuz…
kalo misalkan template nya harus load dulu database gmana ya kang??
misalkan untuk menu nya kita mau load dari database..
mohon pencerahan kang pliss…
Untuk menu, nanti dibuat tutorialnya..
kang ceyus
ngomong2 fungsi ini buat apa ya
$ci = &get_instance();
agak membingungkan untuk isi script untuk home_view.php dan default.php, jadi untuk keduanya sama ato bagaimana? n untuk lokasi dan isi script home_view.php itu dimana dan apa??
mas ini nyobain di browsernya urlnya apa???
saya udah nyoba2 tetep ga bisa.
@Deni: ya tinggal ambil datanya pake library DB di CI, trus fetch di viewnya, pasang di ul li.. (buat menu)
@sama nama: fungsinya untuk membuat variable baru ($ci) sebagai component core CI.. misal: $this->db->get() jadi $ci->db->get().. biasanya digunakan di helper..
@novian: home_view itu adalah bagian dari layout dalam file default.php.. default.php itu layout, sedangkan home_view itu adalah view.. view2 disimpan di dalam sebuah layout..
trimakasih sebelumnya,info2nya sangat bermanfaat..
Mau tanya nih, page template yg pake css belum dibahas ya ?
^^
kang….. kok yang saya ps dicoba error….
katanya dya gga bisa nge-load file : home_view.php
gmna ya kang??
@Yayan: itu hanya contoh aja Yan
fungsi diatas ko ga mau jalan mas, malah eror seperi ini :
An Error Was Encountered
Unable to load the requested file: home_view.php
mas,aku make template yg udh ad css’nya. tp pas ag jalani kok image nya gk keluar yo. apa yg harus saya setting.
mas, gk jd image nya dh muncul. cuma saya blum bisa menampilkan menu dari database yang kita buat ke halalaman template mengunakan template yang sudah jadi atau template yg saya download.