Monday, March 16, 2009

TIPS - JavaScript Waiting, Expire, Redirect

Kali ini, saya kedapatan tantangan memecahkan logika pemrograman.
Konsep dari klien adalah sebagai berikut:
1. User mengirimkan data ke server, lalu server mengirimkan data ke server transaksi.
2. Di server transaksi, menunggu juga data yang dikirimkan oleh user melalui SMS.
3. Nah sambil menunggu user mengirim SMS, maka server akan melakukan "waiting" dan mengecek juga apakah sudah ada data "balikan" (callback) dari server penghitung transaksi.
4. Apabila user sudah mengirimkan data lewat SMS dan validasinya benar, maka server penghitung transaksi akan melakukan pengiriman balik ke server.
5. Ketika sudah mendapatkan data "balikan", maka server akan menampilkan data transaksi yang sah.
6. Bila sampai dengan waktu yang ditentukan tidak ada data "balikan" berarti user tidak melakukan apa-apa atau data validasi error, sehingga server akan menampilkan pesan time out.

Nah gimana caranya?

Mula-mula saya membuat tabel transaksi. Di tabel transaksi ini, ada id untuk merujuk pada data balikan (misalnya nomor purchase order). Nah ketika user memesan lewat web, maka saya melakukan penyimpanan ke tabel tersebut, dan juga mengirimkan data xml ke server transaksi.
Di server transaksi, akan mengirimkan SMS berupa data (misalnya nomer pin sms) ke user sesuai dengan nomor yang dimasukkan di web.

Maka saya perlu membuat AJAX untuk waiting dan checking data.
AJAX digunakan untuk mengecek, apakah tabel transaksi sudah berisi data balikan sesuai dengan id yang diberikan sebelumnya? Bila ada maka redirect ke halaman Berhasil. Bila belum ada, maka tunggu 30 detik untuk cek data lagi. Bila sampai 3 menit belum ada data balikan maka akan redirect ke halaman TimeOut.

JavaScript yang digunakan untuk menunggu berkali-kali adalah fungsi setInterval. Sedangkan untuk menunggu waktu expire menggunakan setTimeout.

Saya menggunakan jQuery untuk AJAX. Kira-kira kodenya begini:

function getReceipt(){
$.get("transact.php?id=001",
function(data){
if (data == 1){
location.href='receipt.php?id=001';
}
});
}

Kode di atas memanggil halaman transact.php untuk mengecek data balikan. Bila ada data balikan maka saya ada nilai 1. Sehingga akan di-redirect ke receipt.php

Nah sambil menunggu data balikan, dibuatlah kode spt ini:

setInterval(getReceipt, 30000);

setTimeout("location.href='timeout.php'", 180000);

Kode self.setInterval(getReceipt,30000) berarti mengeksekusi fungsi getReceipt dan lakukan eksekusi lagi di 30 detik berikutnya .

Kode setTimeout("location.href='timeout.php'", 180000) berarti melakukan eksekusi redirect ke timeout, ketika sudah 180 detik.

Semoga sukses!

./aha

No comments:

Post a Comment