Teknik Insert data menggunakan Jquery Ajax

jQuery-Ajax-Write-More-Do-LessAssalamualaikum Wr Wb

Pada kesempatan kali ini septiyo.com akan berbagi teknik cara insert ke mysql database menggunakan Jquery Ajax. Apa itu jquery ajax? Singkatnya suatu proses pengolahan data yang berada dibelakang layar / tersembunyi dan tanpa Loading n refresh 1 halaman penuh.

Cerita dikit dulu saya agak alergi menggunakan ajax, kenapa? karena untuk insert saja sintaxnya amat panjang, namun sejak ada Jquery syntax ajax jadi semakin simple dan karena keterpaksaan (ada suatu proyek yang proses savenya tidak bisa menggunakan proses $_POST pada php, jadi terpaksa saya belajar jquery ajax)

oke langsung saja,

anda bisa membuat file php dan beri saja nama index.php dan ketikan syntax berikut

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
42
43
44
45
46
47
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script>
$(document).on("click","#woke",function() {

var arr = [];
var i = 0;
$(".produk").each(function(index, element) {
if ($(element).val()!=="") {
arr.push({
produk:$(element).val(),
qty:$(element).parents("div").find(".sipo").val(),
});
i++;
}
});

$.ajax({
type:"post",
url:"tampil_data_all.php",
data:{"q": arr},
dataType:"html",
//data:{"q":tgl_satu,"qty":array_id,"accid":date_satu,"aksi":aksi},
success:
/*function(data){
$("#tes").html(JSON.stringify(arr));
alert (JSON.stringify(arr));
//alert(data);

},*/
function(php_script_response){
//$("#tes").html(JSON.stringify(arr));
alert(php_script_response);
//alert(data);

},
});

});
</script>

<div><input name="produk[]"  value="kukis" class='produk' type="text" /><input name="qty[]" class="sipo" value='2'  type=text/></div>
<div><input name="produk[]"  value="puff" class='produk' type="text"/><input name="qty[]" class="sipo" value='3'  type=text/></div>

<input type='submit' value='save' name='save' id='woke'>

<div id="tes"></div>

penjelasannya nanti dulu,

sekarang anda buat file lagi dengan nama tampil_data_all.php

dan ketikkan kode berikut

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
include "koneksi.php";
$uki = $_POST['q'];
$min = "49086";
foreach ($uki as $item) {

$sql_kj="INSERT INTO order_kirim SET  account_id  = '$min',
item_code  = '".$item['produk']."',
qty        = '".$item['qty']."',
periode1   = '2016-02-01',
periode2   = '2016-02-01',
tgl_upload = '2016-02-15 14:36:22'";
$hasil_input_kj = mysqli_query($mysqli, $sql_kj);

echo $sql_kj;
};

?>

Oke jika sudah coba anda jalankan syntax tersebut dengan mengakses index.php

akan ada total 2 kolom, mirip tabel.

inputNah jika muncul anda bisa klik save, jika muncul seperti ini

alert

Berarti anda sudah berhasil. Wow. Gan, kok gini aja? ya, saya barasumsi anda sudah bisa lah tinggal melanjutkannya ke mysql.

syntax yang kita pelajari tadi sudah berhasi mengambil dari textbox yang ada lalu melemparnya ke fike tampil_data_all.php, setelah data ditangkap tinggal di masukkan saja.

oke kita bahas scriptnya

1
2
3
4
<div><input name="produk[]"  value="kukis" class='produk' type="text" /><input name="qty[]" class="sipo" value='2'  type=text/></div>
<div><input name="produk[]"  value="puff" class='produk' type="text"/><input name="qty[]" class="sipo" value='3'  type=text/></div>

<input type='submit' value='save' name='save' id='woke'>

ini adalah formnya, form input, biasanya jika menggunakan GET POST pada php, kita harus menggunakan tag <form></form> yang mengarahkan pada file yang dituju untuk exekusi query, namun dengan ajax jqyery tidak perlu, yang penting kita harus punya selector class=produk dan juga class=sipo

dan juga selector pada submitnya id=’woke’

Selanjutnya syntax

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js”></script>

untuk mengambils Source CDN jquery online. (bagi yang tidak ingin online anda bisa dowload linknya si CDN itu)

1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).on("click","#woke",function() {

var arr = [];
var i = 0;
$(".produk").each(function(index, element) {
if ($(element).val()!=="") {
arr.push({
produk:$(element).val(),
qty:$(element).parents("div").find(".sipo").val(),
});
i++;
}
});

syntax diatas untuk mengambil array dari formnya yang kebutulan hanya ada dua jenis yaitu produk dan qty.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$.ajax({
type:"post",
url:"tampil_data_all.php",
data:{"q": arr},
dataType:"html",
success:
/*function(data){
$("#tes").html(JSON.stringify(arr));
alert (JSON.stringify(arr));
//alert(data);

},*/
function(php_script_response){
//$("#tes").html(JSON.stringify(arr));
alert(php_script_response);
//alert(data);

},

adalah syntax jquery ajaxnya, type post untuk melempar data ke file lain, url untuk mengarahkan ke halaman yang dituju, data:{“q”: arr}, adalah array yang diambil dari syntax yang diatas dimasukkan kedalam variabel q, dataType:”html”, data tipe balikan, nanti setelah sampai ke file yang dituju akan mengembalikan type data dalam bentuk apa? ini saya pilih html dan yang terakhir function(php_script_response){ adalah function dalam jqyery ajax untuk melihat hasil echo atau php response. bisa juga untuk mengecho querynya.

Setelah script diatas selesai masuk kehalaman yang dituju

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
</p>
<?php
include "koneksi.php";
$uki = $_POST['q'];
$min = "49086";
foreach ($uki as $item) {

$sql_kj="INSERT INTO order_kirim SET  account_id  = '$min',
item_code  = '".$item['produk']."',
qty        = '".$item['qty']."',
periode1   = '2016-02-01',
periode2   = '2016-02-01',
tgl_upload = '2016-02-15 14:36:22'";
$hasil_input_kj = mysqli_query($mysqli, $sql_kj);

echo $sql_kj;
};

?>
<p style="text-align: justify;">

$uki = $_POST[‘q’];
hanya untuk mengambil file lemparan dari jquery yang tadi

foreach ($uki as $item) {

$sql_kj=”INSERT INTO order_kirim SET  account_id  = ‘$min’,
item_code  = ‘”.$item[‘produk’].”‘,
qty        = ‘”.$item[‘qty’].”‘,
periode1   = ‘2016-02-01’,
periode2   = ‘2016-02-01’,
tgl_upload = ‘2016-02-15 14:36:22′”;
$hasil_input_kj = mysqli_query($mysqli, $sql_kj);

echo $sql_kj;
};

syntax ini foreach hanya looping untuk mengulang arraynya dan menerukan hasilnya kedalam query. NOTE: query ini bisa anda modif, mau insert mau update mau apa saja teserah.

 

sudah selesai sampai disini,

saya harap anda paham dengan penjelasan saya. atau bisa tanya2 dulu.

semoga bermanfaat.

Wassalamualaikum

 

Leave a Reply

Your email address will not be published. Required fields are marked *