Navigasi Breadcrumb

Posted on Updated on

Tentang Navigasi Breadcrumb

Istilah “breadcrumb” berasal dari kisah dongeng Hansel dan Gretel, di mana mereka meninggalkan potong roti sambil melewati hutan, sehingga mereka dapat kembali kembali mengikuti jejak remah roti. Teknik yang sama digunakan dalam website navigasi, di mana jejak link yang ditampilkan kepada pengguna untuk tahu persis di mana halaman web yang terletak di situs web. Contoh dari jejak adalah sebuah catatan singkat yang ditampilkan di bagian atas halaman artikel ini.

Breadcrumb trail menyediakan cara cepat bagi pengguna untuk mengetahui apa atau cabang bagian halaman web ini masuk Sebuah catatan singkat yang berguna jika situs web telah banyak kategorinya dan masing-masing kategori dibagi dalam  beberapa tingkatan . Sebuah contoh yang baik akan menjadi direktori seperti Yahoo atau DMOZ.

Menerapkan sebuah catatan singkat yang navigasi di website

Menciptakan sebuah catatan singkat navigasi untuk situs Web dapat menjadi tugas yang berat jika tidak direncanakan dengan benar. Setelah kategori website mulai tumbuh dan mengubah, yang breadcrumb dapat menjadi usang jika tidak otomatis. Beberapa teknik yang dibahas di bawah ini.

1. Hardcoding link:

  • teknik ini hardcoding link pada halaman HTML statis bekerja untuk situs kecil. Namun, jika situs web berisi sejumlah besar halaman dengan banyak kategori, metode ini tidak dianjurkan.

2. Menggunakan penyertaan sisi server:

  • memusatkan breadcrumb navigasi pada file terpisah untuk setiap kategori. Jika situs menggunakan bahasa scripting dinamis seperti PHP atau ASP, satu breadcrumb file yang bisa digunakan seperti yang ditunjukkan pada teknik berikutnya. Penyertaan sisi server menggunakan kode, tambahkan bahwa navigasi file untuk setiap halaman yang termasuk dalam kategori. Ini akan mengurangi kecemasan pemeliharaan jika menu Navigasi diubah atau diperbaharui. Hanya satu file navigasi harus diperbarui bukan masing-masing halaman web.

3. Parameterize menggunakan skrip untuk situs dinamis:

  • Jika Anda memiliki situs yang dinamis, Anda dapat menambahkan parameter dalam setiap artikel file untuk menghasilkan jejak breadcrumb on the fly. Parameter ini akan digunakan oleh breadcrumb include file untuk menciptakan breadcrumb. Teknik ini akan menggunakan hanya satu breadcrumb include file bukan kategori terpisah menyertakan file tertentu. Sebagai contoh, jika menggunakan ASP, parameter dalam file, yang berisi artikel, akan ditampilkan di bawah ini. Di sini variabel home_loc, category_loc dan article_loc adalah URL untuk homepage, halaman kategori dan artikel direktori.

bcURL = article_loc + “my_article_name.htm”
bcText = “My Article Display Name


Dalam breadcrumb  file include , maka kode VBScript serupa dengan yang ditunjukkan di bawah ini.

<a href=”<%=home_loc%>”>Home</a>
> <a href=”<%=category_loc%>”>Category Name</a>
<% if (bcText <> “”) then %>
>
<% if (bcURL <> “”) then %>
<a href=”<%=bcURL%>”><%=bcText%></a>
<% else %>
<%=bcText%>
<% end if %>
<% end if %>

4. website Database driven :

  • Untuk database driven website, dimana artikel dan halaman Web disimpan dalam kategori indeks, breadcrumb navigasi yang dapat diimplementasikan dalam metode yang sangat mirip seperti yang ditunjukkan di atas. Namun, menggunakan database untuk membuat sebuah kategori menyediakan lebih banyak flexiblility. Kategori dari barang atau produk dapat dibaca secara dinamis dari database dan diberikan pada sisi server termasuk file breadcrumb. Artikel atau kategori produk dapat berubah, tanpa mengubah kode apapun untuk halaman Web. Hanya data kategori dalam database diubah, dan jejak remah roti yang baru muncul untuk mencerminkan artikel kategori baru

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s