Hallo sahabat dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini saya akan membahas tentang Insert Inline menggunakan jQuery AJAX. Dalam tutorial ini, kita akan melihat bagaimana melakukan inline insert data tabel HTML5 ke tabel database menggunakan jQuery dan AJAX. HTML5 memungkinkan pengeditan sel tabel dengan men-setting atribut contentEditable sebagai true. Setelah menambahkan data ke sel tabel, kita dapat meneruskan data sel ke PHP melalui jQuery AJAX. Di halaman PHP, saya membuat insert query menggunakan data sel untuk menyimpan ke database.
Dalam contoh ini, saya memiliki tabel HTML5 untuk menambahkan informasi produk. Kami memasukkan data produk di sel yang dapat diedit dan konfirmasi untuk menyimpan ke database saat mengklik tombol. saya menggunakan atribut data khusus untuk menyimpan nama bidang produk. Dengan referensi nama field, kita mendapatkan nilai yang dimasukkan. Ini akan berguna untuk membentuk data posting yang akan dikirim ke PHP melalui AJAX.
Tabel HTML5 untuk Memasukkan Data Inline
Kode berikut menunjukkan tabel HTML5 yang dapat diedit dan tombol Simpan. Di dalam tabel, sel yang dapat diedit dirujuk dengan nama bidang produk dengan menggunakan atribut data. Setelah memasukkan data dengan pengeditan inline, kita harus mengonfirmasi untuk menyimpan data ke database dengan menggunakan tombol Simpan.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div class="txt-heading">Add Product</div> <table cellpadding="10" cellspacing="1"> <tbody> <tr> <th><strong>Name</strong></th> <th><strong>Code</strong></th> <th><strong>Description</strong></th> <th style="text-align:right;"><strong>Price</strong></th> </tr> <tr> <td contentEditable="true" data-id="product_name"></td> <td contentEditable="true" data-id="product_code"></td> <td contentEditable="true" data-id="product_desc"></td> <td contentEditable="true" data-id="product_price" style="text-align:right;"></td> </tr> </tbody> </table> <div id="btnSaveAction">Save to Database</div> |
Menyimpan Tabel Data ke Database melalui jQuery AJAX
Skrip jQuery berikut membaca konten sel yang dapat diedit dengan referensi atribut khusus dan data form untuk diposting melalui AJAX. PHP akan menggunakan data posting dan permintaan penyisipan api untuk menambahkan data ini ke database. Pada penyisipan produk yang berhasil, halaman PHP akan mengembalikan baris yang baru ditambahkan sebagai respons terhadap panggilan AJAX yang akan ditampilkan kepada pengguna.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<script> $("#btnSaveAction").on("click",function(){ params = "" $("td[contentEditable='true']").each(function(){ if($(this).text() != "") { if(params != "") { params += "&"; } params += $(this).data('id')+"="+$(this).text(); } }); if(params!="") { $.ajax({ url: "insert-row.php", type: "POST", data:params, success: function(response){ $("#ajax-response").append(response); $("td[contentEditable='true']").text(""); } }); } }); </script> |
File PHP untuk memasukkan data ke dalam database ,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<?php require_once("dbcontroller.php"); $db_handle = new DBController(); $product_name = ""; $product_code = ""; $product_desc = ""; $product_price = ""; if(!empty($_POST["product_name"])) { $product_name = $db_handle->cleanData($_POST["product_name"]); } if(!empty($_POST["product_code"])) { $product_code = $db_handle->cleanData($_POST["product_code"]); } if(!empty($_POST["product_desc"])) { $product_desc = $db_handle->cleanData($_POST["product_desc"]); } if(!empty($_POST["product_price"])) { $product_price = $db_handle->cleanData($_POST["product_price"]); } $sql = "INSERT INTO tbl_product (product_name,product_code,product_desc,product_price) VALUES ('" . $product_name . "','" . $product_code . "','" . $product_desc . "','" . $product_price . "')"; $product_id = $db_handle->executeInsert($sql); if(!empty($product_id)) { $sql = "SELECT * from tbl_product WHERE id = '$product_id' "; $productResult = $db_handle->readData($sql); } ?> <?php if(!empty($productResult)) { ?> <tr> <td><?php echo $productResult[0]["product_name"]; ?></td> <td><?php echo $productResult[0]["product_code"]; ?></td> <td><?php echo $productResult[0]["product_desc"]; ?></td> <td style="text-align:right;"><?php echo $productResult[0]["product_price"]; ?></td> </tr> <?php } ?> |
Oke itulah tadi pembahasan saya tentang Insert Inline menggunakan jQuery AJAX, semoga bermanfaat. Untuk melihat hasilnya silahkan coba sendiri. Terima kasih.