Cara menggunakan Bootstrap di CodeIgniter

Ditulis Oleh:

Hallo sahabat programmer, kali ini saya membahas cara menggunakan bootstrap di codeigniter. Setelah sebelumnya saya sudah membahas penggunaan bootstrap namun belum di integrasikan ke codeigniter. Buat teman-teman pemula yang baru belajar codeigniter pasti ingin belajar untuk mengintegrasikan kedua framework ini.

Seperti yang kita ketahui bootstrap merupakan framework CSS yang populer saat ini, sudah banyak website profesional yang menggunakannya. Selain karena banyak manfaat yang didapatkan, juga karena kemudahan dalam penggunannya.

Baca juga : Cara membuat CRUD di CodeIgniter

Bila kita seorang programmer yang tidak begitu ahli dalam hal mendesain tampilan web yang berhubungan dengan css dan javascript, maka Bootstrap adalah solusinya. Dengan menggunakan bootstrap hal-hal yang berhubungan dengan style komponen dan tampilan bisa kita buat dengan mudah.

Saya sendiri bila mengembangkan web dengan codeigniter, bootstrap merupakan framework wajib yang saya gunakan. Buat kalian yang baru saja belajar codeigniter, Kalian perlu mengintegrasikan bootstrap kedalam projek aplikasi codeigniter. Ikuti langkah-langkah berikut ini untuk cara integrasi bootstrap dengan codeigniter.

Download Bootstrap

Untuk menggunakan bootstrap di codeigniter kalian perlu download dulu boostrapnya terlebih dahulu. Bagaimana cara mendownloadnya saya dusah membahas hal ini pada postingan cara menggunakan bootstrap. Ikuti petunjuk yang saya berikan step by step pada postingan tersebut.

Bila teman-teman ingin langsung mendownload bootstrap klik disini

Integrasikan Bootstrap ke CodeIgniter

Setelah kita berhasil mendownload bootstrap selanjutnya kita integrasikan dengan codeigniter . Ikuti langkah-langkah berikut

Buat sebuah folder dengan nama assets pada projek codeigniter kita

membuat folder assets di codeigniter

Bila kalian sudah mengikuti langkah-langkah untuk download bootstrap pada artikel yang saya berikan link diatas, selanjutnya ekstrak file tersebut kedalam folder assets yang telah kita buat

ekstrak file bootstrap pada codeigniter

berikut hasil ekstrak file bootstrap

Untuk memudahkan kita nantinya kita rename nama folder tersebut dari bootstrap-4.3.1-dist menjadi bootstrap. Hal ini untuk supaya menyederhanakan saja nama foldernya.

Tahap instalasi sudah selesai selanjutnya kita coba untuk menggunakannya. Caranya buat sebuah controller dengan nama Bootstrap.php pada bagian controller.

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

class Bootstrap extends CI_Controller {

	function index()
	{
		$this->load->view('v_bootstrap');
	}

}
?>

Selanjutnya kita coba membuat sebuah view sederhana dengan nama v_bootstrap.php pada bagian view

<!DOCTYPE html>
<html>
<head>
 <!-- Load file CSS Bootstrap offline -->
<link rel="stylesheet" href="<?php echo base_url()?>/assets/bootstrap/css/bootstrap.min.css">
  <script src="<?php echo base_url()?>/assets/bootstrap/js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
  <h1>Halaman HTML dengan bootstrap offline</h1>
  <p>Halaman ini responsive untuk semua jenis perangkat</p> 
</div>
  
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Kolom pertama</h3>
      <p>Paragraf pertama</p>
      <p>Paragraf kedua</p>
    </div>
    <div class="col-sm-4">
      <h3>Kolom kedua</h3>
    <p>Paragraf pertama</p>
      <p>Paragraf kedua</p>
    </div>
    <div class="col-sm-4">
      <h3>Kolom ketiga</h3>        
      <p>Paragraf pertama</p>
      <p>Paragraf kedua</p>
    </div>
  </div>
</div>

</body>
</html> 

Pehatikan pada bagian <head>

<head>
 <!-- Load file CSS Bootstrap offline -->
<link rel="stylesheet" href="<?php echo base_url()?>/assets/bootstrap/css/bootstrap.min.css">
  <script src="<?php echo base_url()?>/assets/bootstrap/js/jquery-3.3.1.min.js"></script>
</head>

disini kita meload file css bootstrap yang telah kita simpan pada folder assets/bootstrap.

Uji Coba

Sekarang kita coba jalankan controller bootstrap

http://localhost/akademik/bootstrap

Maka hasilnya akan seperti dibawah ini

menggunakan bootstrap di codeigniter berhasil

Selesai sudah tutorial kali ini mengenai cara menggunakan bootstrap di codeigniter. Semoga bisa membantu teman-teman semua yang sedang belajar bootstrap dan codeigniter.

Setiawan Dimas

Interested on Programming, especially on Website Developping.
Have a bachelor degree from STIMIK Akakom Yogyakarta, majoring in Technical Information.
Focus on Content Writer Programming Website and Internet Marketing
Setiawan Dimas