Membuat Tombol “Back”

Pada umumnya browser sudah memiliki tombol “back” yang berfungsi untuk kembali ke halaman sebelumnya. Seorang web developer harus mempunyai alasan yang bagus untuk memasangnya pada website, misal karena adanya permintaan khusus dari klien. Namun, artikel ini ditulis bukan demi klien, melainkan demi ilmu pengetahuan 🙂

Ada 2 cara yang bisa dipakai, yaitu dengan JavaScript dan PHP. Untuk mencoba kode-kode di bawah ini, dibutuhkan sebuah halaman lain yang berisi link menuju ke halaman yang berisi tombol “back” ini.

<input type="button" value="Go Back" onclick="history.back(-1)" />

Tentunya implementasi menggunakan JavaScript masih kurang, karena ada kemungkinan user mematikan JavaScript di browser-nya. Berikut ini adalah implementasi dengan PHP.

<?php
  $url = htmlspecialchars($_SERVER['HTTP_REFERER']);
?>
  <a href="<?=$url?>">Go Back</a>

Pada snippet di atas digunakan fungsi PHP htmlspecialchars untuk mensanitasi input dari client. Meskipun secara fisik tidak ada input yang bisa disusupi oleh user, namun harus tetap berpegang pada prinsip dasar pengembangan website, yaitu jangan pernah percaya apa yang dikirimkan oleh client.

Jika kode PHP di atas langsung dieksekusi tanpa melalui halaman lain, maka akan muncul pesan peringatan:

Notice: Undefined index: HTTP_REFERER in /var/www/index.php on line 2

Itu adalah pesan peringatan karena ada yang salah pada kode PHP. Untuk memperbaiki kesalahan itu bisa dipelajari di sini.

<?php
  $url = isset($_SERVER['HTTP_REFERER']) ? htmlspecialchars($_SERVER['HTTP_REFERER']) : '';
?>
  <a href="<?=$url?>">Go Back PHP</a>

Dalam artikel singkat ini selain dipelajari cara membuat tombol “back” namun juga pentingnya menulis kode yang baik dan berkualitas. Kode yang baik dan berkualitas akan membuat website yang dibuat menjadi lebih aman. Mulailah menulis kode yang berkualitas dari kasus yang paling sederhana.

About Sibudi

Ubuntu user | Loves books | Blogger | Web Developer | Learn PHP, JavaScript, Ruby & Python the hard way

02. February 2012 by Sibudi
Categories: JavaScript, PHP | Tags: , , , , | 13 comments

Comments (13)

  1. Pingback: Menyingkat Kode PHP menggunakan Operator Ternary | Sibudi </>

  2. Arigato gozaimasu!
    Sangat bermanfaat!

  3. terima kasih tutorialnya. berhasil juga akhirnya nambah tombol kembali 😀

    /*ngerjain tgs

  4. Sukses bang Tombolnya thanks 😀

  5. Dengan fungsi ini sangat bermanfaat sekali. Terutama jika kita punya data query yang banyak misal lebih dari 100 halaman yng berbeda. Jadi gak pegel buat satu2 fungsi back nya. Tinggal masukan saja halaman apa di database, tempel saja fungsi back otomatis ini. Beres. Tq admin infonya sangt membantu.

  6. Terimakasih, Sangat Membantu Sekali 🙂

  7. okkke ..jempol dahh

  8. ookkkkke mantap bos

  9. work ^_^
    Thanks om admin

  10. terima kasih mas, sangat berguna (y)

  11. bekerja bro,mantap dah ini tutorial…
    My blog

Leave a Reply to nasrudin Cancel reply

Required fields are marked *