Memadukan Template CSS di CodeIgniter Versi 2

Ini merupakan pertemuan pertama kali dalam membahas CodeIgniter. Dalam tutorial kali ini saya coba membahas bagaimana memasang sebuah template gratis yang sudah di download dan ingin dipasang dalam CodeIgniter.

Disini saya menggunakan CodeIgniter 2.1.2. Sebenarnya dalam pemasangan template ini sama seperti biasanya mungkin agak beda ya pada link nya doank…

Oke panjang lebar lagi mari……???

Download CodeIgniter 2.1.2
Download Template CSS nya (Kan banyak yang gratisan)
Install CI pada direktori absensi
Buka dari browser http://localhost/absensi
lalu tampil seperti ini

Pertanyaan:

bagaimana saya membuat template codeigniter?

Jawaban:

1. dengan membuat file dalam direktori application/views, misalkan nama filenya tampilan.php

2. dengan membuat kode pada metode index dari controller default untuk menampilkan template kita

Contoh:

1. download template css dari http://www.freecsstemplate.org/preview/spontaneous

2. setelah itu extract filenya dan rubahlah index.html menjadi tampilan.php dan letakkan di direktori application/views

3. lalu rubahlah kode index pada file welcome.php didalam direktori application/controllers untuk menampilkan template tampilan.php seperti berikut ini:

public function index()

{

$this->load->view('tampilan');

}

4. saya coba akses web saya lagi http://localhost/absensi dan ternyata hasilnya berantakan seperti terlihat pada gambar dibawah ini:

muncul pertanyaan:

kenapa bisa berantakan??

jawaban:

karena file css dan imagenya belum di upload

buatlah folder css dan images dalam dokumen rootmu, kalau saya dalam direktori absensi seperti terlihat pada gambar dibawah ini:

letakkan file style.css dalam direktori css

lalu edit file tampilan.php dan rubahlah kode dalam tag <head> dan </head>, yaitu kode berikut ini:

pindahkan isi dari folder images spontaneus dan masukkan ke dalam folder images yang terletak di document rootmu

hasilnya:

saya akses web saya lagi http://localhost/absensi dan ternyata templatenya sudah rapi tapi gambarnya tidak ada.

muncul pertanyaan:

gimana caranya agar gambarnya muncul??

jawaban:

1. lihat dalam file style.css dan cari kata url(images/contoh_gambar.jpg)

2. karena file style.css berada dalam direktori css maka jika dia mau mengakses folder images haruslah berbentuk seperti ../images.

3. untuk itu kata url(images/contoh_gambar.jpg) harus diganti dengan url(../images/contoh_gambar.jpg)

hasilnya:

setelah saya akses web saya http://localhost/absensi maka templatenya sudah jadi seperti terlihat pada gambar dibawah ini:

muncul pertanyaan:

template diatas terdiri dari:

1. header

2. menu navigasi

3. sisi kiri

4. isi

5. footer

bagaimana caranya agar pada saat saya mengklik menu navigasi maka yang berubah hanya isinya saja sedangkan header, menu navigasi, sisi kiri dan footernya tetap sama?

misalnya:

menu atas yaitu blog dirubah menjadi tambah siswa, dimana jika di klik akan menampilkan form tambah siswa seperti form dibawah ini:

buatlah form diatas dan simpan dengan nama tambahsiswa.php di folder application/views

jawaban:

membuat header.php

buka file tampilan.php

lalu cut kode dari

lalu simpan sebagai header.php dalam folder application/views

Membuat Isi

Buka file tampilan.php
Lalu cut kode dibawah

<div id=“content”> dan diatas kode
</div>
<!– end #content –>

Lalu simpan menjadi tengah.php dan letakkan dalam direktori application/views.

Membuat Sisi Kiri

Buka file tampilan.php
Lalu cut kode dari

<div id=”sidebar”> sampai
<!– end #sidebar –>

Lalu simpan sebagai kiri.php dalam direktori application/views.

Membuat Footer

Buka file tampilan.php
Lalu cut kode dari

<div id=”footer-bgcontent”> sampai
<!– end #footer –>

Lalu simpan sebagai footer.php dan letakkan dalam direktori application/views.

Membuat Template

Buka file tampilan.php
Lalu rubahlah kode diantara tag <body> dan </body> menjadi seperti berikut ini:

<div id=”wrapper”>
<?php echo $this->load->view(‘header’);?> <div id=”page”>
<div id=”page-bgtop”>
<div id=”content”>
<?php echo $this->load->view($isi);?>
</div>
<!– end #content –>
<?php echo $this->load->view(‘kiri’);?>
<div style=”clear: both;”> </div>
</div>
</div>
<!– end #page –>
<div id=”footer-bgcontent”>

<?php echo $this->load->view(‘footer’);?>

</div>

Setelah itu simpan dengan nama template.php

Menampilkan Template

Pada controller welcome rubahlah menjadi

<?php class Welcome extends CI_Controller {
public function index()
{
$isi['isi']=’tengah’;
$this->load->view(‘template’,$isi);
}

Setelah itu akseslah melalui browser http://localhost/absensi
Lihat apakah templatenya tetap seperti semula… ?

Merubah Menu Navigasi Blog menjadi Tambah Siswa

Untuk menampilkan Form Tambah Siswa saya mempunyai satu Controller bernama siswa.php dengan metode yaitu
tambahSiswa seperti kode dibawah ini:

<?php class Siswa extends CI_Controller {
public function tambahSiswa() {
}
?>

Buka file header.php lalu ganti kode

Menjadi

</li><?php echo anchor(“siswa/tambahSiswa”,”Tambah Siswa”);?></li>

Lalu akses webmu melalui browser http://localhost/absensi
Lihat apakah menu Blog sudah berubah menjadi Tambah Siswa … ?

Menampilkan Form Tambah Siswa

Untuk menampilkan Form tambah siswa didalam template maka kamu tambahkan kode berikut ini:

public function tambahSiswa() { $isi['isi']=’tambahSiswa’;
$this->load->view(‘template’,$isi);
}

Lalu akseslah webmu melalui browser http://localhost/absensi.
Lalu klik menu Tambah Siswa, apakah Form Tambah Siswa ditampilkan dengan benar … ?

Sumber : http://a2fahmi.com/?p=1544

4 comments:

chord frenzy said...: nice; September 8, 2012 at 10:08 AM
Anonymous said...: inikan artikel di blog http://a2fahmi.com/?p=1544; December 18, 2012 at 10:45 PM
Unknown said...: maaf mas,,template saya kan pake slider,, tapi kok gak muncul ya??
gambarnya sih udah bisa muncul.; April 22, 2014 at 9:18 PM
chord frenzy said...: @eko setiawan : coba mas Menggunakan jquery thickbox pada saat proses crud.. download dlu thicbox; April 22, 2014 at 10:17 PM

ukm news