Tutorial kali ini kita akan membahas tentang integrasi framework CSS Bootstrap dengan codeigniter, botstrap kita gunakan sebagai desain UI dari aplikasi yang akan kita buat nantinya.
Langkah 1.
kunjungi alamat https://getbootstrap.com/ kemudian copy coding CSS seperti dibawah ini
1 | <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> |
kemudian buatlah folder dengan nama _Assets di dalam folder views
Gambar 1. Folder _Assets
simpan coding Css tersebut dengan nama bootstrapcss.php dan simpan di dalam folder _Assets
Langkah 2.
Buatlah file controller dengan nama Css.php dan simpan di dalam folder controllers
1 2 3 4 5 6 7 8 9 | <?php class Css extends CI_Controller { public function index(){ $this->load->view('tampilan'); //buat file tampilan.php di folder views } } |
coding pada baris ke 6 akan meload file tampilan.php yang ada di dalam folder views, namun saat ini belum ada file tersebut, selanjutnya kita buat file tampilan.php
Langkah 3.
Buatlah file tampilan.php dan simpan file tersebut di dalam folder views
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <?php $this->load->view('_Assets/bootstrapcss');?> <div class='container'> <div class='row'> <div class='col-md-6'> <form method='post' action='Css/proses'> <div class='form'> <label>Nama</label> <input type='text' name='nama' class='form-control'> </div> <div class='form'> <label>Pekerjaan</label> <input type='text' name='pekerjaan' class='form-control'> </div> <div class='form'> <label>Alamat</label> <input type='text' name='alamat' class='form-control'> </div> <div class='form'> <input type='submit' value='submit' class='btn btn-primary'> </div> </form> </div> </div> </div> |
baris coding nomer 1 adalah coding yang digunakan untuk memanggil file css bootstrap yang kita simpan di dalam folder _Assets.
1 | <?php $this->load->view('_Assets/bootstrapcss');?> |
coding tersebut berfungsi untuk memanggil file bootstrapcss.php yang didalamnya ada coding css bootstrap.
sekarang kita akses dengan alamat http://localhost/belajarcodeigniter/index.php/Css
Gambar 2. hasil dari integrasi codeigniter dengan bootstrap
Langkah 4.
Sekarang kita akan membuat proses yang akan menampilkan data inputan dari view tampilan dalam bentuk tabel.
dari coding yang ada di tampilan.php kita sudah memberi form action
7 | <form method='post' action='Css/proses'> |
pada baris ke 7 kita buat action='Css/proses' untuk proses kali ini kita masih menggunakan file views karena aplikasi kita belum terhubung dengan database, kita buat file proses.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <?php $this->load->view('_Assets/bootstrapcss');?> <div class='container'> <h2>Tampilan</h2> <hr> <table class='table table-bordered'> <tr> <th>Nama</th> <th>Pekerjaan</th> <th>Alamat</th> </tr> <tr> <td><?php echo $_POST['nama'];?></td> <td><?php echo $_POST['pekerjaan'];?></td> <td><?php echo $_POST['alamat'];?></td> </tr> </table> </div> |
simpan file tersebut dengan nama proses.php dan simpan di dalam folder views, hasil dari eksekusi coding tersebut seperti gambar di bawah ini.
gambar 3. Tampilan output dari proses
Selamat kamu sudah bisa mengintegrasikan Bootstrap dengan Codeigniter
kamu juga bisa melihat video tutorialnya di
Salam coding.
Posting Komentar