Cara Membuat Detail Data dengan Modal Bootstrap
Cara membuat detail data dengan modal bootstrap sehingga halaman web akan menampilkan informasi dinamis dalam bentuk interface dialog atau jendela pop up ketika suatu event tertentu di klik maupun event otomatis. Modal atau jendela pop up adalah sebuah elemen halaman web dengan tampilan kotak dialog atau lightbox pada halaman muka depan dan akan menonaktifkan semua konten halaman lainnya. Jadi, modal bootstrap ini selain untuk menampilkan konfirmasi, juga dapat digunakan untuk membuat detail data dinamis dari table database menggunakan sebuah relasi data atau primary key sebagai index data. Akan tetapi pada pembahasan kali ini kita akan fokus pada bagaimana cara membuat detail data dalam tampilan pop up modal bootstrap sehingga akan menampilkan informasi dinamis yang lengkap sesuai kebutuhan.
Tutorial cara membuat detail data dengan modal bootstrap sehingga menjadi sebuah halaman yang dapat menampilkan data detail responsive pada jendela dialog atau jendela pop up. Bagaimana modal bootstrap tersebut dapat terjadi, itu membutuhkan sebuah event klik, dimana event tersebut harus menyesuaikan antara data target dengan index atau id yang dipilih. Untuk membuat modal bootstrap atau jendela pop up ini boleh dilakukan pada versi 5.3.0 alpha3 atau boleh juga memakai versi yang lebih baru yang dapat didownload secara gratis.
Cara Membuat Detail Data dengan Modal Bootstrap
Pembahasan cara membuat detail data dengan modal bootstrap akan kita pelajari menjadi beberapa langkah, mulai dari direktori folder asset, sampai dengan membuat kode program dengan script HTML untuk menampilkan data dan action detail di modal bootstrap.
- Download bootstrap di website getbootstrap
- Membuat direktori folder di htdocs
- Membuat kode program dengan script HTML untuk menampilkan data dan detail di modal bootstrap.
1. Download Framework Bootstrap
Download assets bootstrap terbaru dapat di unduh langsung pada situs resmi getbootstrap.com, di dalamnya terdapat kompilasi kode CSS dan JavaScript, dan atau source code examples. Kemudian ekstrak file rar, nanti akan menghasilkan assets dengan nama folder "CSS" dan javascript "JS", kemudian simpan sementara pada folder yang telah dibuat, sebaiknya langsung di htdocs.
2. Membuat Folder Direktori Tutorial Modal Bootstrap
Agar tutorial cara membuat detail data dengan modal bootstrap mudah dijalankan pada web browser, maka sebaiknya langsung saja buat nama folder tutorial pada direktori xampp htdocs. Sebagai contoh nama folder nya adalah "modal-bootstrap", sehingga url folder pada direktori xampp menjadi C:\xampp\htdocs\modal-bootstrap\.
Selanjutnya di dalam folder "modal-bootstrap" tersebut buat lagi sebuah folder dengan nama "assets" yang berfungsi untuk menyimpan kompilasi kode framework bootstrap yaitu folder "CSS" dan "JS" yang telah didownload.
Sehingga saat ini di dalam folder \modal-bootstrap\assets\ terdapat susunan 2 nama folder yaitu css dan js seperti pada gambar di bawah ini.
3. Membuat File Index dengan HTML untuk Menampilkan Data dan Modal Detail
File html ini digunakan sebagai homepage dan sekaligus akan menampilkan data dalam tabel, dimana pada setiap baris tabel terdapat tombol untuk event detail data. Coding script kode program membuat detail data dengan modal bootstrap juga dilakukan pada file ini, yang dijalankan oleh tombol detail data. Pastikan simpan file index ini ke folder direktori utama yaitu \modal-bootstrap\, sehingga sejajar dengan folder "assets" modal bootstrap.
Save as index.html
<!DOCTYPE html> <html lang="id"> <head> <title>Membuat Detail Data dengan Modal Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="panel-body"> <h3>Data Pegawai</h3> <table class="table table-striped table-bordered nowrap" width="100%"> <thead> <tr> <th width="4%">No.</th> <th>NIP</th> <th>Nama Pegawai</th> <th>TTL</th> <th>No. HP</th> <th width="8%">Action</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>198702082019071019</td> <td>Siska Nur Aminah</td> <td>Cilacap, 8 Februari 1987</td> <td>081289980110</td> <td class="text-center"> <!-- Trigger the modal with a button --> <a type="button" class="btn btn-success btn-icon btn-xs" data-toggle="modal" data-target="#Detail1" title="detail">Detail</a> </td> </tr> <tr> <td>2</td> <td>199212092021112089</td> <td>Galang Budiman</td> <td>Banyumas, 9 Desember 1992</td> <td>08778993212</td> <td class="text-center"> <!-- Trigger the modal with a button --> <a type="button" class="btn btn-success btn-icon btn-xs" data-toggle="modal" data-target="#Detail2" title="detail">Detail</a> </td> </tr> <tr> <td>3</td> <td>198802152018121044</td> <td>Nadir Suhendar, ST</td> <td>Banjarnegara, 15 Frebruari 1988</td> <td>023188792712</td> <td class="text-center"> <!-- Trigger the modal with a button --> <a type="button" class="btn btn-success btn-icon btn-xs" data-toggle="modal" data-target="#Detail3" title="detail">Detail</a> </td> </tr> <!-- Modal --> <div class="modal fade" id="Detail1" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Detail Data Pegawai</h4> </div> <div class="col-md-12"> <div class="modal-body"> <label class="col-md-4">NIP</label> <span class="col-md-8">: 198702082019071019</span> </div> <div class="modal-body"> <label class="col-md-4">Nama</label> <span class="col-md-8">: Siska Nur Aminah</span> </div> <div class="modal-body"> <label class="col-md-4">Tempat Tanggal Lahir</label> <span class="col-md-8">: Cilacap, 8 Februari 1987</span> </div> <div class="modal-body"> <label class="col-md-4">No. HP</label> <span class="col-md-8">: 081289980110</span> </div> <div class="modal-body"> <label class="col-md-4">Jenis Kelamin</label> <span class="col-md-8">: Perempuan</span> </div> <div class="modal-body"> <label class="col-md-4">Agama</label> <span class="col-md-8">: Islam</span> </div> <div class="modal-body"> <label class="col-md-4">Gol. Darah</label> <span class="col-md-8">: AB</span> </div> <div class="modal-body"> <label class="col-md-4">Status Pernikahan</label> <span class="col-md-8">: Nikah</span> </div> <div class="modal-body"> <label class="col-md-4">Alamat</label> <span class="col-md-8">: Desa Mujurujak RT. 02/03 Jeruklegi kulon, Cilacap Barat, Cilacap</span> </div> <br /> <br /> <div class="modal-body"> <label class="col-md-4">Status Kepegawaian</label> <span class="col-md-8">: PNS</span> </div> <div class="modal-body"> <label class="col-md-4">Pangkat</label> <span class="col-md-8">: Penata Tk. I</span> </div> <div class="modal-body"> <label class="col-md-4">Golongan</label> <span class="col-md-8">: III/D</span> </div> <div class="modal-body"> <label class="col-md-4">Jabatan</label> <span class="col-md-8">: Staff Perencanaan Dan Keuangan</span> </div> </div> <div class="modal-footer"> </div> </div> </div> </div> <!-- Modal --> <div class="modal fade" id="Detail2" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Detail Data Pegawai</h4> </div> <div class="col-md-12"> <div class="modal-body"> <label class="col-md-4">NIP</label> <span class="col-md-8">: 199212092021112089</span> </div> <div class="modal-body"> <label class="col-md-4">Nama</label> <span class="col-md-8">: Galang Budiman</span> </div> <div class="modal-body"> <label class="col-md-4">Tempat Tanggal Lahir</label> <span class="col-md-8">: Banyumas, 9 Desember 1992</span> </div> <div class="modal-body"> <label class="col-md-4">No. HP</label> <span class="col-md-8">: 08778993212</span> </div> <div class="modal-body"> <label class="col-md-4">Jenis Kelamin</label> <span class="col-md-8">: Laki-laki</span> </div> <div class="modal-body"> <label class="col-md-4">Agama</label> <span class="col-md-8">: Islam</span> </div> <div class="modal-body"> <label class="col-md-4">Gol. Darah</label> <span class="col-md-8">: O</span> </div> <div class="modal-body"> <label class="col-md-4">Status Pernikahan</label> <span class="col-md-8">: Nikah</span> </div> <div class="modal-body"> <label class="col-md-4">Alamat</label> <span class="col-md-8">: Desa Kaligesing RT. 04/01 Bantaran, Cilacap Utara, Cilacap</span> </div> <br /> <br /> <div class="modal-body"> <label class="col-md-4">Status Kepegawaian</label> <span class="col-md-8">: PNS</span> </div> <div class="modal-body"> <label class="col-md-4">Pangkat</label> <span class="col-md-8">: Penata Tk. I</span> </div> <div class="modal-body"> <label class="col-md-4">Golongan</label> <span class="col-md-8">: III/E</span> </div> <div class="modal-body"> <label class="col-md-4">Jabatan</label> <span class="col-md-8">: Staff Kepegawaian</span> </div> </div> <div class="modal-footer"> </div> </div> </div> </div> <!-- Modal --> <div class="modal fade" id="Detail3" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Detail Data Pegawai</h4> </div> <div class="col-md-12"> <div class="modal-body"> <label class="col-md-4">NIP</label> <span class="col-md-8">: 198802152018121044</span> </div> <div class="modal-body"> <label class="col-md-4">Nama</label> <span class="col-md-8">: Nadir Suhendar, ST</span> </div> <div class="modal-body"> <label class="col-md-4">Tempat Tanggal Lahir</label> <span class="col-md-8">: Banjarnegara, 15 Frebruari 1988</span> </div> <div class="modal-body"> <label class="col-md-4">No. HP</label> <span class="col-md-8">: 023188792712</span> </div> <div class="modal-body"> <label class="col-md-4">Jenis Kelamin</label> <span class="col-md-8">: Laki-laki</span> </div> <div class="modal-body"> <label class="col-md-4">Agama</label> <span class="col-md-8">: Islam</span> </div> <div class="modal-body"> <label class="col-md-4">Gol. Darah</label> <span class="col-md-8">: B</span> </div> <div class="modal-body"> <label class="col-md-4">Status Pernikahan</label> <span class="col-md-8">: Nikah</span> </div> <div class="modal-body"> <label class="col-md-4">Alamat</label> <span class="col-md-8">: Grand Salakan A7 No. 11, Cilacap Utara, Cilacap</span> </div> <br /> <br /> <div class="modal-body"> <label class="col-md-4">Status Kepegawaian</label> <span class="col-md-8">: PNS</span> </div> <div class="modal-body"> <label class="col-md-4">Pangkat</label> <span class="col-md-8">: Pembina</span> </div> <div class="modal-body"> <label class="col-md-4">Golongan</label> <span class="col-md-8">: IV/A</span> </div> <div class="modal-body"> <label class="col-md-4">Jabatan</label> <span class="col-md-8">: Kasubbag Kepegawaian</span> </div> </div> <div class="modal-footer"> </div> </div> </div> </div> </tbody> </table> </div> </div> </body> </html>
Perhatikan kode baris ke 7, 8, dan 9 yang terletak di dalam tag head berikut ini.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
Itu adalah asset javascript CDN bawaan bootstrap 4 yang harus diakses melalui koneksi internet, tetapi bisa juga dilakukan penyesuaian script ke versi offline, download satu per satu.
Kemudian pada tutorial membuat detail data dengan modal bootstrap ini ID yang digunakan adalah Detail1 dan seterusnya, jadi kita panggil saja menggunakan data target pada tombol detail dengan value #Detail1.
Sampai juga pada tahap uji coba tutorial cara membuat detail data dengan modal bootstrap sehingga terlihat data pada tabel yang dapat di klik detail untuk menampilkan detail data pada jendela pop up. Silahkan jalankan coding script modal bootstrap tersebut pada web browser dengan url localhost/modal-bootstrap/, pastikan tampil seperti gambar di bawah ini.
Tutorial Cara Membuat Detail Data dengan Modal Bootstrap
Download Script Modal Bootstrap
Sekian penjelasan tutorial tentang modal pop up yaitu cara membuat detail data dengan modal bootstrap menggunakan kompilasi javascript CDN sehingga modal bootstrap dapat tampil ketika action tombol detail di klik. Jika terjadi gagal atau error atau tidak berhasil berjalan sebagaimana mestinya, silahkan hubungi kami melalui live chat atau form komentar. Semoga dapat membantu.
Baca juga :
- Cara Aktivasi Windows 10 Pro Permanen Gratis
- Script PHP Mengurangi Stok Barang
- Cara Menambah Kapasitas Upload XAMPP
- Membatasi Ukuran File Upload di PHP
- Cara Mempercepat Loading Web dengan htaccess
- Membuat Laporan Excel dengan PHP dan MySQLi
Cara Membuat Detail Data dengan Modal Bootstrap
Tags: cara membuat detail data modal, membuat detail data bootstrap, detail data modal bootstrap, detail modal bootstrap, membuat detail data dengan modal bootstrap