coba coba Template -> CI


Kronologis

  1. Saya menginstall CodeIgniter pada direktori absensi.
  2. Setelah saya install, kemudian saya memanggilnya melalui browser http://localhost/absensi
  3. Lalu tampil tampilan  seperti ini:

tampilanawal

Pertanyaan:

Bagaimana saya membuat template di CodeIgniter … ?

Jawaban:

  1. Dengan membuat file dalam direktori system/application/views, misalkan nama filenya tampilan.php
  2. Dengan membuat kode pada metode index dari Controller default untuk menampilkan template kita.

Contoh:

1. Download file template css dari http://www.freecsstemplates.org/preview/spontaneous

2. Setelah itu extract filenya dan rubahlah index.hml menjadi tampilan.php dan letakkan di direktori

system/application/views

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

function index()
{
$this->load->view(‘tampilan’);
}

4. Saya coba akses web saya lagi http://localhost/absensi dan ternyata hasilnya berantakan.

Muncul Pertanyaan :

Kenapa bisa berantakan … ?

Jawaban:

Karena file css dan imagenya belum diload:

  1. Letakkan file style.css dalam direktori pada direktori css di dokuemen root yaitu didrektori absensi diluar direktorisystem.
  2. Lalu edit file tampilan.php dan masukkan kode <link href=“<?=base_url();?>css/style.css” rel=“stylesheet”type=“text/css” / > di antara tag <head>, kode base_url() ini merujuk ke dokumen root website kita (kamu bisa melihat konfigurasinya pada file system/application/config.php.

 

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.


Muncul Pertanyaan:

Template diatas terdiri dari :

  • Header
  • Menu Navigasi
  • Sisi kiri
  • Isi
  • 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 diklik akan menampilkan form tambah siswa seperti form dibawah ini:

FORM TAMBAH SISWA
NIS  
Nama Siswa  
Alamat  
No. Telpon  
 

Buatlah form diatas dan simpan dengan nama tambahSiswa.php di folder views.

Jawaban:

Membuat header.php

Buka file index.html

Lalu ambil kode dari

<div id=“logo”>

sampai

<!– end #header-wrapper –>

Lalu simpan sebagai header.php

Membuat Isi

Buka file index.html

Lalu simpan kode dibawah

<div id=“content”>

dan diatas kode

</div>
<!– end #content –>

Lalu simpan menjadi tengah.php

Membuat Sisi Kiri

Buka file index.html

Lalu ambil kode dari

<div id=”sidebar”>

sampai

<!– end #sidebar –>

Lalu simpan sebagai kiri.php

Membuat Footer

Buka file index.html

Lalu ambil kode dari

<div id=”footer-bgcontent”>

sampai

<!– end #footer –>

Lalu simpan sebagai footer.php

Membuat Template

Buka file index.html

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;”>&nbsp;</div>
</div>
</div>
<!– end #page –>

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

function Welcome()
{
parent::Controller();
}

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 controller {

function Siswa() {
parent::controller();
}

function tambahSiswa() {

}

?>

Buka file header.php lalu ganti kode

<li><a href=”#”>Blog</a></li>

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:

 

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

  • Letakkan folder images dalam dokumen root yaitu pada direktori absensi diluar direktori system
  • coba coba Template -> CI

    3 thoughts on “coba coba Template -> CI

      1. diazscript says:

        ini saya bermain di widget-nya :: saya ambil widget->text :: disana banyak celahnya buat menaruh images dengan style css sendiri ::

        masukkan style html sederhana😀

    1. zaqsa says:

      Gan, ane udah coba artikelnya. koq error ya. apanya yang salah. mohon petunjuk gan.
      error nya : Fatal error: Class ‘Controller’ not found in D:\AppServ\www\absensi\application\controllers\welcome.php on line 3

      error itu muncul pada saat saya mencoba menampilkan template.

    Leave a Reply

    Fill in your details below or click an icon to log in:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out / Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out / Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out / Change )

    Google+ photo

    You are commenting using your Google+ account. Log Out / Change )

    Connecting to %s