Membuat Edit Data dengan Modal Bootstrap pada Php

Share:

Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini, saya akan membahas tutorial yang tidak kalah seru dari tutorial-tutorial sebelumnya. Yaitu cara membuat model edit data pada php agar tampilan web kalian lebih kece. Penasaran?, ayo ikuti tutorialnya berikut ini.


Sebelum artikel ini ditulis, saya sudah membahas tutorial serupa. Dimana pada tutorial sebelumnya saya membua modal edit di dalam looping tabel, cara ini sah-sah saja. Hanya saja saat tabel menampung data yang sangat banyak, dan tabel tersebut tidak menggunakan mekanisme serverside maka load halaman menjadi sangat-sangat lama.

Jika kalian tertarik untuk membacanya silahkan kunjungi link berikut ini: https://www.sahretech.com/2020/12/membuat-modalpop-up-edit-data-dengan.html 

Untuk itu, ada cara lain yang bisa kita gunakan agar script yang kita buat lebih efisien dan tentunya tidak membebani browser karena meload data yang terlalu banyak. Caranya sangat mudah, dan bisa diikuti siapa saja dengan syarat kalian sudah mengerti php dan modal.

Baca Artikel Lain ✨
📰 1. Cara Cepat Membuat Back-end Restful API Tanpa Coding dengan Typicode Json Server read more
📰 2. Cara Menggunakan Library Datatable Serverside di Laravel Moodle read more
📰 3. Cara Membuat Import Data Excel ke Database Mysql dengan php read more
📰 4. Cara Membuat Peta Digital dengan Leafletjs, Alternatif Peta Digital tanpa Google Maps API read more


Cara Membuat Edit Data dengan Modal Bootstrap dan Php

Sebelum masuk ke inti, terlebih dahulu saya akan menjelaskan project yang akan kita buat. Project yang akan kita buat cukup sederhana, tapi mudah-mudahan bisa membantu kalian dalam memahami penggunaan dasar modal pada edit data php.

Kita akan membuat sebuah halaman web, dimana halaman web tersebut menampilkan sebuah tabel yang berisi data barang. Kemudian di kolom paling akhir setiap row akan diberi tombol yang jika diklik akan menampilkan modal dengan data yang berbeda. Di project ini juga kita tidak membuat modal tambah dan actionnya. Di modal edit juga tidak terdapat action untuk meng-update ke database. Alasannya agar tutorial ini tidak terlalu panjang, dan saya pikir itu bisa kalian tambahkan sendiri.


1. Persiapan Database dan Tabel barang

Pertama hidupkan apache service kalian, lalu bukalah phpmyadmin melalui browser. Kemudian buat database baru dengan nama latihan. Kemudian buatlah tabel baru dengan nama barang. Ikutilah struktur tabelnya seperti gambar di bawah ini

Tabel barang


Isilah beberapa data di dalam tabel barang. Karena pada tutorial kali ini kita tidak membuat input data ke dalam database. Jadi semuanya diinput langsung melalui phpmyadmin. :)


2. Membuat Folder latihan_modal dan File index.php

Masuk ke dalam folder htdocs, lalu buatlah sebuah folder baru dengan nama latihan_modal. Lalu buatlah sebuah file php di dalam folder tersebut dengan nama index.php. Silahkan copy script di bawah ini ke dalam file tersebut.
    

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- import bootstrap --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> </head> <body> <br> <!-- membuat container dengan lebar colomn col-lg-10 --> <div class="container col-lg-10"> <!-- membuat tulisan alert berwarna hijau dengan tulisan di tengah --> <h3 class="alert alert-success text-center" role="alert"> Tutorial Modal Edit Data Dinamis </h3> <br> <!-- membuat card untuk membungkus tabel bootstrap --> <div class="card"> <div class="card-body"> <table class="table"> <thead class="thead-dark"> <!-- set table header --> <tr> <th scope="col">#</th> <th scope="col">Nama Barang</th> <th scope="col">Deskripsi Barang</th> <th scope="col">Jenis Barang</th> <th scope="col">Harga Barang</th> <th scope="col"></th> </tr> </thead> <tbody> <?php // membuat koneksi ke database $koneksi = mysqli_connect("localhost", "root", "", "latihan"); //membuat variabel angka $no = 1; //mengambil data dari tabel barang $select = mysqli_query($koneksi, "select * from barang"); //melooping(perulangan) dengan menggunakan while while($data= mysqli_fetch_array($select)){ ?> <tr> <!-- menampilkan data dengan menggunakan array --> <td><?php echo $no++; ?></td> <td><?php echo $data['nama_barang']; ?></td> <td><?php echo $data['deskripsi_barang']; ?></td> <td><?php echo $data['jenis_barang']; ?></td> <td><?php echo $data['harga_barang']; ?></td> <td> <!-- membuat tombol dengan ukuran small berwarna biru --> <!-- data-target setiap modal harus berbeda, karena akan menampilkan data yang berbeda pula caranya membedakannya, gunakan id_barang sebagai pembeda data-target di setiap modal --> <!-- dibawah ini kita akan melempar data ke modal dengan cara mengisi variabel data-nama_data = value --> <!-- tapi sebelum kita kirim data2 tersebut, data tersebut akan ditampung di javascript terlebih dahulu --> <a href="" class="btn btn-sm btn-info" data-toggle="modal" data-target="#modaledit" data-id="<?php echo $data['id_barang']; ?>" data-nama_barang="<?php echo $data['nama_barang']; ?>" data-deskripsi_barang="<?php echo $data['deskripsi_barang']; ?>" data-jenis_barang="<?php echo $data['jenis_barang']; ?>" data-harga_barang="<?php echo $data['harga_barang']; ?>" >Edit</a> </td> </tr> <?php } ?> </tbody> </table> </div> </div> <!-- letakkan modal disini --> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"> </script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"> </script> <!-- letakkan script javascript disini --> </body> </html>

