Skip navigation

Template adalah suatu metode yang memudahkan kita dalam proses pembangunan sebuah web. Dengan menggunakan template kita tidak perlu mengulang-ulang html-coding untuk menghasilkan tampilan yang baseform-nya sama. Pada Codeigniter, metode templating akan semakin memudahkan kita dalam membangun web tanpa mengabaikan MVC framework.

Berikut ini adalah langkah-langkah menggunakan metode templating simpel pada codeigniter.

1. Membuat Library

langkah pertama adalah dengan membuat class Template.php yang disimpan di application/libraries

class Template {
var $template_data = array();

function Template() {
  $this->template_data['jsscript'] = '';
  $this->template_data['cssstyle'] = '';
}

function set($name, $value) {
  $this->template_data[$name] = $value;
}

function set_js($value) {
  $this->template_data['jsscript'] .= "<script type='text/javascript'>".$value."</script>\n";
}

function load_js($value) {
  $this->template_data['jsscript'] .= "<script type='text/javascript' src='".base_url().$value."'></script>\n";
}

function load_css($value) {
  $this->template_data['cssstyle'] .= "<link rel='stylesheet' href='".base_url().$value."' type='text/css' media='screen'>";
}

function display($template = '', $view = '' , $view_data = array(), $return = FALSE) {
  $this->CI =& get_instance();
  $this->set('contents', $this->CI->load->view($view, $view_data, TRUE));
  return $this->CI->load->view($template, $this->template_data, $return);
}
}

2. Autoload library template tadi pada application/config/autoload.php

$autoload['libraries'] = array('template', 'database', 'session');

3. Membuat Template View

Langkah berikutnya adalah membuat view sederhana, yang akan berperan sebagai template file. Berikut contoh view template sangat sederhana yang diberi nama theme.php dan disimpan di application/view

<html>
<head>
<title><?= $headtitle ?></title>
<?= $cssstyle ?>
<?= $jsscript ?>
</head>

<body>
<div id="wrapper">
<h2 id="contenttitle"><?= $contenttitle ?></h2>
<div  id="maincontent"><?= $contents ?></div>
</div>
</body>
</html>

Pada bagian head template view di atas, dibagi menjadi 3 bagian, pertama adalah headtitle yang berfungsi sebagai tempat title halaman web nantinya, kedua adalah cssstyle yang berfungsi sebagai tempat css file ataupun css file-link. Dan yang ketiga adalah jsscript sebagai tempat js file ataupun js file-link.

Sedangkan pada bagian body dibagi menjadi dua bagian yaitu contenttitle sebagai tempat Judul halaman, dan contents sebagai tempat konten utama.

3.Membuat View

Jika di atas sudah dibuat view untuk template, maka sekarang dibuat view untuk halaman yang lebih spesifik. Misalkan lyricview.php :

<div id="postinfo">Posted on <?= $postinfo ?></div>
<div id="lyrics"><?= $lyrics ?></div>
<div id="taginfo">This post is under <?= $taginfo ?></div>

4. Penggunaan dan Eksekusi lewat Controler

Misal, dibuat Class Lyric:

class Lyric extends Controller {

function Lyric() {
parent::Controller();
}

function index() {

$headtitle = 'Audioslave - Be Yourself Lyric on Mywebdotcom';
$contenttitle = 'Audioslave - Be Yourself Lyric';
$contents['postinfo'] = '25 Juni 2009';
$contents['lyrics'] = '
be yourself its all that you can do
be yourself its all that you can do
be yourself its all that you can do';
$contents['taginfo'] = 'audioslave';

$this->template->load_css('public/css/tabber.css');
$this->template->load_js('public/js/tabber.js');
$this->template->set('headtitle', $headtitle);
$this->template->set('contenttitle', $contenttitle);
$this->template->display('theme', 'lyricview', $contents);
}
}

5. Panggil melalui url http://namadomain/lyric/

Semoga bisa membantu..

2 Comments

  1. menurut saya koq kurang praktis ya? saya lebih suka untuk membuat satu file untuk view global, kemudian design view setiap modul menyesuaikan css. setiap penggantian design, hanya mengganti file view global dan css saja. mungkin hanya masalah methode pengembangan saja. but, nice article anyway🙂. luv it

    • vanpramadya
    • Posted May 9, 2012 at 2:22 am
    • Permalink

    Thanx, ^^


Leave a Reply

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

%d bloggers like this: