Home » Codeigniter » Cara Memasukkan Bootstrap ke dalam CodeIgniter / Insert Bootstrap to CI

Cara Memasukkan Bootstrap ke dalam CodeIgniter / Insert Bootstrap to CI

Published by Ade Kurniawan on

Bootstrap dan codeigneter perlu di integrasikan dalam pengembangan sebuah web. Hal ini dilakukan untuk kebutuhan pengembangan web yang lebih baik lagi.  Setelah berhasil melakukan instalasi dan konfigurasi Codeigniter dalam kebutuhan pengembangan web kita membutuhkan sebuah design template bootstrap untuk dimasukan ke dalam codeigniter.

cara memasukkan bootstrap ke codeigniter
Cara Memasukkan Bootstrap Ke CodeIgniter

Bootstrap adalah sebuah library framework css yang dibuat khusus untuk pengembangan bagian front-end.  Penggunaan bootstrap ini akan membuat halaman web yang dikembangkan menjadi responsive untuk itu sebelum membuat pengembangan sistem yang lebih kompleks kita harus mengetahui cara memasukkan bootstrap ke dalam codeigniter terlebih dahulu.
Baiklah untuk memasukkan bootstrap ke dalam codeigniter terlebih dahulu kita harus mendownload bootstrap, dalam tutorial ini digunakan startbootstrap-blog-post-gh-pages. bisa di download di web startbootstrap secara gratis

setelah mendownload buatlah folder baru di dalam project belajarciphp  yang telah kita buat dan beri nama assets sehingga folder project kita menjadi seperti berikut:

belajarciphp
-> application
-> assets
-> system

Setelah membuat folder assets seperti di atas, copykan bootstrap yang telah kita download ke dalam folder assets tersebut disini digunakan template startbootstrap-blog-post-gh-pages. Supaya lebih simple silahkan ganti namanya menjadi bootstrapblog sehingga folder project kita menjadi seperti berikut :

belajarciphp
-> application
-> assets
-> bootstrapblog
-> system

seperti yang telah kita lakukan pada tutorial sebelumnya kita telah berhasil membuat controller sederhana sekarang bagaimana memadukan controller dan bootstrap sehingga saat di klik menu navigasi yang ada pada bootstrap memanggil controller yang telah kita buat.
Untuk menyelesaikan hal tersebut kita dapat  melakukannya dengan insert bootstrap ke dalam codeigniter silahkan lakukan langkah berikut:
1. Pecahlah halaman index.html yang terdapat dalam folder bootstrapblog menjadi beberapa bagian yaitu :
– bagian header
– bagian menu
– bagian script
– bagian footer

2. Buatlah folder baru di dalam folder views dengan nama templates sehingga struktur folder kita menjadi sebagai berikut :

belajarciphp
-> application
-> views
– > template
– header.php
– menu.php
– footer.php
– script.php
-> assets
-> system

3. Selanjutnya selesaikan masing – masing file php tersebut :
– header.php
file header.php ini dicopy dari index.html pada langkah 1 . copykan dari code <!DOCTYPE html> …… sampai batas……. </head> sehingga hasilnya seperti 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">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Blog Post - Start Bootstrap Template</title>

    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/blog-post.css" rel="stylesheet">

  </head>

silahkan tambahkan script =”<?php echo base_url()?>assets/bootstrapblog/ pada <link href=” ”> sehingga menjadi seperti berikut :

<link href=”<?php echo base_url()?>assets/bootstrapblog/vendor/bootstrap/css/bootstrap.min.css” rel=”stylesheet”>
<!– Custom styles for this template –>
<link href=”<?php echo base_url()?>assets/bootstrapblog/css/blog-post.css” rel=”stylesheet”>

Penggunaan <?php echo base_url()?>assets/bootstrapblog/ untuk memanggil file css yang sudah berubah subdirectorynya ke project base codeigniter.

– menu.php
file menu.php ini dicopy dari index.html pada langkah 1 . copykan dari code  <nav> …sampai dengan…. </nav>.
seperti berikut :

<!-- Navigation -->

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
   <div class="container">     
    <a class="navbar-brand" href="#">Start Bootstrap</a>   
  <button class="navbar-toggler" type="button" data-toggle="collapse"
       data-target="#navbarResponsive" aria-controls="navbarResponsive" 
         aria-expanded="false" aria-label="Toggle navigation">   
    <span class="navbar-toggler-icon"></span>     </button>
     <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="<?php echo site_url('home');?>">Home
            <span class="sr-only">(current)</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
       </ul>
    </div>
  </div>
</nav>


– file footer.php 
file footer.php ini dicopy dari index.html pada langkah 1 . copykan dari code <footer class=”py-5 bg-dark”> …… sampai dengan …….. </footer> dan tambahkan tag penutup
</body>
</html>
hasilnya menjadi seperti berikut :

<!-- Footer -->
    <footer class="py-5 bg-dark">
      <div class="container">
        <p class="m-0 text-center text-white">Copyright &copy; 

Your Website 2017</p>
      </div>
      <!-- /.container -->
    </footer>
 </body>
</html>

– file script.php
Sama seperti sebelumnya file script.php ini dicopy dari index.html pada langkah 1 . copykan script untuk memanggil file js yang terdapat pada  scirpt index.html tersebut dan paste pada file script.php ini sehingga hasilnya seperti berikut:

<!-- Bootstrap core JavaScript -->
   <script src="vendor/jquery/jquery.min.js"></script>
   <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

untuk scirpt ini karena kita akan memanggil file js tentu harus di atur sesuai dengan directory projeject kita. sehingga kita perlu mengubah scirpt.php diatas menjadi seperti berikut:

<!-- Bootstrap core JavaScript -->
<script src="<?php echo base_url()?>assets/bootstrapblog/vendor
/jquery/jquery.min.js"></script>
<script src="<?php echo base_url()?>assets/bootstrapblog/vendor
/bootstrap/js/bootstrap.bundle.min.js"></script>

script diatas memanggil file js yang terdapat pada bootstrap
4. Setelah menyelesaikan ke 4 file di atas kita kembali ke file controller home  ubah file controller home menjadi seperti berikut ini :

<?php
class Home extends CI_Controller{  
    function __construct(){
         parent::__construct();
     }

     public function index(){
         $this->load->view('templates/header');
         $this->load->view('templates/menu');
         $this->load->view('homeview');
         $this->load->view('templates/footer');
         $this->load->view('templates/script');

     }
}

setelah menyelesaikan controller home diatas kita ubah juga script homeview menjadi seperti berikut ini:
homeview.php

<!-- Page Content -->
 <div class="container">

   <div class="row">

     <!-- Post Content Column -->
     <div class="col-lg-8">

       <!-- Title -->
       <h1 class="mt-4">Home</h1>
       <hr>
       <div  style="height: 400px">
       <p>Tampilan view yang telah dipanggil melalui controller</p>
       </div>

     </div


   </div>    <!-- /.row -->


</div>  <!-- /.container -->



Setelah mengikuti langkah – langkah di atas kita telah berhasil memasukkan bootstrap ke codeigniter. langkah di atas juga bisa disebut insert bootstrap ke codeigniter yang intinya adalah bagaimana cara menggunakan bootstrap pada codeigniter.

Dengan memahami dasar menggunakan bootstrap pada codeigniter ini kita dapat melakukan insert template bootstrap lainnya sesuai dengan dibutuhkan web yang dikembangkan.
Berikut hasil dari insert bootstrap ke codeigniter

insert bootstrap to ci
Insert Bootstrap to CI
Categories: Codeigniter

2 Comments

EkoRahman Wisuda · July 9, 2020 at 6:12 pm

ada error di homeview.php nih….: kira2 kenapa ya?

An uncaught Exception was encountered

Type: ParseError

Message: syntax error, unexpected ‘<', expecting end of file

Filename: C:\xampp\htdocs\belajarciphp\application\views\Homeview.php

Line Number: 3

Backtrace:

File: C:\xampp\htdocs\belajarciphp\application\controllers\Home.php
Line: 10
Function: view

File: C:\xampp\htdocs\belajarciphp\index.php
Line: 315
Function: require_once

Ade Kurniawan · July 9, 2020 at 9:03 pm

hilangkan <%php pada homeview.php

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *