1. Silakan download file becak.zip dan langsung di-extract saja. Untuk mendapatkan framework tersebut silahkan click link ini http://blogkomputer.com/index.php/web/page/download/1/15
2. Proses extract file becak.zip tersebut akan menghasilkan sebuah folder dengan nama becak.
3. Copy-kan folder becak tadi ke folder htdocs di xampp anda. (Catatan : jika anda menggunakan OS linux jangan lupa folder tadi di CHMOD 775 terlebih dahulu).
4. buruan buka browser anda kemudian di URL-nya ketik http://localhost/becak 
5. Jika tidak ada masalah/error seharusnya akan muncul tampilan seperti gambar dibawah ini.

   
6. Kembali ke folder htdocs, silakan ubah (rename) folder becak sesuai dengan keinginan anda. Saya ambil contoh misalkan nama folder becak diganti dengan myblog.
7. Setelah itu buka browser, kemudian di URL ketikkan http://localhost/myblog. Apa yang terjadi? Seharusnya sama akan menghasilkan tampilan yang sama dengan sebelum anda rename foldernya.

Sekarang coba saya lanjutkan bagaimana cara membuat view sendiri sehingga tampilan web site kita kelihatan lebih bagus, tidak seperti tampilan pada gambar diatas.

1. Siapkan terlebih dahulu desain web-nya. Secara umum desain web menggunakan HTML (Hypertext Markup Language). Namun saat ini biasanya banyak yang dilengkapi dengan CSS (Cascade Style Sheet) , javascript serta animasi flash.
2. Bagi anda yang kurang telaten membuat desain web (seperti saya :D), bisa juga memanfaatkan template web yang sudah jadi baik yang gratisan maupun yang berbayar. Beberapa web site yang menyediakan template web site gratis misalnya http://www.freecsstemplates.org/ , http://www.styleshout.com/ dan lain sebagainya.
3. Download salah satu template yang anda inginkan. Pada artikel ini saya ambil contoh template yang dipakai adalah http://www.freecsstemplates.org/download/zip/orangemint/
4. Extract file orangemint.zip yang baru anda download tadi, maka akan muncul sebuah folder dengan nama orangemint. Pada folder tersebut terdapat 3 buah file (yaitu : index.html, style.css, license.txt) dan sebuah sub folder images yang berisi 3 buah file (img01.gif, img02.jpg, img03.jpg).

Sampai disini kita sudah berhasil mendapatkan template web site gratisan. Langkah selanjutnya adalah menggunakan template web site tersebut  pada aplikasi web site kita. Saya mengasumsikan anda sudah familiar dengan HTML dan CSS oleh karena itu materi HTML dan CSS tentu tidak saya bahas pada tulisan kali ini.

1. Silakan buka folder xampp->htdocs->myblog seperti penjelasan diatas. Pada tahap ini hanya ada 3 (tiga) buah sub folder yang harus benar-benar diperhatikan yaitu myblog->application->views, myblog->sources->css dan myblog->sources->images. Dilihat dari fungsinya nantinya folder views digunakan untuk menyimpan script HTML kita. Sedangkan folder css digunakan untuk menyimpan desain CSS kita serta folder images digunakan untuk menyimpan gambar-gambar pelengkap web site kita baik itu background, images dan lain sebagainya. Kadangkala template web site juga menyediakan javascript. Jika anda menemukan javascript pada template tersebut, maka copy-kan file javascript tersebut ke folder myblog->sources->js.
2. Copy-kan file index.html dari template (folder orangemint tadi) ke folder myblog->application->views, kemudian rename (ubah nama) file index.html tersebut menjadi view_myblog.php. Untuk lebih jelasnya lihat gambar disamping (lingkaran nomor 1 warna merah).
3. Copy-kan file style.css ke folder myblog->sources->css. Untuk lebih jelasnya lihat gambar disamping nomor 2 lingkaran warna biru
4. Copy-kan ketiga file yang ada pada folder orangemint->images (img01.gif, img02.jpg, img03.jpg) ke folder myblog->sources->images. Untuk lebih jelasnya lihat gambar disamping nomor 3 lingkaran warna kuning.

Proses copy-paste pada langkah ke-2 tersebut diatas, belum bisa menghasilkan apa-apa. Kenapa bisa begitu?ingat pada artikel sebelumnya kita pernah membahas apa itu controller. Nah agar bisa menampilkan template web site tersebut terlebih dahulu harus kita siapkan controller-nya.

