Skip to main content
Home

CodeIgniter dengan CSS, Header, Sidebar, Main, dan Footer

April 11, 2008 by srobet

srobet's picture

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.

  1. 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.
  2. 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="&lt;?=base_url();?>css/desain.css">
<title>Untitled Document&lt;/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 :

         &lt;div id="sidebar">
         	&lt;h2>Menu Sidebar&lt;/h2>
          	&lt;p>Hai disini nanti menu sidebar&lt;/p>
         &lt;div>

-main.php
Kode file main.php adalah sebagai berikut :

         &lt;div id="main">
         	&lt;h1>Selamat Datang di Web Ku Pertama&lt;/h1>
            &lt;p>Ini adalah bagian main&lt;/p>
         &lt;/div>

-footer.php
Dan untuk kode footer.php adalah sebagai berikut :

         &lt;div id="footer">
         	&lt;p>Copyright 998&lt;/p>
         &lt;/div>
    &lt;/div>
&lt;/div>
&lt;/body>
&lt;/html>

Semua file header.php,sidebar.php,main.php, dan footer.php disimpan didalam direktori "system/application/views/".

Selamat mencoba

Comments

tanya donk mas....

May 31, 2011 by novinaldi, 9 weeks 3 days ago
Comment: 8282

novinaldi's picture

CSS yang mas kasih dah berhasil aq cobain ??
yang aq tanyain,,,,misalnya pada SIdebar nya kita buat sebuah menu link Data ( echo anchor('controllerdata/semuadata','Data') ; )

ketika kita klik tersebut data-datanya muncul di Main content...
dah aq coba error truss...malah muncul kehalamaan yang baru...

mohon donk mas,,,help me..mohon pencerahannya ????

Saya sudah berhasil

November 29, 2010 by Anonymous, 35 weeks 4 days ago
Comment: 7438

Anonymous's picture

Saya sudah berhasil menampilkan paging cuma apakah urutan dan layoutnya bisa kita atur, karena saya bingung ngatur urutannya field2 misalkan noid jadi di belakang dan isi datan di depannyaSaya sudah berhasil menampilkan paging cuma apakah urutan dan layoutnya bisa kita atur, karena saya bingung ngatur urutannya field2 misalkan noid jadi di belakang dan isi datan di depannya 70-646
642-165
NS0-163
646-223
642-972
642-813
642-974
HP0-S27
642-533
650-177

re ::.@syabac thanks

September 15, 2010 by yudisulistiyo, 46 weeks 2 days ago
Comment: 7124

yudisulistiyo's picture

thanks

tanya link css

September 14, 2010 by yudisulistiyo, 46 weeks 3 days ago
Comment: 7118

yudisulistiyo's picture

saya baru di CI jadi ni baru pasang ci di komputer. saya ingin menggunakan css dalam web saya. saya taruh file css saya dalam folder css sejajar dengan folder system. ketika saya menggunakan
href="<? php echo base_url();?>css/style.css" malah error dan halaman menjadi kosong ketika saya tulis begini href="http://localhost/ci/css/style.css" atau langsung seperti ini href="css/style.css" itu berjalan sempurna mohon bantuannya

BLS:

September 15, 2010 by syabac, 46 weeks 2 days ago
Comment: 7120

syabac's picture

Pastikan URL helper sudah diload sebelumnya.
Bisa diset autoload di autoload.php

$autoload['helper'] = array('url');

thanks @syabac

September 15, 2010 by yudisulistiyo, 46 weeks 2 days ago
Comment: 7125

yudisulistiyo's picture

iya ternyata $autoload['helper'] belum diset dan sekarang sudah diset dan jalan sempurrna.. tapi saya mau tanyasebenarnya maksud dari load url pada autoload itu fungsinya buat apa saja?? thanks

manual CI bahasa Indonesia

March 8, 2010 by cyberboy, 1 year 21 weeks ago
Comment: 6198

cyberboy's picture

para master ci da ga manual CI bahasa Indonesia???? ato tutorial CI pembuatan web dari awal bgt ampe webnya selesai

ribet

December 15, 2009 by murasame, 1 year 33 weeks ago
Comment: 5759

murasame's picture

Mew. Ribet amat om? mendingan dijadiin satu aja itu template-nya. Bikin 1 view template yang ditengah2nya ada baca variabel konten.
berikut skeleton code untuk pagetemplate.php:
-------------------------
<html>
<head>
</head>
<body>
  <div id="header">
  </div>
  <div id="nav">
  </div>
  <div id="content">
     echo $content;
  </div>
  <div id="footer">
  </div>
</body>
</html>
-------------------------
Nah. di dalem div-nya content itu ada tag php

selanjutnya di fungsi controller-nya (anggap namanya Main.php) :

