Cara Membuat 1 File Template untuk Semua Tampilan dengan Codeigniter
Rizaldi Maulidia Achmad
Sesuai permintaan dari teman saya. Kali ini saya akan mencoba share Tips & Trik bagaimana cara membuat 1 file template yang bisa digunakan untuk semua tampilan sehingga akan lebih efisien dan efektif ketika ada perubahan pada template. Mengerti maksdunya? saya beri sebuah contoh, misalnya saya mempunyai sebuah website yang didalamnya mempunyai tampilan untuk Home, Berita, dan Galeri. Nah, apabila kita tidak membuat 1 file template untuk semua tampilan, otomatis ketika misalnya kita ingin menambahkan menu Kontak berarti kita harus mengubah semuafile tampilan home, berita, dan juga galeri. Pada kasus ini masih bisa kita atasi apabila ada perubahan template karena file tampilannya juga cuma sedikit. Bagaiman kalau kita membuat website dengan banyak tampilan bukan hanya 3 tampilan, Pasti akan merepotkan ketika ada perubahan template. Kita harus satu per satu merubah semua tampilan.
Tapi sekarang Anda tidak perlu khawatir karena saya akan berbagi bagaimana cara mengatasi masalah tersebut. Kali ini saya akan membuatnya dengan Framework Codeigniter. Tapi apabila bagi Anda yang tidak menggunakan Codeigniter, Saya juga akan coba share catatan mengenai masalah ini tanpa Framework Codeigniter pada catatan selanjutnya. Langsung saja biar tidak penasaran ikuti langkah-langkah berikut ini :
STEP 1 – INSTALASI
- Download framework Codeigniternya, klik link berikut : Download. Pada catatan ini, saya menggunakan Codeigniter 2.2.
- Buat sebuah folder baru dengan nama latihan_template pada xampp/htdocs/
- Copy dan Ekstrak file Codeigniter yang Anda download, lalu simpan di dalam folder latihan_template yang tadi Anda buat (xampp/htdocs/latihan_template/).
STEP 2 – KONFIGURASI
Karena disini kita menggunakan Framework Codeigniter, maka kita harus lakukan konfigurasi terlebh dahulu pada Codeigniternya. Ikuti langkah-langkah berikut ini :
- Buka folder latihan_template/application/config/
- Buka file config.php
Cari kode berikut ini :$config['base_url'] = '';
Ubah jadi seperti ini :
$config['base_url'] = 'http://localhost/latihan_template';
Kode diatas digunakan untuk menset baseurlnya.
Lalu simpan file tersebut. - Buka file autoload.php
Cari kode berikut ini :$autoload['helper'] = array();
Ubah jadi seperti ini :
$autoload['helper'] = array('file','url');Kode diatas digunakan untuk memuat (menload) class database, file, dan url.
Lalu simpan file tersebut. - Buka file routes.php
Cari kode berikut ini :$route['default_controller'] = "welcome";
Ubah jadi seperti ini :
$route['default_controller'] = "main";
Lalu simpan file tersebut.
Kode diatas digunakan untuk menset controller mana yang akan diload pertama kali. Secara default, Codeigniter telah menset default controller yaitu welcome. Disini kita set default controller menjadi main.
STEP 3 – BUAT TEMPLATE
Sekarang kita masuk ke tahap pembuatan templatenya. pada catatan ini saya membagi-bagi templatenya ke dalam 3 file yaitu index.php, header.php, dan footer.php. Sebelum membuat kodenya, buat terlebih dahulu folder template lalu simpan di latihan_template/application/views/. Lalu simpan ketiga file template yang akan kita buat pada folder template tersebut. Berikut ini kode dari masing-masing file tersebut :
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Site</title>
<style type="text/css">
#header{
background: black;
padding: 2px;
}
#header ul > li{
display: inline;
list-style-type: none;
padding-right: 10px;
}
#header li a{
color: white;
text-decoration: none;
padding: 5px;
}
#header li > a:hover{
background: white;
color: black;
}
#content{
background: #EBEBEB;
min-height: 450px;
padding: 10px;
}
#footer{
background: black;
padding: 5px;
color: white;
text-align: center;
}
</style>
</head>
<body>
<div id="header">
<?php
/*
* Variabel $headernya diambil dari libraries template.php
* (application/libraries/template.php)
* */
echo $headernya; ?>
</div>
<div id="content">
<?php
/*
* Variabel $contentnya diambil dari libraries template.php
* (application/libraries/template.php)
* */
echo $contentnya; ?>
</div>
<div id="footer">
<?php
/*
* Variabel $footernya diambil dari libraries template.php
* (application/libraries/template.php)
* */
echo $footernya; ?>
</div>
</body>
</html>
header.php
<ul>
<li style="color: white;font-size: 25px;font-weight: bold">My Site »</li>
<li><a href="<?php echo base_url('index.php/main'); ?>">Home</a></li>
<li><a href="<?php echo base_url('index.php/main/berita'); ?>">Berita</a></li>
<li><a href="<?php echo base_url('index.php/main/tentang'); ?>">Tentang Kami</a></li>
</ul>
footer.php
Copyright © My Notes Code
STEP 4 – BUAT TAMPILAN (CONTENT WEBSITE)
Pada tahap ini kita akan membuat content/tampilan untuk websitenya. Pada catatan ini, saya membuat 3 tampilan yaiu home, berita, dan tentang kami. Simpan ketiga file tampilan tersebut di latihan_template.application/views/.Berikut ini kode dari masing-masing tampilan :
home.php
<h3 style="margin: 0;">Halaman Home</h3> Welcome to My Site, Enjoy your day 😀
berita.php
<h3 style="margin: 0;">Halaman Berita</h3><br> <div style="text-align: justify;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. <a href="#">Readmore »</a> </div><hr> <div style="text-align: justify;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. <a href="#">Readmore »</a> </div><hr> <div style="text-align: justify;"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. <a href="#">Readmore »</a> </div><hr>
tentang.php
<h3 style="margin: 0;">Halaman Tentang Kami</h3> My Site Telepon : 022-0123456 Jl.Jend. Gatot Subroto No.123 Bandung
STEP 5 – BUAT LIBRARI / CORE TEMPLATE
Disini saya akan men-share 2 cara. Cara yang pertama yaitu dengan memanfaatkan fitur librari pada Codeigniter. Cara yang kedua yaitu dengan memanfaatkan firtur core pada Codeigniter. Tapi saya lebih merekomendasikan untuk menggunakan Cara 2.
CARA 1 – MENGGUNAKAN LIBRARI
Disini kita akan membuat 1 file librari yang diberi nama template.php. Lalu simpan file tersebut pada folder latihan_template/application/libraries/. Librari tersebut berfungsi sebagai jembatan/penghubung antar controller dengan template websitenya. Berikut ini kodenya :
<?php
class Template{
protected $_ci;
function __construct(){
$this->_ci = &get_instance();
}
function utama($content, $data = NULL){
/*
* $data['headernya'] , $data['contentnya'] , $data['footernya']
* variabel diatas ^ nantinya akan dikirim ke file views/template/index.php
* */
$data['headernya'] = $this->_ci->load->view('template/header', $data, TRUE);
$data['contentnya'] = $this->_ci->load->view($content, $data, TRUE);
$data['footernya'] = $this->_ci->load->view('template/footer', $data, TRUE);
$this->_ci->load->view('template/index', $data);
}
}
Saya akan coba sedikit jelaskan mengenai kode diatas.
$data['headernya'] = $this->_ci->load->view('template/header', $data, TRUE);
Kode diatas berfungsi untuk me-load file header.php yang berada di application/views/template/. Lalu menyimpannya pada array $data[] dengan nama index array headernya.
$data['contentnya'] = = $this->_ci->load->view($content, $data, TRUE);
Kode diatas berfungsi untuk me-load file content sesuai dengan yang diminta pada file controllernya. Pada kode diatas, ada variabel $content, variabel ini digunakan untuk mengambil permintaan untuk menampilkan file content dari controller. Lalu menyimpannya pada array $data[] dengan nama index array contennya.
$data['footernya'] = $this->_ci->load->view('template/footer', $data, TRUE);
Kode diatas berfungsi untuk me-load file footer.php yang berada di application/views/template/. lalu menyimpannya pada array $data[] dengan nama index array footernya.
CARA 2 – MENGGUNAKAN CORE
Pada cara yang kedua, silahkan buat sebuah file baru dengan nama MY_Controller.php. Lalu simpan pada folder latihan_template/application/core/. Berikut ini kodenya :
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class MY_Controller extends CI_Controller{
function render_page($content, $data = NULL){
/*
* $data['headernya'] , $data['contentnya'] , $data['footernya']
* variabel diatas ^ nantinya akan dikirim ke file views/template/index.php
* */
$data['headernya'] = $this->load->view('template/header', $data, TRUE);
$data['contentnya'] = $this->load->view($content, $data, TRUE);
$data['footernya'] = $this->load->view('template/footer', $data, TRUE);
$this->load->view('template/index', $data);
}
}
STEP 6 – BUAT CONTROLLER
Sekarang kita akan membuat file controllernya. Berikut ini kodenya :
CARA 1
Jika pada STEP 5 Anda memilih CARA 1 (Menggunakan Librari). maka kode untuk controllernya seperti berikut ini :
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Main extends CI_Controller {
public function __construct(){
parent::__construct();
$this->load->library('template');
}
public function index(){
$this->template->utama('home');
}
public function berita(){
$this->template->utama('berita');
}
public function tentang(){
$this->template->utama('tentang');
}
}
Lalu simpan file tersebut di latihan_template/application/controllers/ dengan nama main.php. Berikut penjelasan dari kode diatas :
public function __construct(){ .... }
kode diatas berfungsi untuk menjalankan suatu aksi ketika controller main diload.
$this->load->library('template');
kode diatas berfungsi untuk me-load file librari template.php.
$this->template->utama('home');
kode diatas berfungsi untuk me-load file tampilan home.php yang berada di application/views/. Pada kode ini, kita menggunakan librari template untuk me-load templatenya. pada kode ini terdapat kode template->, ini berarti kita memanggil librari template. lalu ada kode utama('home'), ini berarti kita memanggil function utama($content, $data) pada file librari template.php. karena function utama($content, $data) membutuhkan paramater $content, maka kita isikan nama file tampilan yang ingin kita load untuk dijadikan contentnya. Nah untuk parameter $data, disitu kita gunakan apabila kita ingin mengirimkan data dari controller ke file tampilannya.
$this->template->utama('berita');
kode diatas berfungsi untuk me-load file tampilan berita.php yang berada di application/views/.
$this->template->utama('tentang');
kode diatas berfungsi untuk me-load file tampilan tentang.php yang berada di application/views/.
CARA 2
Jika pada STEP 5 Anda memilih CARA 2 (Menggunakan Core). maka kode untuk controllernya seperti berikut ini :
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Main extends MY_Controller {
public function index(){
$this->render_page('home');
}
public function berita(){
$this->render_page('berita');
}
public function tentang(){
$this->render_page('tentang');
}
}
Lalu simpan file tersebut di latihan_template/application/controllers/ dengan nama main.php.
Yang perlu diperhatikan apabila Anda memilih CARA 2, pada kode diatas kita buat controllernya tidak lagi extends CI_Controller. Tapi ubah menjadi extends MY_Controller agar kita bisa mengakses function render_page() yang ada di file MY_Controller.php. Jadi apabila suatu saat Anda ingin menambahkan lagi sebuah controller baru, pastikan untuk mengubah extends CI_Controller nya menjadi extends MY_Controller.
$this->render_page('tentang');
Kode diatas berfungsi untuk memanggil function render_page() yang ada di file MY_Controller.php. function render_page() ini memiliki 2 parameter. Parameter yang pertama yaitu $content, parameter ini diisi dengan file tampilan yang ingin dijadikan sebagai contentnya. Parameter kedua yaitu $data, paramater ini diisi apabila ingin mengirim sebuah datadari controller ke file tampilannya.
STEP 7 – TESTING
Sekarang kita coba websitenya. ketik localhost/latihan_template pada browser. Jangan lupa untuk menjalankan xampp » apache terlebih dahulu. Selamat mencoba.
Source Code
Untuk mengunduh source code nya silahkan klik link berikut : Download.
Sekian untuk catatan kali ini. Bila ada yang ingin ditanyakan, langsung saja tanyakan pada bagian komentar dibawah ini. Terimakasih.
Tutorial Membuat 1 File Template untuk Semua Tampilan dengan Codeigniter, Cara membuat template dinamis dengan Codeigniter, Tutorial membuat template dinamis dengan Codeigniter
POST YOUR COMMENTS