Tag Archive | "latihan 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 (4)

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 (19)

  • Popular
  • Comments
  • Tags
  • Subscribe
Advertise Here

Category

Tag Cloud