Breadcrumb (navigation,ekmek kırıntısı) Nedir?

        Genellikle web sayfalarında kulanıcılara bulundukları sayfaya ulaşmak için hangi yollardan geçtiklerini hatırlatmaya yönelik bilgi linkidir.Aslında ana dizinden ilgili sayfaya ulaşmak için gezilmesi gereken sayfaları gösterir.Yazılımcılar bu işi meşhur Hansel ve Gretel kardeşlerden öğrenmiştir diyebiliriz.Eski toprak bu iki kardeşin web sayfalarında navigasyon konularına yönelik yaptıkları hizmetleri anmadan geçemeyeceğiz.(Tamam abartıyorum)Annelerinin veya üvey annelerinin yokluk yüzünden aç kalma tehlikesine karşı bulduğu dahiyane fikir sonucu iki kardeş kendilerini babaları tarafından ormana bırakılmış şekilde bulurlar.Ama kardeşler yol boyunca eve(ana sayfaya) dönüş yolunu bulabilmek için cakıl taşları ve ekmek kırıntıları(aha breadcrumbs) ile işaret bırakmışlar.(1)Burada masumların hesaba katmadıkları şey ise ormanda ki masum hayvanların masum bir şekilde kırıntılardan nasiplenmesidir.Tabi kardeşler dönüş yolunu kaybederler ve değişik maceralar yaşarlar.(2)Şaka bir yana bizler bu yapının benzerinin yapımı konusunda kafa yoruyor olacağız.

        Breadcrumb(Ekmek kırıntısı) örneği aşağıdaki resimde göründüğü gibidir.Değişik kullanımları mevcuttur.(Genellikle e-ticaret sitelerinde karşılaşabileceğimiz bir yapıdır)

        Son zamanlar artık SEO dostu tasarımlar ortaya koyma noktasında yarışa girişen yazılımcılar sayesinde zaten tarayıcımızda gördüğümüz linklerde nerede olduğumuz hakkında bizlere yeterli kırıntıları sunulmaktadır.

        Örnek olarak,Dota 2 oyunuyla ilgili istatistik sunan bu sitede(3) Herolar/WitchDoctor/Items kısmından nerede olduğumu anlayabiliyorum.

        Benim değinmek istediğim konu ise şu şekilde,elimde bir kategori sistemi var ve buna kategoriler eklemek istiyorum.Her kategorinin üst kategori(Parent Category,bir tane) ve alt kategoriler(Child Categories,birden fazla olabilir) diye alanları mevcuttur.Eğer bir kategorinin üst kategorisi null ise yani yoksa bu kategorimiz saygı değer üst kategoridir.Bunların ekleme veya ilişkilendirilme durumlarına değinmeyeceğim.Bunları hallettiğinizi varsayarak elinizde bir kategori listesinin bulunduğunu ve bu listenin her bir elemanının altında bulunduğu üst kategorisine doğru gezinti menüsünü oluşturmaya çalışacağız.

       Elimizde 4 adet kategorinin olduğunu varsayalım.Heroes isimli kategori üst kategorimiz(parent category)  olsun.Witch Doctor ve Timbersaw diyede alt kategoriler(child categories) olsun.Bu iki kategorinin parent i Heroes kategorisi olsun ve Witch Doctor bir adet alt(child) kategoriye sahip olsun.Onun adıda Items olsun.

Almamız gereken sonuç :
Heroes kategorisinin breadcrumb linki = Heroes
WitchDoctor kategorisinin breadcrumb linki = Heroes>>WitchDoctor
Timbersaw kategorisinin breadcrumb linki = Heroes>>Timbersaw
Items kategorisinin breadcrumb linki = Heroes>>WitchDoctor>>Items

        Biz bu aldığımız sonuçları oluşturacağımız Category nesnelerimizin BreadCrumb(String) alanında saklayacağız.Her nesne kendi ekmek kırıntısıyla eve dönüş yapısını içnide saklayacak.Bunlarıda örnek olarak kategorilerimizin listelendiği tabloda veya diğer aklımıza gelen uygun yerlerde kullanabiliriz.Bunu oluşturan bir fonksiyon tasarlıyoruz.Recursive(4) olarak çalışacak olan bu yapı kategori listemizin her nesnesini dolaşıp o nesnenin üst kategorisini bulana kadar yani üst kategorisi null olan kategoriye denk gelene kadar ekmek kırıntılarını takip etmek olacaktır.Bu işlemi her bir liste elemanı için tekrar edeceğiz.

