Tutorial Membuat Form Serta Melakukan Edit/Update Data Dinamis di Dalam Modal Bootstrap

Hallo Sobat, ketemu lagi.

Setelah beberapa hari yang lalu saya membagikan Tutorial Cara Menampilkan Data Dinamis Kedalam Modal Bootstrap kali ini saya akan membagikan lagi tutorial yang serupa tapi tak sama yaitu Tutorial Membuat Form Serta Melakukan Edit/Update Data Dinamis di Dalam Modal Bootstrap.

Baca Juga 

Oke, langsung saja, untuk tutorial kali ini masih ada kaitan dengan tutorial beberapa waktu lalu yaitu Tutorial Cara Menampilkan Data Dinamis Kedalam Modal Bootstrap silahkan sobat baca lagi.

Untuk langkah pertama sobat buka, file bootstrap.php dan pastekan script dibawah ini, script ini hanya ada perubahan sedikit yaitu hanya menambahkan kolom deskripsi di dalam tabel.




 
<!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>Passing Data To 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 Barang</th>
            <th>Deskripsi Barang</th>
            <th>Opsi</th>
          </tr>
          <?php
            $servername = "localhost";
            $username = "root";
            $password = "root";
            $dbname = "test";

            // Membuat Koneksi
            $koneksi = new mysqli($servername, $username, $password, $dbname);
            
            // Melakukan Cek Koneksi
            if ($koneksi->connect_error) {
                die("Koneksi Gagal : " . $koneksi->connect_error);
            } 

            //Melakukan query
            $sql = "SELECT * FROM barang";
            $hasil = $koneksi->query($sql);
            $no = 1;
            if ($hasil->num_rows > 0) {
                foreach ($hasil as $row) { ?>
                  <tr>     
                  <td><?php echo $no; ?></td>
                  <td><?php echo $row['nama_barang']; ?></td>
                  <td><?php echo $row['desc_barang']; ?></td>
                  <?php echo "<td><a href='#myModal' class='btn btn-default btn-small' id='custId' data-toggle='modal' data-id=".$row['id'].">Detail</a></td>"; ?>
                  </tr>
            <?php 
            $no++; 
            } 
              } else { 
            echo "0 results"; 
              } $koneksi->close(); 
            ?>

        </table>
      </div>
    </div>

    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Detail Barang</h4>
                </div>
                <div class="modal-body">
                    <div class="fetched-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(){
        $('#myModal').on('show.bs.modal', function (e) {
            var rowid = $(e.relatedTarget).data('id');
            //menggunakan fungsi ajax untuk pengambilan data
            $.ajax({
                type : 'post',
                url : 'detail.php',
                data :  'rowid='+ rowid,
                success : function(data){
                $('.fetched-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>

table1

Langkah selanjutnya, sobat buka file detail.php dan pastekan kode dibawah ini.

Untuk detail.php ada sedikit perubahan yaitu, menambahkan form serta menampilkan data di dalam form tersebut berdasarkan ID.

<?php
    $servername = "localhost";
    $username = "root";
    $password = "root";
    $dbname = "test";

    // membuat koneksi
    $koneksi = new mysqli($servername, $username, $password, $dbname);

    // melakukan pengecekan koneksi
    if ($koneksi->connect_error) {
        die("Connection failed: " . $koneksi->connect_error);
    } 

    if($_POST['rowid']) {
        $id = $_POST['rowid'];
        // mengambil data berdasarkan id
        // dan menampilkan data ke dalam form modal bootstrap
        $sql = "SELECT * FROM barang WHERE id = $id";
        $result = $koneksi->query($sql);
        foreach ($result as $baris) { ?>

        <!-- MEMBUAT FORM -->
        <form action="update.php" method="post">
            <input type="hidden" name="id" value="<?php echo $baris['id']; ?>">
            <div class="form-group">
                <label>Nama Barang</label>
                <input type="text" class="form-control" name="nama_barang" value="<?php echo $baris['nama_barang']; ?>">
            </div>
            <div class="form-group">
                <label>Deskripsi</label>
                <textarea class="form-control" rows="5" name="deskripsi" ><?php echo $baris['desc_barang']; ?></textarea>
            </div>
              <button class="btn btn-primary" type="submit">Update</button>
        </form>

        <?php } }
    $koneksi->close();
?>

modal1

 

Yang terakhir sobat buat satu file dan beri nama update.php, di update.php ini yang nantinya akan melakukan proses update data dan menyimpanya kedalam database. Setelah file tersebut sobat, silahkan sobat pastekan script dibawah ini.

<?php
    $servername = "localhost";
    $username = "root";
    $password = "root";
    $dbname = "test";

    // membuat koneksi
    $koneksi = new mysqli($servername, $username, $password, $dbname);

    // melakukan pengecekan koneksi
    if ($koneksi->connect_error) {
        die("Connection failed: " . $koneksi->connect_error);
    } 

    //menangkap parameter yang dikirimkan dari detail.php
    $id = $_POST['id'];
    $namabarang = $_POST['nama_barang'];
    $desc_barang = $_POST['deskripsi'];

    //perintah untuk melakukan update
    //melakukan update data berdasarkan ID
    $sql = "UPDATE barang SET nama_barang = '$namabarang', desc_barang = '$desc_barang' WHERE id=$id";

    if ($koneksi->query($sql) === TRUE) {
        //jika  berhasil tampil ini
        echo "Data Berhasil Diubah"."</br>";
        echo "<a href='bootstrap.php'>Kembali Ke Halaman Depan</a>";
    } else {
        // jika gagal tampil ini
        echo "Gagal Melakukan Perubahan: " . $koneksi->error;
    }



    $koneksi->close();
?>

Jika berhasil, akan muncul seperti screenshot dibawah ini.

sukses1

Jika sobat membutuhkan filenya silahkan mendownloadnya disini.

Sekian untuk tutorial kali ini, jika sobat punya pertanyaan, kritik atau saran silahkan menuliskannya di dalam kotak komentar.





You May Also Like

26 Comments

  1. gan , klo saya mau buat tombol ketika data setelah diupdate, trus modalnya ter close sendiri melalui jquery ajax itu gimana yah gan ?

    1. maaf bro @rivorizaldi:disqus , ada sedikit kesalahan teknis…
      silahkan di cek, sudah di update…
      terima kasih untuk kunjungannya.

  2. #ask
    Mau tanya mas. Klo membuat 2 button modal dipage yang sama tp pemanggilan data tabel basisdatanya berbeda itu gmn mas?. Misal button A menampilkan data dari tabel A, button B menampilkan data dari tabel B.

    1. @miftakhurrokhman:disqus tinggal disesuaikan saja, misalnya utk button A memanggil file detail.php yang berisi data dari tabel A, dan tombol B memanggil detail_b.php yang berisi data dari tabel B, buat saja sesuai kebutuhan.

      1. yang saya bingung membuat ID di button untuk mengarahkan Button A mengeksekusi jquery A. saya sudah coba mengedit href=’#myModal menjadi href=’#myModal1 tapi gak bisa

  3. kalo misalnya modal yang digunakan untuk update itu modal input data baru (1 modal untuk insert sama update) bisa apa enggak?
    Jadi form untuk update nya gak usah buat lagi, tinggal nampilin datanya di form yang buat input, terus tombol simpan nya beralih fungsi jadi tombol update.
    Mohon bantuanya…

    1. gak bisa gan @disqus_RmY4RULh6F:disqus, harus dibuat terpisah untuk input data baru sendiri untuk edit data sendiri.

    1. parameter variabel “rowid” kosong…
      coba di cek lagi, apakah variabel rowid sudah terisi value id atau belum.

      1. Saya gaada ngubah gan, langsung copy file nya sama sql nya tp kok gabisa ya? Rowid itu variabel yg kita bikin di Ajax nya kan?

Leave a Reply

Your email address will not be published. Required fields are marked *