Pada postingan kali ini saya akan share cara melakukan insert lebih dari satu data dengan menggunaka PHP- Jquery dan MySQL.
Pertama buat database di MySQL dan table, disini saya membuat database dengan nama db_latihan dan table dengan nama t_barang dengan struktur table seperti berikut :
Setelah membuat database dan table selanjutnya membuat project PHP, project PHP nya saya buat dengan nama multi-insert, lalu didalam folder ini saya membuat dua file yaitu index.php dan insert.php.
Source code index.php seperti berikut :
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<title>PHP - Jquery - MySql - Multi Record Insert</title>
</head>
<body>
<div class="container">
<h1>PHP - Jquery - MySql - Multi Record Insert</h1>
<hr>
<form action="insert.php" method="POST">
<div class="row">
<div class="col-lg-12">
<button type="button" class="btn btn-primary" id="btn-tambah">TAMBAH BARANG</button>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<table class="table" style="width:100%;">
<thead>
<th>No.</th>
<th>Nama Barang</th>
<th>Jumlah</th>
<th>Satuan</th>
<th></th>
</thead>
<tbody id="tbl-barang-body">
</tbody>
</table>
</div>
</div>
<div class="row btnSave" style="display:none;">
<div class="col-lg-12">
<button type="submit" class="btn btn-primary">SIMPAN BARANG</button>
</div>
</div>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.slim.js" integrity="sha256-HwWONEZrpuoh951cQD1ov2HUK5zA5DwJ1DNUXaM6FsY=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script>
$(function(){
var count = 0;
if(count == 0){
$('.btnSave').hide();
}
$('#btn-tambah').on('click', function(){
count +=1;
$('#tbl-barang-body').append(`
<tr>
<td>`+ count +`</td>
<td>
<input type="text" name="namabarang[]" class="form-control">
</td>
<td>
<input type="number" name="jumlah[]" class="form-control">
</td>
<td>
<input type="text" name="satuan[]" class="form-control">
</td>
<td>
<button type="button" class="btn btn-danger removeItem">HAPUS</button>
</td>
</tr>
`);
if(count > 0){
$('.btnSave').show();
}
$('.removeItem').on('click', function(){
$(this).closest("tr").remove();
count -=1;
if(count == 0){
$('.btnSave').hide();
}
})
})
})
</script>
</body>
</html>
Source code insert.php seperti berikut :
<?php
$server = "localhost";
$username = "root";
$password = "";
$database = "db_latihan";
$mysqli = new mysqli($server, $username, $password, $database);
// cek koneksi
if ($mysqli->connect_error) {
die('Koneksi Database Gagal : '.$mysqli->connect_error);
}
$namabarang = $_POST['namabarang'];
$jumlah = $_POST['jumlah'];
$satuan = $_POST['satuan'];
for($i = 0; $i < sizeof($namabarang); $i++){
$insert = mysqli_query($mysqli,"INSERT INTO t_barang (`namabrg`, `jumlah`, `satuan`)
VALUES ('$namabarang[$i]', '$jumlah[$i]', '$satuan[$i]')");
}
if($insert){
echo "Insert Data Berhasil";
}
?>
Lalu coba jalankan melalui browser localhose/multi-insert, akan muncul tampilan seperti berikut :
Lalu simpan barang, maka akan tersimpan 3 data kedalam table t_barang seperti berikut :
Sekian sharing cara sederhana melakukan multi insert data kedalam MySql database mengguanakan PHP - Jquery, semoga bermanfaat.
misi bang, mau tanya kalau input multi di gabungkan dengan form gimana ya saya gak paham,
ReplyDeletemisal di atasnya itu form identitas pelanggan, nah pelanggan belanja lebih banyak menggunakan multi insert. itu gimana ya
boleh minta kontaknya gak bang, ane mau konsul bang
ReplyDelete