1. Buka folder myblog->application->directories. Agar tidak rancu dengan artikel sebelumnya maka buat saja sub folder baru dengan nama web. Jangan lupa pada sub folder web tersebut buat sub folder baru dengan nama controllers. Jadi jika saya ringkas susunan foldernya adalah myblog->application->directories->web >controllers. 
2. Pada folder controllers, buat file baru dengan nama page.php. Untuk lebih jelasnya lihat gambar disamping.
3. Buka file page.php yang baru saja anda buat tadi, kemudian ketik script-nya seperti ini.

1. Buka file view_myblog.php yang terdapat di sub folder myblog->application->views tadi. Pada baris ke-19 terdapat script link css seperti ini.
   
   view plainprint?

   1. <link href="style.css" rel="stylesheet" type="text/css" media="screen">  
   Ubah seperti ini
   view plainprint?

   1. <?php echo css('style.css');?>  
2. refresh ulang browser anda, apa yang terjadi? Seharusnya tampilan sudah bisa berubah. Apakah masih ada yang salah? o..ternyata masih. Coba anda perhatikan lagi, tampilan menu kategori jadi hilang. Sebenarnya menu kategori tersebut tidak hilang hanya saja gambar background anda belum tampil secara benar. Bagaimana cara menampilkan gambar (image) background?
3. Coba anda buka file style.css kemudian anda cari script url(images/img01.gif), url(images/img02.jpg) dan url(images/img03.jpg). Karena pada proses copy-paste seperti langkah ke-1 diatas ada perubahan susunan folder, maka url di css juga perlu kita sesuaikan. Cara penyesuaiannya bagaimana? anda rubah saja script url(images/) menjadi url(../images/). Agar lebih cepat gunakan saja fasilitas find and replace. Seharusnya url gambar-gambar tersebut menjadi seperti ini url(../images/img01.gif), url(../images/img02.jpg) dan url(../images/img03.jpg). Jangan lupa perubahan tersebut di-save. Jika lupa tidak di-save maka tampilan tidak akan berubah :)
4. Kembali ke browser, kemudian refresh lagi. Apa yang terjadi?jika tidak ada error seharusnya aplikasi web site kita bisa tampil sama seperti template-nya.

Sampai disini anda sudah bisa membuat desain view pada aplikasi web site anda. Jika anda ingin membuat aplikasi web yang statis, sampai ini saja saya rasa sudah cukup. Akan tetapi untuk saat ini hampir tidak ada aplikasi web site yang statis, mayoritas saat ini aplikasi web bersifat dinamis hal ini dikarenakan tuntutan dari perubahan informasi yang cepat sehingga mau tidak mau content web site-pun harus bisa dirubah secepat mungkin dan semudah mungkin. Pertanyaannya sekarang adalah apa hubungannya template view yang baru saja kita bikin tadi dengan web dinamis? Biar lebih gampang coba anda lihat gambar dibawah ini.

1. Buka file view_myblog.php pada folder myblog->application-views. Anda masih ingat?posisi mana saja yang tadi di-cut? jika tandanya tidak hilang pasti anda ingat.
2. Cari lokasi seperti yang sudah anda tandai pada bagian menu tadi. kemudian tambahkan script PHP seperti ini.
   view plainprint?

   1. <?php echo $menu;?>  
3. Cari lokasi  seperti yang sudah anda tandai pada bagian content tadi. kemudian tambahkan script PHP seperti ini 
   view plainprint?

   1. <?php echo $content;?>  
4. Cari lokasi  seperti yang sudah anda tandai pada bagian sidebar tadi. kemudian tambahkan script PHP seperti ini 
   view plainprint?

   1. <?php echo $sidebar;?>  
5. Buka file page.php pada folder myblog->application->directories->controllers. Kemudian modifikasi script PHP seperti ini.
   view plainprint?

   1. <?php defined('SYS') or exit('Access Denied!');  
   2. class page extends controller {  
   3.     function __construct(){  
   4.         parent::__construct();  
   5.     }  
   6.     function index(){  
   7.         $sub_view = array();  
   8.         $sub_view['menu'] = view('menu');  
   9.         $sub_view['content'] = view('content');  
   10.         $sub_view['sidebar'] = view('kategori');  
   11.         app_view('view_myblog', $sub_view);  
   12.     }  
   13. }  
   14. ?>  
6. Refresh browser anda, seharusnya tampilan web site anda kembali seperti semula.

 Sampai disini ente tentunya sudah bisa memahami bagaimana cara membuat view serta bagaimana membuat main view dan sub view. Artikel selanjutnya akan saya bahas bagaimana menggabungkan sub view dengan database (mysql), sehingga aplikasi web kita benar-benar dinamis.