Archive | Ajax

Tags: ,

Implementasi ajax dalam mengirim isi textarea kedalam file


Sebenarnya tulisan ini dari request di komentar, yang minta contoh penggunaan ajax.

kali ini saya tidak akan ngomong panjang tentang ajax, karena di tulisan sebelum2nya sudah dibahas detail teorinya, judul disinikan implementasi, jadi praktek only. oke

Visi tulisan ini adalah:
- implementasi ajax dengan prototype.js
- mengirim nilai textarea
- menulisi file dengan ajax
- mendeteksi respon

Misi tulisan ini adalah:
1. memanggil ajax
2. membuat form texarea
3. membuat script request
4. membuat file baru yg berisi script penampung proses
5. mendeteksi keluaran

File utama.php

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mengirim isi textarea ke dalam file</title>
<script src="prototype.js" type="text/javascript"></script>
<script language="javascript">
      function validasi(){
      if($("listData").value == ""){
        alert('Textarea jangan kosong doonkkk');
        $("listData").focus();
        return false;
      }
      return true;
      }
      function listData(){
          if($("listData").value != ""){
              var dListData = $('listData').value;
              var text = dListData.replace(/\s+$/g,"");
              var splitq = text.split("\n");
    
                  var jumBaris = splitq.length;
                  URL='tulisTextFile.php?jumBaris='+jumBaris+'&dListData='+splitq+'&rd=65765s';
                   new Ajax.Request(URL,{
                       method: 'get',
                       onSuccess: function(transport){
              if(transport.responseText){
                              var responData = transport.responseText;
                              var hasilx = new Array();
                              hasilx = responData.split("|");
                alert('terima hasil:');
                alert('jenis hasil'+hasilx[0]);
                alert('status respon'+hasilx[1]);
              } else {
                alert('respon gagal');
              }
                       }, onFailure: function(transport){
              alert('request gagal');
                       }, onLoading: function(transport){
              alert('masih loading');
                       }
                   });
          }  else {
      alert('gagal, teks jangan kosong');
      }
      }
 
</script>
 
</head>
<body>
  <table>
  <tr>
  <td>
    <textarea name="listData" id="listData" cols="109" rows="3" style="font-size:11px;font-family: Tahoma;text-align:left;"></textarea>
  </td>
  </tr>
  <tr>
  <td>
    <input type="submit" name="prosesdata" value="Kirim ke File" id="prosesData" onClick="if(validasi()) { kirimData(); }"/>
  </td>
  </tr>
  </table>
 
</body>
</html>

Lalu buat file baru dengan nama tulisTextFile.php

< ?php
$jumBaris = $_GET['jumBaris'];
$dListData = $_GET['dListData'];
$explodeList = explode(",",$dListData);
$isi = "";
foreach($explodeList as $index=>$nil){
    $isi .= "".$nil."\r\n";
}
 
    $namaFileDigit = $jumBaris."Digit.txt";
    @unlink($namaFileDigit);
    $handle = @fopen($namaFileDigit, 'a+');
    
    if(@fwrite($handle, $isi)){
    echo '1|Sukses isi file';
  } else {
    echo '0|Gagal isi file';
  }
 
    @fclose($handle);
?>

silahkan jalankan di browser anda dengan memanggil localhost/utama.php
isi textarea, lalu tekan tombol Kirim ke File…

Semoga sukses, kalo error gimana ya.. semoga aja tidak okeyyy…
pengin njelasin tapi cape,,,,

Posted in Ajax, Javascript, PHPComments (3)

Tags:

Contoh sederhana Ajax


Nah, untuk lebih memahami definisi ajax di atas, berikut contoh sederhana penggunaan aplikasi ajax.
Sebelumnya, anda harus menginstall web server, PHP, MySql. Aplikasi yang sudah lengkap dan bias digunakan adalah XAMPP, silahkan download di website resminya yang versi terbarunya xampp di www.xampp.com
Saya anggap pembaca sudah memahami cara instalasi xampp, jika belum silahkan googling aja.

Anggap, struktur webservernya seperti berikut :
Buat folder latihanajax di folder xampp di c:\xampp\htdocs\latihanajax
Nanti seluruh file latihan ada folder tersebut.
Buat file latsatu.html
Quick Code


<html>
<head>
<title>Latihan Satu AJAX</title>
<script type="text/javascript" src="latsatu.js"></script>
</head>
<body>
<table width="100%" align="center">
<tr>
<td align="center">
      Coba anda tuliskan sebuah text pada form di bawah <br />
      <input type="text" id="teksInput" onkeyup='proses()' />
      <div id="hasilProses"></div>
</td>
</tr>
</table>
</body>
</html>

Buat file latsatu.js
Quick Code


<kode>
var xmlHttp = bikinXmlHttp();
 
