Dalam sebuah sistem informasi yang melakukan pekerjaan pengolahan data, pastinya tidak terlepas dari proses edit (update) dan hapus (delete). Dalam sistem berbasis web, biasanya kedua aksi tersebut diletakkan di sebelah kanan untuk setiap baris data pada tabel. nanti tombol-tombol tersebut lah yang menyimpan Id dari setiap baris data pada tabel tersebut.
Dalam artikel ini, saya tidak akan membahas proses update dan delete seperti di atas. Proses update dan delete yang akan saya contohkan disini yaitu user harus memilih data terlebih dahulu pada tabel, baru tombol update dan delete bisa di klik. Sesuai dengan judul artikel ini yaitu Edit Dan Hapus Setelah Pilih Data Pada Tabel.Contoh edit dan hapus seperti ini, biasanya digunakan dalam program berbasis desktop.
Ok, langsung saja kita mulai tutorialnya. Dalam contoh ini saya menggunakan database yang menampilkan data provinsi. Kemudian saya juga menggunakan framework css bootstrap untuk mempercantik tampilan tabelnya. Semua source dalam artikel ini dapat kalian download pada akhir artikel ini.
Buat file koneksi.php untuk mengubungkan ke database seperti dibawah ini.
<?php
$database = 'db_data_ajax';
$user = 'root';
$pass = '';
$host = 'localhost';
$conn = mysqli_connect($host,$user,$pass,$database);
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
?>
Selanjutnya buat file index.php sebagai file utamanya
<html>
<head>
<!-- CSS untuk bootstrap -->
<link rel="stylesheet" href="css/bootstrap.css" type="text/css">
<style>
tbody>tr {cursor: pointer;}
.selected {
background-color: #f5f5f5;
}
</style>
</head>
<body>
<?php
include"koneksi.php";
$sql = "select * from data_provinsi";
$result = mysqli_query($conn,$sql);
?>
<div class="container">
<br>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<button id="btn_update" class='btn btn-info btn-sm disabled'><span class='glyphicon glyphicon-edit' aria-hidden='true'></span> Update</button>
<button id="btn_delete" class='btn btn-danger btn-sm disabled'><span class='glyphicon glyphicon-trash' aria-hidden='true'></span> Delete</button>
<div class="table-responsive">
<table id="tabel_provinsi" class="table table-bordered table-hover">
<thead>
<tr>
<td width="15%">ID</td>
<td width="85%">Nama Provinsi</td>
</tr>
</thead>
<tbody>
<?php
while($row=mysqli_fetch_assoc($result)){
echo"<tr data-id='".$row['id_provinsi']."'>";
echo"<td>".$row['id_provinsi']."</td>";
echo"<td>".$row['nama_provinsi']."</td>";
echo"</tr>";
}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- js untuk jquery -->
<script src="js/jquery-1.11.2.min.js"></script>
<!-- js untuk bootstrap -->
<script src="js/bootstrap.js"></script>
<script type="text/javascript">
//inisialisasi id yang dipilih
var selected_id=0;
$(document).ready(function(){
//ketika konten di klik
$("#tabel_provinsi tbody>tr").click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
var value = $(this).attr('data-id');
$('#btn_update').removeClass('disabled');
$('#btn_delete').removeClass('disabled');
selected_id=value;
});
//tombol update di klik
$('#btn_update').click(function(){
alert('update data id : '+selected_id);
});
//tombol delete di klik
$('#btn_delete').click(function(){
alert('delete data id : '+selected_id);
});
});
</script>
</body>
</html>
Simpan semua file, kemudian jalankan aplikasinya pada browser kesayangan anda. Hasilnya adalah sebagai berikut
Silahkan jika ada yang belum dipahami, tinggalkan komentar kalian dibawah ya..
No comments:
Post a Comment