Navigasi Halaman Web

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.

Gambar 15.1  Contoh sitemap sebuah website

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.

NAVIGASI DENGAN AJAX (MATERI TAMBAHAN)

Bentuk lain dari navigasi ini adalah dengan menggunakan obyek AJAX pada Javascript. AJAX, Asynchronous Javascript and XML. AJAX bukan merupakan bahasa pemrograman baru, melainkan kumpulan kelas Javascript yang dapat digunakan salah satunya untuk menampilkan halaman lain tanpa merubah keseluruhan halaman saat ini.

Dengan obyek ini perpindahan halaman dapat dilakukan tanpa menghilangkan halaman yang sedang dibuka saat ini. Ini perbedaan antara menampilkan halaman dengan AJAX dan cara sebelumnya. Dimana pada saat menunggu halaman yang akan ditampilkan, halaman saat ini tetap terlihat, karena prosesnya terjadi dilatar dan tidak terlihat oleh user.

jQuery merupakan salah satu librari yang dapat digunakan untuk menerapkan AJAX ini dengan perintah-perintah yang lebih sederhana. Librari disini maksudnya adalah kumpulan kelas atau obyek yang didalamnya juga berisi fungsi, variabel dan konstanta. Dengan menyertakan librari ini dalam program akan dapat menambah kemampuan aplikasi sebagaimana fitur yang ditawarkan dalam librari tersebut.

Website http://jquery.com berisi link untuk mendownload librarinya dan juga ada banyak tutorial yang diberikan yang dapat diikuti untuk penerapan jQuery pada pemrograman halaman web. Sampai saat buku ini ditulis jQuery saat ini telah sampai pada versi 2.0.3.

Berikut ini merupakan contoh penerapan librari jQuery untuk menampilkan halaman lain menggunakan AJAX. Contoh program :

File: halaman1.html

<div>Halaman 2 akan ditampilkan dibawah ini menggunakan

AJAX

jQuery.</div>

<div id="hal2">Loading...</div>

<button onclick="tampilkanWeb()">Muat web</button>

<script src="jquery-2.0.3.js"></script>

<script>

function tampilkanWeb(){

$('#hal2).load("halaman2.html");

}

</script>

File: halaman2.html

Ini contoh halaman 2.<br>

Selamat datang di Halaman 2.<br>

Gambar 15.2  Tampilan halaman1.html yang memuat program AJAX jQuery

Gambar  15.3  Tampilan halaman 1. html setelah memuat halaman 2. html pada div dengan id hal2

Dari hasil percobaan ini dapat dilihat bahwa perubahan hanya terjadi pada tag <div> dengan id hal2 dan tidak pada alamat URL di browser, yang tetap berada pada halaman 1. html. Skrip ini dapat dijalankan apabila ditempatkan sebagai aplikasi server menggunakan web server seperti Apache (dengan menginstall aplikasi XAMPP atau sejenisnya) atau dengan menambahkan argumen --allow-file-access-from-files pada eksekusi browser Google Chrome seperti terlihat pada tampilan berikut.

Gambar  15.4  Penambahan argumen eksekusi pada browser Google Chrome

Setelah menambahkan argumen diatas, halaman HTML dapat dibuka kembali menggunakan browser Google Chrome yang sudah dimodifikasi ini.