Kali ini kita akan membahas bagaimana cara menciptakan edit dengan modal pada PHP dan MYSQL. Disini saya memakai modal bootstrap, Jujur sebelumnya saya belum memahami cara menciptakan edit di modal alasannya saya belum pernah menggunakannya sama sekali disetiap project yang saya buat. Namun seiring berjalannya waktu saya mencari tutorial kesana kemari kesannya saya berhasil menampilkan Edit Data memakai modal bootstrap memakai dukungan Javascript.
Oke tanpa banyak basa-basi, berikut langkah-langkah menciptakan 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 yakni id, nama dan umur
3. Kemudian insert data minimal 2, di table siswa
4. Jika sudah di insert atau data sudah ada, kini waktunya kita menampilkan data editnya
5. Sebelum menciptakan index nya, terlebih dahulu kita menciptakan koneksi semoga 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 sanggup 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/j4vascript"> $(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 { // jikalau gagal tampil ini echo "Gagal Melakukan Perubahan: "; } ?> 9. Oke hingga sini kau sudah selesai, kini coba jalankan programnya.
Untuk sanggup menjalankan script diatas kau perlu internet, alasannya pemanggilan Bootstrap memakai API nya.
Buat kau yang gak mau ribet sanggup mend0wnl0ad dibawah ini lengkap dengan file SQLnya
Sumber http://www.warunginter.net/