function bikinXmlHttp() {
    var xmlHttp;
    if (window.ActiveXObject) {
        try { //jika IE
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
            xmlHttp = false;
        }
    } else {
        try {
            xmlHttp = new XMLHttpRequest();
        } catch (e) {
            xmlHttp = false;
        }
    }
    if (!xmlHttp) {
        alert("Gagal dalam membuat xmlHttpRequest Object");
    } else {
        return xmlHttp;
    }
}
 
function proses() {
    if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0) {
        teks = encodeURIComponent(document.getElementById("teksInput").value);
        xmlHttp.open("GET", "latsatu.php?teks="+teks, true);
        xmlHttp.onreadystatechange = responServer;
        xmlHttp.send(null);
    } else {
        setTimeout('proses',1000); //jika sibuk ulangi dalam 1 detik
    }
}
 
function responServer() {
    if (xmlHttp.readyState == 4) {
        if (xmlHttp.status == 200) {
            xmlResponse = xmlHttp.responseXML;
            xmlDocumentElement = xmlResponse.documentElement;
            hasilTeks = xmlDocumentElement.firstChild.data;
            
            document.getElementById("hasilProses").innerHTML = hasilTeks;
            setTimeout('proses()',1000);
        } else {
alert("Ada problem, method statusText adalah "+xmlHttp.statusText);
        }
    }
}
</kode>

Buat file latsatu.php
Quick Code


< ?php
header('Content-type:Text/xml');
echo '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>';
 
echo '<response>';
$teks = htmlentities($_GET[teks]);
  
if (!empty($teks)) {
    echo 'Teks yang anda masukkan adalah : '.$teks;
} else {
    echo 'Silahkan Masukkan teks pada kotak input di atas';
}
echo '</response>';
?>

Kalau sudah, silahkan buka web browser anda, pakai IE dan firefox
Ketikkan di url nya, http://localhost/latsatu.html
Maka hasilnya adalah sebagai berikut :
Jika kita memasukkan teks di form, otomatis teks tersebut akan dituliskan di bawahnya. Kenapa bisa begitu? Di bawah ini saya jelaskan keterangan programnya.
Keterangan listing program :
Quick Code


<kode>
Dokumen latsatu.html adalah file HTML standard
<script type="text/javascript" src="latsatu.js"></script>
Untuk memanggil javascript di file eksternal.
<input type="text" id="teksInput" onkeyup='proses()' />
Pada input di atas, kita definisikan onkeyup='proses()' yang artinya, jika pointer/cursor kita arahkan di dalam form maka akan memanggil fungsi javascript process(). Sedangkan id="teksInput" digunakan untuk menandai bahwa form ini mempunya id yang bernama teksInput.
 
<div id="hasilProses"></div>
Kita definisikan id="hasilProses" untuk menampilkan hasil dari fungsi proses().
</kode>

Dokumen latsatu.js
Membuat object xmlHttp untuk melakukan transaksi data, karena antara IE dan browser yang lain beda, maka kita definisikan variabel xmlHttp adalah sebuah fungsi yang mengecek apakah browser yang dipakai IE atau bukan.
Untuk IE, xmlHttp di definisikan oleh ActiveXObject(”Microsoft.XMLHTTP”) sedangkan untuk browser yang lain, xmlHttp di isi fungsi XMLHttpRequest().

Quick Code


<kode>
var xmlHttp = bikinXmlHttp();
 
function bikinXmlHttp() {
    var xmlHttp;
    if (window.ActiveXObject) {
        try { //jika IE
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
            xmlHttp = false;
        }
    } else {
        try {
            xmlHttp = new XMLHttpRequest();
        } catch (e) {
            xmlHttp = false;
        }
    }
    if (!xmlHttp) {
        alert("Gagal dalam membuat xmlHttpRequest Object");
    } else {
        return xmlHttp;
    }
}
</kode>

Setelah kita definisikan xmlHttp, kita bisa pakai object tersebut didalam fungsi yang lain. Fungsi proses() berisi xmlHttp.readyState, readyState adalah property dari xmlHttp, bisa bernilai 0-4, bernilai 4 berarti koneksi request sukses, yang berarti baris selanjutnya yang akan dieksekusi. Kita akan bahas detail tentang XMLHttpRequest di Bab selanjutnya.
Kemudian pada baris 3, pengambilan nilai dari dokumen dengan id “teksInput” yang tidak lain adalah input teks pada latsatu.html, kita namai nilai dari form itu sebagai variabel “teks”.

Properti onreadystatechange adalah untuk meminta respon server, yang akan di definisikan pada fungsi di bawahnya. Sedangkan setTimeout adalah fungsi javascript untuk mengulang dalam waktu 1 detik jika server sibuk.
Quick Code


<kode>
function proses() {
    if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0) {
teks =  encodeURIComponent(document.getElementById("teksInput").value);
      xmlHttp.open("GET", "latsatu.php?teks="+teks, true);
      xmlHttp.onreadystatechange = responServer;
      xmlHttp.send(null);
    } else {
        setTimeout('proses()',1000); //jika sibuk ulangi dalam 1 detik
    }
}
</kode>

Fungsi respon server di minta oleh fungsi proses(), readyState = 4 jika proses yang dilakukan object telah selesai dan properti status = 200 adalah respon akan mengembalikan nilai OK karena dokumen ditemukan pada waktu request.
responseXML merupakan property untuk mengembalikan respon dalam format XML
documentElement digunakan untuk mengambil root element pada dokumen XML
firstChild.data untuk mengambil nilai pada element pada dokumen XML
pada baris 7 id “hasilProses” pada dokumen HTML akan diberi nilai hasilTeks yang merupakan nilai dari dokumen XML.

Quick Code


<kode>
function responServer() {
    if (xmlHttp.readyState == 4) {
        if (xmlHttp.status == 200) {
            xmlResponse = xmlHttp.responseXML;
            xmlDocumentElement = xmlResponse.documentElement;
            hasilTeks = xmlDocumentElement.firstChild.data;
            
            document.getElementById("hasilProses").innerHTML = hasilTeks;
            setTimeout('proses()',1000);
        } else {
alert("Ada problem, method statusText adalah "+xmlHttp.statusText);
        }
    }
}
</kode>

Kode di atas hanyalah salah satu contoh sederhana penggunaan konsep ajax, jika anda masih bingung adalah wajar karena penjelasan masing2 ada di bab selanjutnya.

Posted in AjaxComments (17)

Sekilas tentang AJAX


AJAX adalah kependekan dari Asycronous Javascript and XML, dalam bahasa indonesianya asinkron antara javascript dan XML, pengertian mudahnya menggabungkan antara javascript dan xml untuk mengakses sumber data di server. Jadi server tidak diakses secara langsung, biarkan mesin ajax yang mengaksesnya. Javascript sebagai pemrograman di sisi client (artinya program yang dibuat dengan javascript, bisa dijalankan tanpa menggunakan server) sekarang ini bisa digunakan untuk mengakses server secara asinkron (di belakang layar, artinya proses akses tidak terlihat oleh user). Dan XML digunakan untuk format data hasil kembalian dari server. Javascript bisa mengakses server dengan menggunakan suatu object yang disebut dengan XMLHttpRequest(). Ini object loh, sudah built-in dalam mesin javascript, sehingga anda tidak perlu membuatnya. Object inilah yang akan menjadi inti mesin dari AJAX, dari mengkases data sampai dengan menerima respon dari server, semuanya dikendalikan oleh object ini. Karena mesin javascript ada di dalam browser, maka aplikasi web berbasis ajax akan terpengaruh penggunaan browser, jangan khawatir hampir semua browser terbaru (mozilla 1.x sampai 2.x atau yang terbaru, IE 5+ sampai yang terbaru, Opera, Netscape) sudah mendukung object ini.

Dari sini sudah bisa diambil kesimpulan, yaitu

  • Ajax ditulis dengan javascript, memanfaatkan object javascript yang sudah ada yaitu XMLHttpRequest.
  • Ajax tergantung dengan browser, jika browser mendukung javascript, maka bisa dipastikan mendukung ajax.
  • Berdasarkan pernyataan point no 2 diatas, ajax merupakan teknologi browser. Benar, hanya memanfaatkan teknologi browser.

* Ajax digunakan untuk mengakses server, dan user menerima kembalian dari server tidak secara langsung, tetapi masuk ke dalam mesin ajax terlebih dahulu, baru ditampilkan. Dan proses ini tidak merefresh halaman. Hanya bagian tertentu dari halaman web saja yang diganti, sesuai dengan request tadi.

Jika sudah mengerti tentang pengertian ajax diatas, kita lanjutkan fakta tentang ajax. Penggunaan object javascript (XMLHttpRequest) untuk merequest ke server, dalam beberapa browser tidak sama. Untuk browser keluaran microsoft menggunakan komponen ActiveX, namanya Microsoft.XMLHTTP, terdapat banyak versi dari komponen ini, tergantu dari versi browser internet Explorer (IE). Sedangkan browser keluarga mozilla, seperti firefox, opera menggunakan XMLHttpRequest. Namanya berbeda tetapi memiliki fungsi yang sama yaitu melakukan request ke server secara asinkron. Perbedaan ini tidak menjadi masalah, nantinya aplikasi yang dibuat sama kok.