Untuk penjelasan script, sudah saya tambahkan dengan tanda komentar pada script di atas. Lalu saya juga memberi penjelasan tambahan pada paragraf di bawah ini. Jika masih kurang jelas silahkan tanya langsung di kolom komentar di bawah post ini.

Penjelasan
Sekilas tidak ada hal yang benar-benar berbeda dari cara menampilkan data dari database. Hanya saja silahkan kalian perhatikan pada kolom terakhir. Terdapat tombol trigger untuk menampilkan modal. Dan di dalam tombol tersebut terdapat data-data yang akan dikirmkan ke modal.

data-nama_barang berisi nama barang, data-deskripsi_barang berisi deskripsi barang, data-jenis_barang berisi jenis barang, data-harga_barang berisi harga barang.


3. Membuat Modal

Masih di dalam file index.php. Silahkan tambahkan script di bawah ini ke dalam file tersebut. Paste script ini pada bagian yang saya beri tanda <!-- letakkan modal disini -->
        

<div class="modal fade" id="modaledit" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Edit Barang</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <!-- di dalam modal-body terdapat 4 form input yang berisi data. data-data tersebut ditampilkan sama seperti menampilkan data pada tabel. --> <div class="modal-body"> <form> <div class="form-group"> <label for="exampleFormControlInput1">Nama Barang</label> <input type="text" class="form-control" name="nama_barang" id="nama_barang"> </div> <div class="form-group"> <label for="exampleFormControlTextarea1">Deskripsi Barang</label> <textarea class="form-control" rows="5" name="deskripsi_barang" id="deskripsi_barang"></textarea> </div> <div class="form-group"> <label for="exampleFormControlInput1">Jenis Barang</label> <input type="text" class="form-control" name="jenis_barang" id="jenis_barang"> </div> <div class="form-group"> <label for="exampleFormControlInput1">Harga Barang</label> <input type="text" class="form-control" name="harga_barang" id="harga_barang"> </div> </form> </div> <div class="modal-footer"> <button type="submit" class="btn btn-primary">Save changes</button> </div> </div> </div> </div>

Untuk penjelasan script sudah saya sertakan pada script di atas. Tapi ada penjelasan tambahan pada paragraf di bawah ini. Jika masih bingung silahkan langsung tanya di kolom komentar di bawah post ini.

Penjelasan 
Jika kalian sudah paham cara membuat modal bootstrap, modal di atas tentunya tidak asing lagi. Hanya saja setiap input field saya tambahkan id sebagai tanda identifikasi. Tanda ini akan digunakan untuk menampilkan data di setiap input fieldnya nanti


4. Menambah Javascript

Terakhir, silahkan copy script di bawah ini dan pastekan sebelum tag </body> atau di bagian yang saya beri tanda <!-- letakkan script javascript disini -->. Untuk penjelasan sudah saya tambahkan pada script di bawah ini, penjelasan ditandai dengan komentar.
    

