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…
Boz.. TQ tutorialnya..
BTW.. lanjut terus dunk ..
Jangan berhenti mpe disini..
Ane nyimak terus niy.. itung2 kursus gratis..
hehehe thankz gan….
pasti diupdate trus…
Ditunggu materi CI lg boz:
bikin menu yg model dropdown ama
nampilin data model Grid yg klo mau ngedit record, diklik recordnya bisa tampil popup editannya.. xixixi
Sori boz.. maunya banyak yax.. soalnya cuma tutorial ente doank yg original pencerahannya mangstab n muda dimengerti..
hehehe.. NGAREP.COM
hehe thankz… ok sip, nanti dibikin tutorial menu dropdown, tapi di bagian CSS, bukan Code Igniter…
kalo yang ngedit record popup, itu ada di bagian JQuery gan
nanti dibikin tutorialnya kalo tutorial CI udah beres…
iye gan.. reguest: klo bisa dipaket dalam framework CI
jadinya nubi2 kayak ane ga bingung..
trusin aja gan modul mahasiswa yg kmarin ente buat..
Tp btw Wedew.. nice gan..
ente cocok jadi dosen gan..
ane cm bisa ngasi doa aja gan.. sukses selalu..
Biar yg diatas yg membalas ilmu yg ente kasi..
brow, klo file “home_view” nya yang mana, koq pas diload error uy….dia request file home_view….
siipp… nanti ane update…
ane lagi banyak tugas nih gan…
jadi blm update lagi hehe
Bagaimana cara penggunaan template other?
Thx bro…tau caranya buat grafik ga?
@Andri: pake show(‘view’, $data, ‘nama_template_other’);
@candra: pake plug in jquery gan..
coba dong pake web buatan sendiri biar kita percaya klo mas2 ini bisa buat web…tunjukkan kreasimu….
@indra: silakan diliat web saya, full CodeIgniter +ajax: http://www.cheyuz.com di sana ada banyak portofolio saya
Tutorial yang singkat, padat, jelas dan bermanfaat, good job..
btw utk menjalankan contoh pada tutorial part III ini apa tidak diperlukan view: home_view.php Gan?
Ditunggu tutorial CI dan CSS selanjutnya… trims
@maknyus: diperlukan, buat home nya… ya maksud di sini kan dgn pake fungsi itu jadi lebih fleksibel, bisa load halaman apa aja yg berupa konten, begitu..
Mantabs….. lanjutkan….!!!!
@jmlord: thankz gan
Good,Triple kill ^.^
mhantap gan..btw bgmn klo tmplatenya udah dengan CSS nya..gmn membedahnya di CI ?
keppPostng
thanks a Lot
bagaimana cara meload function other.php itu bro (template tanpa top menu)?
klo bisa contoh penggunaannya dalam action,misal sebuah link yg memanggil function tsb..
thanks be4
@awi: hehe,,, chain killer gan
CSS disimpen di file /style aja.. diload dulu di template defaultnya…
@awi: “bagaimana cara meload function other.php itu bro (template tanpa top menu)?” maksudnya gimana ya gan?
akhirnya gw selesai juga di tingkat 3 ini, dengan segala kesulitan dan susah payahnya….
Thanks banget bos tutorialnya, sangat membantu,
semoga amal Ibadahnya dibalas oleh Tuhan YME.
btw request pagination dong..
gw udah muter2 – semuanya gak step by step seperti disini…
Thanks bos..
@ferdi: alhamdulillah kalo udah ngikutin tutorialnya dgn baik
amiin … iya boleh juga tuh, pagination belum saya tulis tutorialnya… ok segera saya buat ya…
Nanya donk gan…
Ane lagi nyoba bikin aplikasi yang berbasis module di CI, jadi file2 controller nggak berada di dalam folder system/application/controller tapi dah ane kasih diluar sejajr dengan folder system :
baganya kurang lebih kaya gini :
- system
- modules
– home
– controllers
– models
– views
- theme
nah yang mo ane tayain, secara default kalo ane pake aplikasi itu, viewsnya diload id folder views yang ada di folder modules home
nah ane kan pengein buat apliaksi yag mltiple theme, jadi ane pengein di fodler theme tu ada nama theme yang didalamnya ada file2 yang diload di contiroller
ex : $this->load->view(‘home’);
nah file home.php tu pengenya ane taruh didalam folder themes/nama_template/home.php
tolongin dunk gan
gan tanggung neh…. dari Framework Codeigniter masa loncat ke chakephp…..template buat Framework Codeigniter gmn neh aduhhhh kentang…heheee
@haries: oh, itu namanya HMVC… jadi basis module… iya saya juga suka pake cara itu.. tapi alangkah baiknya stelah folder modules dibuat, folder controllers dan views di luar folder modules dihapus aja… karena udah disimpen di dalam folder modules di masing2 module…. Nah, kalo agan pengen theme di luar modules… berarti folder views di luar modules jangan dihapus, biarlah itu untuk template themes… nah kalo yg di dalam modules untuk view masing2 modul….
biar view yg di dalam modules bukan buat template… 
Kalo ngeliat kasus agan, agan tinggal buat file themes di: /application/views/themes/nama_themes/home.php gitu aja gan
@hang2303: mending fokus ke satu framework. Untuk tutorial layouting, baca aja: http://harian.cheyuz.com/_other/tutorial-codeigniter-dasar-part-iii-page-template
tx tut nya………..tambah lagi CI yang lebih kompleks
@agos: ok gan… gampang itu mah
gokil mantapp tutorialnya…
@diaz: sip, thankz ya…
pertanyaan saya sama dengan LEVIE, home_view.php nya mana ya? ini request home_view.php
mas gimana cara bikin hyperlink nya kok saya coba css nya ngak jalan yach
@agus: oh di situ hanya contoh aja… home_view.php nya belum dibuat gan..
@lucky: file CSSnya punya mas ditaro di mana?? pake function anchor($path, $caption);
css nya saya taro di folder
application
system
asset——> js
——> css
jadi kayak gini struktur foldernya
gan, file homeview mana ??
kang cheyuz, cara ngeload CSS nya gmn ya ?
aku uda buat file.css di dalam folder css letaknya di web rootnya. uda di coba ga b isa ngeload CSSnya.
Sob mau nanya sob ….
ngikutin templating di atas sob …
Controller :
class Home extends Controller{
function __construct(){
parent::Controller();
$this->load->model(‘Web’);
}
function index(){
$data['title'] = ‘Home’;
$data['query'] = $this->Web->getAllMhs();
show(‘index’,$data);
}
function about(){
$data['title'] = ‘About’;
show(‘about’,$data);
}
}
—————————————
topmenu .php
?>
————————————–
tapi pas menu di click kok ga bisa ya sob …
padahal function “about” nya ada.
errornya :
Object not found!
minta pencerahan sob.
@kecebong basah: itu cuma pemisalan aja gan, agan boleh buat filenya
@kiki: di header, tambahin tag link rel, ~>
@andilie: coba pake index.php… pake CI versi berapa? ini buat CI versi 1.7.x aja..
oke uda bisa kang yg css nya. nah sekarng nih aku bingung,
misalnya nih ada form login di directory CI/application/views/layout/element/ . nah aku mau kirim parameter ke controller caranya gmn ya ?
kok pake cara echo form_open(‘../home/cekLogin’); atau form_open(‘home/cekLogin’); ga bisa ya kang ???
File home_view.php fungsinya buat apa ta?
kang, bisa minta projek yg uda jadi ga ? yg uda komplit fiturnya. aku belajarnya susah kalo ga liat contoh projek lgsg. hehe
@kiki: pake form_open bisa.. sebelumnya panggil dulu helpernya: $this->load->helper(‘form’);
@alibaba: itu buat view home aja gan.. sebagai contoh aja.. hehe..
Kl misal aku menunya ngambil dari database, boleh ga sih kl mendeklarasikan menunya di helpernya??
People all over the world receive the loan from various creditors, because that’s comfortable and fast.
@alibaba: tentu boleh gan