Dimana peran XML ? XML hanyalah sebuah format data, XML digunakan untuk menampung data ketika dikirimkan dari server ke komputer client (web browser). Dokumen xml dibuat sesederhana mungkin, agar bisa diparser dengan mudah dan cepat. Yang perlu diingat, dengan menggunakan ajax, server bukanlah mengirimkan halaman, tetapi data. Ada perbedaan yang tipis antara data dan halaman jika kita berbicara soal web. Data dalam web adalah inti dari informasi itu sendiri, tidak peduli bagaimana data tersebut ditampilkan, bahkan data tidak memiliki tampilan. Tampilan akan dibuat secara on the fly di komputer client. Sedangkan halaman sudah memiliki tampilan, sudah termasuk didalamnya data, sehingga jumlah bit yang dikirim oleh server menjadi lebih banyak. Ajax menggunakan XML sebagai alat angkut datanya karena ke-fleksi-belan format XML. Dokumen xml akan diparser oleh XML parser, sehingga bisa ditampilkan sesuai dengan keinginan.

Ajax bukan teknologi baru, ajax sudah ada sejak adanya object tersebut (XMLHttpRequest), hanya saja tidak dimanfaatkan. Untuk pertama kalinya tahun 2005 Jesse James Garret dari Adaptive Path mempublikasikan sebuah artikel tentang bagaimana mengembangkan web yang berbeda dari web tradisional, ia menyebutnya dengan AJAX. Kemudian AJAX mulai populer setelah Google memakainya secara luas.

Contoh situs yang menggunakan ajax adalah Yahoo mail beta, Gmail, proses upload file di googlepages. Untuk situs googlepages, jika anda pernah menggunakannya, proses upload bisa dilakukan secara bersamaan.

Ajax memiliki kekurangan, yaitu tidak bisa di crawler secara baik oleh search engine, karena search engine bekerja dengan menelusuri url, sedang web berbasis ajax urlnya selalu sama, meskipun user meminta data. Inilah tantangan terbesar ajax. Tapi menurut saya justru disinilah kelebihan ajax. Ia lebih aman dibanding web yang mudah dicrawler. Makanya ajax itu lebih baik digunakan untuk halaman member, yang mana datanya tidak boleh di crawler, contohnya mail box (repot kalau email kita bisa dilihat melalui search engine), atau bikin blog private, tidak ada yang membaca selain kita.

Posted in AjaxComments (2)

Object XMLHttpRequest


Object XMLHttpRequest Memiliki banyak properties, diantaranya adalah :
onreadystatechange : Callback function; the function assigned to this property is called whenever readyState changes.

readyState : Number; 0 means uninitialized, open( ) has not yet been called; 1 means loading, send( ) has not been called; 2 means loaded, send( ) has been called, and headers/status are available; 3 means interactive, responseText holds partial data; 4 means completed.

responseText : string; the plain text of the response.

responseXML : DOM Document object; an XML return value.

status : Response status code, such as 200 (Okay) or 404 (Not Found).

statusText : string; the text associated with the HTTP response status.

The methods supported include:

abort( ) : void; cancels the HTTP request.

getAllResponseHeaders( ) : string; returns all of the response headers in a preformatted string

getResponseHeader(string header) : string; returns the value of the specified header.

open(string url,string asynch) : void; prepares the HTTP request and specifies whether it is asynchronous or not.

send(string) : void; sends the HTTP request.

setHeader(string header,string value) : void; sets a request header, but you must call open( ) first!

Posted in AjaxComments (0)

Latihan Membuat Aplikasi dengan Ajax


Ajax merupakan kependekan dari Asynchronous Javascript and Xml, merupakan sebuah konsep spektakuler untuk membangun aplikasi berbasis web yang lebih menarik dan interaktif.

Sebagaimana namanya, Ajax adalah perpaduan antara javascript dan xml yang digunakan untuk berinteraksi dengan server secara asynchron/dibalik layar, sehingga untuk menggunakannya mau tidak mau kita harus mengenal yang namanya HTML, CSS, Javascript, Xml, PHP, dan MySql, karena konsep ajax akan selalu melibatkan respon pada sisi server.

Ok, kita akan langsung pada contoh implementasi Ajax.
Pertama, kita membuat dokumen HTML yang kita kasih nama latihanajax.html, kode programnya adalah sebagai berikut :

<html>
<head>
<title>Latihan AJAX</title>
</head>
<body>

<script type=”text/javascript”>
function ajaxFunction()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject(”Msxml2.XMLHTTP”);
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject(”Microsoft.XMLHTTP”);
}
catch (e)
{
alert(”Your browser does not support AJAX!”);
return false;
}
}
}
}
</script>

<form name=”myForm”>
Name: <input type=”text” name=”username” />
Time: <input type=”text” name=”time” />
</form>

</body>
</html>

Posted in AjaxComments (0)

  • Popular
  • Comments
  • Tags
  • Subscribe
Advertise Here

Category

Tag Cloud