Anda di halaman 1dari 3

Menggabungkan Bootstrap dengan CodeIgniter

Slamet Budi Santoso, S.Kom.

Persiapan
Pada modul ini akan ditunjukkan proses menggabungkan template Bootstrap dengan aplikasi blog sederhana
yang telah dibuat pada pertemuan sebelumnya. Persiapkan beberapa hal berikut ini.

Pertama, unduh template Bootstrap yang akan digunakan. Misalnya, template sederhana yang ada di alamat
https://startbootstrap.com/template-overviews/bare/. Setelah terunduh, ekstrak ke dalam lokasi folder
CodeIgniter. Rename nama folder menjadi asset.

Kedua, buka file application/config/config.php dari folder CI. Kemudian konfigurasi baris berikut sesuai
dengan lokasi folder CI:

$config['base_url'] = 'http://localhost/belajarci/';

Ketiga, buka file application/config/autoload.php dan konfigurasi baris berikut menjadi seperti:

$autoload['helper'] = array('url');

Menyusun Template Bootstrap


Pada file template yang diunduh sebelumnya, telah terdapat sebuah file index.html yang dapat dijadikan
rujukan dalam menyusun struktur halaman web. Pada modul ini, template akan dibagi menjadi 2 (dua) bagian
yaitu v_atas dan v_bawah.

v_atas.php
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Bare - Start Bootstrap Template</title>
<!-- Bootstrap core CSS -->
<link href="<?php echo base_url(); ?>asset/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

<!-- Navigation -->


<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
<div class="container">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>

<!-- Page Content -->


<div class="container">
<div class="row">

v_bawah.php
</div>
</div>

<!-- Bootstrap core JavaScript -->


<script src="<?php echo base_url(); ?>asset/vendor/jquery/jquery.min.js"></script>
<script src="<?php echo base_url(); ?>asset/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

</body>
</html>

Memanggil Template dari Controller


Buka file application/controllers/Blog.php dan modifikasi fungsi index menjadi seperti berikut:
public function index(){
$query = $this->blog_model->semua();
$data['blogs'] = $query->result_array();

$this->load->view('v_atas');
$this->load->view('blog', $data);
$this->load->view('v_bawah');
}
Perhatikan skrip yang berwarna merah menunjukkan cara memanggil dan menyatukan template dengan view
yang berupa konten halaman.

View blog
Edit juga file application/views/blog.php menjadi seperti berikut:

<?php foreach ($blogs as $key => $blog): ?>


<h3 class="mt-3">
<a href="blog/detil/<?php echo $blog['url']; ?>">
<?php echo $blog['judul']; ?>
</a>
</h3>
<?php echo $blog['konten']; ?>
<?php endforeach; ?>

Hasilnya kurang-lebih akan tampak seperti berikut ini.

Praktik mandiri:
• Silahkan modifikasi fungsi dan view untuk menampilkan detil artikel.
• Atur agar menu navigasi Home terhubung dengan halaman blog yang menampilkan daftar artikel.