Multiple Insert Data Dengan jQuery dan PHP

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.  Sudah gak sabar untuk membuat metode input seperti input Nilai atau di sebuah program kasih.

Setelah mencari refrensi di web jQuery.com,  Yaitu dengan menggunakan fungsi .append() yang sudah disediakan oleh jQuery. Silahkan baca dokumentasi selengkapnya di jQuery (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 silahkan tinggalkan komen kawan-kawan.

 
Selamat meng-coding yo....