Pertemuan Ketiga CodeIgniter

Membuat Template di CodeIgniter Versi 2

Diketahui:

Saya menginstall CodeIgniter pada direktori hrd.

Setelah saya install, kemudian saya memanggilnya dengan alamat http://localhost/hrd/index.php

Maka akan tampil tampilan seperti berikut ini:

3.1 Pembuatan Template

Dalam Pembuatan template ini kita memanfaat template CSS yang gratisan dari internet.

3.1.1 Download dan Extract File

Downloadlah template CSS yang sudah tersedia dari internet yaitu http://www.freecsstemplates.org/preview/spontaneous

Gambar ini adalah gambar setelah file berhasil didownload.

Lalu Extractlah file hasil downloadan  didirektori my document

Maka dia akan menghasilkan direktori spontaneous dengan isi seperti dibawah ini:

3.1.2  Pengkopian File

Copy file index.html dan letakkan pada direktori  application/views  dan rubah namanya menjadi template.php

Lalu rubahlah kode pada file application/controllers/welcome.php  menjadi seperti berikut ini:

Keterangan:
Kita hanya merubah kode dari metode index().

$this->load->view(‘template’), kode ini berarti kita akan menampilkan file template.php.

Hasil:

Sekarang buka alamatmu dengan http://localhost/hrd/index.php/welcome maka akan menghasilkan seperti gambar dibawah ini:

Muncul Pertanyaan:

Hasilnya kenapa masih berantakan … ?

Jawaban:

Karena file CSS dan imagenya belum diload.

Buatlah folder css dan images dalam document rootmu seperti terlihat pada gambar dibawah ini:

Lalu copy file style.css dari template gratisan ke folder css.

Lalu copy juga semua isi folder images dari template gratisan ke dalam folder images.

3.1.3 Pengeditan Kode

Bukalah file application/views/template.php dan gantilah kode dibawah ini:

<link href=”style.css” rel=stylesheet” type=”text/css” media=”screen”>

Menjadi

<?php

$this->load->helper(‘HTML’);

echo link_tag(‘css/style.css’);

?>

Keterangan:

• $this->load->helper(‘HTML’), kode ini digunakan untuk meload helper ‘HTML’ dikarenakan kita akan menggunakan fungsi link_tag, dimana fungsi link_tag ini berada didalam helper ‘HTML’.
• echo link_tag(‘css/style.css’), kode ini berarti kita mengambil link ke file style.css yang terdapat dalam direktori dokumen_root/css/style.css.

Hasil:

Coba kamu buka kembali alamat http://localhost/hrd/index.php/welcome, ternyata templatenya sudah rapi tapi belum ada gambarnya.

Muncul Pertanyaan:

Bagaimana membuat gambarnya muncul … ?

Jawaban:

Lihat dalam file style.css dan ganti semua tulisan ‘images’ menjadi ‘../images’

Hasilnya:

Buka alamatnya kembali http://localhost/hrd/index.php/welcome dan gambarnya sudah muncul seperti terlihat dibawah ini: