30 Nov 2013

Menggabungkan CSS dengan Codeigniter

Setelah anda mempelajari MVC pada artikel sebelumnya, sekarang kita akan menggabungkan codeignit... thumbnail 1 summary


Setelah anda mempelajari MVC pada artikel sebelumnya, sekarang kita akan menggabungkan codeigniter dengan css file, ini juga berlaku untuk gambar, javascript atau yang dirasa perlu. Jika belum tau artikel sebelumnya, lihat dulu di sini .Gunakan file download pada artikel tersebut dan seterusnya hingga artikel codeigniter ini selesai

Untuk kasus awal, kita akan membuat eksternal file pada 1 folder web. Buatlah folder baru dengan nama assets pada main folder ( 1 folder dengan index.php) . Contoh untuk pakai XAMPP adalah :
c:\xampp\htdocs\belajarci\assets
Masukkan css file bootstrap.css yang dapat anda download di sini

Jadi bentuk foldernya jadi :
assets
   -----> bootstrap.css
application
system
index.php

Oke, sebelumnya ubah file konfigurasinya (application/config/config.php) . Ubah $config['base_url'] menjadi $config['base_url'] = 'http://localhost/belajarci/'

Lalu buka controller home (application/controllers/home.php) dan tambahkan kode :
$this->load->helper("url")

Setelah selesai edit dan menyimpan perubahan di atas, bukalah views utama.php (application/views/utama.php)
Hapus teks semua dan tambahkan kode di bawah ini :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS</title>
<link href="<?=base_url();?>assets/bootstrap.css" rel="stylesheet" />
</head>
<body>
<h4>Menggabungkan CSS dengan CI</h4>
<button class="btn btn-success">Tes Button Bootstrap</button>
</body>
</html>

Penjelasan :
- $this->load->library("url") menambahkan fungsi-fungsi URL codeigniter (bisa dilihat pada dokumentasi)
- Lalu, apakah setiap controller harus menambahkan library tersebut?
Anda bisa membuatnya menjadi berjalan otomatis, ikuti petunjuk dibawah ini :
edit file autoload.php (application/config/autoload.php) , lalu tambahkan url pada config helper
$autoload['helper'] = array('url');
Sekarang anda tidak memerlukan inisialkan $this->load->library("url") setiap controller.

- Pada view utama.php jika tidak memakai base_url() masih bisa jalan kok CSS nya.
Untuk index seperti controller sih masih bs, cuma nanti jika ada segment  http://localhost/belajarci/index.php/login/user atau http://localhost/belajarci/home/login, maka akan dibawah folder pada segment 1, jadinya error css nya.

Apa itu segment? seperti anda pernah liat index.php?hal=artikel&kode=111
hal adalah segment 1
kode adalah segment 2
Jadi, untuk lebih bagusnya pakailah htaccess untuk mempercantik url website anda