Part 11 Navigation

M.Suryo Pranoto suryodesign@yahoo.co.id http://suryodesign.asia www.suryodesign.wordpress.com

Lisensi Dokumen:
Copyright 2003-2009 IlmuKomputer.Com Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari IlmuKomputer.Com.

Pendahuluan
Website yang memiliki banyak halaman yang Wide ( memiliki banyak halaman ) dan Deep ( Dalam memiliki banyak sub category di dalamnya ) merupakan suatu keharusan untuk memiliki Navigasi Menu di dalamnya , agar User mengetahui posisi saat ini dia berada dalam Sub Kategory apa dan dapat melakukan Navigasi sesuai keinginan dia, kebanyakan user yang mengalami kebingungan dengan struktur website yang ada untuk mencari menu yang dia inginkan , akan melakukannya mengulang dari menu awal , dan mencarinya satu per-satu , tapi dengan Navigasi yang dimiliki oleh ASP.Net kita dapat menghindari itu , artikel kali ini kita akan mempelajari mengenai Navigasi lebih dalam. bagi yang ingin mendownload artikel ini dapat mendownload di www.suryodesign.asia/freedownload dan bila yang ingin melihat artikel saya yang lainya dapat membaca di sini http://ilmukomputer.org/author/suryodesign/

ISI
Kali ini kita akan menggunakan Design dari pertemuan sebelumnya mengenai MasterPage , kemudian kita akan melakukan sedikit modifikasi dan lebih mendalami macam-macam fitur mengenai navigasi seperti menggunakan Menu , TreeView , dan SiteMapPath , dan sitemap , kalau pada pertemuan sebelumnya kita hanya menggunakan TreeView dengan XML , maka kali ini kita akan menggunakan SiteMap

Komunitas eLearning IlmuKomputer.Com

Copyright 2003-2009 IlmuKomputer.Com

Berikut adalah Design dari Halaman Yang akan Kita buat :

Komponen dan Fitur lain yang digunakan ( diluar dari komponen dari MasterPage yang kita ambil dari pertemuan sebelumnya yang membahas MasterPage) : 1.Menu 2.SiteMapPath 3.Web.Website Sekarang kita akan mencoba menampilkan SiteMap yang berasal dari Web.sitemap berikut adalah step untuk membuat Sitemap , klik Toolbar Website > Add New Website > Pilih Sitemap dan kemudian Ok , kemudian berikut adalah isi Sitemap :
<siteMap> <siteMapNode title="Home" description="Home" url="~/Home.aspx"> <siteMapNode title="Monitor" description="Produk Monitor" url="~/Monitor.aspx"> <siteMapNode title="Samsung" description="Samsung choices" url="~/Samsung.aspx" /> <siteMapNode title="Acer" description="Acer choices" url="~/Acer.aspx" /> </siteMapNode> <siteMapNode title="Services" description="Pelayanan Dan Penyaluran" url="~/Services.aspx"> <siteMapNode title="Reseller" description="Toko Penyalur Monitor" Komunitas eLearning IlmuKomputer.Com

Copyright 2003-2009 IlmuKomputer.Com

url="~/Reseller.aspx" /> <siteMapNode title="Distributor" description="Distributor Resmi" url="~/Distributor.aspx" /> <siteMapNode title="Support" description="IT SUPPORT" url="~/Support.aspx" target="_blank" /> </siteMapNode> </siteMapNode> </siteMap>

Perlu anda ketahui ada beberapa rule dalam pembuatan sitemap seperti berikut : 1.SiteMaps dimulai dengan <siteMap> Elemen. 2.Setiap Halaman di representasikan dengan <siteMapNode> 3.<siteMapNode> elemen dapat memiliki <siteMapNode> elemen 4. Site Map minimal memiliki satu atau lebih <siteMapNode> 5.Duplicate URL Tidak diizinkan dalam SiteMap Kemudian Kita lakukan dengan cara yang sama pada cara sebelumnya kita Add Sitemap ke dalam komponen TreeView dan Menu , Klik TreeView dan Add New DataSource , begitu juga dengan Menu lakukan hal yang sama. TreeVew yang kita buat sebelumnya tidak mengindikasikan posisi kita saat ini, untuk menyelesaikan masalah ini maka kita gunakan SiteMapPath control , karena SiteMapPath selalu digunakan untuk informasi navigasi. Beberapa SiteMapPath Properties ShowToolTips Ubah menjadi false , dan deskripsi di atas text tidak akan muncul ketika cursor berada dalam posisi hover di atas bagian dari SiteMapPath Untuk mengatur jumlah dari level pada halaman sekarang yang akan ditampilkan secara bersama-sama , defaultnya bernilai -1 , yang berarti semua level akan ditunjukkan Bila true , maka bagian dari page yang menunjukkan current page akan berubah menjadi link yang dapat di klik , defaultnya ini bernilai false karena user sudah berada pada halaman current page ( halaman saat ini ) Untuk mengatur Alur Penunjuk Path , bisa diatur RootToCurrent( ini defaultnya) dan CurrentToRoot( yang mana kebalikan dari Root To Current). Sample : RootToCurrent : Home > TV > Toshiba CurrentToRoot : Toshiba < TV < Home Merupakan karakter pembatas antara setiap level dalam path , defaultnya dengan symbol greater than ( lebih dari ) seperti berikut Home > TV > Toshiba

