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.

Comments

13 responses to “Membuat Tombol “Back””

  1. […] menggunakan operator ternary. Contoh operator ternary bisa dijumpai pada artikel ini, ini, dan ini. Operator ternary memiliki bentuk dasar sebagai berikut: (pernyataan1) ? (pernyataan2) : […]

  2. Yudi Widiawan Avatar
    Yudi Widiawan

    Arigato gozaimasu!
    Sangat bermanfaat!

  3. moexti Avatar

    Makasih sobat.

  4. paket internet murah Avatar

    terima kasih tutorialnya. berhasil juga akhirnya nambah tombol kembali 😀

    /*ngerjain tgs

  5. MP3 Search & Free MP3 Downloads Avatar

    Sukses bang Tombolnya thanks 😀

  6. Sayyid husein Avatar

    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.

  7. Kharis alfian Avatar
    Kharis alfian

    Terimakasih, Sangat Membantu Sekali 🙂

  8. nasrudin Avatar

    okkke ..jempol dahh

  9. andre Avatar

    ookkkkke mantap bos

  10. yulandrisanzha Avatar
    yulandrisanzha

    work ^_^
    Thanks om admin

  11. muhamad sodiqin Avatar
    muhamad sodiqin

    terima kasih mas, sangat berguna (y)

  12. BAYU DWI LAKSHANA Avatar

    bekerja bro,mantap dah ini tutorial…
    My blog

  13. ahmad Avatar
    ahmad

    oke

Leave a Reply

Your email address will not be published. Required fields are marked *