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
<!-- 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>
![]() |
Tampilan modal edit |
Penjelasan
![]() |
Modal edit data dinamis |
<!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>
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