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.