....setelah segala proses data selesai dan akan load view...
//ini untuk grab mainview ke var string -> ini view asli dari controller
$localContent = $this->load->view('mainview', '', true);
$data = array (
'pageContent' => $localContent
);
//load template view dengan passing konten ke view tersebut
$this->load->view('pagetemplate', $data);
-------------------------
Udah. Dengan begitu, mainview.php cukup berisi informasi yang akan ditampilkan. Dalam contoh di atas, isi mainview.php cukup seperti ini:

<h1>Selamat Datang di Web Ku Pertama</h1>
<p>Ini adalah bagian main</p>

Ngga perlu nambah tag div untuk wrapper content lagi (karena tag-nya sudah didefinisikan di view pagetemplate). Jadi kalau mau ubah2 layout, cukup edit file css ama pagetemplate.php-nya aja.

Bukannya malah lebih ribet

January 16, 2010 by desert_lion, 1 year 28 weeks ago
Comment: 5841

desert_lion's picture

Bukannya klo dijadiin satu kayak gitu malah lebih ribet. Agak lebih sulit klo mau dicustom. Kesulitannya nanti ya pada saat kita mau ganti template. Just IMO, CMIIW.
Gw kebiasaan edit template di wordpress soalnya. Dipisah2. Lebih mudah handle nya.

tanya..

January 12, 2010 by kayma, 1 year 29 weeks ago
Comment: 5820

kayma's picture

