Halo semuanya, kembali lagi di sahretech. Di artikel tutorial kali ini saya akan menjelaskan kepada kalian cara membuat popup edit atau yang kita kenal dengan modal di framework bootstrap sebagai ganti halaman form edit dengan menggunakan bahasa php dan database mysql. Penasaran?, ayo ikuti tutorialnya berikut ini.
Sebelum kita masuk ke inti tutorial, saya akan sedikit menjelaskan project sederhana yang akan kita buat. Di tutorial kali ini saya hanya akan membuat sebuah halaman berisi tabel dan di setiap row tabel memiliki tombol edit, jika tombol edit tersebut diklik maka akan memunculkan modal/popup yang berisi form dan data yang berbeda di setiap rownya.Jadi untuk proses tambah dan hapus tidak kita laukan disini, alasannya agar artikel kali ini lebih ringkas dan mudah dipahami khususnya bagi kalian yang baru belajar pemrograman web.
Cara Membuat Modal Edit Data Php dan Mysql
Hal-hal yang harus kalian persiapkan sebelum memulai, adalah menyiapkan xampp jika belum punya silahkan download di link berikut ini https://www.apachefriends.org/download.html. Jika sudah, install seperti biasa lalu buka xampp control panel dan hidupkan apache dan mysqlnya.
1. Membuat Database dan Tabel
Setelah kalian menghidupkan apache dan mysql, selanjuntya buka http://localhost/phpmyadmin untuk membuat sebuah database baru. Buatlah sebuah database baru dengan nama latihan. Lalu buat sebuah tabel di dalam database latihan dengan nama barang, untuk struktur tabelnya dapat kalian lihat pada gambar di bawah ini.
|
| Tabel barang |
Jangan lupa juga untuk menambahkan beberapa data di dalamnya, karena kita tidak membuat fungsi atau halaman tambah data. Semua data akan diinsert melalui halaman phpmyadmin.
2. Membuat Folder Modal dan File index.php
Buatlah sebuah folder baru dengan nama modal di dalam htdocs. Lalu buatlah sebuah file index.php di dalam foder modal dan isi dengan script seperti gambar 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>
<!-- tombol edit dan modal akan dibuat disini -->
</td>
</tr>
<?php } ?>
</tbody>
</table>
</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>
</body>
</html>
Buka http://localhost/modal untuk melihat hasilnya. Hasilnya akan tampak seperti gambar di bawah ini.
 |
| Tutorial modal edit data dinamis 1 |
3. Menambahkan Modal Edit
Selanjuntya, buka kembali file index.php yang berada di folder modal. Lalu
tambahkan script di bawah ini tepat di bagian yang telah saya tandai tulisan "tombol edit dan modal akan dibuat disini" pada
script di atas.
<!-- 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="#modal<?php echo $data['id_barang']; ?>">Edit</a>
<!-- untuk melihat bentuk-bentuk modal kalian bisa mengunjungi laman bootstrap dan cari modal di kotak pencariannya -->
<!-- id setiap modal juga harus berbeda, cara membedakannya dengan menggunakan id_barang -->
<div class="modal fade" id="modal<?php echo $data['id_barang']; ?>" 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">×</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" value="<?php echo $data['nama_barang']; ?>">
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Deskripsi Barang</label>
<textarea class="form-control" rows="5"><?php echo $data['deskripsi_barang']; ?></textarea>
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Jenis Barang</label>
<input type="text" class="form-control" value="<?php echo $data['jenis_barang']; ?>">
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Harga Barang</label>
<input type="text" class="form-control" value="<?php echo $data['harga_barang']; ?>">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Buka kembali http://localhost/modal dan lihat hasilnya. Jika berhasil maka
tampilannya akan berubah seperti gambar di bawah ini, dan jika kalian klik
tombol edit yang ada maka sebuah popup dialog atau modal akan muncul dengan
data yang berbeda-beda di setiap rownya.
 |
| Tampilan modal edit |
Penjelasan
Pada dasarnya untuk membuat modal edit tidaklah sulit, jika kalian biasa membuat modal tambah, maka untuk membuat modal edit juga mudah, hanya saja yang harus diperhatikan adalah setiap modal memiliki data yang berbeda, cara membedakan modal satu dengan modal yang lainnya adalah dengan memberikan id yang berbeda pula. Karena setiap id_barang memiliki value yang unik dan tidak mungkin tertukar maka kita identifikasikan setiap modal dengan id_barang.
 |
