Pada artikel sebelumnya kita sudah membahas Cara Membuat CRUD data Siswa PHPMYSQli , Tambah , edit serta hapus data siswa sudah kita buat pad artikel sebelumnya , namun itu di lakukan pada form biasa pada halaman itu ,

Nah disini kita akan membuat Edit data atau perbaharui data di modal bootstrap ,

Perlu diketahui File yang saya gunakan adalah aplikasi file pada artikel Membuat CRUD data Siswa PHPMYSQli , disini kita akan merubah / sedikit melakukan penyesuaian file agar sesuai agar dapat kita melakukan " Edit Data di Modal Bootstrap dengan data yang di ambil secara dinamis pada database mysql"

Berikut ini merupakan contoh Gambar project Edit data di Modal bootstrap , yang dapat kita lihat bersama Modal Update / Edit data pada gambar dibawah ini , ditampilkan berdasarkan id yang kita pilih, dan seperti biasa kita tampilkan di Form untuk di ekseskusi , Secara garis besar proses eksekusi form tetap sama seperti form biasa , hanya saja disini kita melakukan passing data dengan menggunakan javascript jquery untuk mendapatkan data dari database yang akan kita tampilkan di modal sesuai dengan id yang kita inginkan dari data yang ada di database , tentunya lewat tabel yang kita tampilkan

 Demo

Adapun Project kita kali ini adalah terdiri dari 3 buah file sebagai berikut.

crudsiswa/
├── indeks.php
├── koneksi.php
├── tampil.php

Database & Koneksi.php

seperti penjelasan diatas , disini saya menggunakan database seperti pada artikel Membuat CRUD data Siswa PHPMYSQli , dimana database bernama db.senterwebs.com , dan tabel siswa , untuk struktur field database bisa dilihat di artikel tersebut ya , begitu juga koneksi.php

tampil.php

Untuk membuat edit data di modal bootstrap dari data yang ada di database tentunya , kita perlu menampilkan data di database, berikut ini merupakan script untuk menampilkan data di database .

<table class="table table-striped">
<thead>
<tr>
  <th>No.</th>
  <th>Nis</th>
  <th>Nama</th>
  <th>Kelas</th>
  <th>Jurusan</th>
  <th>Gambar</th>
  <th>Action</th>
</tr>
</thead>
<tbody>
  <?php 
  include "koneksi.php";
      $no = 1;
      $sql = mysqli_query($koneksi,"SELECT * FROM siswa");
      while ($r = mysqli_fetch_array($sql)) { 
      echo" 
<tr>
  <td>$no</td>
  <td>$r[nis]</td>
  <td>$r[nama]</td>
  <td>$r[kelas]</td>
  <td>$r[jurusan]</td>
  <td><img src='gambar/$r[gambar]' width='60'></td>
  <td>
  <a href='javascript:void(0);' class='btn btn-info ModalEdit' data-href='editmodal.php?id=$r[id_siswa]'>Edit</a>
    <a href='#' class='btn btn-danger' onClick=\"return confirm('Yakin akan menghapus Data?')\">Delete</a></td>
    "; 
  $no++; 
} 
  ?>

</tr>
</tbody>
</table>

Yang perlu diperhatikan dari script diatas adalah <a href='javascript:void(0);' class='btn btn-info ModalEdit' data-href='editmodal.php?id=$r[id_siswa]'>Edit</a> , Pada link edit kita menempatkan class Modaledit  yang akan kita sinkronisasikan dengan script javascript jquery dibawah ini , kemudian FORM EDIT akan kita panggil lewat file editmodal.php?id=$r[id_siswa] ,

Script jquery

untuk script dibawah ini tempatkan di atas tag </body> pada file aplikasi kita

<script>
$(document).ready(function(){
    $('.ModalEdit').on('click',function(){
        var dataURL = $(this).attr('data-href');
        $('.modal-body').load(dataURL,function(){
            $('#myModal').modal({show:true});
        });
    }); 
});
</script>

<!-- Modal Edit -->
  <div class="modal fade" id="myModal">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header bg-info text-light">
              <h5 class="modal-title" id="myModalLabel">Update Data Senterwebs.com</h5>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              </div>
                  <div class="modal-body">
                  </div>
                </div>
              </div>
            </div>

editmodal.php

<?php
if(!empty($_GET['id'])){ 
include "koneksi.php";
$id=$_GET['id'];
    $sql = mysqli_query($koneksi,"SELECT * FROM siswa WHERE id_siswa='$id'");
    $r = mysqli_fetch_array($sql);
?> 
    <form action="#" method="post" enctype="multipart/form-data" name="form" target="_self">
        <div class="form-group">
            <input type='hidden' name='id' value="<?= $r['id_siswa']?>">
            <label for="">NIS</label>
              <input type="text" name="nis" value="<?= $r['nis'] ?>" class="form-control" required>
        </div>
    <div class="form-group">
        <label for="">Nama</label>
          <input type="text" name="nama" value="<?= $r['nama'] ?>" class="form-control" required>
    </div>                  
        <div class="form-group">
            <label for="">Image</label>
             <img  src="gambar/<?= $r['gambar'] ?>" id="output" width="80" />
              <input type="file" name="gambar" class="form-control" >
        </div>
        <div class="form-group">
            <button class="btn btn-success btn-sm" name="submit"
                    type="submit">
                 Upate
            </button>
        </div>
    </form>

<?php } ?>