Cara Membuat Edit Dengan Modal Bootstrap
Kali ini kita akan membahas bagaimana cara membuat edit dengan modal pada PHP dan MYSQL. Disini saya menggunakan modal bootstrap, Jujur sebelumnya saya belum memahami cara membuat edit di modal karena saya belum pernah menggunakannya sama sekali disetiap project yang saya buat. Namun seiring berjalannya waktu saya mencari tutorial kesana kemari akhirnya saya berhasil menampilkan Edit Data menggunakan modal bootstrap menggunakan bantuan Javascript.
Oke tanpa banyak basa-basi, berikut langkah-langkah membuat Edit Data Modal Bootstrap :
1. Buat Database dengan nama “modal” (tanpa Petik)
2. Kemudian buat satu table dengan nama “siswa” dimana di table tersebut terdapat 3 field yaitu id, nama dan umur
3. Kemudian insert data minimal 2, di table siswa
4. Jika sudah di insert atau data sudah ada, sekarang waktunya kita menampilkan data editnya
5. Sebelum membuat index nya, terlebih dahulu kita membuat koneksi agar terhubung ke database. Buat file dan beri nama koneksi.php dan masukan script dibawah ini
6. Selanjutnya kita buat index.php untuk menampilkan data pada table siswa yang sudah kita buat tadi, dan masukan script dibawah ini
7. Buat file lagi dengan nama detail.php dan masukkan script dibawah ini, nantinya kita akan menampilkan edit sesuai id nya
8. Dan file terakhir untuk updatenya beri nama edit.php dan masukkan script dibawah ini
9. Oke sampai sini kamu sudah selesai, sekarang coba jalankan programnya.
Untuk bisa menjalankan script diatas kamu perlu internet, karena pemanggilan Bootstrap menggunakan API nya.
Buat kamu yang gak mau ribet dapat mendownload dibawah ini lengkap dengan file SQLnya
Oke tanpa banyak basa-basi, berikut langkah-langkah membuat Edit Data Modal Bootstrap :
1. Buat Database dengan nama “modal” (tanpa Petik)
2. Kemudian buat satu table dengan nama “siswa” dimana di table tersebut terdapat 3 field yaitu id, nama dan umur
3. Kemudian insert data minimal 2, di table siswa
4. Jika sudah di insert atau data sudah ada, sekarang waktunya kita menampilkan data editnya
5. Sebelum membuat index nya, terlebih dahulu kita membuat koneksi agar terhubung ke database. Buat file dan beri nama koneksi.php dan masukan script dibawah ini
<?php
$server = "localhost";
$username = "root";
$password = "";
$database = "modal";
mysql_connect($server,$username,$password) or die("Koneksi gagal");
mysql_select_db($database) or die("Database tidak bisa dibuka");
?>
6. Selanjutnya kita buat index.php untuk menampilkan data pada table siswa yang sudah kita buat tadi, dan masukan script dibawah ini
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Index Modal</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<table class="table table-bordered">
<tr>
<th>No</th>
<th>Nama</th>
<th>Umur</th>
<th>Opsi</th>
</tr>
<?php
include "koneksi.php";
$sql = mysql_query("SELECT * FROM siswa");
$no = 1;
while ($tampil = mysql_fetch_array($sql)){
?>
<tr>
<td><?php echo $no; ?></td>
<td><?php echo $tampil['nama']; ?></td>
<td><?php echo $tampil['umur']; ?></td>
<?php echo "<td><a href='#edit_modal' class='btn btn-default btn-small' data-toggle='modal' data-id=".$tampil['id'].">Detail</a></td>"; ?>
</tr>
<?php
$no++;
}
?>
</table>
</div>
</div>
<div class="modal fade" id="edit_modal" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Detail Siswa</h4>
</div>
<div class="modal-body">
<div class="hasil-data"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Keluar</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#edit_modal').on('show.bs.modal', function (e) {
var idx = $(e.relatedTarget).data('id');
//menggunakan fungsi ajax untuk pengambilan data
$.ajax({
type : 'post',
url : 'detail.php',
data : 'idx='+ idx,
success : function(data){
$('.hasil-data').html(data);//menampilkan data ke dalam modal
}
});
});
});
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
7. Buat file lagi dengan nama detail.php dan masukkan script dibawah ini, nantinya kita akan menampilkan edit sesuai id nya
<?php
include "koneksi.php";
if($_POST['idx']) {
$id = $_POST['idx'];
$sql = mysql_query("SELECT * FROM siswa WHERE id = $id");
while ($result = mysql_fetch_array($sql)){
?>
<form action="edit.php" method="post">
<input type="hidden" name="id" value="<?php echo $result['id']; ?>">
<div class="form-group">
<label>Nama Siswa</label>
<input type="text" class="form-control" name="nama" value="<?php echo $result['nama']; ?>">
</div>
<div class="form-group">
<label>Umur</label>
<input type="text" class="form-control" name="umur" value="<?php echo $result['umur']; ?>">
</div>
<button class="btn btn-primary" type="submit">Update</button>
</form>
<?php } }
?>
8. Dan file terakhir untuk updatenya beri nama edit.php dan masukkan script dibawah ini
<?php
include "koneksi.php";
$id = $_POST['id'];
$nama = $_POST['nama'];
$umur = $_POST['umur'];
$sql = mysql_query("UPDATE siswa SET nama = '$nama', umur = '$umur' WHERE id=$id");
if ($sql) {
//jika berhasil tampil ini
echo "Data Berhasil Diubah"."</br>";
echo "<a href='index.php'>Kembali Ke Halaman Depan</a>";
} else {
// jika gagal tampil ini
echo "Gagal Melakukan Perubahan: ";
}
?>
9. Oke sampai sini kamu sudah selesai, sekarang coba jalankan programnya.
Untuk bisa menjalankan script diatas kamu perlu internet, karena pemanggilan Bootstrap menggunakan API nya.
Buat kamu yang gak mau ribet dapat mendownload dibawah ini lengkap dengan file SQLnya