| Modal edit data dinamis |
Lanjutan Penjelasan Script di Atas:
Selanjutnya setelah tombol edit dibuat, kita buat sebuah modal di bawah tombol edit, dengan menggunakan id_barang yang berbeda. Berikut ini adalah contoh paling simple modal yang telah diberikan oleh bootstrap, kalian juga bisa mencari bentuk-bentuk modal lainnya di laman resmi bootstrap
Untuk script lengkapnya akan tampak seperti 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="#modal<?php echo $data['id_barang']; ?>">Edit</a>
<!-- untuk melihat bentuk-bentuk modal kalian bisa mengunjungi laman bootstrap dan cari modal di kotak pencariannya -->
<!-- id setiap modal juga harus berbeda, cara membedakannya dengan menggunakan id_barang -->
<div class="modal fade" id="modal<?php echo $data['id_barang']; ?>" 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">×</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"
value="<?php echo $data['nama_barang']; ?>">
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Deskripsi
Barang</label>
<textarea class="form-control"
rows="5"><?php echo $data['deskripsi_barang']; ?></textarea>
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Jenis Barang</label>
<input type="text" class="form-control"
value="<?php echo $data['jenis_barang']; ?>">
</div>
<div class="form-group">
<label for="exampleFormControlInput1">Harga Barang</label>
<input type="text" class="form-control"
value="<?php echo $data['harga_barang']; ?>">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</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>
</body>
</html>
Sekian tutorial membuat modal/popup edit data dengan php dan mysql. Semoga
bermanfaat, kurang lebihnya saya mohon maaf, bila ada yang ingin ditanyakan
terkait dengan artikel di atas silahkan tinggalkan komentar kalian di bawah
ini. Sampai jumpa di tutorial pemrograman keren lainnya, Happy Coding 😃
untuk modal yang di luar perulangan gimana bang? karena jika modalnya di dalam perulangan maka modal-nya akan terpanggil terus sesuai dgn jumlah datanya.
ReplyDeleteSilahkan ikuti tutorialnya di link ini mas
ReplyDeletehttps://www.sahretech.com/2021/04/membuat-edit-data-dengan-modal.html?m=1
Lebih efisien ketika modalnya diluar looping mas. karna kalau banyak data loadingnya akan sangat lambat bang...
ReplyDeleteiya betul sekali mas, untuk contoh modal diluar looping bisa ikut tutorial saya disini ya https://www.sahretech.com/2021/04/membuat-edit-data-dengan-modal.html?m=1
Deletekalau nggk sala konsep ini juga hampir sama dengan yang sebelumnya, karna yang ini juga kita menyimpan semua data di javascript saat kita menjalankan halaman tersebut. Ada cara lain tidak bang, jika data yang di tampilkan (READ) saja yang load ketika kita buka halaman tersebut, biar data yang kita tangkap ke modal itu cuman data yang ingin kita edit aja, biar lebih ringan aja bang. misalnya modal cuman mengankap id dari data tersebut saat kita menekan tombol edit (berarti datanya tidak di load atau di simpan di js sebelumnya) setelah itu baru modal cari id tersebut untuk menampilkan data yang kita perlukan. hampir sama dengan konsep GET atau POST tapi kita pakenya di modal dengan satu file aja.
Deletemaaf bang bahasaku kurang barus, soalnya bukan orang indo, baru belajar bahasa indo...
ok, cara di link yang ini https://www.sahretech.com/2021/04/membuat-edit-data-dengan-modal.html?m=1 itu lebih ringan karena modal tidak dilooping. Tapi hanya datanya saja. Sehingga kita cuma butuh satu modal saja. Kurangnya adalah button masih menyimpan data lagi jadi terkesan dua kali. Data tidak disimpan di javascript tapi di dalam html, untuk melihat seberapa panjang struktur HTMLnya bisa kamu cek di CTRL + U.
DeleteDan Jika kamu ingin mengosongkan data disetiap button kamu bisa menggunakan cara ini:
1. disetiap button hanya memiliki id, lalu kirim data id ke modal, saat tombol diklik lakukan request ajax ke database. lalu isi setiap modal dengan data yang telah direquest.
2. kamu tidak perlu menyimpan id atau data apapun di dalam button. Dengan menggunakan jquery, maka data otomatis diseleksi berdasarkan button yang dipilih. cek dokumentasinya di sini https://datatables.net/examples/ajax/null_data_source.html
terima kasih kunjungannya, semoa bermanfaat :)
trima kasih banyak mas atas maaterinya. sukses selalu mas...
Delete