ParentLevelDisplayed

RenderCurrentNodeAsLink

PathDirection

PathSeparator

Komunitas eLearning IlmuKomputer.Com

Copyright 2003-2009 IlmuKomputer.Com

Komunitas eLearning IlmuKomputer.Com

Copyright 2003-2009 IlmuKomputer.Com

SiteMapPath menyediakan menu navigasi yang menunjukkan posisi user saat ini dan mengizinkan user untuk melakukan navigasi sesuai urutan yang ada atau level yang lebih tinggi menggunakan link. Seperti pada contoh berikut :

Berikut adalah Code dari SiteMapPath :

<asp:SiteMapPath ID="SiteMapPath" runat="server"></asp:SiteMapPath>

Dan bila kita ingin mengetahui posisi Node saat ini, dapat kita gunakan cara berikut :
<asp:SiteMapPath ID="SiteMapPath1" runat="server" PathDirection="RootToCurrent" PathSeparator="->" > <CurrentNodeTemplate> <%# Eval("title") %> <br /> <small><i><%#Eval("description")%></i></small> </CurrentNodeTemplate> </asp:SiteMapPath>

Akan saya jelaskan fungsinya satu persatu : PathDirection= merupakan urutan hieraki dari root hingga node sekarang , atau bisa di set sebaliknya. <CurrentNodeTemplate> = merupakan node yang menunjukkan node posisi sekarang , dan dapat kita customize sesuai dengan keinginan kita , dalam contoh di atas kita customize menggunakan perintah Eval yang menampilkan title yang kita dapat dari sitemap berikut :

<siteMapNode title="Samsung" description="Samsung choices" url="~/Samsung.aspx" />

Komunitas eLearning IlmuKomputer.Com

Copyright 2003-2009 IlmuKomputer.Com

Kemudian sekarang kita akan membuat posisi root teratas , kemanapun kita pergi root ini akan selalu ada di sisi atas website , berikut adalah design printscreennya :

dan lokasi root ini kita buat dengan C# BehindCode berikut contohna :
protected void Page_Load(object sender, EventArgs e) { Response.Write("Halaman Root : " + SiteMap.RootNode.Title + SiteMap.RootNode.Url +"<br />"); Response.Write("Halaman saat ini : " + SiteMap.CurrentNode.Title + " , Berada Pada URL :" + SiteMap.CurrentNode.Url + "<br /> </hr>"); int i = 1; if (SiteMap.CurrentNode.HasChildNodes) { IEnumerator childNodesEnumerator = SiteMap.CurrentNode.ChildNodes.GetEnumerator(); while (childNodesEnumerator.MoveNext()) { Response.Write("Chiled Ke : " + i + " : " + childNodesEnumerator.Current.ToString() + "<br />"); i++; } } }

Komunitas eLearning IlmuKomputer.Com

Copyright 2003-2009 IlmuKomputer.Com

Bagi ada beberapa yang masi bingung dengan konsep Node yang ada. Berikut saya jelaskan dengan gambar, gambar saya ambil dari ebook yang ada pada Referensi saya :

Komunitas eLearning IlmuKomputer.Com

Copyright 2003-2009 IlmuKomputer.Com

Berikut keterangan dari TreeView Style Properties : NodeStyle RootNodeStyle ParentNodeStyke LeafNodeStyle SelectedNodeStyle HoverNodeStyle Semua Node Semua Node pada Level pertama Semua Node kecuali node teratar ( root ) Semua node yang tidak mengandung child node dan bukan root node Node yang terpilih Kondisi dimana Node disorot oleh cursor mouse

Sedangkan TreeNodeStyle memiliki beberapa Properties seperti berikut : ImageURL NodeSpacing Vertical Padding HorizontalPadding ChildNodesPadding Url yang dimiliki oleh sebuah node Space / jarak ( dalam pixel ) antara node sekarang dengan note di atas atau di bawahnya Space ( dalam pixel ) antara jarak atas dan bawah dari node dan border yang ada pada sekitar text Space ( dalam pixel ) antara jarak kiri dan kanan dari node text dan border sekitar text Space ( dalam pixel ) antara last child node yang ditampilkan oleh parent node

