Dalam artikel kali ini akan dibahas, Cara menambahkan banyak data sekaligus kedalam MySQL database dengan PHP dan Ajax.
Pada contoh kali ini kita akan membuat tabel dengan mama item_tambahmultipledata, dengan struktur sebagai berikut :
CREATE TABLE `item_tambahmultipledata` (
`item_id` int(11) NOT NULL,
`item_nama` varchar(250) NOT NULL,
`item_kode` varchar(250) NOT NULL,
`item_deskripsi` text NOT NULL,
`item_harga` varchar(30) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1 COLLATE=latin1_swedish_ci;
Kemudian buat HTML kode untuk tampilan depan, dengan nama index.php :
<!DOCTYPE html>
<html>
<head>
<title>Menambahkan banyak data dengan PHP-Mysql-Ajax</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<br /><br />
<div class="container">
<br />
<h2 align="center">Menambahkan banyak data dengan PHP-Mysql-Ajax</h2>
<br />
<div class="table-responsive">
<table class="table table-bordered" id="crud_table">
<tr>
<th width="30%">Nama Barang</th>
<th width="10%">Kode Barang</th>
<th width="45%">Deskripsi</th>
<th width="10%">Harga</th>
<th width="5%"></th>
</tr>
<tr>
<td contenteditable="true" class="item_nama"></td>
<td contenteditable="true" class="item_kode"></td>
<td contenteditable="true" class="item_deskripsi"></td>
<td contenteditable="true" class="item_harga"></td>
<td></td>
</tr>
</table>
<div align="right">
<button type="button" name="tambah" id="tambah" class="btn btn-success btn-xs">+</button>
</div>
<div align="center">
<button type="button" name="simpan" id="simpan" class="btn btn-info">Simpan</button>
</div>
<br />
<div id="inserted_item_data"></div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
var count = 1;
$('#tambah').click(function(){
count = count + 1;
var html_code = "<tr id='row"+count+"'>";
html_code += "<td contenteditable='true' class='item_nama'></td>";
html_code += "<td contenteditable='true' class='item_kode'></td>";
html_code += "<td contenteditable='true' class='item_deskripsi'></td>";
html_code += "<td contenteditable='true' class='item_harga' ></td>";
html_code += "<td><button type='button' name='hapus-tombol' data-row='row"+count+"' class='btn btn-danger btn-xs hapus-tombol'>-</button></td>";
html_code += "</tr>";
$('#crud_table').append(html_code);
});
$(document).on('click', '.hapus-tombol', function(){
var delete_row = $(this).data("row");
$('#' + delete_row).remove();
});
$('#simpan').click(function(){
var item_nama = [];
var item_kode = [];
var item_deskripsi = [];
var item_harga = [];
$('.item_nama').each(function(){
item_nama.push($(this).text());
});
$('.item_kode').each(function(){
item_kode.push($(this).text());
});
$('.item_deskripsi').each(function(){
item_deskripsi.push($(this).text());
});
$('.item_harga').each(function(){
item_harga.push($(this).text());
});
$.ajax({
url:"tambah.php",
method:"POST",
data:{item_nama:item_nama, item_kode:item_kode, item_deskripsi:item_deskripsi, item_harga:item_harga},
success:function(data){
alert(data);
$("td[contentEditable='true']").text("");
for(var i=2; i<= count; i++)
{
$('tr#'+i+'').remove();
}
fetch_item_data();
}
});
});
function fetch_item_data()
{
$.ajax({
url:"ambildata.php",
method:"POST",
success:function(data)
{
$('#inserted_item_data').html(data);
}
})
}
fetch_item_data();
});
</script>
Setelah itu kita akan membuat file PHP yang berfungsi untuk menjalankan proses penyimpanan, sebagai berikut, dan diberi nama tambah.php :
<?php
$connect = mysqli_connect("NAMA_HOST", "USERNAME_DB", "PASSWORD_DB", "NAMA_DATABASE");
if(isset($_POST["item_nama"]))
{
$item_nama = $_POST["item_nama"];
$item_kode = $_POST["item_kode"];
$item_deskripsi = $_POST["item_deskripsi"];
$item_harga = $_POST["item_harga"];
$query = '';
for($count = 0; $count<count($item_nama); $count++)
{
$item_nama_clean = mysqli_real_escape_string($connect, $item_nama[$count]);
$item_kode_clean = mysqli_real_escape_string($connect, $item_kode[$count]);
$item_deskripsi_clean = mysqli_real_escape_string($connect, $item_deskripsi[$count]);
$item_harga_clean = mysqli_real_escape_string($connect, $item_harga[$count]);
if($item_nama_clean != '' && $item_kode_clean != '' && $item_deskripsi_clean != '' && $item_harga_clean != '')
{
$query .= '
INSERT INTO item_tambahmultipledata(item_nama, item_kode, item_deskripsi, item_harga)
VALUES("'.$item_nama_clean.'", "'.$item_kode_clean.'", "'.$item_deskripsi_clean.'", "'.$item_harga_clean.'");
';
}
}
if($query != '')
{
if(mysqli_multi_query($connect, $query))
{
echo 'Data berhasil ditambahkan';
}
else
{
echo 'Terjadi kesalahan di Mysql';
}
}
else
{
echo 'Semua input harus terisi';
}
}
?>
Yang terkhir, yaitu membuat file PHP yang berfungsi untuk menampilkan Data, dan diberi nama ambildata.php, yang isinya sebagai berikut :
<?php
$connect = mysqli_connect("NAMA_HOST", "USERNAME_DB", "PASSWORD_DB", "NAMA_DATABASE");
$output = '';
$query = "SELECT * FROM item_tambahmultipledata ORDER BY item_id DESC";
$result = mysqli_query($connect, $query);
$output = '
<br />
<h3 align="center">Data Barang</h3>
<table class="table table-bordered table-striped">
<tr>
<th width="30%">Name Barang</th>
<th width="10%">Kode Barang</th>
<th width="50%">Deskripsi</th>
<th width="10%">Harga</th>
</tr>
';
while($row = mysqli_fetch_array($result))
{
$output .= '
<tr>
<td>'.$row["item_nama"].'</td>
<td>'.$row["item_kode"].'</td>
<td>'.$row["item_deskripsi"].'</td>
<td>'.$row["item_harga"].'</td>
</tr>
';
}
$output .= '</table>';
echo $output;
?>
Demikian file-file yang dibutuhkan untuk membuat program menambahkan banyak data dengan PHP-MySQL-Ajax.
Untuk DEMO dan Download, silahkan klik link di bawah ini:
