Mengintegrasikan Bootstrap dengan CodeIgniter

Example blog post alt

Codeigniter | 2018-05-21

CodeIgniter merupakan aplikasi sumber terbuka yang berupa framework PHP dengan model MVC (Model, View, Controller) untuk membangun website dinamis dengan menggunakan PHP. CodeIgniter memudahkan developer untuk membuat aplikasi web dengan cepat mudah dibandingkan dengan membuatnya dari awal. CodeIgniter dirilis pertama kali pada 28 Februari 2006. Versi stabil terakhir adalah versi 3.0.4.

Bootstrap adalah sebuah framework CSS yang dapat digunakan untuk mempermudah membangun tampilan situs website. Bootstrap pertama kali dikembangkan oleh Mark Otto dan Jacob Thornton pada pertengahan tahun 2010 di Twitter. Bootstrap dikembangkan secara open source dengan lisensi MIT.

Bootstrap telah menyediakan banyak sekali class-class CSS dan Plugin Javascript siap pakai yang dapat membantu mempermudah Kita dalam membuat halaman website. Karena kemudahan penggunaan, banyaknya komponen dan kelengkapan dokumentasinya, saat ini Bootstrap menjadi salah satu front-end framework yang paling banyak digunakan di dunia.

Langkah langakah mengintegrasikan bootstrap dengan codeigniter, perlu disiapkan beberapa hal di bawah ini :

1. CodeIgniter, unduh di CodeIgniter.

2. Bootstrap, unduh di Bootstrap.

3. XAMPP

#Step 1

Buat folder baru di htdocs, nama folder sesuaikan dengan kebutuhan masing masing.

#Step 2

Extract codeigniter yang telah di download tadi kedalam folder yang telah kita buat, seperti gambar di bawah ini :

#Step 3

Buat folder di dalam folder yang berisikan hasil extract codeigniter sebelumnya, folder kita beri nama bootstrap, seperti gambar di bawah ini :

#Step 4

Copykan isi dari bootstrap yang telah kita download tadi kedalam folder bootstrap yang telah dibuat sebelumnya yaitu css, js, font , seperti gambar di bawah ini :

#Step 5

Sekarang kita lakukan configurasi terhadap codeigniternya, yaitu yang terletak pada application/config/config.php yaitu 

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

Selanjutnya kita lakukan load terhadap url, karena codeigniter merupakan metode MVC, terletak pada application/config/autoload.php yaitu

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

#Step 6

Langkah selanjutnya kita lakukan pemanggilan link rel dan script src untuk bootstrap, application/views/welcome_massage.php

Script yang ada pada welcome_massage.php di rubah menjadi :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Welcome to CodeIgniter</title>
	<link rel="stylesheet" href="<?php echo base_url(); ?>lesson3/bootstrap/css/bootstrap.css">
	<script src="<?php echo base_url(); ?>lesson3/bootstrap/js/jquery.js"></script>
	<script src="<?php echo base_url(); ?>lesson3/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
	<div class="row">
		<div class="col-sm-4">
			<h2 class="page_header">Welcome To CodeIgniter</h2>
			<form>
				<div class="form-group">
					<label>Nama</label><br>
					<input type="text" class="form-control" placeholder="Nama Lengkap">
					<label>Alamat</label><br>
					<textarea type="text" class="form-control" cols="40" rows="5" placeholder="Alamat"></textarea>
					<label>Tempat Lahir</label><br>
					<input type="text" class="form-control" placeholder="Tempat Lahir">
					<label>Tanggal Lahir</label><br>
					<input type="date" class="form-control" placeholder="Tanggal Lahir"><br>
					<button class="btn btn-danger" type="submit">Simpan</button>
				</div>	
			</form>
		</div>	
	</div>
</div>
</body>
</html>

Sehingga hasil yang akan diperoleh seperti di bawah ini :

Sehingga hasilnya lebih dinamis dan responsive. Demikian cara mengintegrasikan bootstrap dan codeigniter, semoga bermanfaat.

Download Aplikasi