Codeigniter

Tutorial Memasang Bootstrap pada CodeIgniter 3

Kalau teman-teman ingin mengikuti seri CodeIgniter 3 ini dari awal bisa dibaca kembali pada Berkenalan dengan Web Framework CodeIgniter!. Bootstrap merupakan sebuah framework berbasis open source atau gratis. Untuk penjelasan lebih lengkapnya dapat dilihat pada Bootstrap 4 : Tutorial.

Bootstrap ini sangat penting bagi setiap pengembang aplikasi baik itu pengembang aplikasi berbasis website maupun mobile untuk memperindah tampilan User Interface (UI).

Keuntungan Menggunakan Bootstrap Untuk Aplikasi

  • Lebih meminimalkan terjadinya bug atau error antar browser yang berbeda.
  • Kerangka kerja lebih konsisten dalam mendukung permasalahan compatibility atau kompatibilitas pada CSS.
  • Sangat ringan dan dapat disesuaikan.
  • Memiliki struktur dan tipe yang responsive.
  • Beberapa plugins dari JavaScript menggunakan jQuery.
  • Memiliki dokumentasi yang rapi dan baik serta banyak dukungan dari komunitas.
  • Memiliki banyak template yang gratis dan profesional.
  • Sistem Grid atau lebih mudah diartikan dengan pemotongan bagian-bagian pada bootstrap sangat baik.

Kerugian Menggunakan Bootstrap untuk Aplikasi

  • Akan terdapat banyak persyaratan untuk mengganti style atau dapat menulis ulang file yang menyebabkan banyak waktu yang dihabiskan untuk merancang dan membuat kode untuk situs web jika desain cenderung menyimpang dari desain biasa yang digunakan pada Bootstrap.
  • Kita harus bekerja ekstra sambil membuat desain, kalau tidak maka semua situs web akan terlihat sama jika tidak melakukan banyak penyesuaian.
  • JavaScript terikat dengan jQuery yang merupakan salah satu pustaka paling umum dan membuat sebagian besar plugin tidak digunakan.

Menggabungkan Bootstrap pada CodeIgniter 3

Kalau teman-teman sudah membaca mengenai keuntungan dan kerugian dalam menggunakan Bootstrap, maka kita akan menjelaskan mengenai cara untuk dapat menggabungkan Bootstrap pada CodeIgniter 3.

1. Download Bootstrap

Langkah pertama adalah kita harus mendownload bootstrap terlebih dahulu yang dapat didownload disini.

2. Konfigurasi pada project CodeIgniter 3

  • Ekstrak file Bootstrap

Setelah kita berhasil mendownload folder bootstrap, maka selanjutnya kita dapat membuat sebuah folder baru pada project (webroot), kalau teman-teman masih bingung mengenai webroot dapat membaca kembali pada Membuat Aplikasi Hello World pada CodeIgniter 3. Pada webroot ini kita beri nama folder tersebut assets, kemudian kembali lagi pada file bootstrap yang telah didownload sebelumnya dan lakukan ekstrak file bootstrap tersebut ke dalam folder assets. Maka direktorinya akan menjadi tutorialCI/assets.

Mendownload jQuery

Disini kita juga membutuhkan jQuery agar JavaScript yang terdapat pada Bootstrap dapat berjalan dengan optimal. jQuery disini dapat didownload langsung pada situs jQuery disini.

Setelah selesai mendownload file jQuery maka langsung saja meletakkan file tersebut pada folder assets/js/.

Contoh Penggunaan Bootstrap pada View di CodeIgniter 3

Disini akan kami berikan contoh sederhana menggunakan Bootstrap pada CodeIgniter 3, kalau teman-teman mengikuti seri Membuat Aplikasi Hello World pada CodeIgniter 3 sebelumnya maka akan menemukan file View dengan nama word_view.php.

Maka langkah selanjutnya adalah kita dapat mengganti isi dari kode didalam word_view.php menjadi 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title><?php echo $title;?></title>
    <!-- ini bagian dari load bootstrap file css -->
    <link href="<?php echo base_url('assets/css/bootstrap.min.css');?>" rel="stylesheet">
    <!-- selesai load bootstrap css file -->
 
  </head>
  <body>
 
    <div class="container">
      <div class="jumbotron jumbotron-fluid">
        <div class="container">
          <h1 class="display-4"><?php echo $content;?></h1>
          <p class="lead">Tutorial CodeIgniter 3 Dosen IT</p>
        </div>
      </div>
    </div>
 
    <!-- ini bagian load jquery file js -->
    <script src="<?php echo base_url('assets/js/jquery.min.js');?>"></script>
    <!-- selesai load bootstrap js file -->
    <script src="<?php echo base_url('assets/js/bootstrap.min.js');?>"></script>
  </body>
</html>

Kembali lagi kita dapat memanggil controller Word.php pada browser dengan cara menuliskan alamat localhost/tutorialCI/word maka akan terdapat perbedaan dari sebelumnya dengan tambahan background dari hasil bootstrap. Kita tidak perlu membuat kode css untuk memberikan style pada suatu halaman website karena beberapa sudah dilakukan oleh Bootstrap.

Contoh lainnya adalah kita ingin membuat sebuah tabel yang menarik, maka kita tidak perlu menuliskan kode CSS untuk memberikan style pada tabel yang akan dibuat. Namun kita dapat langsung memiliki sebuah tabel yang menarik dan baik untuk dilihat.

Oke, kita lihat kembali file word_view.php kemudian dapat diubah menjadi 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title><?php echo $title;?></title>
    <!-- ini bagian load bootstrap css file -->
    <link href="<?php echo base_url('assets/css/bootstrap.min.css');?>" rel="stylesheet">
    <!-- selesai load bootstrap css file -->
  </head>
  <body>
 
    <div class="container">
      <h1><?php echo $content;?></h1>
      <table class="table table-striped">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">Pertama</th>
            <th scope="col">Kedua</th>
            <th scope="col">Ciri</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Andre</td>
            <td>Budi</td>
            <td>Gemuk</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Bunga</td>
            <td>Sakura</td>
            <td>Kurus</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Sandy</td>
            <td>Ari</td>
            <td>Tinggi</td>
          </tr>
        </tbody>
      </table>
 
    </div>
 
    <!-- ini bagian load jquery js file -->
    <script src="<?php echo base_url('assets/js/jquery.min.js');?>"></script>
    <!-- ini bagianload bootstrap js file -->
    <script src="<?php echo base_url('assets/js/bootstrap.min.js');?>"></script>
    <!-- selesai load bootstrap css file -->

  </body>
</html>

Setelah kita ganti kemudian buka kembali browser dan menulis kembali alamat localhost/tutorialCI/word, akan terlihat sebuah tabel yang menarik tanpa harus banyak menulis kode CSS.


Bagus Dharma Iswara

Share
Tags: BootstrapCICodeIgniter