Assalamualaikum
Beberapa waktu yang lalu ada seorang teman yang tengah membuat sebuah sistem informasi untuk sekolah tempat ia bekerja bertanya pada saya perihal membuat Form Edit data menggunakan PHP namun Form tersebut ada pada Modal Bootstrap.
pertanyaan tersebut membuat saya teringat ketika Dulu sewaktu duduk dibangku kuliah saya sempat mendapati hal yang serupa, yaitu saya kesulitan membuat form edit jika ditampilkan pada modal Bootstrap, Akhirnya pada waktu itu karena saya tidak tahu cara membuatnya, terpaksa saya gak jadi pake Modal melainkan saya buatkan halaman baru untuk mengedit data.
Seiring berjalanya waktu akhirnya setelah kesana kemari mencari petunjuk akhirnya saya bisa juga menampilkan form edit pada Modal Bootstrap menggunakan bantuan Javascript
Skenario yang akan saya jadikan contoh untuk penerapan Form edit Pada Bootstrap kali ini adalah sbb :
- Saya mempunyai sebuah database dengan nama "modal"
- dengan 1 buah tabel dengan nama "siswa"
- didalam tabel siswa terdapat 3 field yaitu id, nama dan umur
- Saya akan menampilkan isi data dari tabel siswa tersebut kedalam sebuah Tabel HTML yang mempunya sebuah tombol Edit untuk tiap masing-masing datanya
- saat tombol Edit diklik maka akan muncul sebuah modal bootstrap yang didalamnya terdapat data berupa nama dan umur yang bisa di edit berdasarkan id pada masing-masing data tersebut
Untuk Mempersingkatnya langsung saja kita praktekan
1. Buat dulu database dengan tabel dan field2nya berdasarkan skenario diatas
2. Buat sebuah file dan beri nama index.php lalu diisi dengan Source Code dibawah ini
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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>Catatan Lamers</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> |
3. Selanjutnya buat lagi sebuah file dengan nama koneksi.php dengan source code dibawah ini
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| $server = "localhost"; | |
| $username = "root"; | |
| $password = "root"; | |
| $database = "modal"; | |
| mysql_connect($server,$username,$password) or die("Koneksi gagal"); | |
| mysql_select_db($database) or die("Database tidak bisa dibuka"); | |
| ?> |
4. Buat sebuah file lagi lalu beri nama detail.php dengan source codenya seperti yang ada dibawah ini
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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 } } | |
| ?> |
5. Buat lagi 1 file terakhir dan beri nama edit.php lalu isikan Source code dibawah ini
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?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 Update: "; | |
| } | |
| ?> |
Buat yang gak mau ribet, silahkan langsung download aja script lengkapnya (Beserta SQLnya) melalui link dibawah ini
Download Form Edit Modal Bootstrap
Sekian dan Terima kasih
8 komentar
gan itu bisa local ngak
pas saya intertidak terhubung tidak biasa di edit
berguna sekali
Warning!! SPAM has been detected!
Saya coba dan berhasil...terima kasih.
Lalu Saya mengganti form inputnya dengan TEXTAREA bukan INPUT
mengapa datanya tampil di luar textarea ya...
kok tidak didalam textarea sehingga gak bisa diedit?
kak, ini coding nya kalo dibikin satu file php nggak bisa kah ?
Bisa aja
silahkan di Explorasi aja mbak
kalo value id yang dikirim ke modal null itu kenapa ya? pas di echo null
idx itu apa?
EmoticonEmoticon