Penggunaan Bootstrap pada CodeIgniter
Bootstrap adalah sebuah framework CSS yang dapat digunakan untuk pengembangan front-end website.
Untuk menggunakan bootstrap silahkan kunjungi situs resminya, yaitu https://getbootstrap.com kemudian klik tombol “Download”.
Jika proses download sudah selesai silahkan ekstrak file ZIP tersebut dan masukan ke dalam folder public dalam projek Anda, untuk lebih jelasnya perhatikan gambar berikut:
Cara menggunakan bootstrap dapat dilihat pada dokumentasi resmi situs https://getbootstrap.com
Di dalam paket Bootstrap yang sudah di download sudah terdapat Popper, namun tidak untuk JQuery, oleh karenanya silahkan download JQuery dari situs resminya yaitu: https://jquery.com
Karena Bootstrap yang digunakan pada materi ini adalah versi 4.5.2 (versi terbaru pada saat materi ini disusun) maka JQuery yang harus di download adalah versi 3.5.1
Klik kanan pada link yang ada, kemudian pilih menu “Save link as…” simpanlah file JQuery tersebut ke dalam folder “public/bootstrap” pada projek Anda.
Untuk melihat apakah Bootstrap sudah dapat digunakan pada projek Anda silahkan modifikasi View dengan nama file index.php agar tampak seperti baris kode berikut:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css"> <title><?php echo WEB_TITLE; ?></title> </head> <body> <div class="container"> <div class="jumbotron"> <h1> <?php echo WEB_TITLE; ?> | <?php echo WEB_TAGLINE; ?> </h1> </div> <div class="row"> <div class="col-sm"> <pre> <?php print_r($post['content']); ?> </pre> </div> <div class="col-sm"> <ul> <?php foreach($post['content'] as $content): ?> <li><?php echo $content['title']; ?></li> <?php endforeach; ?> </ul> </div> </div> </div> <script src="/bootstrap/jquery-3.5.1.min.js"></script> <script src="/bootstrap/js/bootstrap.min.js"></script> </body> </html>
Jika sudah selesai simpanlah perubahannya dan kemudian lihat hasilnya.
Jika tampilan halaman home page tampak seperti di atas itu menandakan bahwa Bootstrap sudah dapat digunakan pada web projek Anda.