Kembali lagi bersama afrizatul.com di tutorial custom bootstrap 4 bagian ke-tiga yang mana sebelumnya kita sudah membahas : Tutorial Custom Bootstrap 4 #2 : Cara Membuat Form 2 Kolom, sekarang kita akan mencoba membuat detail informasi dengan modal boostrap.
Adapun seperti tutorial sebelumnya saya menggunakan aplikasi web yang sudah saya buat untuk kerja praktek kuliah saya yang berjudul sistem aplikasi rekam alumni yang insyaallah akan saya bagikan secepatnya di blog ini.
Jadi hasil nya akan seperti ini
Sebelumnya saya meminta maaf karena ada bagian-bagian privasi yang saya sensor karena merupakan data penting yang tidak ingin saya publikasikan. Jadi abaikan saja ya. itu hanya sensor jadi tidak akan tampil seperti itu.
Oke saya asumsikan teman-teman semua sudah melakukan persiapan dan ready untuk ngoding bersama-sama.
Sekarang kamu copy script dibawah ini pada file index.php atau index.html teman-teman masing-masing.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Detail Menggunakan Modal Bootstrap 4 - Afrizatul.com</title>
</head>
<body>
<table id="example1" class="table table-hover table-bordered table-striped">
<thead>
<tr style="background-color: #e1ffe7">
<th>No.</th>
<th>Npm</th>
<th>Nama</th>
<th>IPK</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>1234567</td>
<td>Bayu Afrizatul Rizki</td>
<td>4.7</td>
<td>
<a href="#" class="btn btn-success btn-xs " data-toggle="modal" data-target="#myModal"><i class="fas fa-search-plus"></i> Detail</a>
</td>
</tr>
</tbody>
</table>
<!-- Optional JavaScript -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title" id="myModalLabel"></div>
<button type="button" class="btn btn-lg cl" data-dismiss="modal"><i class="fas fa-times-circle"></i></button>
</div>
<div class="modal-body center">
<!--Content-->
<table width="100%" border="0">
<tbody><tr>
<td valign="top">
<table border="0" width="100%" style="padding-left: 2px; padding-right: 13px;">
<tbody><tr>
<td width="25%" valign="top" class="textt">NPM</td>
<td width="2%">:</td>
<td>12345678</td>
</tr>
<tr>
<td class="textt">Nama</td>
<td>:</td>
<td style="color: #2a8c40; font-weight:bold">Bayu Afrizatul Rizki</td>
</tr>
<tr>
<td class="textt">Jenis Kelamin</td>
<td>:</td>
<td>Laki-Laki</td>
</tr>
<tr>
<td class="textt">Tanggal Lahir</td>
<td>:</td>
<td>31-08-1997</td>
</tr>
<tr>
<td class="textt">Periode Wisuda</td>
<td>:</td>
<td>2</td>
</tr>
<tr>
<td class="textt">Nama Kosentrasi</td>
<td>:</td>
<td>Aplikasi</td>
</tr>
<tr>
<td valign="top" class="textt">Tahun Masuk</td>
<td valign="top">:</td>
<td>2015</td>
</tr>
<tr>
<td class="textt">Tahun Selesai</td>
<td>:</td>
<td>2020</td>
</tr>
<tr>
<td class="textt">Lama Studi</td>
<td>:</td>
<td>5 tahun</td>
</tr>
<tr>
<td class="textt">IPK</td>
<td>:</td>
<td>4.7</td>
</tr>
<tr>
<td class="textt">Pembimbing 1</td>
<td>:</td>
<td>Dosen pembimbing 1</td>
</tr>
<tr>
<td class="textt">Pembimbing 2</td>
<td>:</td>
<td>Dosen Pembimbing 2</td>
</tr>
<tr>
<td valign="top" class="textt">Judul Skripsi</td>
<td valign="top">:</td>
<td style="font-size: 12px;text-align: justify;line-height: 20px;">Aplikasi Paling keren di dunia</td>
</tr>
<tr>
<td class="textt">Tanggal SK</td>
<td>:</td>
<td>21</td>
</tr>
<tr>
<td class="textt">Tanggal Kompre</td>
<td>:</td>
<td>25</td>
</tr>
<tr>
<td class="textt">Lama Skripsi</td>
<td>:</td>
<td>15 bulan</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<a href="afrizatul.com">afrizatul.com</a>
<script>
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
</script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>Begini hasil halaman utamanya :
dan ini hasil jika tombol detail di klik :
Jika modal tidak muncul ketika kamu klik detail maka kamu harus menyesuaikan data-target pada tombol detail dan id pada modal yang akan ditampilkan dalam kasus ini id yang kita gunakan adalah myModal jadi kita akan panggil menggunakan data target pada tombol detail dengan #myModal.
Namun jika ketika di klik juga masih belum muncul itu karena kita menggunakan javascript CDN bawaan bootstrap 4 yang harus kamu akses melalui koneksi internet. Jadi kamu bisa merubah script nya ke offline terlebih dahulu.
Akhir Kata
Itulah bagaimana cara membuat modal detail info menggunakan bootstrap 4 yang biasa digunakan untuk menampilkan informasi detail dari seseorang atau produk, dalam kasus ini menampilkan detail informasi alumni. Sekian jangan lupa baca tutorial custom bootstrap 4 lainnya di blog afrizatul.com. Semangat Ngoding !
