Memakai Bootstrap 5 Di CodeIgniter 3

Pada artikel sebelumnya saya membahas tentang Base_url, kamu harus melakukan konfigurasi Base_url sebelum menggunakan Bootstrap di CodeIgniter. Bootstrap yang akan kita pakai adalah versi 5, itu versi terbaru saat ini.

Source Code Akan Saya Sediakan Di bawah

Sebelum menggunakan Bootstrap pastinya kamu harus sudah punya CodeIgniter yang siap di pakai. buka website Bootstrap di sini : https://getbootstrap.com/

img

kemudian klik pada menu Download. Lalu cari Compiled CSS and JS kemudian klik Download. kita akan menggunakan bootstrap dengan resource bootstrap 5, jadi tidak memakai CDN.

img

Konfigurasi

Extract file bootstrap tersebut kedalam folder codeigniter, dan ubah namanya menjadi assets. di dalam folder assets pastinya terdapat folder CSS yang berisi kumpulan CSS dari Bootstrap, dan folder JS yang berisi kumpulan JavaScript dari Bootstrap.

Karena kita akan menggunakan local file, maka kita harus melakukan konfigurasi Base_Url. saya sudah menulisnya di artikel sebelumnya.

Tag HTML dasar untuk menggunakan Bootstrap seperti ini

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello, world!</title>
  </head>
  <body>
	
  </body>
</html>

Kita akan panggil Bootstrap.min.css dan bootstrap.bundle.js dengan Base_Url. Pemanggilanya seperti ini

<link rel="stylesheet" href="<?php echo base_url("assets/css/bootstrap.min.css")?>">
<script src="<?php echo base_url("assets/js/bootstrap.bundle.js")?>"></script>

Pastikan Folder dan filenya sudah benar. dimana kedua tag tersebut ditempatkan ? lihat kode di bawah secara lengkap

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="<?php echo base_url("assets/css/bootstrap.min.css")?>">
    <title>Hello, world!</title>
  </head>
  <body>
	
    <script src="<?php echo base_url("assets/js/bootstrap.bundle.js")?>"></script>
  </body>
</html>

Jika pemanggilan filenya berhasil, maka bootstrap sudah bisa digunakan.

Example

Kita akan coba menggunakan Bootstrap di codeigniter

pada bagian view application/views buat sebuah file baru yaitu home.php. isi dengan kode berikut

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 	<link rel="stylesheet" href="<?php echo base_url("assets/css/bootstrap.min.css")?>">
    <title>Hello, world!</title>
  </head>
  <body>
	<div class="container py-5">
		<div class="bg-dark text-secondary px-4 py-5 text-center">
			<div class="py-5">
				<h1 class="display-5 fw-bold text-white">RizkyDev</h1>
				<div class="col-lg-6 mx-auto">
				<p class="fs-5 mb-4">Codeigniter 3 and Bootstrap 5</p>
				<div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
					<a href="https://github.com/rizkytegar" type="button" class="btn btn-outline-info btn-lg px-4 me-sm-3 fw-bold">Github</a>
				</div>
				</div>
			</div>
		</div>
	</div>
  <script src="<?php echo base_url("assets/js/bootstrap.bundle.js")?>"></script>
  </body>
</html>

lihat gambar di bawah agar lebih jelas

img

Lalu buat sebuah Controller baru dengan nama Home.php. isi dengan kode berikut

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

class Home extends CI_Controller {

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

Saat kita akses di browser maka hasilnya akan seperti ini

img

Bootstrap sudah bisa digunakan, untuk source code tutorial ini bisa lihat di github saya.

Source Code