Website Sekolah CodeIgniter III: Memasang Template (Free CSS Theme)

Warning: Source code website sekolah versi 2.x ini tidak dikembangkan lagi, saya sedang menyusun ulang konsepnya dan akan dibuat dengan CI versi 3.x. Saat ini saya sudah membuat Basic CMS dengan CI 3 dan kemungkinan untuk website sekolah ini akan di koding ulang dengan konsep Basic CMS yang telah saya buat tersebut. Terima kasih telah berkunjung di blog ini 🙂

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;">&nbsp;</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">&copy;&nbsp;&nbsp;2009 All Rights Reserved &nbsp;&bull;&nbsp; Design by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
<p class="link"><a href="#">Privacy Policy</a>&nbsp;•&nbsp;<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">&laquo;&laquo;&nbsp;&nbsp;Read More&nbsp;&nbsp;&raquo;&raquo;</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

<?php/*
* 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);
}

}

30 Comments so far

genduetPosted on5:12 pm - Jun 29, 2011

gan,, untuk databasenya koq ga ada yach,,? thanx atas pencerahannya.

adminPosted on3:08 am - Jun 30, 2011

Udah ku tambahkan gan… silahkan di sedot.. 🙂 https://github.com/agie0925/sekolahku/blob/master/sekolahkudb.sql

Jang743Posted on3:23 am - Jul 5, 2011

tutorialnya bagus sekali, boleh tanya itu editor buat ci nya pake apa ?

makasih

adminPosted on10:13 am - Jul 5, 2011

Aku pake NetBeans for PHP mas..

S V LPosted on9:58 am - Jun 10, 2013

pakek aptana studio 3 bagus juga : http://www.aptana.com/

PembelajarPosted on10:34 am - Jul 5, 2011

Mas, setelah saya coba, kok gambar templatenya tidak keluar ya..?
Cuma ada tulisan doang jadinya, gak berbentuk..
Thanks responnya..

nindyPosted on2:28 am - Jul 14, 2011

coba default.css nya ditaro diluar system…

adminPosted on9:58 am - Jul 14, 2011

Kemungkinan cuma kesalahan path saja mas.. Coba download aja full source code aku di https://github.com/agie0925/sekolahku/ ..:-)

cobat31Posted on3:21 am - Nov 15, 2011

mas. file imagenya ngga ada ya? jadinya gambar2nya ngga ada yang muncul mas. .

jaja99Posted on6:39 am - Feb 12, 2012

gan Imagenya gx muncul cuma yang muncul cuma tulisannya doang!!! gimana tuh gan,, padahal saya download yang fuul kodenya!!!??

bramsatriaPosted on4:49 am - Feb 16, 2012

hi gan 🙂

saya sedang butuh orang ni:
1) software engineer : PHP, Ruby on Rails
2) design core, backend software components
3) programmer: JAVA, DA-NET

tolong info ya gan, klo mungkin ada sodara atau teman juga boleh

kirim cv aja ke email saya bramliguori@yahoo.co.id

makasih banyak ya gtan 🙂

Chrisloyel U MengkuPosted on2:00 pm - Mar 15, 2012

nice

Gie ArtPosted on4:15 pm - May 22, 2012

thanks gan 😀

WicaksonoabPosted on10:09 am - May 13, 2012

tolong pliss, aku sudah coba langkah2 diatas, tapi kok yg muncul cuma title nya doang sedang yg lainnya ga muncul kenapa yah?

gieartPosted on4:18 pm - May 22, 2012

coba mungkin di config.php base_urlnya ada yng salah.. ato coba kirimkan source code lengkap mas wicaksono ke email saya.. nanti saya bantu.. 😀

sofyan riyadinPosted on5:01 pm - Dec 21, 2012

iya mas coba buka folder config > config.php >rubah base urlnya sesuai alamat mas …
terima kasih

AnonymousPosted on6:36 am - Jun 25, 2012

😉 bagus buat yang masih nubi.

AndoPosted on8:47 am - Jul 6, 2012

A Database Error Occurred
Unable to connect to your database server using the provided settings.
Filename: C:xampphtdocssekolahkusystemdatabaseDB_driver.php
Line Number: 124

gan, koq bisa error disitu ya..? padhl udah saya ganti buat database dan “class CI_DB_driver” nya sudah saya isi sesuai dengan database nya..

mohon pencerahannya gan..
terimakasih..

Iema AmeiPosted on4:29 am - Jul 10, 2012

di folder configdatabase tu rubah
$db[‘default’][‘hostname’] = ‘localhost’;
$db[‘default’][‘username’] = ”; -> username kamu
$db[‘default’][‘password’] = ”; -> password kamu
$db[‘default’][‘database’] = ‘sekolahkudb’;