ASP.NET : Using Multiple Sitemap Files in Navigation Controls | M Reza Faisal

reza

full-time(software-developer,lecturer); part-time(traveller, food-tester);

ASP.NET : Using Multiple Sitemap Files in Navigation Controls

Jan 28, 2014 by     No Comments    Posted under: I am Software Developer

{Pendahuluan}

Dalam membangun aplikasi pada umumnya, dan aplikasi web secara khusus harus diperhatikan hal-hal terkait dengan pengelolaan navigasi untuk halaman-halaman yang telah dibuat.  Ada beberapa hal yang harus diperhatikan terkait dengan pengelolaan navigasi, yaitu :

  • harus dipastikan setiap halaman yang dibuat harus dapat diakses.
  • harus dipastikan jangan sampai ada halaman yang dikunjungi dari suatu link tetapi setelah berada di halaman tersebut tidak dapat kemana-mana.
  • harus dipastikan setiap halaman yang sedang diakses memberikan informasi posisi halaman tersebut pada struktur navigasi yang ada.

Jika aplikasi web yang sedang dibangun menggunakan ASP.NET Web hal-hal tersebut dengan memanfaatkan control-control Navigation yang terdapat pada Toolbox, seperti :

File *.sitemap, dapat dipergunakan sebagai data yang menyimpan daftar halaman-halaman web yang akan ditampilkan pada menu. File *.sitemap ini adalah file dengan format XML yang mempunyai struktur seperti contoh pada kode berikut ini.

   1: <?xml version="1.0" encoding="utf-8" ?>

   2: <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >

   3:   <siteMapNode url="" title="e-Disposisi"  description="e-Disposisi" roles="*">

   4:     <siteMapNode url="~/Member/Default.aspx" title="Home"  description="Home" roles="*" />

   5:     <siteMapNode url="~/Setup/Jabatan.aspx" title="Jabatan"  description="Jabatan" roles="owner" />

   6:     <siteMapNode url="~/Setup/Organisasi.aspx" title="Organisasi"  description="Organisasi" roles="owner" />

   7:     <siteMapNode url="~/Setup/User.aspx" title="Pengelolaan User"  description="Pengelolaan User" roles="admin" />

   8:     <siteMapNode url="~/Surat/SuratMasuk.aspx" title="Pengelolaan Surat"  description="Pengelolaan Surat" roles="reciever" />

   9:     <siteMapNode url="~/Disposisi/Disposisi.aspx" title="Pengelolaan Disposisi"  description="Pengelolaan Disposisi" roles="user" />

  10:   </siteMapNode>

  11: </siteMap>

kode 1. eDisposisi.sitemap

Control Menu atau TreeView, dapat dipergunakan untuk menampilkan menu berdasarkan data dari file *.sitemap. Kedua control ini dapat ditemu pada bagian Navigation yang terdapat pada Toolbox.

image

gambar 1. Sitemap Controls.

Control SiteMapPath, dapat dipergunakan untuk memberikan informasi posisi halaman yang diakses oleh user. Posisi dari halaman tersebut akan sesuai dengan struktur navigasi yang berada pada file *.sitemap.

MasterPage, agar menu dan informasi posisi halaman dapat ditampilkan pada seluruh halaman web yang dibuat, maka dapat dibuat sebuah halaman *.master sebagai master page yang akan digunakan oleh halaman web *.aspx.

Pada posting ini tidak akan dibahas tentang hal-hal tersebut di atas secara detail, tetapi bagi yang ingin penjelasan detail tentang control-control dan fitur tersebut di atas dapat membaca ebook yang tersedia di : http://www.rezafaisal.net/?p=902.

{Permasalahan}

Misal dimiliki halaman seperti gambar berikut ini :

blog1

gambar 2. Halaman Default.aspx.

blog3

gambar 3. Halaman Organisasi.aspx.

blog2

gambar 4. Halaman Profile.aspx.

Keterangan :

1 adalah control Menu yang digunakan sebagai menu utama.

2 adalah control SiteMapPath yang digunakan untuk memberikan informasi posisi.

3 adalah hyperlink untuk mengakses halaman Profile.

Dari gambar-gambar dan keterangan di atas maka dapat dilihat bahwa setiap memilih item menu yang terdapat pada control Menu pada bagian 1 maka dapat dilihat SiteMapPath pada bagian 2 akan memberikan informasi posisi. Tetapi ada hal yang berbeda ketika hyperlink pada bagian 3 diklik akan mengantarkan ke halaman Profile.aspx dan SiteMapPath tetap memberikan informasi posisi.

