Membuat Template

Diketahui:

Saya menginstall CodeIgniter pada direktori hrd.

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

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

 

Download dan Extract File

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

Lalu Extractlah file hasil downloadan  ke direktori my document  

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

 

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:

<?php  defined(''BASEPATH'')  OR exit(''No direct script access allowed'');

 

class Welcome extends CI_Controller {

public function index()

{

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

}

}

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.

 

Cara Merapihkannya

Copylah folder images dari templatemu ke document rootmu yaitu ke folder htdocs/hrd

Buatlah folder css dalam document rootmu lalu copy file style.css dari templatemu dan masukkan ke folder css tersebut.

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:

 

Penutup

Sekian dan terima kasih.

2016 © Fahmi Basya Kartapura