Keypress on Ajax

Awalnya di suruh buat perubahan pada saat input karakter dalam texbox, karena aku newbie dalam ajax jadi ya terpaksa tanya ke om google, dan link ke www.w3school.com. Disinilah tempat para web programmer belajar bahasa web. langsung saja ke contoh,,,untuk diingat :simpan semua file dalam folder yang sama

index.php
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function cari(){
var valcari = $(‘#txtsearch’).val();
$(‘#isitabel’).load(‘cari.php?act=ketemu&valcari=’+valcari);
}
</script>
<div id=’tmpcari’>
<table id="tblcarimhs">
<tr>
<td>Cari Mahasiswa : </td>
<td><input type=’text’ id=’txtsearch’ class=’txtsearch’ size=’20’ onkeypress=’cari()’></td>
</tr>
</table>
</div>
<div id=’isitabel’ class==’isitabel’></div>

cari.php
<?
$koneksi= mysql_connect(‘localhost’,’root’,’rsgmadm’);
$db= mysql_select_db(‘test’);

$ok=$_REQUEST[‘act’];
switch ($ok){
case’ketemu’:
ditemukan();
break;
}

function ditemukan(){
$valcari=$_REQUEST[‘valcari’];
$s="select * from tblmahasiswa where nama like ‘%$valcari%’";
$q= mysql_query($s);
$no=1;
echo "<table>
<tr class=’tbltr’>
<th class=’tbltr’ width=’10’>No</th>
<th class=’tbltr’ width=’30’>NIM</th>
<th class=’tbltr’ width=’150′>NAMA</th>
<th class=’tbltr’ width=’250′>ALAMAT</th>
</tr>";
while($r= mysql_fetch_array($q)){
$nim=$r[‘NIM’];
$nama=$r[‘NAMA’];
$addr=$r[‘ALAMAT’];
echo "<tr>
<td class=’tbltd’ width=’10’>$no</td>
<td class=’tbltd’ width=’30’>$nim</td>
<td class=’tbltd’ width=’150′>$nama</td>
<td class=’tbltd’ width=’250′>$addr</td>
</tr>";
$no++;
}
echo "</table>";
}
?>

<style>
.tbltr{
color:blue;
border:1px dotted grey;
font-size:14;
}
.tbltd{
border:1px dotted grey;
font-size:13;
}
</style>

Sedikit ulasan tentang script – script diatas…go go go..
<script type="text/javascript" src="jquery.js"></script>
script diatas untuk memanggil framework jquery.js

function cari(){
var valcari = $(‘#txtsearch’).val();
$(‘#tabelmhs’).show();
$(‘#isitabel’).load(‘cari.php?act=ketemu&valcari=’+valcari);
}


function cari diatas adalah fungsi yang dipanggil saat mengisi text box pencarian nama mahasiswa. $(‘#isitabel’) adalah objek/tempat yang disediakan untuk mendapatkan nilai yang diambil dari database saat mengeksekusi load(‘cari.php?act=ketemu&valcari=’+valcari);.
pada file cari.php adalah untuk koneksi ke database dan mengirimkan nilai ke client. nah nilai tersebut akan disimpan pada $(‘#isitabel’) .
$ok=$_REQUEST[‘act’]; maksudnya variable ok mengambil data dari act yang dikirim oleh load pada index.php.
switch($ok){
case’ketemu’:
ditemukan();
break;
}

adalah pengkondisian pada php, seperti halnya if…
Mungkin cukup sampai disini sudah bisa dimengerti para pembaca, karena setelahnya adalah html biasa.
Mudah-mudahan artikel ini dapat bermanfaat.

Silakan klik disini jika ingin mendownload

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