Modal adalah sebuah plugin untuk menampilkan dialog box / popup window diatas halaman utama, yang muncul di tengah-tengah halaman. Kegunaan modal tentu saja untuk mempercantik tampilan web dan terlihat lebih elegan. Modal digunakan untuk menampilkan alert pada sebuah halaman web.
Sebelumnya baca dulu : Membuat DataTables Dengan PHP Menggunakan Bootstrap karena masih menggunakan database, table dan listMahasiswa.php dari artikel tersebut.
Berikut adalah contoh mengubah data di PHP dengan Bootstrap pada tampilan Modal :
1. Membuat File : koneksi.php
<?php
// isi nama host, username mysql, dan password mysql
$host = mysql_connect("localhost","root","");
// isi nama database yang akan di hubungkan
$db = mysql_select_db("mahasiswa");
?>
2. Membuat File : index.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pagination</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<?php
include 'koneksi.php';
?>
<div class="col-sm-6" style="padding-top: 20px; padding-bottom: 20px;">
<h3>DataTables Menggunakan PHP dan Bootstrap</h3>
<hr>
<table class="table table-stripped table-hover datatab">
<thead>
<tr><th>No</th><th>Id</th><th>Nama</th><th>Fakultas</th><th>Action</th></tr>
</thead>
<tbody>
<?php
$query = mysql_query("Select * From mhs");$no = 1;while ($data = mysql_fetch_assoc($query)){
?>
<tr>
<td><?php echo $no++; ?></td>
<td><?php echo $data['id']; ?></td>
<td><?php echo $data['nama']; ?></td>
<td><?php echo $data['fakultas']; ?></td>
<td>
<!-- Button untuk modal -->
<a href="#" type="button" class="btn btn-success btn-md" data-toggle="modal" data-target="#myModal<?php echo $data['id']; ?>">Edit</a>
</td>
</tr>
<!-- Modal Edit Mahasiswa-->
<div class="modal fade" id="myModal<?php echo $data['id']; ?>" 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">Update Mahasiswa</h4>
</div>
<div class="modal-body">
<form role="form" action="editMahasiswa.php" method="get">
<?php
$id = $data['id'];$query_edit = mysql_query("Select * From mhs Where id='$id'");//$result = mysqli_query($conn, $query);while ($row = mysql_fetch_array($query_edit)) {
?>
<input type="hidden" name="id_mhs" value="<?php echo $row['id']; ?>">
<div class="form-group">
<label>Nama</label>
<input type="text" name="nama_mhs" class="form-control" value="<?php echo $row['nama']; ?>">
</div>
<div class="form-group">
<label>Fakultas</label>
<input type="text" name="fakultas_mhs" class="form-control" value="<?php echo $row['fakultas']; ?>">
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success">Update</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
<?php
}//mysql_close($host);?></form></div></div></div></div><?php}
?>
</tbody>
</table>
</div>
</body>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script><script src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script><script>
$(document).ready(function() {$('.datatab').DataTable();} );
</script>
</html>
3. Membuat File : editMahasiswa.php
<?php
// koneksi database
include('koneksi.php');
$id = $_GET['id_mhs'];
$nama = $_GET['nama_mhs'];
$fakultas = $_GET['fakultas_mhs'];
//query update
$query = "Update mhs Set nama='$nama' , fakultas='$fakultas' Where id='$id' ";
if (mysql_query($query)) {
# credirect ke page index
header("location:listMahasiswa.php");
}
else{
echo "ERROR, data gagal diupdate". mysql_error();
}
//mysql_close($host);
?>
4. Jika dijalankan maka akan menampilkan layout seperti gambar dibawah :
4.1. klik Edit pada baris no 6
4.2. Maka akan ditampilkan form untuk mengubah data
4.3. Ubah data nama, kemudian klik Update