Diketahui bawah file *.sitemap adalah sumber data untuk control-control Navigation (Menu, TreeView dan SiteMapPath), jika digunakan file sitemap seperti pada kode 1, jika hyperlink Account Setting diklik maka dapat dipastikan SiteMapPath pada bagian 2 tidak akan memberikan informasi apa-apa karena dapat dilihat pada data tidak ada item menu yang mengacu ke file Profile.aspx.  Sedangkan jika digunakan file sitemap dengan data seperti berikut di bawah ini jika hyperlink Account Setting diklik control SiteMapPath akan menampilkan informasi seperti pada gambar di atas. Tetapi otomatis pada menu bagian 1 akan terlihat juga tambahan item menu Account Setting.

   1: <?xml version="1.0" encoding="utf-8" ?>

   2: <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >

   3:   <siteMapNode url="" title="e-Disposisi"  description="e-Disposisi" roles="*">

   4:     <siteMapNode url="~/Member/Default.aspx" title="Home"  description="Home" roles="*" />

   5:     <siteMapNode url="~/Member/Profile.aspx" title="Account Settings"  description="Account Settings" roles="*" />

   6:     <siteMapNode url="~/Setup/Jabatan.aspx" title="Jabatan"  description="Jabatan" roles="owner" />

   7:     <siteMapNode url="~/Setup/Organisasi.aspx" title="Organisasi"  description="Organisasi" roles="owner" />

   8:     <siteMapNode url="~/Setup/User.aspx" title="Pengelolaan User"  description="Pengelolaan User" roles="admin" />

   9:     <siteMapNode url="~/Surat/SuratMasuk.aspx" title="Pengelolaan Surat"  description="Pengelolaan Surat" roles="reciever" />

  10:     <siteMapNode url="~/Disposisi/Disposisi.aspx" title="Pengelolaan Disposisi"  description="Pengelolaan Disposisi" roles="user" />

  11:   </siteMapNode>

  12: </siteMap>

kode 2. eDisposisiNav.sitemap.

{Solusi}

Jika kita ingin membuat skenario seperti di atas dimana pada control Menu menggunakan data dari sitemap pada kode 1 dan control SiteMapPath menggunakan data dari file sitemap pada kode 1.  Untuk membuat skenario seperti itu dapat diikuti langkah-langkah berikut ini :

Menulis dua file sitemap, tulis dua file sitemap dengan nama (misalkan) eDisposisi.sitemap dengan isi seperti pada contoh kode 1 dan file eDisposisiNav.sitemap dengan isi seperti pada kode 2, dan simpan kedua file tersebut pada folder App_Data.

image

Mendaftarkan file sitemap pada file web.config, langkah selanjutnya adalah mendaftarkan kedua file tersebut pada file web.config seperti berikut ini, seperti pada baris ke-3 sampai baris ke-8. Dapat dilihat pada baris ke-5, bahwa untuk file eDisposisi.sitemap diberikan nilai name=eDisposisi_Sitemap, nama ini nanti akan dipanggil oleh control yang memerlukan data dari file ini. Begitu juga pada baris ke-6 dapat dilihat nilai name=eDisposisi_Nav untuk file eDisposisiNave.sitemap.

   1: <system.web>

   2:    ...

   3:     <siteMap enabled="true">

   4:       <providers>

   5:         <add name="eDisposisi_Sitemap" siteMapFile="~/App_Data/eDisposisi.sitemap" type="System.Web.XmlSiteMapProvider" securityTrimmingEnabled="true"/>

   6:         <add name="eDisposisi_Nav" siteMapFile="~/App_Data/eDisposisiNav.sitemap" type="System.Web.XmlSiteMapProvider" securityTrimmingEnabled="true"/>

   7:       </providers>

   8:     </siteMap>

   9:     ...

  10: </system.web>

Memuat data sitemap pada control Navigation, selanjutnya adalah memuat data pada control cukup dengan memanggil nilai name yang telah didefinisikan pada file web.config. Untuk memuat data pada control Menu pada bagian 1 dapat ditulis kode seperti berikut ini :

   1:

   2: <asp:SiteMapDataSource ID="SiteMapDataSource_MainMenu" ShowStartingNode="false" SiteMapProvider="eDisposisi_Sitemap" runat="server" />

   3: <asp:Menu ID="Menu_Main" DataSourceID="SiteMapDataSource_MainMenu" runat="server" Orientation="Vertical" DynamicHorizontalOffset="1">

   4: </asp:Menu>

Pada baris ke-2 dapat dilihat sumber data yang digunakan adalah eDisposisi_Sitemap yang artinya datanya berasal dari file eDisposisi.sitemap.

Sedangkan untuk control SiteMapPath akan ditulis seperti berikut ini :

   1:

   2: <asp:SiteMapPath ID="SiteMapPath_Main" SiteMapProvider="eDisposisi_Nav" runat="server">

   3: </asp:SiteMapPath>

Pada kode di atas dapat dilihat data yang digunakan adalah seperti terlihat pada nilai SiteMapProvider yaitu eDisposisi_Nav, yang artinya file sitemap yang digunakan adalah eDisposisiNav.sitemap.

Selamat mencoba.

Got anything to say? Go ahead and leave a comment!

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Fotolia

Fotolia

ShutterStock


Fotolia
© 2013 eSevens
%d bloggers like this: