fufuwuf: Februari 2012

Benaru-benar dari "0" (nol) untuk sebuah kata program, ya satu sampe dua tahun yang lalu.. hehe

Udah banyak bahasa pemrograman yang udah dijumpai sampe-sampe ada yang punya nama lain dari bahasa itu, ya saya ga akan sebutin bahasanya tapi itu dia BAHASA SETAN!! (pikirkan sendiri) haha

Kali ini saya mau ngejelasin beberapa langkah mengenai pemrograman AJAX yang memang sedang menjadi trend pada zaman serba online ini, sumber referensinya sih dari satu buku yang memang menjadi bacaan saya semenjak 24jam yang lalu "PANDUAN LENGKAP PHP AJAX jQuery" dari http://blog.codingwear.com..

AJAX adalah singkatan dari Asynchronous JavaScript and XML.

AJAX, terdiri dari HTML, Javascript, DHTML dan DOM yang kemudian digabungkan dengan bahasa pemograman web di sisi server seperti PHP dan ASP, sehingga membentuk suatu aplikasi berbasis web yang interaktif.

AJAX bukanlah bahasa pemograman baru, tetapi adalah teknik baru untuk membuat aplikasi web lebih baik, lebih cepat dan lebih interaktif.

Dengan AJAX, Javascript dapat langsung berkomunikasi dengan server dengan menggunakan objek XMLHttpRequest. Dengan objek ini, javascript dapat melakukan transaksi data denga server web, tanpa harus me-reloading halaman web tersebut secara keseluruhan.

Berikut adalah teknologi yang termasuk dalam aplikasi AJAX :

• HTML yang digunakan untuk membuat Web forms dan mengindentifikasikan filed-field yang akan anda gunakan dalam aplikasi.

• JavaScript adalah kode inti untuk menjalankanaplikasi Ajax dan untuk membantu memfasilitasi komunikasi dengan aplikasi .

• DHTML, atau Dynamic HTML, membantu anda untuk membuat form atau web anda dinamis. Anda akan menggunakan <div>, <span> dan elemen HTML dinamis lainya.

• DOM, Document Object Model, akan digunakan (melalui kode JavaScript) untuk bekerja dengan kedua struktur dari HTML dan XML anda yang dalam beberapa kasus berasal dari server.

Hal pertama yang harus dimengerti ini adalah XMLHttpRequest yang berfungsi seperti bridge pada jaringan (menurut saya). Dengan Ajax, javascript akan berkomunikasi secara langsung dengan server melalui XMLHttpRequest tersebut.

Dengan objek XMLHttpRequest, suatu halaman web dapat membuat request ke, dan mendapatkan respon dari server web tanpa me-reload halaman secara keseluruhan. User akan selalu tetap dengan halaman yang sama. Bahkan user tidak akan tahu kalau ada data yang dikirim dan diterima dari server, karena javascript melakukan transaksi data di balik layar.

Untuk lebih jelasnya tentang AJAX ini, bisa dilakukan percobaan mungkin lebih enaknya latihan sebagi berikut :

1. Buat database dengan nama "kampus" di dalam MySQL

2. Isi database dengan tabel "t_mhs" dan "t_jk"

3. Isi tabel t_mhs dengan "npm, nm_mhs, kd_jk, almt_mhs, notel_mhs, email_mhs" (mahasiswa)

4. Isi tabel t_jk dengan "kd_jk, jk" (jenis kelamin)

5. Setelah membuat database beserta isinya, sekarang ketikan kode seperti dibawah ini dan save dengan nama file "data_mahasiswa.php" tentu dalam folder yang diinginkan di dalam folder htdocs :

<!DOCTYPE html>
<html>
<head>
<script>
var ajaxku;
function ambildata(npm)
{
ajaxku = buatajax();
var url="ambildata.php";
url=url+"?q="+npm;
url=url+"&sid="+Math.random();
ajaxku.onreadystatechange=stateChanged;
ajaxku.open("GET",url,true);
ajaxku.send(null);
}

function buatajax()
{
if (window.XMLHttpRequest)
{
return new XMLHttpRequest();
}

if (window.ActiveXObject)
{
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}

function stateChanged()
{
var data;
if (ajaxku.readyState==4)
{
data=ajaxku.responseText;
if(data.length>0)
{
document.getElementById("notel").value = data
}else
{
document.getElementById("notel").value = "";
}
}
}
</script>
<title>
BELAJAR AJAX
</title>
<link rel="stylesheet" type="text/css" href="datmhs_css.css"/>
</head>
<body>
<div id="header">
BELAJAR AJAX
</div>
<div id="spacer">
</div>
<div id="search_box">
<span>
Search student :
<select name="mhs" id="mhs" onchange=ambildata(this.value)>
<option value="">

</option>
<?php
mysql_connect("localhost","root","");
mysql_select_db("kampus");
$query = mysql_query("select * from t_mhs");
while($x = mysql_fetch_array($query))
{
?>
<option value="<?php echo $x['npm']; ?>">
<?php echo $x['nm_mhs']; ?>
</option>
<?php
}
?>
</select>
<hr>
Phone number : <input type="text" name="notel" id="notel" readonly>
</span>
</div>

</body>
</html>

6. setelah itu, buat 1 file dengan nama "ambildata.php" dalam folder yang sama dan isi dengan :



<?php

 mysql_connect("localhost","root","");

 mysql_select_db("kampus");

 $npm = $_GET['q'];

 if($npm)

 {

  $query = mysql_query("select * from t_mhs where npm = '$npm'");

  while($d = mysql_fetch_array($query))

  {

   echo $d['notel_mhs'];

  }

 }

?>

7. Setelah selesai membuat 2 file itu, panggil file data_mahasiswa.php melalui browser, dan lihat hasilnya. Saat memilih data di combobox, nomor telfon yang sesuai dengan data yang dipilih akan secara otomatis keluar di textbox dibawahnya..

Nah untuk lebih jelasnya, bisa baca buku itu dan mulailah bereksperimen dengan AJAX... :D

fufuwuf

Senin, 06 Februari 2012

Awal Belajar AJAX - PHP