mo nanya ni,,,
pagetemplate dan mainview kan letaknya ada di view kan? teruz main.php`nya ada di conttroler kan??
tp ketika saya coba koq ada errornya di baris 10 di pagetemplate.php ( echo $content;)..
truz katanya Undefined variable: content..
kk tau kenapa??

Undefined Variable

February 4, 2010 by haqqi, 1 year 26 weeks ago
Comment: 5878

haqqi's picture

Kalau peringatannya "Undefined variable", rasanya udah jelas kalo variable itu belum didefinisikan sebelumnya, tapi tiba-tiba langsung dipanggil... CMIIW

sip mas.. jalan app

October 21, 2009 by syntax_error, 1 year 41 weeks ago
Comment: 5686

syntax_error's picture

sip mas.. jalan app nya..
helper itu function2 nya di ci gitu ya..
siip dah...

memasukkan background css

May 17, 2009 by Anonymous, 2 years 11 weeks ago
Comment: 3694

Anonymous's picture

misal aku punya

#quote { /* Quote box in left column */
float: left;
margin: 10px 0 20px 10px;
padding: 10px 0;
width: 170px;
text-align: center;
background: url(images/quote.gif) no-repeat 0 0
}

gimana ya caranya?? kok image nya ga muncul?

sama

March 2, 2011 by rikiakbar, 22 weeks 2 days ago
Comment: 7654

rikiakbar's picture

sama aku juga mas...
padahal udah kucek linknya valid kok...dan gambarnya ada di folder images...tapi tetep gak muncul...
kira2 kenapa ya?
mohon sesepuh CI membantu T_T

trims

background

January 16, 2010 by desert_lion, 1 year 28 weeks ago
Comment: 5842

desert_lion's picture

Kemungkinannya sih url gambarnya ga valid alias ga ada alias salah ketik. Coba pastiin dulu lokasi gambarnya apakah emang bener disitu.

cara buat link setelah css nya tampil

May 14, 2009 by Anonymous, 2 years 11 weeks ago
Comment: 3670

Anonymous's picture

mas, ak dah bisa nampilin css template nya yang mau ak tanya kalo buat link ke halaman berikutnya gimana ya? apa harus tembak langsung ke nama file di view ? atau gimana ?
biasanya link di css template kan dibuat => a href = #

Aktifin CSS-nya..

December 5, 2008 by Anonymous, 2 years 34 weeks ago
Comment: 144

Anonymous's picture

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

November 20, 2008 by Anonymous, 2 years 36 weeks ago
Comment: 116

Anonymous's picture

jalan koq

sama

November 4, 2008 by Anonymous, 2 years 39 weeks ago
Comment: 91

Anonymous's picture

punya saya juga cssnya ngak keluar euy padahala saya nyimpen folder css sejajar dengan sistem,user guide,css

css

October 7, 2008 by twotonk, 2 years 43 weeks ago
Comment: 81

twotonk's picture

bos ko cssnya gak jalan

like that

January 20, 2010 by jamespas11, 1 year 28 weeks ago
Comment: 5856

jamespas11's picture

excellent post from you ... i like that thing and i must say that "" such sites and testking 70-294 Blogs are always a main source of getting accurate information and provide you the handy results; you can get instant and reliable information testking 70-284 which surely helps you in any field of your concern. I am post graduate in IT and HR. These days I am doing preparation these days. testking 642-481. thnx ;)

hmmm....

September 14, 2008 by areeve, 2 years 46 weeks ago
Comment: 68

areeve's picture

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

November 11, 2008 by syabac, 2 years 38 weeks ago
Comment: 102

syabac's picture

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..

pemisahan layout dan data

December 15, 2009 by murasame, 1 year 33 weeks ago
Comment: 5760

murasame's picture

Well ... emang sih layout dan data (dalam hal ini konten) lebih baik dipisah. Tapi alangkah baiknya yg layout dijadiin satu. biar datanya doang yang terpisah. CI bisa kok dibikin kayak gitu. seperti di sini:
https://www.codeigniter-id.com/node/20#comment-5759

Cuma memang sih kalau pakai seperti itu, dia jadi saklek layoutnya harus seperti itu. kalau mau headernya ganti-ganti tiap page (yang bener-bener ganti total, ga cuma sekedar ganti teks dan semacamnya) ya mau ga mau emang musti dipisah. Tapi kalo sama, mendingan jadiin satu ajah layout templatenya. Ga ribet editnya kalo pingin ganti layout :)

cara panggil URL nya gimana yach ?

September 10, 2008 by Anonymous, 2 years 47 weeks ago
Comment: 66

Anonymous's picture

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

November 11, 2008 by syabac, 2 years 38 weeks ago
Comment: 101

syabac's picture

coba akses begini http://localhost/ci/userpage

ngakses css tanpa base_url

May 9, 2008 by Anonymous, 3 years 12 weeks ago
Comment: 22

Anonymous's picture

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

April 24, 2008 by kidun, 3 years 14 weeks ago
Comment: 17

kidun's picture

mas.. , klo file desain.css nya disimpennya dimana yak??
disini yak "system/application/views/"??ato dimana??? kok saya tidak nongol css nya.

Letak file CSS

March 17, 2009 by bitra, 2 years 20 weeks ago
Comment: 240

bitra's picture

CSS bisa diletakkan di root atau folder tersendiri.

Misalnya, instalasi root saya ada di:

c:/xampp/htdocs/ci/

Maka kalau CSS disimpan di root, file CSS harus ada di:

c:/xampp/htdocs/ci/namafile.css

ya iyalah, hehe...

Tapi yang paling penting agar CSS bisa "dipanggil" CI, adalah menambahkan item config di config.php.

Kalau CSS berada di root (sejajar dengan folder system dan user_guide), tambahkan baris berikut di file config.php:

$config['css'] = "namafile.css";

Kalau CSS disimpan di folder sendiri (misal nama foldernya namafolder), maka baris yang harus ditambahkan di file config.php adalah seperti ini:

$config['css'] = "namafolder/namafile.css";

Untuk memudahkan pencarian dan kustomisasi, baris tambahan sebaiknya ditulis pada akhir file config.php, sebelum baris ini:

/* End of file config.php */
/* Location: ./system/application/config/config.php */

Mudah-mudahan membantu...

Default nya base url itu

July 7, 2008 by Anonymous, 3 years 4 weeks ago
Comment: 42

Anonymous's picture

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

April 28, 2008 by Anonymous, 3 years 14 weeks ago
Comment: 18

Anonymous's picture

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???

September 14, 2008 by areeve, 2 years 46 weeks ago
Comment: 69

areeve's picture

wah mas desain css-nya kok masih g kliatan???
gmn cara biar bs nampilinnya??

cek ulang

December 16, 2008 by Runner0, 2 years 33 weeks ago
Comment: 160

Runner0's picture

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

April 17, 2008 by Anonymous, 3 years 15 weeks ago
Comment: 14

Anonymous's picture

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 .....!

April 19, 2008 by Anonymous, 3 years 15 weeks ago
Comment: 15

Anonymous's picture

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

sy bener-bener baru pake CI,

October 19, 2009 by alphidj, 1 year 41 weeks ago
Comment: 5684

alphidj's picture

sy bener-bener baru pake CI, css nya beneran nggak tampil yah???
mungkin ada script untuk header contoh diatas itu kepotong script headernya....

aq juga

February 2, 2010 by mangle, 1 year 26 weeks ago
Comment: 5873

mangle's picture

hal yg sama kurasakan..kenapa ya kira-kira?

Koq Belum tampil

December 10, 2008 by Anonymous, 2 years 34 weeks ago
Comment: 153

Anonymous's picture

The requested URL /CodeIgniter_1.7.0/userpage/userpage was not found on this server. Apanya yang salah ya mas

Udah tampil

December 11, 2008 by Anonymous, 2 years 33 weeks ago
Comment: 155

Anonymous's picture

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";

Premium Drupal Themes by Adaptivethemes