CodeIgniter dengan CSS, Header, Sidebar, Main, dan Footer
Fri, 04/11/2008 - 23:34 — srobet
Maka, kita akan memulai sebuah halaman web menggunakan CodeIginiter dengan satu web utuh.
Persiapan Awal
Pertama kali kita harus menyiapkan beberapa file yang akan digunakan, file-file tersebut adalah header.php, sidebar.php, main.php, dan footer.php, serta sebuah file CSS yang kita beri nama desain.css.
Memulai Codeigniter
Setelah CodeIginiter terinstall dengan sempurna (dapat dibaca disini). Langkah selanjutnya adalah membuat 4 buah file yang akan kita jadikan konten, dan controller yang akan memanggil file-file tersebut dan menggabungkannya menjadi sebuah halaman web utuh.
-desain.css
Terlebih dahulu, buatlah direktori khusus CSS di root pada server (kita menggunakan folder dengan nama CSS) dimana kita akan meletakkan file desain.css tersebut kedalam direktori tersebut. Isi dari css kita yang sederhana adalah sebagai berikut :
body {
background:#FFF;
text-align:center;
}
#container{
width:900px;
margin:auto;
}
#header{
width:900px;
margin:auto;
height:30px;
}
#content{
width:900px;
margin:auto;
}
#sidebar{
width:300px;
float:left;
}
#main{
width:600px;
float:right;
}
#footer{
width:900px;
clear:both;
}
-Konfigurasi Awal
Setelah kita mempersiapkan CSS dan disimpan didalam direktori CSS pada root web kita, maka selanjutnya adalah mempersiapkan CodeIgniternya.
- Mengaktifkan URL Helper pada autoload.
Untuk mengaktifkannya, kita mengkonfigurasikan pada file autoload.php yang terdapat pada /system/application/config/autoload.php.
Cari baris
$autoload['helper'] = array('url');
Kita telah mengaktifkan URL helper pada Aplikasi kita. - Mengaktifkan default controller pada file yang akan kita buat dengan nama "userpage.php", untuk mengaktifkan dapat membaca disini.
-userpage.php
Buatlah file userpage.php dan disimpan didalam direktori "system/application/controllers/" dengan isi sebagai berikut :
<?php
class Userpage extends Controller { //perhatikan bahwa huruf "U" harus besar
function Userpage() //begitu juga dengan huruf "U" difungsi
{
parent::Controller();
}
function index()
{
$this->load->view('header');
$this->load->view('sidebar');
$this->load->view('main');
$this->load->view('footer');
}
}
?>
-header.php
Langkah berikutnya adalah membuat file header.php dengan kode sebagai berikut :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="<?=base_url();?>css/desain.css">
<title>Untitled Document</title>
</head>
<body>
<div id="container">
<div id="header">
<h1>Web Ku Pertama</h1>
</div>
<div id="content">
Perlu diperhatikan perintah <?=base_url();?> untuk memanggil URL dasar pada web kita kemudian menuju ke folder CSS dan mengambil file desain.css. Langkah ini sebenarnya berguna apabila site kita dibangun pada subfolder. Misalnya kita mencoba pada localhost.
-sidebar.php
File sidebar.php akan berisi kode sebagai berikut :
<div id="sidebar">
<h2>Menu Sidebar</h2>
<p>Hai disini nanti menu sidebar</p>
<div>
-main.php
Kode file main.php adalah sebagai berikut :
<div id="main">
<h1>Selamat Datang di Web Ku Pertama</h1>
<p>Ini adalah bagian main</p>
</div>
-footer.php
Dan untuk kode footer.php adalah sebagai berikut :
<div id="footer">
<p>Copyright 998</p>
</div>
</div>
</div>
</body>
</html>
Semua file header.php,sidebar.php,main.php, dan footer.php disimpan didalam direktori "system/application/views/".
Selamat mencoba
Comments
Aktifin CSS-nya..
Untuk mengaktifkan CSSnya harus edit dulu file config.php yang letaknya di system/application/config
pada $config['base_url'] = "http://your-site.com";
http://your-site.com --> diubah menjadi alamat website anda..
kalau anda menggunakan localhost bisa d ubah menjadi seperti ini :
$config['base_url'] = "http://localhost/codeigniter/";
yeph! selanjutnya a little tweak ajah buat nyesuaiin website anda..
---
regards,
fajr--
jalan koq
jalan koq
sama
punya saya juga cssnya ngak keluar euy padahala saya nyimpen folder css sejajar dengan sistem,user guide,css
css
bos ko cssnya gak jalan
twotonk
hmmm....
mau tanya mas...
apa klo mau bikin halaman web, header, content,sidebar & footer memang harus di pisah seperti itu???
bisa g klo header, content, sidebar & footer dijadiin satu halaman php??
ga juga sih.. misal di
ga juga sih.. misal di website kita footer sama semua,
khan mending dipisah trus nanti pas manggil halaman tertentu
kita tinggal manggil footer tersebut dan ga usah bikin footer di masing2 halaman..
regards,
Syamsul Bachri
IT Beginner
Computer Science, Bogor Agricultural University
http://syamsulbachri.co.cc
cara panggil URL nya gimana yach ?
Para master klo page nya udah dibikin. trus akses URL nya gimana yach ?? saya udah coba http://localhost/ci/userpage.php koq ndak bisa ya ???
selain di jadiin home lo yach ...hehe
coba akses begini
coba akses begini http://localhost/ci/userpage
regards,
Syamsul Bachri
IT Beginner
Computer Science, Bogor Agricultural University
http://syamsulbachri.co.cc
ngakses css tanpa base_url
Gimana caranya biar di ../view/header.php kita ga usah tulis <?=base_url();?>public/css/style.css jadi pas di view source jadinya
/public/css/style.css
bukan
http:// localhost/public/css/style.css
odon95
css
mas.. , klo file desain.css nya disimpennya dimana yak??
disini yak "system/application/views/"??ato dimana??? kok saya tidak nongol css nya.
Default nya base url itu
Default nya base url itu adalah codeigniter..
kalau path nya diubah.. config.php nya juga hrs diubah
$config['base_url']='path_anda';
Peletakan CSS file
Kalau saya biasanya buat directory "css" sejajar dengan "system".
Kemudian simpan file css-nya di directory css tersebut.
Untuk mengaksesnya pada halaman VIEW ditulis seperti ini :
Mudah-mudahan bermanfaat
di tulis???
wah mas desain css-nya kok masih g kliatan???
gmn cara biar bs nampilinnya??
cek ulang
cuma mo nambahin dikit....buat yang pemula juga..
coba di cek nama file maupun peletakannya, karena biasanya sedikit kesalahan bisa sangat fatal..
kalo untuk saya terjadi kesalahan pada nama file, yang harusnya desain.php tapi ternyata kebiasaan muncul pake nama inggris design.php....Hehehe makanya punyaku jg gk muncul
pencerahan
mas knp ya pas aku jalanin d browser muncul pesan:
Fatal error: Call to undefined function base_url() in C:\Program Files\xampp\htdocs\optis\system\application\views\header.php on line 5
Autoloadnya .....!
Itu karena helper URL-nya belum di aktifkan.
Mengaktifkan URL Helper pada autoload.
Untuk mengaktifkannya, kita mengkonfigurasikan pada file autoload.php yang terdapat pada /system/application/config/autoload.php.
Cari baris
$autoload['helper'] = array('url');
Kita telah mengaktifkan URL helper pada Aplikasi kita
Koq Belum tampil
The requested URL /CodeIgniter_1.7.0/userpage/userpage was not found on this server. Apanya yang salah ya mas
Udah tampil
kemaren ada mesage gini :
The requested URL /CodeIgniter_1.7.0/userpage/userpage was not found on this server. Apanya yang salah ya mas
sekarang udah tau dikit :
1. Bukalah file routes.php di folder CodeIgniter_/system/application/config
2. Ganti $route['default_controller'] = "welcome"; dengan $route['default_controller'] = "userpage";