Untuk artikel ini, saya masih melanjutkan artikel selanjutnya, yaitu mengenai Codeigniter dengan HMVC. Namun pada artikel kali ini lebih mengutamakan pembuatan tampilan website tersebut dengan memanfaatkan Bootstrap 3.
Bootstrap merupakan salah satu CSS framework yang paling populer di dunia. Karena kemudahan penggunaan serta hasil tampilannya yang cukup memuaskan. Oleh karena itu kali ini saya akan membahas cara pemasangannya di Codeigniter HMVC.
1. Download dahulu file Codeigniter HMVC di sini atau anda bisa baca tutorial penggunaannya di artikel ini : Membuat Codeigniter Menjadi HMVC [Codeigniter]
2. Kemudian download Bootstrap 3 di sini
3. Taruh folder Codeigniter HMVC di htdoct
4. Buka dan buat folder assets sejajar dengan application
5. Buka file autoload.php di folder application/config/ dan cari :
$autoload['helper'] = array();
ubah menjadi
$autoload['helper'] = array('url');
6. Buka file config.php di folder application/config/ dan cari :
$config['base_url']
dan ubah menjadi
$config['base_url'] = ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == "on") ? "https" : "http");
$config['base_url'] .= "://".$_SERVER['HTTP_HOST'];
$config['base_url'] .= str_replace(basename($_SERVER['SCRIPT_NAME']),"",$_SERVER['SCRIPT_NAME'])."/";
Ket : Konfigurasi ini membuat base_url di Codeigniter menjadi dinamis
7. Buka folder modules dan buat struktur folder seperti di bawah ini :
8. Buka folder application/modules/home/controllers/ dan buat file home.php lalu isikan sebagai berikut :
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class home extends CI_Controller {
public function index()
{
$data['content'] = 'home/home';
$this->load->view('skin/header',$data);
$this->load->view('skin/body',$data);
}
- Keterangan : content akan di simpan dalam array $data dan di kirimkan ke skin/header danskin/body
9. Buka folder application/modules/home/views/ dan buat file home.php lalu isikan sebagai berikut :
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
<button type="button" class="btn btn-primary">Primary</button>
<h1>Sekian Artikel Pemasangan Bootstrap 3 di Codeigniter</h1>
10. Buka folder application/modules/skin/views/ dan buat file body.php lalu isikan sebagai berikut :
<body>
<?php
$this->load->view($content);
?>
</body>
</html>
Keterangan : $content adalah array variabel yang dikirim dari controler home.php
11. Buka folder application/modules/skin/views/ dan buat file header.php lalu isikan sebagai berikut :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Codeigniter Bootstrap 3</title>
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>assets/css/bootstrap.css">
<script type="text/javascript" src="<?php echo base_url();?>assets/js/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>assets/js/bootstrap.min.js"></script>
</head>
12. Nah silahkan akses file codeigniter anda pada sebuah browser, jika berhasil akan muncul tampilan seperti berikut :
Orang bijak tinggalkan koment
