Cara menggunakan pindah halaman dengan javascript

Question

HomeWeb2 Cara Redirect URL Menggunakan Javascript dan HTML

Monday, June 04, 2018

Table of Contents Show

1. Javascript
Berikut adalah beberapa macam pilihan lain dari Javascript
Cara Redirect Halaman dengan HTML
Cara Redirect Halaman dengan JavaScript
Cara Redirect Halaman dengan PHP

Redirect adalah proses dimana pengguna saat membuka halaman suatu web akan berpindah secara otomatis ke halaman web lainnya.

Contohnya seperti halaman ini yang apabila dibuka maka akan secara otomatis mengarahkan ke blog ini.

Nah sekarang, bagaimana cara membuat redirect?

1. Javascript

Kita dapat menggunakan javascript yang sangat sederhana. Kita dapat menggunakan window.location yang mana tersedia 2 atribut, yaitu location.href dan location.replace.

window.location.href = "http://trickbloq.blogspot.com";

window.location.replace("http://trickbloq.blogspot.com");

Keduanya berfungsi sama namun window.location.replace lebih baik karena halaman redirect tidak akan tersimpan ke session history karena window.location.replace akan menjalankan HTTP redirect.

Sehingga tombol kembali tidak akan redirect lagi dan pengguna tidak akan kesulitan untuk kembali ke halaman sebelumnya.

Berikut adalah beberapa macam pilihan lain dari Javascript

1. Mengarah kembali satu halaman

window.history.back();
window.history.go(-1);
window.history.back(-1)

2. Menambahkan URL ke histori browser dan redirect ke URL baru

window.location.assign("http://trickbloq.blogspot.com");

3. Sama seperti `location.href`

HANYA digunakan untuk Internet Explorer versi lama. Firefox dan Chrome tidak mendukung script dibawah.

window.navigate("page.html");

4. Kembali ke halaman utama (homepage)

window.location = window.location.host

5. Menunggu beberapa detik sebelum redirect

Untuk menunda redirect selama beberapa detik, kita dapat menggunakan setTimeout.

setTimeout(
  function(){
    window.location = "page.html" 
  },
1000); // waktu tunggu sebelum redirect, 1000 = 1 detik

Kita dapat membuat redirect dengan tag <meta> pada HTML. Apabila penggunaan javascript dibatasi atau tidak ingin menggunakan javascript, kita dapat menggunakan kode meta refresh ini.

<meta http-equiv="refresh" content="0;URL='http://google.com/'" />

0 pada kode diatas adalah waktu tunda sebelum redirect. Sedangkan URL adalah alamat situs yang dituju setelah waktu tunda habis.

Penggunaan meta refresh sudah deprecated (tidak lagi digunakan) oleh World Wide Web Consortium (W3C) dan sudah tidak disarankan.

Meta refresh juga mempengaruhi tombol kembali pada browser, walaupun pada browser modern sudah memperbaikinya (Chrome, Mozilla, Opera dan Internet Explorer 7 dan lebih baru).

Apabila waktu tunda diatur terlalu cepat (lebih sedikit daripada 2-3 detik), menggunakan tombol 'Kembali' pada browser dapat mengarahkan pengguna kembali ke halaman redirect, karena terjadinya redirect kembali. Hal ini tidak baik untuk situs web dan akan membuat pengunjung menjadi 'terjebak'.

Hallo sobat, pada tulisan kali ini Saya akan memberikan tutorial sedarhana tentang bagaimana cara membuat redirect halaman pada sebuah website. Sesuai namanya, teknik redirect halaman ini biasa digunakan untuk melakukan sebuah pengalihan URL atau link pada website, dengan redirect ini Anda akan diarahkan dari halaman lama ke halaman yang baru.

Untuk lebih jelasnya akan Saya analogikan seperti ini, misalnya Anda mempunyai 2 halaman dengan alamat URL yang berbeda, sebut saja Halaman A dan Halaman B. Anda ingin melakukan redirect dari Halaman A ke Halaman B, maka Anda harus menyisipkan script redirect pada Halaman A, sehingga bila ada orang yang mengakses Halaman A secara otomatis akan segera diarahkan ke Halaman B.

Ngerti Kan?

Nah, pada tutorial ini Saya akan memberikan script-script yang bisa Anda gunakan untuk membuat redirect halaman seperti analogi diatas. Yuk mari baca dan simak tutorial ini sampai habis, di jamin akan memberikan manfaat yang besar untuk pengetahuan Anda. Oke, langsung saja ya.

Cara Redirect Halaman dengan HTML

Cara yang pertama dengan menggunakan HTML, berikut ini adalah script HTML yang bisa Anda gunakan untuk melakukan redirect halaman. Cara pemasangannya sangatlah mudah, Anda cukup sisipkan atau letakan script ini pada bagian tag <head> </head>. Lihat script dibawah ini:

<html>
<head>
<title> Halaman A </title>
<meta http-equiv="refresh" content="3;url=https://rachmat.id">
<head>
<body> Halaman A </body>
</html>

Script diatas bernama tag meta, memiliki atribut http-equiv yang berisikan instruksi melakukan refresh halaman. Kemudian ada atribut content yang berisi 2 parameter yaitu delay dan url. Delay berisi nilai berupa angka yang memiliki satuan detik, lalu url berisi link halaman yang akan menjadi tujuan atau destinasi redirect.

Pada contoh script diatas, halaman akan melakukan redirect setelah menunggu selama 3 detik, setelah 3 detik berlalu halaman secara otomatis akan berpindah ke https://rachmat.id. Jika Anda tidak ingin menggunakan waktu tunggu atau delay, Anda bisa isi parameter delay dengan nilai angka 0.

Cara Redirect Halaman dengan JavaScript

Cara yang kedua dengan menggunakan JavaScript, berikut ini adalah script JavaScript yang bisa Anda gunakan untuk melakukan redirect halaman. Pada JavaScript terdapat 3 jenis script yang bisa Anda gunakan, di antaranya yaitu window.location, window.location.href dan window.location.replace().

Cara pemasangannya sangatlah mudah, Anda masih cukup sisipkan atau letakan script ini pada bagian tag <head> </head>, lalu jangan lupa setiap penulisan JavaScript Anda juga harus sertakan tag <script type="text/javascript> </script>. Lihat script dibawah ini:

<html>
<head>
<title> Halaman A </title>
<script type="text/javascript">
window.location = "https://rachmat.id";
</script>
<head>
<body> Halaman A </body>
</html>

atau

<html>
<head>
<title> Halaman A </title>
<script type="text/javascript">
window.location.href = "https://rachmat.id";
</script>
<head>
<body> Halaman A </body>
</html>

atau

<html>
<head>
<title> Halaman A </title>
<script type="text/javascript">
window.location.replace("https://rachmat.id");
</script>
<head>
<body> Halaman A </body>
</html>

Jika ingin menggunakan waktu tunggu atau delay, Anda bisa menggunakan script dibawah ini:

<html>
<head>
<title> Halaman A </title>
<script type="text/javascript">
setTimeout(
  function(){
    window.location = "https://rachmat.id" 
  },
1000); // waktu tunggu atau delay
</script>
<head>
<body> Halaman A </body>
</html>

Pada method setTimeout(), waktu tunggu atau delay memiliki satuan Milidetik yang berarti 1000 Milidetik = 1 Detik.

Cara Redirect Halaman dengan PHP

Cara yang ketiga dengan menggunakan script PHP, jika website Anda menggunakan PHP berikut ini adalah script PHP yang bisa Anda gunakan untuk melakukan redirect halaman. Lihat script dibawah ini:

<?php header("location: https://rachmat.id"); ?>

Gimana? Mudah Kan.

Demikian pembahasan tentang Cara Membuat Redirect Halaman Website, semoga tulisan ini bisa memberikan manfaat untuk Anda yang membaca. Sampai jumpa di tulisan berikutnya. Terima Kasih

kode javascript Window location href