Redirect Halaman Menggunakan JQuery

Apakah Anda pernah mendownload file di 4shared? Jika pernah pasti Anda akan menemui halaman seperti gambar dibawah ini :

redirect

redirect2

Pada gambar pertama jika tombol UNDUH GRATIS di klik maka gambar ke dua yang akan tampil. Proses semacam itu adalah redirect halaman atau sebuah peringatan yang digunakan untuk memberikan ruang waktu yang ditentukan sebelum pengunjung disajikan ke halaman yang akan dituju.

Nah, dalam tutorial kali ini penulis akan mengimplementasikan bagaimana cara membuat redirect halaman menggunakan JQuery. Kita akan memanfaatkan salah satu fungsi yang dimiliki oleh JQuery yaitu setInterval(). Fungsi ini akan mengatur penundaan (delay) dengan interval waktu tertentu.

Pertama-tama Anda download file JQuery pada alamat https://code.jquery.com/jquery-2.0.3.min.js, setelah itu buat folder baru dan beri nama redirect, selanjutnya simpan folder tersebut pada direktori C:\xampp\htdocs, lalu buat file baru dengan nama halaman1.php dan simpan file tersebut pada folder redirect lalu ketikan script program berikut :

Selanjutnya buat file baru lagi dan beri nama file tersebut dengan nama halaman2.php. Adapun script programnya dapat Anda lihat dibawah ini :

Pada script program diatas halaman yang pertama kali akan tampil adalah halaman1.php, dimana pada halaman tersebut terdapat sebuah tombol dengan nama PROSES. Ketika user meng-klik tombol PROSES tersebut maka akan dilakukan proses penundaan (delay) dalam waktu 10 detik serta tombol PROSES tersebut akan ter-disabled atau mati dalam artian tidak bisa melakukan aksi klik dan warna (background) dari tombol tersebut akan berubah menjadi warna abu-abu, dan setelah proses penundaan telah mencapai waktu 0 detik maka secara otomatis browser akan menampilkan halaman2.php. Untuk lebih jelasnya silahkan Anda jalankan programnya pada web srowser Anda. Untuk skrip programnya dapat Anda download disini..

Sampai jumpa pada tutorial berikutnya.

Sumber : http://purbadian.com/read-article-1-redirect-halaman-menggunakan-jquery.html

3 Comments on “Redirect Halaman Menggunakan JQuery”

Leave a Reply

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