{"id":115,"date":"2025-10-06T05:57:24","date_gmt":"2025-10-06T05:57:24","guid":{"rendered":"https:\/\/www.warunginter.net\/2018\/06\/cara-membuat-edit-dengan-modal-bootstrap.html"},"modified":"2025-10-06T05:57:24","modified_gmt":"2025-10-06T05:57:24","slug":"cara-membuat-edit-dengan-modal-bootstrap","status":"publish","type":"post","link":"https:\/\/flycai.warunginter.net\/?p=115","title":{"rendered":"Cara Membuat Edit Dengan Modal Bootstrap"},"content":{"rendered":"
\n
\nKali 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.<\/p>\n
\n\"Edit<\/a><\/div>\n

Oke tanpa banyak basa-basi, berikut langkah-langkah membuat Edit Data Modal Bootstrap :
\n1. Buat Database dengan nama \u201cmodal\u201d (tanpa Petik)<\/p>\n

2. Kemudian buat satu table dengan nama \u201csiswa\u201d dimana di table tersebut terdapat 3 field yaitu id, nama dan umur<\/p>\n

3. Kemudian insert data minimal 2, di table siswa<\/p>\n

4. Jika sudah di insert atau data sudah ada, sekarang waktunya kita menampilkan data editnya<\/p>\n

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<\/p>\n

<?php\n\n\u00a0\u00a0\u00a0 $server = \"localhost\";\n\n\u00a0\u00a0\u00a0 $username = \"root\";\n\n\u00a0\u00a0\u00a0 $password = \"\";\n\n\u00a0\u00a0\u00a0 $database = \"modal\";\n\n\n\u00a0\u00a0\u00a0 mysql_connect($server,$username,$password) or die(\"Koneksi gagal\");\n\n\u00a0\u00a0\u00a0 mysql_select_db($database) or die(\"Database tidak bisa dibuka\");\n\n?>\n\n<\/pre>\n
\n6. Selanjutnya kita buat index.php untuk menampilkan data pada table siswa yang sudah kita buat tadi, dan masukan script dibawah ini<\/p>\n
<!DOCTYPE html>\n\n<html lang=\"en\">\n\n\u00a0 <head>\n\n\u00a0\u00a0\u00a0 <meta charset=\"utf-8\">\n\n\u00a0\u00a0\u00a0 <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n\n\u00a0\u00a0\u00a0 <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n\u00a0\u00a0\u00a0 <meta name=\"description\" content=\"\">\n\n\u00a0\u00a0\u00a0 <meta name=\"author\" content=\"\">\n\n\u00a0\u00a0\u00a0 <title>Index Modal<\/title>\n\n\u00a0\u00a0\u00a0 <link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/css\/bootstrap.min.css\" integrity=\"sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz\/K68vbdEjh4u\" crossorigin=\"anonymous\">\n\n\u00a0 <\/head>\n\n\n\n\u00a0 <body>\n\n\u00a0\u00a0\u00a0 <div class=\"container\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0 <div class=\"row\"> \n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <table class=\"table table-bordered\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <tr>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <th>No<\/th>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <th>Nama<\/th>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <th>Umur<\/th>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <th>Opsi<\/th>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/tr>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <?php\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 include \"koneksi.php\";\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $sql = mysql_query(\"SELECT * FROM siswa\");\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $no = 1;\n\n\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 while ($tampil = mysql_fetch_array($sql)){\n\n\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 ?>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <tr>\u00a0\u00a0\u00a0\u00a0 \n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <td><?php echo $no; ?><\/td>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <td><?php echo $tampil['nama']; ?><\/td>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <td><?php echo $tampil['umur']; ?><\/td>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <?php echo \"<td><a href='#edit_modal' class='btn btn-default btn-small' data-toggle='modal' data-id=\".$tampil['id'].\">Detail<\/a><\/td>\"; ?>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/tr>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <?php \n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $no++; \n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 } \n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 ?>\n\n\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/table>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div>\n\n\u00a0\u00a0\u00a0 <\/div>\n\n\n\n\u00a0\u00a0\u00a0 <div class=\"modal fade\" id=\"edit_modal\" role=\"dialog\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div class=\"modal-dialog\" role=\"document\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div class=\"modal-content\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div class=\"modal-header\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <button type=\"button\" class=\"close\" data-dismiss=\"modal\">&times;<\/button>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <h4 class=\"modal-title\">Detail Siswa<\/h4>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div class=\"modal-body\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div class=\"hasil-data\"><\/div>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div class=\"modal-footer\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Keluar<\/button>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div>\n\n\u00a0\u00a0\u00a0 <\/div>\n\n\n\n\u00a0 <script src=\"https:\/\/code.jquery.com\/jquery-3.1.1.min.js\"><\/script>\n\n\u00a0 <script type=\"text\/javascript\">\n\n\u00a0\u00a0\u00a0 $(document).ready(function(){\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $('#edit_modal').on('show.bs.modal', function (e) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var idx = $(e.relatedTarget).data('id');\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/menggunakan fungsi ajax untuk pengambilan data\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $.ajax({\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 type : 'post',\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 url : 'detail.php',\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 data :\u00a0 'idx='+ idx,\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 success : function(data){\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $('.hasil-data').html(data);\/\/menampilkan data ke dalam modal\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\n\n\u00a0\u00a0\u00a0 });\n\n\u00a0 <\/script>\n\n\u00a0\u00a0\u00a0 <script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.7\/js\/bootstrap.min.js\" integrity=\"sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa\" crossorigin=\"anonymous\"><\/script>\n\n\u00a0 <\/body>\n\n<\/html>\n\n<\/pre>\n
\n7. Buat file lagi dengan nama detail.php dan masukkan script dibawah ini, nantinya kita akan menampilkan edit sesuai id nya<\/p>\n
<?php\n\n\u00a0\u00a0\u00a0 include \"koneksi.php\";\n\n\u00a0\u00a0\u00a0 if($_POST['idx']) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $id = $_POST['idx'];\u00a0\u00a0\u00a0\u00a0\u00a0 \n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $sql = mysql_query(\"SELECT * FROM siswa WHERE id = $id\");\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 while ($result = mysql_fetch_array($sql)){\n\n\u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 ?>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <form action=\"edit.php\" method=\"post\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <input type=\"hidden\" name=\"id\" value=\"<?php echo $result['id']; ?>\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div class=\"form-group\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <label>Nama Siswa<\/label>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <input type=\"text\" class=\"form-control\" name=\"nama\" value=\"<?php echo $result['nama']; ?>\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div class=\"form-group\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <label>Umur<\/label>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <input type=\"text\" class=\"form-control\" name=\"umur\" value=\"<?php echo $result['umur']; ?>\">\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/div>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <button class=\"btn btn-primary\" type=\"submit\">Update<\/button>\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/form>\u00a0\u00a0\u00a0\u00a0 \n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <?php } }\n\n?>\n\n<\/pre>\n
\n8. Dan file terakhir untuk updatenya beri nama edit.php dan masukkan script dibawah ini<\/p>\n
<?php\n\n\u00a0\u00a0\u00a0 include \"koneksi.php\";\n\n\n\n\u00a0\u00a0\u00a0 $id = $_POST['id'];\n\n\u00a0\u00a0\u00a0 $nama = $_POST['nama'];\n\n\u00a0\u00a0\u00a0 $umur = $_POST['umur'];\n\n\n\n\n\n\u00a0\u00a0\u00a0 $sql = mysql_query(\"UPDATE siswa SET nama = '$nama', umur = '$umur' WHERE id=$id\");\n\n\n\n\u00a0\u00a0\u00a0 if ($sql) {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/jika\u00a0 berhasil tampil ini\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 echo \"Data Berhasil Diubah\".\"<\/br>\";\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 echo \"<a href='index.php'>Kembali Ke Halaman Depan<\/a>\";\n\n\u00a0\u00a0\u00a0 } else {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ jika gagal tampil ini\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 echo \"Gagal Melakukan Perubahan: \";\n\n\u00a0\u00a0\u00a0 }\n\n?>\n\n<\/pre>\n
\n9. Oke sampai sini kamu sudah selesai, sekarang coba jalankan programnya.<\/p>\n
Untuk bisa menjalankan script diatas kamu perlu internet, karena pemanggilan Bootstrap menggunakan API nya.<\/p>\n
Buat kamu yang gak mau ribet dapat mendownload dibawah ini lengkap dengan file SQLnya
\n<\/p>\n
\n
\n<\/i><\/span>
\nDownload<\/span>
\nClick here<\/span>
\n<\/a>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
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… Read more »<\/a><\/p>\n","protected":false},"author":1,"featured_media":2087,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[71,63],"tags":[],"class_list":["post-115","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php-native","category-source-code"],"_links":{"self":[{"href":"https:\/\/flycai.warunginter.net\/index.php?rest_route=\/wp\/v2\/posts\/115","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flycai.warunginter.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/flycai.warunginter.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/flycai.warunginter.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/flycai.warunginter.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=115"}],"version-history":[{"count":1,"href":"https:\/\/flycai.warunginter.net\/index.php?rest_route=\/wp\/v2\/posts\/115\/revisions"}],"predecessor-version":[{"id":1369,"href":"https:\/\/flycai.warunginter.net\/index.php?rest_route=\/wp\/v2\/posts\/115\/revisions\/1369"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/flycai.warunginter.net\/index.php?rest_route=\/wp\/v2\/media\/2087"}],"wp:attachment":[{"href":"https:\/\/flycai.warunginter.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=115"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/flycai.warunginter.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=115"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/flycai.warunginter.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}