Lihatlah TreeView berikut , perhatikan baik-baik ? apakah yang beda dengan TreeView pada umumnya ?

Bagaimana , sudah ketemu jawabannya ?? bila anda belum pernah menggunakan komponen ini Tentu anda tidak akan mengetahui perbedaanya , Menu pada TreeView pada Root dan 1 Level di bawahnya memiliki Warna Dan FontSize yang berbeda dan keadaan Font Bold dan italic yang berbeda, umunya mereka berwarna sama dan memiliki besar font yang sama , untuk Customize hal seperti ini tidaklah susah , anda dapat menggunakan perintah <LevelStyles> seperti contoh berikut , setiap Node Di dalamnya meng-indikasikan Level dari yang tertinggi ke yang terendah , ada 2 TreeNodeStyle untuk 2 Level yaitu Rootdan 1 level di bawahnya sepert pada contoh yang kita miliki.
Komunitas eLearning IlmuKomputer.Com

Copyright 2003-2009 IlmuKomputer.Com

<asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1" ShowLines="True"> <LevelStyles> <asp:TreeNodeStyle ChildNodesPadding="10" Font-Bold="true" Font-Size="15pt" ForeColor="Red" /> <asp:TreeNodeStyle ChildNodesPadding="10" Font-Italic="true" FontSize="15pt" ForeColor="DarkGreen" /> </LevelStyles> </asp:TreeView>

Kemudian sekarang kita akan membahas MenuControl : MenuControl merupakan menu navigasi tampilan yang sama seperti pada TreeView, kita dapat Bind menu control ke data source , atau kita dapat mengisinya sendiri. Berikut adlaah Code dari Menu :
<asp:Menu ID="Menu1" runat="server></asp:Menu>

Berikut merupakan Tampilan Dari Menu yang menampilkan data dari Web.Sitemap :

Jangan terkecoh dengan penampilannya yang sama , tapi da beberapa perbedaan di antara keduanya , yaitu : 1.Menu hanya menampilkan single menu yang di sorot saja , sedangkan TreeView dapat expand semua menu yang ada dalam waktu yang bersama-sama 2.Menu menunjukkan root level dari halaman yang berhubungan . Semua menu yang ditampilkan menggunakan fly-out menu yang akan muncul ketika di sorot , TreeView menampilkan semua nya dengan inline ( baris ke bawah ) . 3.TreeView support Fill dan Client Callbacks, Menu tidak support 4.Menu Support Template , TreeView Tidak 5. TreeView support Checkbox untuk semua node , menu tidak 6.Menu mendukung horizontal dan vertical layout , tergantung dengan setting , sedangkan TreeView hanya mendukung vertical layout.

Komunitas eLearning IlmuKomputer.Com

Copyright 2003-2009 IlmuKomputer.Com

Penutup
Tidak banyak kata saya sampaikan pada penutup kali ini . 3 Tips Dan Trik aja dari saya : 1.Terus Mencoba dan berpikir lah jernih agar lebih tenang dalam mengerjakan sesuatu !!! 2.Gunakan MSDN untuk membantu anda. 3.Googling untuk mencari referensi yang dapat membantu anda, karena pasti bukan hanya anda yang pernah mengalami masalah ini , di jamin pasti ketemu dengan googling ^^ REFERENSI : MSDN 2008 http://msdn.microsoft.com http://wikipedia.com/ http://www.microsoft.com www.w3schools.com/ http://asp.net-tutorials.com/ Ebook : press.Beginning.ASP.NET.2.0.in.C.Sharp.2005

Biografi Penulis M.Suryo Pranoto Alumni Mahasiswa Perguruan Tinggi Universitas Bina Nusantara , Aktif dalam beberapa komunitas komputer , dan beberapa project terutama berbasis aplikasi seperti VB.Net atau C#,dan sedang berusaha keras untuk menabung dan berencana untuk melanjutkan Cisco CCNP setelah menyelesaikan CCNA , memiliki hobby untuk sharing mengenai komputer mulai dari software hingga jual beli hardware maupun modding komputer.

Ym : suryolovetyka , Email : suryodesign@yahoo.co.id Website : www.suryodesign.asia Blog : www.suryodesign.wordpress.com Ilmu Komputer : http://ilmukomputer.org/author/suryodesign/

Komunitas eLearning IlmuKomputer.Com

Copyright 2003-2009 IlmuKomputer.Com