Seringkali saya ditanya oleh pengguna aplikasi yang kami bangun, “Kenapa ketika saya klik tombol Back pada browser, malah kembali ke form login ?”. Atau di saat yang lain lagi ada yang melaporkan, “Mas, aplikasinya error, tombol Back-nya nggak jalan”.

Biasanya saya jawab dengan pernyataan standar, “Sebenernya bukan error pak, hal ini disebabkan karena aplikasi ini sudah menggunakan teknologi ajax yang bla bla bla, sehingga karena ajax, tombol back nya jadi nggak jalan.” Atau kami jelaskan dengan penuh kesabaran betapa unggulnya teknologi ajax, tapi dengan membawa satu kelemahan, “Tombol back pada browser jadi tidak berfungsi”…

Sebenarnya sudah dari dulu permasalahan ini saya cari jalan keluarnya, tapi berhubung adanya pekerjaan pembangunan aplikasi yang harus dikerjakan, jadinya masalah ini masih tertunda penyelesainnya, selain itu sebenarnya kebingungan juga untuk mengintegrasikan dengan aplikasi ajax yang sudah berjalan. Dan, Alhamdulillah saat di Medan ini, akhirnya saya tergerak lagi untuk menyelesaikan masalah ini dan akhirnya bias diintegrasikan dengan ajax yang sudah ada.

Secara prinsip, solusi yang digunakan adalah penggunaan hash tag (#).

Untuk mudahnya, url dari aplikasi yang saya gunakan (dengan framework CodeIgniter) adalah

-          Home, http://localhost/project/perpus/bo.php/system/Home/index

-          Profile, http://localhost/project/perpus/bo.php/system/Profile

Langkah penyelesainnya adalah

1. Menambahkan parameter kunci pada url yang sedang dijalankan

Terlihat pada gambar atas, ketika kita pindah di halaman Profil, ditambahkan parameter kunci /system/Profile.

Hal ini dilakukan dengan 

window.open('#'+[param], '_self');

  • Catatan, ketika kita me-load url dengan menambahkan ‘#’, maka web tidak akan bergerak ke mana-mana, seperti jika kita membuat
    <a href=”#”>link</a>

    maka jika link tersebut kita klik, web tidak akan berubah.

2. Menyimpan url utama dan parameter kuncitersebut pada input dengan type hidden

1. Buat form input dengan type hidden

<input type="hidden" id="url" />
<input type="hidden" id="hash" />

2. Masukkan nilai url dan parameter kunci dengan

$get('url').value = [url];
$get('hash').value = [param];

Pada contoh di atas, [url] merupakan http://localhost/project/perpus/bo.php dan [param] berisi /system/Profile

3. Membuat pengecekan yang diajalankan setiap interval tertentu

setInterval(function(e) {
   var gethash = document.location.hash;
   var pagehash = gethash.split('#')[1];
   if (pagehash==undefined) pagehash='';
   var currenthash = document.getElementById('hash').value;
   if(pagehash != currenthash.value) {
      link(document.getElementById('url').value +pagehash);
      document.getElementById('hash').value = pagehash;
   }
}, 500);

Pada fungsi di atas, merupakan pengecekan dengan tahapan :

  1. Membaca url dan melakukan split (explode pada PHP) dengan tanda ‘#’ untuk mendapatkan parameter kunci
  2. Mengambil nilai input dengan id hash yang menyimpan posisi terakhir parameter kunci
  3. Membandingkan antara hasil a dan b di atas, jika berbeda maka akan dijalankan tindakan untuk me-load url dengan parameter a
  4. Memberikan nilai a pada input hidden dengan id hash.

Dengan demikian, jika user menekan tombol back maka url menjadi  http://localhost/project/perpus/bo.php/system/Home/index sehingga parameter kunci menjadi kosong kembali. Dan isi input type hidden ber-id hash bernilai /system/Profile sehingga ketika keduanya dibandingkan menjadi tidak sama, hal ini mengakibatkan fungsi link (fungsi untuk me-load halaman dengan parameter url, seperti menekan link anchor) akan dijalankan dengan parameter kosong, yaitu url http://localhost/project/perpus/bo.php/system/Home/index sehingga seolah-olah user menekan tombol Back pada web aplikasi yang tidak menggunakan ajax.