Redirect Halaman Menggunakan JQuery

Yenda Purbadian  Selasa, 05 September 2017  JQuery & Ajax  166 1
no images

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 :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>redirect halaman</title>
<script src="jquery-2.0.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("#tombol").click(function(){
      $("#tombol").attr("disabled","disabled");
	  $("#tombol").css("background-color","#ADADAD");
      window.setInterval(function(){
	    var sisawaktu = $("#waktu").html();
	  	    sisawaktu = eval(sisawaktu);
	    if (sisawaktu==0){
	       location.href="halaman2.php";
	    }
	    else{
	      $("#waktu").html(sisawaktu-1);
	    }
	  }, 1000);
	});
  });
</script>

<style type="text/css">
  body{background-color:#ECECEC;}
  .wrapper{margin:0 auto;
		   top:230px;
	  	   position:relative;
		   text-align:center;
  }
  .wrapper h3{color:#6E6E6E; font:bold 18px "Comic Sans MS", cursive;}
  .wrapper #waktu{color:#D40000;}
  .wrapper input{padding:3px 20px; color:#6E6E6E; font:bold 14px "Comic Sans MS", cursive;}
</style>
</head>

<body>
  <div class="wrapper">
    <h3>Klik tombol PROSES, maka Anda akan diarahkan pada halaman ke 2 dalam waktu <span id="waktu">10</span> detik</h3>
    <input type="submit" value="PROSES" id="tombol">
  </div>
</body>
</html>

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>redirect halaman</title>
<style type="text/css">
  body{background-color:#ECECEC;}
  .wrapper{margin:0 auto;
		 top:230px;
	  	 position:relative;
		 text-align:center;
  }
  .wrapper h3{color:#6E6E6E; font:bold 18px "Comic Sans MS", cursive;}
</style>
</head>

<body>
  <div class="wrapper">
    <h3>Anda sekarang berada pada halaman 2</h3>
  </div>
</body>
</html>

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.

Artikel Terkait :

Tidak ada artikel terkait

Komentar :

  • ...
    Fairuz
    01 September 2014 11:34:22

    mantappppzzzzz!!!!!...... saya sedang mencari tutorial seperti ini. kalau bisa share untuk proses login dong om. jadi ketika user berhasil login maka ada proses tunggu sampai beberapa detik.

Tinggalkan Komentar :