Membuat form pencarian dengan bootstrap

 A. APA ITU MODAL?

Modal di dalam Framework Bootstrap adalah sebuah kotak dialog yang akan tampil diatas halaman web yang kita buat. Di dalam modal tersebut, nanti kita bisa isi dengan informasi sesuai dengan kebutuhan kita di dalam suatu program. misalnya seperti gambar diatas. 

B. FUNGSI MODAL

Salah satu fungsi dari Modal adalah untuk lebih mempercantik halaman website kita sehingga tidak tampak monoton atau datar - datar saja. Fungsi lain, kita bisa juga gunakan untuk menampilkan data disaat kita melakukan pencarian terutama jika data yang ada sudah sangat banyak sehingga kurang efektif jika hanya menggunakan Combobox.

Dengan menggunakan Modal dan digabung dengan fitur lain dari Bootstrap akan lebih mempercepat anda dalam membuat pencarian data. Nah, berikut akan diberikan script program yang dapat anda copy paste dalam anda nanti membuat Pencarian Data dengan menggunakan Modal di PHP.

Berikut contoh tampilannya

Di dalam script html untuk kotak input text (yang di lingkari merah) scriptnya adalah sebagai berikut:

C. CONTOH MODAL DENGAN 1 PILIHAN UNTUK DITAMPILKAN

<input type="text" id="no_pasien" name="no_pasien"  class="form-control" data-toggle="modal" data-target="#myModal" required="">

catatan: Silahkan tambahkan script berwarna biru di setiap anda akan membuat modal.

Setelah itu, tuliskan atau copy paste script program berikut dan letakkan di bagian paling bawah dari script anda.

<!-- Awal Modal -->

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

                <div class="modal-dialog">

                    <div class="modal-content">

                         <div class="modal-header">

                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

                            <h2 class="modal-title" id="myModalLabel">

                                DATA PASIEN

                            </h2>

                        </div>

                        <div class="modal-body">

                                <table id="lookup" class="table table-bordered table-hover table-striped">

                                    <thead>

                                        <tr>

                                            <!--<th>No.</th>-->

                                            <th>Nomor Pasien</th>

                                            <th>Nama Pasien</th>

                                            <th>Kelamin</th>

                                            <th>Usia</th>

                                             <th>Alamat</th>

                                        </tr>

                                    </thead>

                                    <tbody>

                                    <?php

                                    $sql= $koneksi->query("select * from tb_pasien");

                                    while($data= $sql->fetch_assoc()){

                                    ?>

                                    <tr class="pilih" data-nopasien="<?php echo $data['no_pasien']; ?>">

                                        <td><?php echo $data['no_pasien']?></td>

                                        <td><?php echo $data['nm_pasien']?></td>

                                        <td><?php echo $data['j_kel']?></td>

                                        <td><?php echo $data['usia']?></td>

                                        <td><?php echo $data['alamat']?></td>

                                    </tr>

                                    <?php } ?>        

                                </tbody>

                            </table>

                        </div>

                        </div>

                    </div>

            </div>

        <script src="js/jquery-1.11.2.min.js"></script>

        <script type="text/javascript">

                // jika dipilih, no_pasien akan masuk ke input dan modal di tutup

            $(document).on('click', '.pilih', function (e) {

                document.getElementById("no_pasien").value = $(this).attr('data-nopasien');

                $('#myModal').modal('hide');

            });

// tabel lookup pasien

            $(function () {

                $("#lookup").dataTable();

            });

        </script>

<!--Akhir Modal-->

D. CONTOH MODAL DENGAN LEBIH DARI 1 PILIHAN UNTUK DITAMPILKAN

<!-- Awal Modal Obat-->

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

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

<h2 class="modal-title" id="myModalLabel">

DATA OBAT

</h2>

</div>

<div class="modal-body">

<table id="lookup" class="table table-bordered table-hover table-striped">

<thead>

<tr>

<!--<th>No.</th>-->

<th>Kode Obat</th>

<th>Nama Obat</th>

<th>Satuan</th>

<th>Isi</th>

<th>Stok</th>

</tr>

</thead>

<tbody>

<?php

//$no=1;

$sql= $koneksi->query("select * from tb_obat");

while($data= $sql->fetch_assoc()){

?>

<tr class="pilih" data-kdobat="<?php echo $data['kd_obat']; ?>" data-nama="<?php echo $data['nm_obat']; ?>" data-satuan="<?php echo $data['satuan']; ?>" data-isi="<?php echo $data['isi']; ?>">

<!--<td><?php //echo $no++;?></td>-->

<td><?php echo $data['kd_obat']?></td>

<td><?php echo $data['nm_obat']?></td>

<td><?php echo $data['satuan']?></td>

<td><?php echo $data['isi']?></td>

<td><?php echo $data['stok']?></td>

</tr>

<?php } ?>        

</tbody>

</table>

</div>

</div>

</div>

</div>

<script src="js/jquery-1.11.2.min.js"></script>

<script src="datatables/jquery.dataTables.js"></script>

<script src="datatables/dataTables.bootstrap.js"></script>

<script type="text/javascript">

//            jika dipilih, kd_obat akan masuk ke input dan modal di tutup

$(document).on('click', '.pilih', function (e) {

document.getElementById("kode").value = $(this).attr('data-kdobat');

document.getElementById("nama").value = $(this).attr('data-nama');

document.getElementById("satuan").value = $(this).attr('data-satuan');

document.getElementById("isi").value = $(this).attr('data-isi');

$('#myModalobat').modal('hide');

});

//            tabel lookup obat

$(function () {

$("#lookup").dataTable();

});

</script>

<!--akhir modal obat-->

Penjelasan:

Dari script diatas, informasi yang akan ditampilkan dalam kotak dialog Modal berisi data dari Tabel Pasien.

Silahkan dikembangkan untuk bisa digunakan sesuai dengan kebutuhan sistem yang dibuat.

Terima kasih.