Hey semua…
Melanjutkan postingan aku tentang membuat website sekolah dengan CodeIgniter. Kali ini aku akan menguraikan langkah2 dalam memasang template HTML+CSS. Mungkin ada cara2 yng lebih canggih dalam sistem templating ini (sperti : pake SMARTY, dll), tapi di sini aku hanya akan menuliskan membuat template sistem yang sngat sederhana aja. (karena itu yng aku bisa…hahaha). Oke langsung aja ke langkah2 konkritnya 
DOWNLOAD FULL SOURCE CODE | ONLINE DEMO
1. Download Free CSS+HTML template yang kamu suka
Pada tutorial ini aku pake PREMIUM SERIES yang bisa anda download di sini. Perlu kalian tau, aku punya hobi unik, yaitu mengoleksi free css template semacam ini…hehe, maklum gak bisa desain. Programmer Tulen gitu loh…:D
2. Siapkan Folder2 untuk menyimpan file2 pendukung yang ada dalam tempate itu
Secara umum file2 pendukung ada dalam template terdiri dari : images, css, javascript. Jadi kita akan membuat folder utk menampung file2 itu. Oh iya, utk COdeIgniter versi 2.0 ke atas, secara default kita hanya di ijin kan meletakkan file2 itu di root folder. Jadi kita akan membuat folder2 nya jg di root folder. Folder yng di buat yang pertama kita diberi nama public, kemudian di dalam folder tersebut, kita buat 3 buah folder baru yaitu css, images, js. Sehingga struturnya menjadi seperti berikut:
Struktur Folder File Asset
kemudian dari template yang telah di download tadi, masukkan file2 nya sesuai dengan folder masing2. Klo file css ya ke folder css, image ya ke folder images. dst.
3. Memecah Template (file index.html) ke dalam beberapa bagian
Pada template yang di download tadi ada file yang bernama index.html. Itu adalah file html yg akan kita pake untuk template di halaman2 web kita. Agar kita lebih efisien, dan lebih rapi koding nya, Maka file index.html tersebut akan kita pecah2 ke dalam beberapa bagian yaitu : template.php, header.php, footer.php, left.php, dan right.php. Semua file ini kita simpan di folder VIEWS. Adapun isi dari masing file dalah sebagai berikut:
template.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
Name : Premium Series
Description: A three-column, fixed-width blog design.
Version : 1.0
Released : 20090303
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Premium Series by Free CSS Templates</title>
<meta name="keywords" content="" />
<meta name="Premium Series" content="" />
<link href="<?php echo base_url() ?>public/css/default.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<!-- start header -->
<?php $this->load->view('header') ?>
<!-- end header -->
<div id="wrapper">
<!-- start page -->
<div id="page">
<?php $this->load->view('left') ?>
<!-- start content -->
<div id="content">
<?php if (!empty($page)): ?>
<?php $this->load->view($page); ?>
<?php else: ?>
<?php $this->load->view('error_page'); ?>
<?php endif; ?>
</div>
<!-- end content -->
<!-- start sidebars -->
<?php $this->load->view('right') ?>
<!-- end sidebars -->
<div style="clear: both;"> </div>
</div>
<!-- end page -->
</div>
<?php $this->load->view('footer') ?>
</body>
</html>
Pada bagian ini yang perlu di perhatikan adalah pemanggilan file css, harus benar path/ alamatnya. Contoh disini : <?php ?>/public/css/default.css. Selain itu pada template.php ada beberapa baris program yang akan membuat content dari template (bagian tengah) akan dinamis. Yaitu pada bagian if(!empty($page)): dstt…
header.php
<div id="header">
<div id="logo">
<h1><a href="#"><span>Premium</span>Series</a></h1>
<p>Designed By Free CSS Templates</p>
</div>
<div id="menu">
<ul id="main">
<li class="current_page_item"><a href="<?php echo site_url('/')?>">Home</a></li>
<li><a href="<?php echo site_url('pages/read/profil')?>">Profil</a></li>
<li><a href="<?php echo site_url('pages/read/sejarah-singkat')?>">Sejarah Singkat</a></li>
<li><a href="<?php echo site_url('pages/read/visi-misi')?>">Visi Misi</a></li>
<li><a href="<?php echo site_url('pages/contact')?>">Kontak</a></li>
<li><a href="<?php echo site_url('users/login')?>">Login</a></li>
</ul>
</div>
</div>
footer.php
<div id="footer">
<p class="copyright">© 2009 All Rights Reserved • Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
<p class="link"><a href="#">Privacy Policy</a> • <a href="#">Terms of Use</a></p>
</div>
left.php
<div id="sidebar1" class="sidebar">
<ul>
<li>
<h2>Recent Posts</h2>
<ul>
<li><a href="#">Aliquam libero</a></li>
<li><a href="#">Consectetuer adipiscing elit</a></li>
<li><a href="#">Metus aliquam pellentesque</a></li>
<li><a href="#">Suspendisse iaculis mauris</a></li>
<li><a href="#">Proin gravida orci porttitor</a></li>
<li><a href="#">Aliquam libero</a></li>
<li><a href="#">Consectetuer adipiscing elit</a></li>
<li><a href="#">Metus aliquam pellentesque</a></li>
<li><a href="#">Suspendisse iaculis mauris</a></li>
<li><a href="#">Proin gravida orci porttitor</a></li>
</ul>
</li>
<li>
<h2>Categories</h2>
<ul>
<li><a href="#">Aliquam libero</a></li>
<li><a href="#">Consectetuer adipiscing elit</a></li>
<li><a href="#">Metus aliquam pellentesque</a></li>
<li><a href="#">Suspendisse iaculis mauris</a></li>
<li><a href="#">Urnanet non molestie semper</a></li>
<li><a href="#">Proin gravida orci porttitor</a></li>
</ul>
</li>
<li>
<h2>Archives</h2>
<ul>
<li><a href="#">September</a> (23)</li>
<li><a href="#">August</a> (31)</li>
<li><a href="#">July</a> (31)</li>
<li><a href="#">June</a> (30)</li>
<li><a href="#">May</a> (31)</li>
</ul>
</li>
</ul>
</div>
right.php
<div id="sidebar2" class="sidebar">
<ul>
<li>
<form id="searchform" method="get" action="#">
<div>
<h2>Site Search</h2>
<input type="text" name="s" id="s" size="15" value="" />
</div>
</form>
</li>
</ul>
</div>
4. Membuat Controller Utama (default controller)
Sebenarnya langkah ini bisa di skip aja, karena di master ci sudah ada defaut controller yng bernama welcome. Tetapi di sini aku akan membuat controler baru yng sama beri nama ‘pages‘ dan di dalamnya ada fungsi ‘home‘. Ini akan aku jadikan default controller di website sekolah ini. Yaa.. sebenarnya biar lebih rapi aja sih… jadi kalian boleh skip langkah ini. Oke controller pages yang aku buat isi kode programnya seperti ini:
<?php
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
class Pages extends CI_Controller {
var $template = 'template';
function __construct() {
parent::__construct();
}
function home() {
$data['page'] = 'pages/home';
$this->load->view($this->template, $data);
}
}
?>
5. Membuat View dari fungsi ‘home’ dalam controller ‘pages’ tsb.
Sebenarnya isi dari view home ini adalah bagian tengah dari index.html template yang kita download tadi. View ini kita beri nama home.php dan kita simpan pada folder pages (buat folder) dalam folder views. Isinya adalah sebagai berikut:
<div class="flower"><img src="images/img06.jpg" alt="" width="510" height="250" /></div>
<div class="post">
<h1 class="title"><a href="#">Selamat Datang di Website Sekolahku!</a></h1>
<p class="byline"><small>Posted on October 1st, 2009 by <a href="#">Free CSS Templates</a></small></p>
<div class="entry">
<p><strong>Premium Series</strong> is a free, fully standards-compliant CSS template designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>. This free template is released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attributions 2.5</a> license, so you're pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Have fun with it </p>
<p class="links"><a href="#" class="more">«« Read More »»</a></p>
</div>
</div>
6. Membuat View Error Page
Ini adalah view yang akan ditampilkan ketika halaman/ layout yang di akses tidak ada. Isinya adalah sebagai berikut:
<div class="post">
<h1 class="title">Mohon Maaf, Halaman tidak ditemukan</h1>
</div>
Jika langkah2 di atas dapat dilalui dengan lancar, maka hasilnya adalah seperti berikut:
Homepage Website Sekolahku
Ok.. Smp disini tutorial memasang template kali ini … #Sekian
DOWNLOAD FULL SOURCE CODE | ONLINE DEMO
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/class Pages extends CI_Controller {
function __construct() {
parent::__construct();
}
function home() {
$data['page'] = ‘pages/home’;
$this->load->view(‘template’, $data);
}
}
?>