Codeigniter

Tutorial CodeIgniter Dasar Part III – Page Template

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.

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

<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 &copy 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…

 

sumber : http://harian.cheyuz.com/_other/tutorial-codeigniter-dasar-part-iii-page-template

About Suendri

Owner dan Founder Go Software Media sebelumnya bernama PHPBeGO Foundation

Discussion

2 thoughts on “Tutorial CodeIgniter Dasar Part III – Page Template

  1. kasih download source codenya donk ? kn itu ada gambar dan segala macam, by the way thanbks gan😀

    Posted by freddy sidauruk | October 27, 2014, 7:41 am

Tinggalkan Komentar

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow Go Software Media Blog on WordPress.com

Enter your email address to follow this blog and receive notifications of new posts by email.

Join 63 other followers

Archives

%d bloggers like this: