Cara Membuat jQuery Ajax Inline Insert

Pada panduan ini, kita akan membahas Cara Membangun jQuery Ajax Inline Insert menggunakan jQuery dan AJAX. Setelah menambahkan data ke pada tabel database, kita dapat seketika menampilkan ke PHP via jQuery AJAX. Disini saya menggunakan tabel HTML5 bagi menampilkan dari hasil inser inline menggunakan jQuery dan ajax.

Tabel HTML bagi Insert Data ke Database

Script dibawah ini digunakan bagi menjalankan insert data menggunakan jQuery dan Ajax, pada tabel ini kita hanya dapat insert satu data pada setiap kali insert data, sesuai dengan judul kita yaitu Cara Membangun jQuery Ajax Inline Insert. Berikut script bagi merancang table insert data;

<div class=”txt-heading”>Add Product</div><br />
	<table cellpadding=”10″ cellspacing=”1″><br />
		<tbody><br />
			<tr><br />
				<th><strong>Name</strong></th><br />
				<th><strong>Code</strong></th><br />
				<th><strong>Description</strong></th><br />
				<th style=”text-align:right;”><strong>Price</strong></th><br />
			</tr><br />
			<tr><br />
				<td contentEditable=”true” data-id=”product_name”></td><br />
				<td contentEditable=”true” data-id=”product_code”></td><br />
				<td contentEditable=”true” data-id=”product_desc”></td><br />
				<td contentEditable=”true” data-id=”product_price” style=”text-align:right;”></td><br />
			</tr><br />
		</tbody><br />
	</table><br />
<div id=”btnSaveAction”>Save to Database</div>

<div class=“txt-heading”>Add Product</div>

<tbody>

<tr>

<th><strong>Description</strong></th>

<th style=“text-align:right;”><strong>Price</strong></th>

</tr>

<tr>

</tr>

</tbody>

</table>

<div id=“btnSaveAction”>Save to Database</div>

Script bagi Menyimpan Data ke Database via jQuery AJAX

Skrip jQuery berikut digunakan bagi membaca kontenÂ dan menjalankan insert yang akan diposting via AJAX. PHP akan menggunakan data post danÂ kueri bagi menambahkan data ini ke database. Di penyisipan data yang berhasil, halaman PHP akan mengembalikan baris yang baru ditambahkan selaku respon kepada panggilan AJAX yang akan ditampilkan kepada pengguna.

<script><br />
$(“#btnSaveAction”).on(“click”,function(){<br />
	params = “”<br />
	$(“td[contentEditable=’true’]”).each(function(){<br />
		if($(this).text() != “”) {<br />
			if(params != “”) {<br />
				params += “&”;<br />
			}<br />
			params += $(this).data(‘id’)+”=”+$(this).text();<br />
		}<br />
	});<br />
	if(params!=””) {<br />
		$.ajax({<br />
			url: “insert-row.php”,<br />
			type: “POST”,<br />
			data:params,<br />
			success: function(response){<br />
			  $(“#ajax-response”).append(response);<br />
			  $(“td[contentEditable=’true’]”).text(“”);<br />
			}<br />
		});<br />
	}<br />
});<br />
</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 bagi memasukkan data ke pada database,

<?php<br />
	require_once(“dbcontroller.php”);<br />
	$db_handle = new DBController();<br />
	$product_name = “”;<br />
	$product_code = “”;<br />
	$product_desc = “”;<br />
	$product_price = “”;</p>
<p>	if(!empty($_POST[“product_name”])) {<br />
		$product_name = $db_handle->cleanData($_POST[“product_name”]);<br />
	}<br />
	if(!empty($_POST[“product_code”])) {<br />
		$product_code = $db_handle->cleanData($_POST[“product_code”]);<br />
	}<br />
	if(!empty($_POST[“product_desc”])) {<br />
		$product_desc = $db_handle->cleanData($_POST[“product_desc”]);<br />
	}<br />
	if(!empty($_POST[“product_price”])) {<br />
		$product_price = $db_handle->cleanData($_POST[“product_price”]);<br />
	}</p>
<p>	$sql = “INSERT INTO tbl_product (product_name,product_code,product_desc,product_price) VALUES (‘” . $product_name . “‘,'” . $product_code . “‘,'” . $product_desc . “‘,'” . $product_price . “‘)”;<br />
	$product_id = $db_handle->executeInsert($sql);</p>
<p>	if(!empty($product_id)) {<br />
		$sql = “SELECT * from tbl_product WHERE id = ‘$product_id’ “;<br />
		$productResult = $db_handle->readData($sql);<br />
	}<br />
?><br />
<?php<br />
	if(!empty($productResult)) {<br />
?><br />
<tr><br />
	<td><?php echo $productResult[0][“product_name”]; ?></td><br />
	<td><?php echo $productResult[0][“product_code”]; ?></td><br />
	<td><?php echo $productResult[0][“product_desc”]; ?></td><br />
	<td style=”text-align:right;”><?php echo $productResult[0][“product_price”]; ?></td><br />
</tr><br />
<?php<br />
	}<br />
?>

sumber :kursuswebprogramming.com/blog/

(Visited 8 times, 1 visits today)

Leave a Reply Cancel reply