Friday, November 25, 2011

Implementasi php dengan ajax

1. Tools
Apache  web server, PHP, MySQL, text editor, browser


2. Dasar Teori
Ajax  (Asynchronous JavaScript  and  XML) merupakan salah  satu teknik berbasis JavaScript untuk membuat “background server calls” dan menerima data dari server sebatas yang  diperlukan saja, tanpa harus  me-load halaman secara keseluruhan. Sebagai contoh, dalam sebuah form pengisian untuk account email baru  misalnya, server bisa  memberikan saran  email apa  yang  cocok  untuk user dengan nama  tertentu  berdasarkan kombinasi nama  user  tersebut tanpa harus me-load keseluruhan halaman. Contoh yang  lain adalah Google  Suggest, Gmail,Google Maps, dsb.


Secara  umum, teknologi yang  menjadi dasar  Ajax adalah :
?  JavaScript
?  Document  Object  Model   (DOM)  untuk  memanipulasi bagian dari   halaman
HTML
?  XMLHttpRequest    (XHR)    Object    yang     memungkinkan   JavaScript    untuk
mengakses server secara  asinkron. XHR diimplementasikan secara  berbeda pada  browser tertentu. Sebagai contoh untuk IE6 diimplemntasikan dengan :
xhr = new ActiveXObject(“Microsoft.XMLHttp”);
Sedangkan untuk browser lain  :
xhr = new XMLHttpRequest();

<!--
File : csstest.html
Desc : Refreshing penggunaan JS, CSS, dan DOM
-->
<html>
<head>
<title>css,dom,js</title>
<script type="text/JavaScript" src="csstest.js" ></script>
<link href="styles.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<table border="1" id="tabel">
<tr>
<td>baris satu</td>
</tr>
<tr>
<td>baris dua</td>
</tr>
</table>
<br />
<input type="button" value="set style 1" onclick="setstyle1();" />
<input type="button" value="set style 2" onclick="setstyle2();" />
</body>
</html>

/**
*    File : csstest.js
*    Desc : JS untuk setting style tabel*/
function setstyle1(){
//mendapatkan referensi elemen html
tabel = document.getElementById("tabel");
//set style
tabel.className = "Tabel1";
}
function setstyle2(){
tabel = document.getElementById("tabel");
tabel.className = "Tabel2";
}

/**
* File : styles.css
* Desc : css style tabel
*/
.Tabel1{
border: green 1px solid;
background-color: red;
}
.Tabel2{
border: blue 1px solid;
background-color: maroon;
}

XHR object
<!--
File : ajax_readfile.html
Desc : membaca text file dengan ajax -->
<html>
<head>
<title>Read Text File Ajax</title>
<script language="javascript" type="text/javascript">
var XMLHttpRequestObject = false;
if (window.XMLHttpRequest) {
XMLHttpRequestObject = new XMLHttpRequest();
} else if (window.ActiveXObject) {
XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");
}
function getData(dataSource, divID)
{
if(XMLHttpRequestObject) {
var obj = document.getElementById(divID); XMLHttpRequestObject.open("GET", dataSource); XMLHttpRequestObject.onreadystatechange = function()
{ //jika request dan transaksi selesai,maka .... if (XMLHttpRequestObject.readyState == 4 &&
XMLHttpRequestObject.status == 200) {
obj.innerHTML = XMLHttpRequestObject.responseText;
}
} //tidak mengirim apapun jika GET yang digunakan
XMLHttpRequestObject.send(null);
}
}
</script>
</head>
<body>
<form><input type="button" value="tampilkan pesan" onclick="getData('data.txt','targetDiv')"></form>
<div id="targetDiv">
<p>data akan di sini ....</p>
</div>
</body>
</html>

Ajax  di atas akan  membaca file data.txt sebagai berikut, dengan lokasi  data.txt sama  dengan ajax_readfile.html :
Seharusnya teks ini bisa anda baca karena telah di-fetch Ajax

Jika  dicermati,  metode  yang   digunakan  untuk  membuka  URL  menggunakan metode GET. Metode  POST bisa  digunakan ketika data yang  akan  dikirimkan ke server banyak.

PHP dan  AJAX
Pada  sesi  kali  ini,  Ajax  akan  digunakan dengan PHP. Form  berikut adalah form isian  nama  dan umur, dan hasil  masukan nama  dan umur akan  ditampilkan pada form tersebut TANPA berpindah form :

 
<!--
File : ajax_form.php
Desc : membaca form dengan ajax
-->
<html>
<head>
<title>Read Data Ajax</title>
<script type="text/JavaScript" src="ajax_dasar.js"></script>
<script type="text/JavaScript">
var xmlhttp;
function ajaxget(){
xmlhttp = GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
xmlhttp.onreadystatechange=stateChanged;
//mendapatkan value masukan user
var vname=encodeURIComponent(document.getElementById("name").value) var vage=encodeURIComponent(document.getElementById("age").value) var url = "get_data.php?name="+vname+"&age="+vage;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}

function stateChanged(){
if (xmlhttp.readyState==4)
{
document.getElementById("result").innerHTML=xmlhttp.responseText;
}
}
</script>
</head>
<body>
<form method="GET" >
Your name: <input type="text" id="name" name="name" size="25" /> <br /> Your age: <input type="text" id="age" name="age" size="25" /> <br />
<input type="button" value="submit" onClick="ajaxget()" />
</form>
<div id="result"> </div>
</body>
</html>

<?php
/**
* File : get_data.php
* Desc : dokumen untuk mendapatkan data dengan form dan PHP
*/
$name = $_GET['name'];
$age = $_GET['age'];
echo 'your name is '.$name." and your age is ".$age;
?>

0 comments:

Post a Comment

Please Comment my blog..