Masino Sinaga

Web Development and PHPMaker

Anda di sini: Beranda / Web Development / Breadcrumb Links: Navigasi untuk Lokasi Halaman di Struktur Menu atau Navigasi untuk Halaman Master/Detail?
Ragam Pilihan Metode Pendaftaran Akun Pengguna
Mode Pemeliharaan: Ketika Aplikasi Tidak Boleh Dioperasikan oleh Pengguna

Breadcrumb Links: Navigasi untuk Lokasi Halaman di Struktur Menu atau Navigasi untuk Halaman Master/Detail?

Ming, 2 Maret 2014 oleh Masino Sinaga Tinggalkan Komentar

Apa sih Breadcrumb Links itu?

Breadcrumb Links adalah navigasi bantuan yang digunakan oleh suatu aplikasi untuk menunjukkan lokasi dari suatu halaman yang sedang terbuka. Hal ini memungkinkan pengguna untuk mengetahui lokasi dari suatu halaman dengan cepat tanpa harus menebak dengan membuka-buka menu di aplikasi.

Breadcrumb Links biasanya ditampilkan secara horizontal dan ditempatkan di bagian paling atas dari sebuah halaman Aplikasi Web yang sedang terbuka. Lokasinya bisa juga tepat di bawah header. Sampai saat ini saya belum menemukan terjemahan baku dalam Bahasa Indonesia dari istilah Breadcrumb Links, jadi kita tetap menggunakan istilah aslinya saja, ya… ๐Ÿ™‚

Breadcrumb Links menyediakan jejak bagi pengguna untuk mengikuti kembali asal atau lokasi dari halaman yang sedang dikunjungi itu berada. Biasanya, jejak itu dipisahkan dengan karakter atau tanda lebih besar (>) dan sering kali digunakan sebagai karakter pemisah yang standar.

Meskipun demikian, Web Designer bisa saja menggunakan karakter lainnya (seperti ยป atau โ€บ atau /). Ada juga yang menggunakan beragam icon grafik lainnya yang mencerminkan tanda pemisah tadi.

Tipe Breadcrumb Links

Ada dua tipe Breadcrumb Links berdasarkan pengalaman saya dalam menangani Breadcrumb Links di aplikasi berbasis web, yaitu:

  1. Navigasi Lokasi Halaman di Struktur Menu
    Breadcrumb Links ditampilkan dalam struktur hirarki menu di mana halaman tersebut berada. Artinya, link ke halaman induk dari halaman yang sedang terbuka akan ditampilkan di Breadcrumb Links berdasarkan hirarki halaman tersebut ditempatkan dalam struktur menu. Pengguna dapat langsung melompat ke menu induk atau menu yang ada di atasnya dari Breadcrumb Links tersebut.

    Contoh: Halaman atau sub-menu “Pegawai” ditempatkan di bawah menu: “Sumber Daya”, maka Breadcrumb Links akan ditampilkan menjadi: “Beranda > Sumber Daya > Pegawai”. Link akan terdapat di kata “Beranda” dan “Sumber Daya”, sehingga memungkinkan pengguna dapat langsung melompat ke menu induk atau menu yang berada di atasnya. Jadi, link ke menu “Sumber Daya” akan ditampilkan tanpa harus membuka terlebih dahulu menu induknya.

    Keuntungan dari tipe ini, pengunjung dapat mengetahui dengan cepat lokasi dari halaman yang sedang dikunjungi berdasarkan struktur menu di aplikasi web tersebut. Artinya, informasi yang terdapat di Breadcrumb Links benar-benar sesuai dengan struktur menu aplikasi, dan yang pasti, akan lebih masuk akal dibandingkan dengan Breadcrumb Links tipe yang kedua di bawah ini.

    Kelemahannya, Web Developer harus mengelola secara khusus data Breadcrumb Links. Misalnya dengan menyediakan tabel khusus untuk menyimpan record-record Breadcrumb Links tersebut. Selain itu, jika lokasi halaman tersebut di struktur menu berubah (misal dipindahkan ke induk menu yang lainnya), maka data Breadcrumb Links juga harus ikut disesuaikan secara manual (tidak otomatis).

  2. Link untuk Halaman Master/Detail
    Breadcrumb Links terdiri atas link ke setiap halaman yang telah dikunjungi sebelumnya hingga bisa mendapatkan halaman yang sedang dikunjungi oleh pengguna. Artinya, link yang ditampilkan di Breadcrumb Links hanya akan muncul jika pengguna sudah pernah mengunjungi halaman Master dari halaman Detail yang sedang terbuka. Itulah mengapa saya istilahkan dengan Link untuk Halaman Master/Detail.

    Contoh: Halaman “Detail Pesanan” merupakan detail dari halaman “Pesanan” (master). Ketika pengunjung langsung membuka halaman “Detail Pesanan”, maka Breadcrumb Links yang akan ditampilkan adalah: “Beranda > Detail Pesanan”. Tapi, jika seandainya pengguna membuka terlebih dulu halaman master-nya (Pesanan), kemudian dari halaman “Pesanan” tadi mengklik link untuk menampilkan data detailnya, maka Breadcrumb Links akan menampilkan: “Beranda > Pesanan > Detail Pesanan”.

    Keuntungan dari tipe ini, tidak membutuhkan penanganan data Breadcrumb Links secara khusus, karena bisa mengandalkan variabel di session aplikasi.

    Kelemahannya, pengunjung sering kali kecewa ketika mengetahui lokasi di Breadcrumb Links tidak sesuai dengan lokasi halaman tersebut pada struktur menu aplikasi.

