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:
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:
Ok.. Smp disini tutorial memasang template kali ini … #Sekian
DOWNLOAD FULL SOURCE CODE | ONLINE DEMO
function home() {
$data[‘page’] = ‘pages/home’;
$this->load->view(‘template’, $data);
}
}
?>
gan,, untuk databasenya koq ga ada yach,,? thanx atas pencerahannya.
tutorialnya bagus sekali, boleh tanya itu editor buat ci nya pake apa ?
makasih
Mas, setelah saya coba, kok gambar templatenya tidak keluar ya..?
Cuma ada tulisan doang jadinya, gak berbentuk..
Thanks responnya..
mas. file imagenya ngga ada ya? jadinya gambar2nya ngga ada yang muncul mas. .
gan Imagenya gx muncul cuma yang muncul cuma tulisannya doang!!! gimana tuh gan,, padahal saya download yang fuul kodenya!!!??
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 🙂
tolong pliss, aku sudah coba langkah2 diatas, tapi kok yg muncul cuma title nya doang sedang yg lainnya ga muncul kenapa yah?
coba mungkin di config.php base_urlnya ada yng salah.. ato coba kirimkan source code lengkap mas wicaksono ke email saya.. nanti saya bantu.. 😀
iya mas coba buka folder config > config.php >rubah base urlnya sesuai alamat mas …
terima kasih
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..
di folder configdatabase tu rubah
$db[‘default’][‘hostname’] = ‘localhost’;
$db[‘default’][‘username’] = ”; -> username kamu
$db[‘default’][‘password’] = ”; -> password kamu
$db[‘default’][‘database’] = ‘sekolahkudb’;
kelihatanya bermsalah koneksi databasenya bro.. coba di cek di application/config/database.php
klo pake wampserver:
username: ‘root’
password: ”
pada controller pages.
harusnya function index() bukan function home().
maybe sih :v.
About the author