<script> $('#modaledit').on('show.bs.modal', function (event) { // event.relatedtarget menampilkan elemen mana yang digunakan saat diklik. var button = $(event.relatedTarget) // data-data yang disimpan pada tombol edit dimasukkan ke dalam variabelnya masing-masing var nama_barang = button.data('nama_barang') var deskripsi_barang = button.data('deskripsi_barang') var jenis_barang = button.data('jenis_barang') var harga_barang = button.data('harga_barang') var modal = $(this) //variabel di atas dimasukkan ke dalam element yang sesuai dengan idnya masing-masing modal.find('#nama_barang').val(nama_barang) modal.find('#deskripsi_barang').val(deskripsi_barang) modal.find('#jenis_barang').val(jenis_barang) modal.find('#harga_barang').val(harga_barang) }) </script>


Penjelasan
Set variabel button sesuai dengan button yang diklik. Lalu set data yang didapatkan dari setiap button di atas ke dalam variabelnya masing-masing. Kemudian masukkan setiap variabel ke dalam setiap input field yang telah ditandai dengan id.


Jika semua tahap dilakukan dengan baik dan benar. Maka hasilnya bisa kalian lihat di bawah ini.
membuat edit data dengan modal bootstrap
Hasil akhir dari modal yang dibuat




Dan script lengkap dari tiap tahap di atas bisa kalian copy di bawah ini.
        

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- import bootstrap --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> </head> <body> <br> <!-- membuat container dengan lebar colomn col-lg-10 --> <div class="container col-lg-10"> <!-- membuat tulisan alert berwarna hijau dengan tulisan di tengah --> <h3 class="alert alert-success text-center" role="alert"> Tutorial Modal Edit Data Dinamis </h3> <br> <!-- membuat card untuk membungkus tabel bootstrap --> <div class="card"> <div class="card-body"> <table class="table"> <thead class="thead-dark"> <!-- set table header --> <tr> <th scope="col">#</th> <th scope="col">Nama Barang</th> <th scope="col">Deskripsi Barang</th> <th scope="col">Jenis Barang</th> <th scope="col">Harga Barang</th> <th scope="col"></th> </tr> </thead> <tbody> <?php // membuat koneksi ke database $koneksi = mysqli_connect("localhost", "root", "", "latihan"); //membuat variabel angka $no = 1; //mengambil data dari tabel barang $select = mysqli_query($koneksi, "select * from barang"); //melooping(perulangan) dengan menggunakan while while($data= mysqli_fetch_array($select)){ ?> <tr> <!-- menampilkan data dengan menggunakan array --> <td><?php echo $no++; ?></td> <td><?php echo $data['nama_barang']; ?></td> <td><?php echo $data['deskripsi_barang']; ?></td> <td><?php echo $data['jenis_barang']; ?></td> <td><?php echo $data['harga_barang']; ?></td> <td> <!-- membuat tombol dengan ukuran small berwarna biru --> <!-- data-target setiap modal harus berbeda, karena akan menampilkan data yang berbeda pula caranya membedakannya, gunakan id_barang sebagai pembeda data-target di setiap modal --> <a href="" class="btn btn-sm btn-info" data-toggle="modal" data-target="#modaledit" data-id="<?php echo $data['id_barang']; ?>" data-nama_barang="<?php echo $data['nama_barang']; ?>" data-deskripsi_barang="<?php echo $data['deskripsi_barang']; ?>" data-jenis_barang="<?php echo $data['jenis_barang']; ?>" data-harga_barang="<?php echo $data['harga_barang']; ?>" >Edit</a> </td> </tr> <?php } ?> </tbody> </table> </div> </div> <div class="modal fade" id="modaledit" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Edit Barang</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <!-- di dalam modal-body terdapat 4 form input yang berisi data. data-data tersebut ditampilkan sama seperti menampilkan data pada tabel. --> <div class="modal-body"> <form> <div class="form-group"> <label for="exampleFormControlInput1">Nama Barang</label> <input type="text" class="form-control" id="nama_barang"> </div> <div class="form-group"> <label for="exampleFormControlTextarea1">Deskripsi Barang</label> <textarea class="form-control" rows="5" id="deskripsi_barang"></textarea> </div> <div class="form-group"> <label for="exampleFormControlInput1">Jenis Barang</label> <input type="text" class="form-control" id="jenis_barang"> </div> <div class="form-group"> <label for="exampleFormControlInput1">Harga Barang</label> <input type="text" class="form-control" id="harga_barang"> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"> </script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"> </script> <script> $('#modaledit').on('show.bs.modal', function (event) { // event.relatedtarget menampilkan elemen mana yang digunakan saat diklik. var button = $(event.relatedTarget) // data-data yang disimpan pada tombol edit dimasukkan ke dalam variabelnya masing-masing var nama_barang = button.data('nama_barang') var deskripsi_barang = button.data('deskripsi_barang') var jenis_barang = button.data('jenis_barang') var harga_barang = button.data('harga_barang') var modal = $(this) //variabel di atas dimasukkan ke dalam element yang sesuai dengan idnya masing-masing modal.find('#nama_barang').val(nama_barang) modal.find('#deskripsi_barang').val(deskripsi_barang) modal.find('#jenis_barang').val(jenis_barang) modal.find('#harga_barang').val(harga_barang) }) </script> </body> </html>


Bagaimana gampangkan?. Sekian tutorial cara membuat edit data dengan modal bootsrap pada php dan mysql. Semoga ini bermanfaat, jangan lupa comment dan share ke temen-temen kalian ya!. Dan sampai jumpa di tutorial pemrograman seru lainnya.

2 comments:

  1. button savenya tidak berfungsi gan, apakah belum dibuat.?
    jika belum mohon dibuatkan gan. terima kasih!

    ReplyDelete
    Replies
    1. iya gan belum saya buat, untuk fungsinya sama seperti crud biasa. tinggal arahkan saja ke halaman php lain, lalu diproses. Nah untuk tutorialnya bisa cari di blog ini, tentang edit data di php dan mysql

      saya juga punya tutorial keren lain yang mirip dengan pembahasan ini https://www.sahretech.com/2019/12/study-case-membuat-aplikasi-crud.html

      Delete

Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik