Navigasi
Halaman
Navigasi secara umum dapat digunakan
untuk menunjukkan perpindahan dari satu titik ke titik yang lain. Dalam hal ini
perpindahan yang dimaksud adalah perpindahan dalam satu halaman ataupun antar
halaman web. Wujud dalam halaman web yang tampak adalah dalam bentuk link (tekstual),
tombol dan gambar (grafis). Selain menggunakan HTML, navigasi pada halaman web
juga dapat diwujudkan dengan menggunakan program Javascript.
Perancangan navigasi untuk suatu
website dapat juga dikenal dengan istilah pembuatan sitemap. Penggambarannya dilakukan
dengan terlebih dahulu menentukan halaman utama web, kemudian menentukan
link-link apa saja dari yang ada di halaman tersebut dan mengaitkannya. Berikut
ini merupakan salah satu contoh bentuk rancangan sitemap.
Pembuatan sitemap ini dapat dilakukan
dengan menggunakan aplikasi peta pikiran seperti Freemind, XMind ataupun
sejenisnya. Sitemap ini nantinya dapat dijadikan panduan ataupun arah bagi
programmer web dalam mengembangkan aplikasinya. Sedangkan untuk user dapat memberikan
gambaran secara menyeluruh tentang web yang sedang dikunjungi.
Terdapat sejumlah metode yang dapat
digunakan di Javascript untuk berpindah halaman ini, diantaranya adalah :
|
Teknik
navigasi
|
Penjelasan
|
|
window.location.href = “url”;
|
Digunakan untuk menentukan halaman
yang akan ditampilkan pada browser, melalui string url yang diberikan.
|
|
window.location.assign(“url”);
|
URL halaman baru diberikan dalam
bentuk parameter untuk fungsi ini.
|
|
window.location.replace(“url”);
|
Mirip seperti assign(), bedanya
browser tidak akan mengingat url sebelum ini, sehingga tidak akan ada
perubahan apabila menekan back pada browser atau menjalankan metode
history.back() untuk kembali ke halaman sebelumnya.
Jadi apabila menginginkan halaman
sebelumnya tetap ada gunakan fungsi assign().
|
|
window.history.back()
|
Fungsi untuk menampilkan kembali
halaman sebelumnya. Sama fungsinya dengan tombol back pada browser.
|
|
window.history.forward()
|
Untuk menampilkan halaman setelah
saat ini apabila ada.
|
Contoh:
File: index.html
<h1>Halaman Index</h1>
<ul>
<li
onclick="window.location.href='profil.html'">Profil</li>
<li
onclick="window.location.assign('portofolio.html');">Portofolio</li>
<li
onclick="window.location.replace('kontak.html');">Kontak</li>
</ul>
File: profil.html
<h1>Halaman Profil</h1>
<ul>
<li
onclick="window.history.back();">Kembali</li>
</ul>
File:
portofolio.html
<h1>Halaman Portofolio</h1>
<ul>
<li
onclick="window.history.back();">Kembali</li>
</ul>
File:
kontak.html
<h1>Halaman Kontak</h1>
<ul>
<li
onclick="window.history.back();">Kembali</li>
</ul>
Program diatas ini merupakan salah
satu bentuk hasil dari sitemap yang dirancang diatas. Dimulai dari index.html
berisikan link menu untuk mengakses halaman lainnya. Terdapat tiga fungsi
navigasi yang diterapkan dihalaman ini. Kemudian masing-masing halaman
profile.html, portofolio.html dan kontak.html terdapat menu untuk kembali ke
halaman index.html. Hal yang membedakan ketiga halaman tersebut adalah hasil
dari pemilihan menu Kembali. Pada file profile.html dan portofolio.html ketika
menu Kembali dipilih browser akan membuka halaman index.html. Hal ini karena
browser merekam sejarah navigasi halaman sebelumnya. Sedangkan pada file
kontak.html menu Kembali yang dipilih tidak akan membawa user ke halaman
index.html. Ini dikarenakan rekaman jejak sejarah file index.html dihapus pada
saat pemanggilan fungsi window.location.replace() oleh menu Kontak di file
index.html.
