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.
$autoload['helper'] = array('url');
-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">
-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
tanya donk mas....
May 31, 2011 by novinaldi, 9 weeks 3 days ago
Comment: 8282
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
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
thanks
tanya link css
September 14, 2010 by yudisulistiyo, 46 weeks 3 days ago
Comment: 7118
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
Pastikan URL helper sudah diload sebelumnya.
Bisa diset autoload di autoload.php
thanks @syabac
September 15, 2010 by yudisulistiyo, 46 weeks 2 days ago
Comment: 7125
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
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
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
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
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
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
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
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
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
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
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
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
jalan koq
sama
November 4, 2008 by Anonymous, 2 years 39 weeks ago
Comment: 91
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
bos ko cssnya gak jalan
like that
January 20, 2010 by jamespas11, 1 year 28 weeks ago
Comment: 5856
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
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
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
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
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
coba akses begini http://localhost/ci/userpage
ngakses css tanpa base_url
May 9, 2008 by Anonymous, 3 years 12 weeks ago
Comment: 22
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
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
CSS bisa diletakkan di root atau folder tersendiri.
Misalnya, instalasi root saya ada di:
Maka kalau CSS disimpan di root, file CSS harus ada di:
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:
Kalau CSS disimpan di folder sendiri (misal nama foldernya namafolder), maka baris yang harus ditambahkan di file config.php adalah seperti ini:
Untuk memudahkan pencarian dan kustomisasi, baris tambahan sebaiknya ditulis pada akhir file config.php, sebelum baris ini:
Mudah-mudahan membantu...
Default nya base url itu
July 7, 2008 by Anonymous, 3 years 4 weeks ago
Comment: 42
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
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
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
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
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
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
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
hal yg sama kurasakan..kenapa ya kira-kira?
Koq Belum tampil
December 10, 2008 by Anonymous, 2 years 34 weeks ago
Comment: 153
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
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";