Profi Admin adalah template yang bersih dan sederhana tapi penuh kompleksitas dan pasti sesuai harapan anda. Menu visual yang besar menciptakan navigasi intuitif sementara tab dan submenu yang tersembunyi berstruktur sampai 3 level. Terinspirasi oleh Administrasi pada Wordpress.
Ga nyesel pake template admin ini karena harganya murah meriah ($15 saja)
klik gambar untuk melihat detail template ini
Bagi yang tertarik untuk mendesain admin area, saya rekomendasikan untuk menggunakan Template Complete Liquid Admin Control Panel.
Template ini powerfull dan sudah terintegrasi dengan jquery.
Bolehlah dicoba untuk aplikasi anda. Untuk menggunakannya klik pada gambar.
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,,,,
Ada kalanya kita ingin membuat vertikal text, namun ternyata kode css yang ada tidak bisa berjalan mulus di browser firefox, kode css berikut :
<style type="text/css">
.teksVertical {
writing-mode: tb-rl;
filter: flipH flipV;
letter-spacing:2px;
}
</style>
Kode diatas memang membuat teks tampil secara vertikal di IE, namun di firefox teks tetap mendatar layaknya tak ada style, berikut trik supaya bisa membuat teks vertikal :
1. Jadikan teks menjadi gambar vertikal dengan PHP GD, perintah ImageStringUp.
2. Panggil dengan perintah HTML <img src="gambar.png"/>
Kira-kira Scriptnya begini :
Quick Code
< ?php
header ("Content-type: image/png");
// imagecreate (x width, y width)
$img_handle = imagecreate (15, 220) or die ("gagal membuat gambar");
// ImageColorAllocate (image, red, green, blue)
$back_color = ImageColorAllocate ($img_handle, 153, 204, 255);
$txt_color = ImageColorAllocate ($img_handle, 0, 0, 0);
ImageStringUp ($img_handle, 3, 1, 215,'Test Text Vertical', $txt_color);
ImagePng ($img_handle);
ImageDestroy($img_handle);
?>
Silahkan dicoba sendiri ya..
Sekilas ketika kita membuat kode program HTML dan CSS, properti display = none dan visibility = hidden mempunyai persamaan, yaitu objek menjadi tidak tampak. Sebenarnya kedua properti itu mempunyai perbedaan yang sangat nampak.
Pada properti visibility, jika diberi nilai hidden, objek akan tampak menghilang namun tempatnya tetap terisi dengan blank pada layar karena objek tetap di render.
Pada properti display, jika diberi nilai none, objek menghilang dan tempatnya pun juga tidak ada, karena objeknya tidak di render.
Contoh scriptnya ada dibawah ini (copy dan simpan dengan nama test.html)
<html>
<head>
<title>Perbedaan properti display dan visibility</title>
</head>
<body>
Makanan Buah Kesukaan : <br />
1. Jambu<br />
<span style="visibility:hidden;">2. Semangka<br /></span>
3. Jeruk<br />
4. Anggur<br />
<span style="display:none;">5. Apel<br /></span>
6. Melon<br />
<hr />
Nomor dua pakai visibility => ada tempat kosong (objek rendered) <br />
Nomor lima pakai display => tak ada tempat kosong (objek not rendered)<br />
</body>
</html>
Lihat hasilnya di bawah ini :
Demo
Tulisan ini sangatlah sederhana, dan memang buat pemula yang ingin lebih memahami javascript, khususnya tentang management table, konsep dasarnya adalah tetap pada DOM HTML.
Dibawah ini adalah kode javascript untuk melakukan perubahan isi tabel, yaitu menambah baris baru dan isi kolomnya, lho kenapa kok pakai javascript yang notabene client side, kok ga pake php aja? Pertanyaan bagus, konsep mendinamiskan HTML atau yang biasa disebut DHTML merupakan perangkat utama yang dipakai CMS modern saat ini, katakanlah wordpress, google, yahoo, dsb. Javascript digunakan untuk merubah-rubah HTML nya dan selanjutnya diproses dengan PHP atau bahasa server side lainnya.
Yang biasa dilakukan javascript untuk berkomunikasi dengan database di server adalah konsep nya ajax, itu akan lebih rumit jika anda tidak memahami javascript dan DOM HTML tentunya, OK.
Nah berikut adalah script dan sedikit penjelasannya, semoga membantu pemahaman anda :
Quick Code
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Manipulasi tabel dengan Javascript</title>
</head>
<script type="text/javascript">
function tambahBaris(){
//ambil id tabel dg perintah getElementById
tabelId = document.getElementById("tblMahasiswa");
//cari banyaknya baris
barisTerakhir = tabelId.rows.length;
//penambahan satu baris (tr) pada baris terakhir tabel dengan perintah insertRow
baris = tabelId.insertRow(barisTerakhir);
//tambahkan 4 kolom (td) pada baris (tr) yang barusan ditambahkan, dengan perintah insertCell
kolomNo = baris.insertCell(0);
kolomNama = baris.insertCell(1);
kolomJurusan = baris.insertCell(2);
kolomAngkatan = baris.insertCell(3);
//isi masing2 kolom dengan nilai yang ada pada teks input, diambil dengan perintah getElementById(id).value
kolomNo.innerHTML = document.getElementById("no").value;
kolomNama.innerHTML = document.getElementById("nama").value;
kolomJurusan.innerHTML = document.getElementById("jurusan").value;
kolomAngkatan.innerHTML = document.getElementById("angkatan").value;
}
</script>
<body>
<p>
<strong>Tambah baris : </strong>
</p>
<table border="0" cellspacing="0" cellpadding="2">
<form method="get" id="formTambah">
<tr>
<td>No</td>
<td><input name="no" id="no" type="text" /></td>
</tr>
<tr>
<td>Nama</td>
<td><input name="nama" id="nama" type="text" /></td>
</tr>
<tr>
<td>Jurusan</td>
<td><input name="jurusan" id="jurusan" type="text" /></td>
</tr>
<tr>
<td>Angkatan</td>
<td><input name="angkatan" id="angkatan" type="text" /></td>
</tr>
<tr>
<td colspan="2">
<input type="button" onclick="javascript:tambahBaris();" value="Tambah Baris" />
<input type="reset" value="Reset" />
</td>
</tr>
</form>
</table>
<h3>Nama Mahasiswa</h3>
<table id="tblMahasiswa" border="1" cellspacing="0" cellpadding="2" style="border-collapse:collapse;">
<tr align="center">
<td><strong>No</strong></td>
<td><strong>Nama</strong></td>
<td><strong>Jurusan</strong></td>
<td><strong>Angkatan</strong></td>
</tr>
<tr>
<td>1</td>
<td>Bambang Riadi</td>
<td>Matematika</td>
<td>2002</td>
</tr>
<tr>
<td>2</td>
<td>Deni Permana</td>
<td>Fisika</td>
<td>2003</td>
</tr>
</table>
</body>
</html>
Nah, mudah kan.
Setelah dijalankan, maka dengan mudah kita dapat menambah baris dan nilainya, selanjutnya bisa di tangani dengan PHP atau ajax untuk mengirimnya ke server.
kode javascript di atas bisa juga diganti menjadi seperti dibawah ini :
Quick Code
<script type="text/javascript">
function tambahBaris(){
//ambil id tabel dg perintah getElementById
tabelId = document.getElementById("tblMahasiswa");
//ambil id form dg perintah getElementById
formId = document.getElementById("formTambah");
//cari banyaknya baris
barisTerakhir = tabelId.rows.length;
//penambahan satu baris (tr) pada baris terakhir tabel dengan perintah insertRow
baris = tabelId.insertRow(barisTerakhir);
//hitung banyaknya kolom pada baris tabel
jumKolom = tabelId.rows[0].cells.length;
//lakukan iterasi dari 0 sampai jumKolom
for(i=0;i<jumkolom ;i++){
//bikin kolom ke i
kolom = baris.insertCell(i);
//isi kolom ke i dengan nilai element pada form
kolom.innerHTML = formId.elements[i].value;
}
}
</script>
</jumkolom></script>Jika dieksekusi hasilnya sama saja, cuma caranya yang bawah dibikin lebih simple, selamat mencoba dan mengembangkannya.. 
Tulisan ini cukup sederhana yaitu bagaimana kita membuat tombol untuk menangani checklist yang banyak, check all dan uncheck all.
Disini saya membuatnya dengan javascript, silahkan lihat kode nya dibawah ini :
Quick Code
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Latihan Javascript :: membuat check all dan uncheck all</title>
</head>
<script type="text/javascript">
function Check(){
//Ambil semua elemen dalam id formCheck
allCheckList = document.getElementById("formCheck").elements;
//Hitung banyaknya elemen
jumlahCheckList = allCheckList.length;
//Jika tombolCheck bernilai "Check All"
if(document.getElementById("tombolCheck").value == "Check All"){
for(i = 0; i < jumlahCheckList; i++){
//semua elemen ke-i checkbox nya diset true (dicentang)
allCheckList[i].checked = true;
}
//Set nilai tombolCheck menjadi "Uncheck All"
document.getElementById("tombolCheck").value = "Uncheck All";
//Jika tombolCheck tidak bernilai "Check All" (sudah dirubah menjadi Uncheck All)
}else{
for(i = 0; i < jumlahCheckList; i++){
//semua elemen ke-i checkbox nya diset false (tidak dicentang)
allCheckList[i].checked = false;
}
//Set nilai tombolCheck menjadi "Check All"
document.getElementById("tombolCheck").value = "Check All";
}
}
</script>
< ?php
$hobi = $_POST['hobi'];
if(empty($hobi)){
?>
<b>Silahkan Pilih Hobi Anda :</b>
<form id="formCheck" method="POST" action="check_all.php">
<input type="checkbox" name="hobi[1]" value="Baca Koran" />Baca Koran<br />
<input type="checkbox" name="hobi[2]" value="Memancing" />Memancing<br />
<input type="checkbox" name="hobi[3]" value="Bikin Susah Orang" />Bikin Susah Orang<br />
<input type="checkbox" name="hobi[4]" value="Menulis" />Menulis<br />
<input type="checkbox" name="hobi[5]" value="Demonstrasi" />Demonstrasi<br />
<input type="button" id="tombolCheck" value="Check All" onClick="Check();"/>
<input type="submit" value="Submit" />
</form>
< ?php
}
if(is_array($hobi)){
echo '<b>Hobi yang anda pilih : <br />';
foreach($hobi as $indek=>$namahobi){
echo 'Hobi indek '.$indek.' : '.$namahobi.'<br />';
}
echo '<a href="check_all.php">Back »</a>';
}
?>
</script></html>
Silahkan lihat Demo nya disini
Atau Download disini
Jika anda suka menggunakan style z-indek untuk membuat layer pada suatu halaman, tentunya ketika layer belakang berupa tag select, maka select tersebut tak dapat ditutupi dan tetep muncul di layer paling atas meski z-index nya di kecilkan.
Hal ini terjadi di IE 6 dan versi oldernya. Nah untuk menyiasati agar tag select berada di belakang layer utama maka trik sederhananya dibelakang layer yang paling atas dibuat <iframe></iframe> jika dideteksi browser yang dipakai adalah IE 6 gunanya untuk menutupi tag select tadi tentunya diset lebih kecil dari layer yang paling atas.
Contoh :
Quick Code
<html>
<head>
<title>Bugs z-index</title>
<style type="text/css">
#adaSelect {
position:absolute;
left:100px;
top:100px;
width:300px;
height:300px;
z-index:1;
}
#fixSelect {
position:absolute;
left:100px;
top:100px;
width:300px;
height:300px;
z-index:3;
}
#fixSelect iframe {
position:absolute;
left:0px;
top:0px;
z-index:2;
filter:mask();
}
</style>
</head>
<body>
<div id="adaSelect">
isi select :
<select name="kota">
<option>Jakarta</option>
<option>Trenggalek</option>
<option>Malang</option>
</select>
</div>
<div id="fixSelect">
<table width="280" border="1" bgcolor="#CCCCCC" cellspacing="0" cellpadding="2">
<tr>
<td>No</td>
<td>Nama</td>
<td>No HP</td>
</tr>
<tr>
<td>1</td>
<td>Bambang Riadi</td>
<td>085678910</td>
</tr>
<tr>
<td>2</td>
<td>Nama kedua</td>
<td>0912898989</td>
</tr>
</table>
<!--[if lte IE 6.5]><iframe></iframe>< ![endif]-->
</div>
</body>
</html>
Karena id=”adaSelect” mempunyai z-index lebih kecil maka yang muncul di layar browser adalah id=”fixSelect”. Ini hanya bermasalah di IE 6 kebawah, IE 7 serta browser lain tak ada masalah dengan z-index pada elemen select.
Selamat mencoba…
Kasus ini terjadi ketika saya mempunya angka decimal yang mempunyai banyak digit di belakang koma,
Contohnya 2.12334234234, nah bagaimana kita membulatkan angka di belakang koma tersebut dalam javascript. Kalau di PHP menggunakan fungsi number_format($angka,$digit) namun di javascript saya kebingungan mencari fungsinya. di manualnya gak ketemu-ketemu.
Daripada repot mencari fungsi format desimal, untuk membuat dua digit di belakang koma
pertama saya mengalikan nilai tersebut dengan 100 (2.12334234234 * 100 = 212.334234234)
kedua nilai yang telah dikalikan dibulatkan menjadi integer (212.334234234 menjadi 212)
ketiga nilai yang telah menjadi integer di bagi 100 (212 / 100 = 2.12)
jadi deh…
untuk membulatkan angka ke nilai integer terdekat, saya menggunakan fungsi matematika Math.round yang ada di javascript
Contoh
Math.round(4.6423) hasilnya menjadi 5
Math.round(4.3423) hasilnya menjadi 4
Quick Code
<script language="JavaScript">
var angka=46.64323423423;
//jika dibulatkan menjadi dua angka di belakang koma
duaDesimal = Math.round(angka*100)/100;
document.write("Hasil pembulatan dua angka dibelakang koma : "+duaDesimal+ "<br />");
</script>
Jika ingin membulatkan 1 angka dibelakang koma, tinggal dikalikan 10, jika ingin tiga digit dikalikan 1000, dst..
Cara lain, jika kita ingin dinamis dalam memformat digit desimal, bisa memakai fungsi Math.pow(x,y), yang berarti x pangkat y.
contoh
Math.pow(10,1) = 10
Math.pow(10,2) = 100
Math.pow(10,3) = 1000
dst..
Nah fungsi Math.pow(x,y) tersebut tinggal di gunakan untuk metode perkaliannya, sehingga scriptnya menjadi seperti ini :
Quick Code
<script language="JavaScript">
var angka=46.64323423423;
//jika dibulatkan menjadi dua angka di belakang koma
duaDesimal = Math.round(angka*Math.pow(10,2))/Math.pow(10,2);
document.write("Hasil pembulatan dua angka dibelakang koma : "+duaDesimal+ "<br />");
tigaDesimal = Math.round(angka*Math.pow(10,3))/Math.pow(10,3);
document.write("Hasil pembulatan tiga angka dibelakang koma : "+tigaDesimal+ "<br />");
</script>
dengan memakai kode yang terakhir, kita bisa menggunakan fungsi sehingga hasilnya dinamis.
Semoga berguna…
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().
<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 baris 7 id “hasilProses” pada dokumen HTML akan diberi nilai hasilTeks yang merupakan nilai dari dokumen XML.
<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.
RSS 