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">×</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.
button savenya tidak berfungsi gan, apakah belum dibuat.?
ReplyDeletejika belum mohon dibuatkan gan. terima kasih!
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
Deletesaya juga punya tutorial keren lain yang mirip dengan pembahasan ini https://www.sahretech.com/2019/12/study-case-membuat-aplikasi-crud.html
akhirnya ketemu metode yang di cari cari menampilkan modal tanpa di looping karena klw sudah data diatas 2rban pakai model looping modal membuat lama load web nya... thx gan...
ReplyDelete