Bagi saya pribadi, saya lebih cenderung menggunakan tipe yang pertama. Alasannya karena tipe ini lebih masuk akal karena benar-benar sesuai dengan struktur menu, sekalipun saya harus mengelola secara khusus data Breadcrumb Links-nya. Sedangkan tipe yang kedua hanya saya gunakan jika menu aplikasi hanya terdiri dari satu level saja, dan itupun saya harus menyesuaikan link untuk halaman Master Detail harus sesuai dengan struktur menunya.

Bagaimana dengan aplikasi web yang Anda kembangkan? Sudahkah dilengkapi dengan Breadcrumb Links? Tipe yang mana yang Anda gunakan? Atau, apakah Anda memiliki tipe yang berbeda selain kedua tipe di atas? ๐Ÿ™‚

Ditempatkan di bawah: Web Development Ditag dengan:Breadcrumb Links, hirarki menu, menu, navigasi, PHPMaker Indonesia, struktur menu

Masino Sinaga

Web Developer pengguna PHPMaker untuk membangun Aplikasi Web sejak tahun 2004. Sampai sekarang masih aktif dan rajin membagikan pengalamannya menggunakan PHPMaker melalui situs masinosinaga.com, ilovephpmaker.com, dan phpmakerprojects.com.

Ragam Pilihan Metode Pendaftaran Akun Pengguna
Mode Pemeliharaan: Ketika Aplikasi Tidak Boleh Dioperasikan oleh Pengguna

Tinggalkan Balasan Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses

Pos-pos Terbaru

  • Alasan 20 Harus Pakai Masino Extensions: Maximum Record per Page
  • Alasan 19 Harus Pakai Masino Extensions: Custom Breadcrumb Links
  • Alasan 18 Harus Pakai Masino Extensions: Improvement User Level Permissions
  • Alasan 17 Harus Pakai Masino Extensions: Dynamic Permission for Export Data
  • Alasan 16 Harus Pakai Masino Extensions: Confirm Before Save

Menu

  • Siapa Saya?
  • Web Development
  • PHPMaker
  • Umum
  • Syarat dan Ketentuan
  • Sitemap (Peta Situs)
  • Komentar

Komentar Terbaru

  • Demo Masino Extensions for PHPMaker 2026 โ€“ Masino Sinaga pada Fitur-Fitur Masino Extensions untuk PHPMaker 2024
  • Masino Sinaga pada Kode Javascript yang Berubah di PHPMaker 2026 dari PHPMaker 2025
  • Angg* pada Kode Javascript yang Berubah di PHPMaker 2026 dari PHPMaker 2025
  • Masino Sinaga pada Cara Menampilkan Tombol Close di Footer Modal buat Custom File yang SkipHeaderFooter-nya Bernilai True
  • Masino Sinaga pada Cara Menampilkan Tombol Close di Footer Modal buat Custom File yang SkipHeaderFooter-nya Bernilai True

Situs Terkait

  1. I Love PHPMaker
  2. Situs Resmi PHPMaker
  3. Forum Diskusi PHPMaker
  4. PHPMaker di IlmuKomputer.com
  5. PHPMaker Projects
  6. PHPMaker Learning

Baru di PHPMaker?

Baca ini terlebih dulu ...

  1. Ayo Menjadi Web Developer yang Cerdas!
  2. PHPMaker: PHP Code Generator + PHP Framework
  3. Pertanyaan-Pertanyaan yang Paling Sering Diajukan Seputar PHPMaker
  4. Tips buat Anda Pemula yang Baru Mengenal dan Menggunakan PHPMaker
  5. Bacalah Help, Bacalah Help, dan Bacalah Help di PHPMaker!

(c) Masino Sinaga 2009 - 2026 | WordPress | Catat masuk | Kembali ke atas