Sabtu, 14 Juli 2012

Dasar Membuat View Template CI

Template view adalah view yang digunakan sebagai template untuk menampilkan dokumen web.

Template perlu dan umum digunakan oleh pengembang aplikasi web untuk menyeragamkan tampilan aplikasi dari setiap halaman, yang berbeda hanya pada bagian isinya.

Salah satu keunggulan dari menggunakan aplikasi untuk membuat suatu situs web dengan menggunakan pemrograman, bukan dengan membuat setiap halaman statik, adalah penggunaan template. Secara umum maka setiap halaman yang menggunakan template akan memiliki struktur yang sama; yang berbeda hanya isi dari halaman web tersebut.

Seperti telah diketahui, semua data yang akan ditampilkan di dalam halaman web dari suatu aplikasi web akan dimasukkan ke dalam variabel array asosiatif terlebih dahulu. Variabel asosiatif ini kemudian dilewatkan kepada view untuk ditampilkan. Setiap key dari array asosiatif akan menjadi variabel di dalam view.

Untuk membuat view template, maka kita dapat melakukan berbagai cara. Salah satu cara yang umum digunakan adalah dengan membagi satu halaman view menjadi beberapa view, dengan sebuah view rangka.

Perhatikan view berikut:



<html>
<head>
<title>Judul Dokumen</title>
</head>
<body>
<div>Header</div>
<div>Isi dari halaman web</div>
<div>Footer</div>
</body>
</html>



View di atas adalah view dengan struktur dan isi yang sederhana, sekedar menunjukkan bahwa kita bisa memiliki sebuah halaman web yang dibagi menjadi tiga bagian, yaitu header, isi, dan footer.

Dari view di atas, maka kita bisa menjadikan view tersebut menjadi view template, dengan cara memisahkan file view di atas menjadi beberapa bagian: v_main.php, v_header.php, dan v_footer.

File v_main.php
File v_main.php merupakan file utama dari view template yang akan dibuat, di dalamnya dilakukan proses menampilkan data dan pemuatan view v_header dan v_footer. 

Nama file v_main.php:
<html>
<head>
<title><?=$apptitle;?></title>
</head>
<body>
<?$this->load->view("v_header");?>
<div>
<?=$appcontent;?>
</div>
<?$this->load->view("v_footer");?>
</body>
</html>
File v_main.php merupakan view template yang sederhana, yang akan menampilkan isi dari dua variabel, yaitu $apptitle dan $appcontent. Isi dari $appcontent bisa berupa string dokumen HTML.

File v_header.php
File v_header.php adalah file yang berisi header dari halaman web.

Nama file v_header.php:
<div>Header</div>

File v_footer.php
File v_footer.php berisi informasi yang menjadi footer dari halaman web.

Nama file v_footer.php:
<div>Footer</div>

File header dan footer dipisahkan, dengan isi yang tetap. Dengan cara ini, maka header dan footer dari halaman web akan ditampilkan secara tetap, tidak ada perubahan. Hanya bagian tengah atau isi saja yang berbeda-beda, sesuai dengan hasil pemrosesan yang dilakukan oleh controller.

Pada setiap fungsi dalam suatu controller yang akan menampilkan hasil proses atau menampilkan halaman web, maka yang dilakukan hanya mendefinisikan key array asosiatif yang akan dilewatkan kepada view; dengan nama view adalah v_main.

<?php
class MyController{
..
function first(){
$data=array();
$data["apptitle"]="First Function";
$data["appcontent"]="
<div>
Ini isi dokumen dengan dari fungsi #1
Ini isi dokumen dengan dari fungsi #1
Ini isi dokumen dengan dari fungsi #1
Ini isi dokumen dengan dari fungsi #1
</div>
";
   $this->load->view("v_main",$data);
}
..
function hello(){
$data=array();
$data["apptitle"]="Hello function";
$data["appcontent"]="Hello World!";
   $this->load->view("v_main",$data);
}
}
?>

Contoh di atas, hanyalah contoh sederhana untuk membuat suatu tampilan halaman atau aplikasi web yang seragam dengan menggunakan template. Template view yang dibuat bisa dibuat menjadi lebih kompleks, sesuai dengan rancangan dari halaman dan aplikasi webnya.

Tidak ada komentar:

Posting Komentar