public class Category : BaseObject
    {

        Category parent;

        string name;
        string breadcrumbLink;

        public Category Parent
        {
            get
            {
                return parent;
            }

            set
            {
                parent = value;
            }
        }

        public string Name
        {
            get
            {
                return name;
            }

            set
            {
                name = value;
            }
        }


     public string BreadcrumbLink
        {
            get
            {
                return breadcrumbLink;
            }

            set
            {
                breadcrumbLink = value;
            }
        }


List<Category> childList;

        public List<Category> ChildList
        {
            get
            {
                return childList;
            }

            set
            {
                childList = value;
            }
        }


        public string GetBreadcrumbLink(ref int counter, List<Category> categoryList, Category category)
        {
            if (counter == 0)
            {
                if (category.Parent == null)
                {
                    BreadcrumbLink += "<strong>" + category.Name + "</strong>(" + category.ChildList.Count + ")";
                }
                else
                {
                    if (category.ChildList.Count > 0)
                        BreadcrumbLink += category.Name + "(" + category.ChildList.Count + ")";
                    else
                        BreadcrumbLink += category.Name;
                }
            }

            counter++;
            if (category.Parent != null)
            {
                BreadcrumbLink = category.Parent.Name + ">>" + BreadcrumbLink;

                GetBreadcrumbLink(ref counter, categoryList, category.Parent);
            }

            return BreadcrumbLink;
        }


}

     
         Örnek Category sınıfımız yukarıda göründüğü gibidir.İçeriğinde Category sınıfından bir Parent,alt kategoriler için ChildList adında Category Listesi,String tipinde Name alanı(kategori adı) ve BreadcrumbLink adında String tipinde ekmek kırıntısı linkimiz mevcuttur.

         foreach (var category in categoryList)
            {
                int counter = 0;
                category.GetBreadcrumbLink(ref counter, categoryList, category);
            }

        Sistemimizde bulunan bütün kategorilerin geldiği listede her bir kategori nesnesi için yukarıda görüdüğümüz şekilde breadcrumblink alanını doldurabiliriz.

        Ben benzer sistemin iki değişik kullanımını örnek vereceğim.ASP.NET MVC kullananlar için tanıdık gelecek bu Controller sayfasında elimde bulunan kategorileri tablo halinde listelenmesini istiyorum.BreadcrumbStyleTable fonksiyonumuz bizlere tablonun satır bilgilerini döndürmektedir.View sayfamızda Html.Raw ile alacağınız bu kısımda tablomuzda kategori adları yerine ilgili kategorinin kategori hiyerarşisindeki konumunu yazdırıyoruz.(Örnek : Futbol>>Takımlar>>Bursaspor).TreeMenu fonksiyonu ise aynı kategori hiyerarşisine ağaç görünümü ile bakmamıza olanak tanıyor.

public class PanelCategoryController : Controller
     {
        // GET: Category
        public ActionResult Index()
        {
            var categories = Category.CategoryList;

            string table = "";
            int counter = 0;
            BreadcrumbStyleTable(ref counter,ref table,categories);

            ViewBag.table = table;
            return View(categories);
        }


public string BreadcrumbStyleTable(ref int counter,ref string table, List<Category> categoryList, int? parentId = null)
        {
            if(counter!=categoryList.Count)
                table += "<tr>";

            counter++;

            foreach (var category in categoryList)
            {
                int? categoryParentId = null;

                if (category.Parent != null)
                {
                    categoryParentId = category.Parent.Id;
     
                }

                if (categoryParentId == parentId)
                {
                    table += "<td><a href='Category/Details/"+category.Id+"'>" +category.BreadcrumbLink + "</a></td>";
                    table += " <td><a href='Category/Edit/"+category.Id+"'>Düzenle</a>/<a href='Category/Delete/"+category.Id+"'>Sil</a></tr>";
                    BreadcrumbStyleTable(ref counter,ref table, categoryList, category.Id);
                }
            }

            return table;
        }

public string TreeMenu(ref string table,List<Category> categoryList,int? parentId=null)
        {
            table += "<ul>";

            foreach (var category in categoryList)
            {
                int? categoryParentId = null;

                if(category.Parent!=null)
                    categoryParentId=category.Parent.Id;

                if (categoryParentId == parentId)
                {
                    table += "<li>" + category.Name;
                    TreeMenu(ref table, categoryList,category.Id);
                    table += "</li>";
                }
            }

            table += "</ul>";
            return table;
        }

1)Sefaleti yaşarken ekmek kırıntısından navigasyon olayı iyimiş.Acaba anneleri,"ben sadece pirzola yemek istiyorum kuru ekmek benim yaşam tarzıma uygun değil" diyerek mi çocukları evden kovmayı düşünmüş diye insan kendi kendine sormuyor değil.Yani sorun burada açlık değilde pirzola yiyememek miydi?Çünkü götürüldükleri yerin eve uzaklığı boyunca bırakacakları ekmek kırıntıları için belkide fırın arabasıyla seyahat etmeleri daha makul görünen birşey.

2) https://tr.wikipedia.org/wiki/Hansel_ve_Gretel

3)http://www.dotabuff.com

4)https://en.wikipedia.org/wiki/Recursion_(computer_science)  (Özyineleme)