imPagePopulate: salah satu plugin jquery

Setelah beberapa hari pusing-pusing baca program temen akhirnya ketemu juga penjelasannya, kali ini tentang salah satu plugin jquery yaitu imPagePopulate. Plugin ini berfungsi untuk mengambil data dari database dan meletakkan data tersebut pada form yang telah disediakan pada web page. Sebenarnya bisa saja menggunakan function yang dibuat sedemikian rupa, tapi jika sudah disediakan plugin nya untuk apa pusing-pusing buat function. ok langsung saja ke contoh yang bisa anda download disini. Berikut sedikit penjelasannya
pada file index.php
function ambildata(){
$(‘#ambil’).show();
$(‘#ambil’).load(‘simpan.php?act=getdata’);
$(‘#tmptable’).hide();
}

function putdata(nim){
$(‘#ambil’).hide();
$(‘#tmptable’).show();
$(‘#formdata’).imPagePopulate({
data_url: ‘simpan.php?act=simpandata&nim=’+nim,
db_map: [{"name": "txtnim", "db_field": "NIM", "form": true},
{"name": "txtnama", "db_field": "NAMA", "form": true},
{"name": "txtalamat", "db_field": "ALAMAT", "form": true}],
});
}

simpan.php
function getdata(){
$conn=mysql_connect(‘localhost’,’root’,’rsgmadm’);
$db=mysql_select_db(‘test’);
$s="select * from tblmahasiswa";
$q=mysql_query($s);
$y="style=’border:dotted 1px;padding:2px;color:blue;font-size:12px;’";
echo "<table>
<tr><th>NO</th><th>NIM</th><th>NAMA</th><th>ALAMAT</th></tr>";
$no=1;
while($f=mysql_fetch_array($q)){
echo "<tr ><td $y>$no</td><td $y>$f[NIM]</td><td $y>$f[NAMA]</td><td $y>$f[ALAMAT]</td><td><a href=’javascript:putdata(\"".$f[‘NIM’]."\")’>ambil data</a></td></tr>";
$no++;
}
}

function simpandata(){
$conn=mysql_connect(‘localhost’,’root’,’rsgmadm’);
$db=mysql_select_db(‘test’);
$nim=$_REQUEST[‘nim’];
$s="select * from tblmahasiswa where NIM=’$nim’";
$qr=mysql_query($s);
$f=mysql_fetch_array($qr);
echo ‘ [{"NAMA":"’.$f[‘NAMA’].’",
"NIM":"’.$f[‘NIM’].’",
"ALAMAT":"’.$f[‘ALAMAT’].’"}]
‘;
}

file index.php adalah file yang berisi function javascript digunakan untuk meminta data ke server dengan perantara php yang disimpan pada file simpan.php.

pada function ambildata yang dipanggil saat klik button “ambil data” mendefinisikan area mana saja yang harus di hide atau show dan data yang akan diambil dipanggil pada file simpan, function getdata. Dimana data tersebut akan diletakkan di area “ambil”.

Saat function getdata pada file simpan.php dieksekusi maka yang muncul di webpage adalah table data mahasiswa, saat klik ambil data maka function putdata yang akan dijalankan dan memanggil function simpandata pada file simpan.php.

Nah sekarang kita ke plugin imPagePopulate yang didefinisikan di index.php yaitu
function putdata(nim)
$(‘#formdata’).imPagePopulate({
data_url: ‘simpan.php?act=simpandata&nim=’+nim,
db_map: [{"name": "txtnim", "db_field": "NIM", "form": true},
{"name": "txtnama", "db_field": "NAMA", "form": true},
{"name": "txtalamat", "db_field": "ALAMAT", "form": true}],
});
}

– $(‘#formdata’) adalah id area form yang akan diisi oleh data yang akan diambil.
– data_url adalah alamat function yang akan mengambil data dari server
– db_map adalah definisi data yang akan diletakkan berdasarkan nama input dari form contoh
{"name": "txtnama", "db_field": "NAMA", "form": true},
"txtnama" adalah name pada field input nama
"NAMA" adalah nama variable yang mewakili field di database. pemberian nama variable ini terjadi pada function simpandata.

function simpandata(){
$conn=mysql_connect(‘localhost’,’root’,’rsgmadm’);
$db=mysql_select_db(‘test’);
$nim=$_REQUEST[‘nim’];
$s="select * from tblmahasiswa where NIM=’$nim’";
$qr=mysql_query($s);
$f=mysql_fetch_array($qr);
echo ‘ [{"NAMA":"’.$f[‘NAMA’].’",
"NIM":"’.$f[‘NIM’].’",
"ALAMAT":"’.$f[‘ALAMAT’].’"}]
‘;
}

"NAMA" adalah nama variable yang diberikan untuk mewakili field Nama pada database sedangkan "’.$f[‘NAMA’].’" adalah field di database.

Demikianlah sekelumit plugin jquery yang saya mengerti, bila masih bingung silakan link kesini.

Tinggalkan Balasan

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s