Halo semuanya, kembali lagi di tulisan saya. 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.fromsunda.eu.org/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">×</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.
 |
| 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">×</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.
Posting Komentar