Tutorial PHP + jQuery : Multiple Insert Data Dengan jQuery dan PHP

Akhirnya saya pulang kampung juga kemarin sore, lantaran udah kangen banget sama keluarga dan hmm,,,’pacar’. Memang sih sebenarnya sampai bulan depan, perkuliahan belum dimulai. Tapi gara-gara proyek yang kliennya sering ngajakin ketemuan mendadak, membuat saya harus tetap standby di pulau seberang. Berhubung sang pacar berulang tahun hari ini, saya memilih untuk pulang ke Bali. Kan gak lucu pas pacar lagi ulang tahun, tapi kita malah gak hadir di hari spesialnya. Dan tadi siang, saya mengajak si doi kencan kilat di siang hari. “Kenapa siang hari..???”. Kalau siang pasti akan meminimalisir perbuatan-perbuatan yang tidak diinginkan, seperti grayang-grayang gak jelas pas lagi berduaan di tempat sepi :D. Pas ngajak doi makan ke sebuah restoran di Denpasar, secara tidak sengaja saya melihat aplikasi pembayaran yang digunakan oleh kasirnya. Aplikasi pembayarannya berbasis web, dan yang membuat menarik adalah metode inputnya yang dinamis. Field-field inputnya bersifat dinamis, dalam artian jumlahnya tidak terbatas. Dimana data yang diinputkan ke dalam database, bisa lebih dari satu data. Hmm, rasanya patut dicoba cara pembuatannya setelah sampai di rumah nanti. Setelah mengantar pacar pulang, saya pun bergegas pulang juga. Sudah gak sabar untuk membuat metode input seperti yang saya lihat di restoran tadi.

Setelah mencari refrensi di web jQuery.com, akhirnya saya menemukan caranya. Yaitu dengan menggunakan fungsi .append() yang sudah disediakan oleh jQuery. Silahkan baca dokumentasi selengkapnya di http://api.jquery.com/append/. Setelah membaca dokumentasinya, kira-kira script yang berhasil saya buat kira-kira seperti di bawah ini :

$(document).ready(function() {
            var nomor = 0;
            $(".tambah").click(function(){
            nomor ++;
                $('#konten').append(
                             '<tr class="baris">'
                         + '<input name="nomor[]" value="'+ nomor +'" type="hidden"></td>'
                         + '<td><input name="kode_barang_'+ nomor +'" type="text"></td>'
                         + '<td><input name="nama_barang_'+ nomor +'" type="text"></td>'
                         + '<td><input name="harga_barang_'+ nomor +'" type="text"></td>'
                         + '<td><input type="button" id="hapus" value="Hapus"></tr>'
                    );
                });
        });

Saya tambahkan sebuah textbox nomor, yang berfungsi untuk menjumlahkan berapa baris yang dikirimkan, nama textbox ini saya buat array, sehingga penamaannya menjadinomor[]. Sehingga akan lebih mudah menentukan berapa kali perulangan yang akan dilakukan ketika menyimpannya ke dalam database. Untuk tombol tambah data, saya tempatkan pada sebuah link yang saya beri class dengan nama tambah. Dengan fungsi $(‘#konten’).append(), saya menambahkan beberapa field ke dalam tbody dengan id konten.

Jika field yang disiapkan terlalu banyak, maka perlu ditambahkan tombol untuk menghapus. Nah, disini saya fungsi hapusnya, yaitu $(this).parents(“.baris”).remove();. Script selengkapnya kira seperti di bawah ini :

$(document).ready(function() {
            var nomor = 0;
            $(".tambah").click(function(){
            nomor ++;
                $('#konten').append(
                             '<tr class="baris">'
                         + '<input name="nomor[]" value="'+ nomor +'" type="hidden"></td>'
                         + '<td><input name="kode_barang_'+ nomor +'" type="text"></td>'
                         + '<td><input name="nama_barang_'+ nomor +'" type="text"></td>'
                         + '<td><input name="harga_barang_'+ nomor +'" type="text"></td>'
                         + '<td><input type="button" id="hapus" value="Hapus"></tr>'
                    );
                });
                $("#hapus").live('click', function () {
			$(this).parents(".baris").remove();
            	});
        });

Dan yang terakhir, script php untuk menyimpannya ke dalam database. Buat sebuah file baru dengan nama simpan.php, disini saya menggunakan foreach sebagai perulangannya, kira-kira script php untuk menyimpannya ke dalam database seperti di bawah ini :

<?php
foreach ($_POST['nomor'] as $i)
{
	/*query insert ke database taruh disini
	mysql_query = "insert into tbl_barang (kd_brng,nm_brng,hrga)
	values('$_POST['kode_barang_'.$i]','$_POST['nama_barang_'.$i]','$_POST['harga_barang_'.$i]')";
	*/
	echo '<tr>
	<td>'.$_POST['kode_barang_'.$i].'</td>
	<td>'.$_POST['nama_barang_'.$i].'</td>
	<td>'.$_POST['harga_barang_'.$i].'</td>
	</tr>';
}
?>

Saya berikan perintah perulangan, agar mudah untuk menentukan berapa kali proses penyimpanan dilakukan ke database sesuai dengan jumlah data yang dikirimkan dari form. Bagaimana, mudah kan??? Bagi yang belum jelas, di bawah postingan ini sudah saya sediakan link untuk mendownload source kode lengkapnya dan sebuah file demo hasil akhirnya.

Happy Blogging and Keep Coding

Cheerrrsss….!!!!