Adev Saputra
2019-11-02 10:37:33dimateri part 3 ini , kita mencoba untuk mengambil data dari index ke modal bootstrap dan mengirim datanya ke tiap form.
pada tahap pertama kita memperbarui file index.php dengan menambahkan bootstrap pada aplikasi kita , lalu kita membuat satu modal bootstrap dengan id="mymodal" , setelah itu , pada bagian table kita menambahkan button untuk mengambil data id_buku. lalu kita membuat sintaks javascript dengan jquery ajax untuk menggunakan modal bootstrap dan mengirimkan datanya ke modal. liat kodingan dibawah :
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="js/jquery-1.10.2.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
method:"POST",
url: "http://localhost/belajar/inatec_oop/api/buku.php"
}).done(function(models){
parsers = JSON.parse(models);
var tbody = $("table tbody");
for(index in parsers){
var data = parsers[index];
console.log(data);
tbody.append('<tr>'+
'<td>'+data.kode_buku+'</td>'+
'<td>'+data.judul_buku+'</td>'+
'<td>'+data.pengarang+'</td>'+
'<td>'+data.penerbit+'</td>'+
'<td>'+data.tahun+'</td>'+
'<td>'+data.edisi+'</td>'+
'<td>'+data.isbn+'</td>'+
'<td>'+data.jumlah+'</td>'+
'<td>'+data.dipinjam+'</td>'+
'<td>'+data.id_kategori+'</td>'+
'<td>'+'<a href="#" code="'+data.id_buku+'" class="btn btn-primary btn-sm update">Edit</a>'+'</td>'+
'<td>'+'<a href="#" code="'+data.id_buku+'" class="btn btn-danger btn-sm delete">Delete</a>'+'</td>'+
'<tr>');
}
})
})
$ (document).on('click','.update',function(){
var modal = $("#mymodal");
var id = $(this).attr("code");
var content = modal.find(".modal-body");
$('.modal-update').show();
$('#mymodal').modal('show');
content.html('<img src="./assets/img/loading.gif"/>');
$.ajax({
method: "GET",
url: "http://localhost/belajar/inatec_oop/api/buku.php?action=update&id="+id,
async: true
}).done(function( models ){
data = JSON.parse(models);
$.ajax({
method: "POST",
data: data,
url : "http://localhost/belajar/inatec_oop/update.php",
}).done(function( html ){
content.html(html);
});
});
});
</script>
<div class="container mt-5">
<table class="table table-striped">
<thead class="thead-dark">
<tr>
<th>Kode Buku</th>
<th>Judul Buku</th>
<th>Pengarang</th>
<th>Penerbit</th>
<th>Tahun</th>
<th>Edisi</th>
<th>Isbn</th>
<th>Jumlah</th>
<th>Dipinjam</th>
<th>Id_kategori</th>
<th colspan="2">Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="modal fade" id="mymodal" role="dialog" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">buku</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer modal-update" style="display:none;">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
<div class="modal-footer modal-delete" style="display:none;">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
setelah memperbarui file index.php , kita membuat file baru bernama update.php dan membuat sebuah form. lalu kita mengambil datanya dan memasukannya ke dalam form . liat kodingan dibawah :
<?php
$model = isset($_POST) ? $_POST : [];
?>
<form action="">
<div class="row">
<div class="col">
<div class="form-group">
<label for="kode_buku">kode_buku</label>
<input type="text" class="form-control" id="kode_buku" name="kode_buku" value="<?=isset($model['kode_buku']) ? $model['kode_buku'] : '' ?>" placeholder="">
</div>
<div class="form-group">
<label for="judul_buku">judul_buku</label>
<input type="text" class="form-control" id="judul_buku" name="judul_buku" value="<?=isset($model['judul_buku']) ? $model['judul_buku'] : '' ?>" placeholder="">
</div>
<div class="form-group">
<label for="pengarang">pengarang</label>
<input type="text" class="form-control" id="pengarang" name="pengarang" value="<?=isset($model['pengarang']) ? $model['pengarang'] : '' ?>" placeholder="">
</div>
<div class="form-group">
<label for="penerbit">penerbit</label>
<input type="text" class="form-control" id="penerbit" name="penerbit" value="<?=isset($model['penerbit']) ? $model['penerbit'] : '' ?>" placeholder="">
</div>
<div class="form-group">
<label for="tahun">tahun</label>
<input type="number" class="form-control" id="tahun" name="tahun" value="<?=isset($model['tahun']) ? $model['tahun'] : '' ?>" placeholder="">
</div>
</div>
<div class="col">
<div class="form-group">
<label for="edisi">edisi</label>
<input type="text" class="form-control" id="edisi" name="edisi" value="<?=isset($model['edisi']) ? $model['edisi'] : '' ?>" placeholder="">
</div>
<div class="form-group">
<label for="isbn">isbn</label>
<input type="text" class="form-control" id="isbn" name="isbn" value="<?=isset($model['isbn']) ? $model['isbn'] : '' ?>" placeholder="">
</div>
<div class="form-group">
<label for="jumlah">jumlah</label>
<input type="text" class="form-control" id="jumlah" name="jumlah" value="<?=isset($model['jumlah']) ? $model['jumlah'] : '' ?>" placeholder="">
</div>
<div class="form-group">
<label for="dipinjam">dipinjam</label>
<input type="text" class="form-control" id="dipinjam" name="dipinjam" value="<?=isset($model['dipinjam']) ? $model['dipinjam'] : '' ?>" placeholder="">
</div>
<div class="form-group">
<label for="id_kategori">id_kategori</label>
<input type="text" class="form-control" id="id_kategori" name="id_kategori" value="<?=isset($model['id_kategori']) ? $model['id_kategori'] : '' ?>" placeholder="">
</div>
</div>
</div>
</form>
sampai hasilnya seperti digambar :
sekian dari gw happy coding
No reply found.