Tutorial Codeigniter #4 Cara Membuat Modal Bootstrap

Bagi pengguna yang baru belajar framwork bootstrap tentunya akan kebingungan apa itu modal bootstrap ?, modal bootstrap adalah semacam kotal dialog menggantung di tengah tengah layar, contohnya seperti ini.

Di artikel sebelumnya saya membahas bagaimana cara menampilkan data dari database, nah seharusnya untuk artikel hari ini saya membahas bagaimana cara inputanya namun berhubung inputan yang nanti akan saya gunakan menggunakan modal untuk viewnya jadilah artikel hari ini membahas cara membuat modal bootstarp.

Melanjutkan dari latihan kita sebelumnya, sekarang kita akan langsung membuat modal bootstrapnya, yaitu dengan cara menambahkan kode berikut pada baris akhir file v_karyawan.php.

<!-- ============ MODAL ADD KARYAWAN =============== -->

          <div class="modal fade" id="modal_add" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">

            <div class="modal-dialog">

            <div class="modal-content">

            <div class="modal-header">

                <h3 class="modal-title" id="myModalLabel" style="float: left">Tambah Data Karyawan</h3>

                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>

            </div>

            <form class="form-horizontal" method="post" action="<?php echo base_url().'index.php/periode_penjualan/add_periodepenjualan'?>">

                <div class="modal-body">

                    <div class="form-group">

                        <div class="col-xs-8">

                            <input name="nik" class="form-control" type="text" placeholder="NIK" required>

                        </div>

                    </div>

                    <div class="form-group">

                        <div class="col-xs-8">

                            <input name="nama" class="form-control" type="text" placeholder="Nama" required>

                        </div>

                    </div>

                    <div class="form-group">

                        <div class="col-xs-8">

                            <input name="tgllahir" class="form-control" type="text" placeholder="Tanggal Lahir" required>

                        </div>

                    </div>

                    <div class="form-group">

                        <div class="col-xs-8">

                            <input name="alamat" class="form-control" type="text" placeholder="Alamat" required>

                        </div>

                    </div>

                </div>

                <div class="modal-footer">

                    <button class="btn btn-info">Save</button>

                </div>

            </form>

            </div>

            </div>

        </div>

        <!--END MODAL ADD KARYAWAN-->

Selesai menambahkan kode program diatas selanjutnya menambahkan tombol button add untuk membuka modal bootstrap yang telah di buat, caranya masih sama di file v_karyawan.php kemudian tambahkan kode berikut :

<h6 class="m-0 font-weight-bold text-primary"><a data-toggle="modal" data-target="#modal_add" class="btn btn-primary btn-circle"><i class="fa fa-plus-square" style="color: white"></i></a> Tambah Data Karyawan </h6>

Sehinga sekarang kode programnya seperti ini.

Terakhir silahkan buka form karyawan di browser kemudian tekan buuton tambah dan hasilnya akan seperti ini.