Peta situs ASP.NET 2.0 membangun struktur navigasi situs web

Penulis：Eve Cole Waktu Pembaruan：2009-06-30 16:47:46

Jika Anda pernah bepergian ke tujuan asing, Anda pasti tahu pentingnya peta - peta dapat membantu membuat perjalanan Anda lebih nyaman. Prinsip yang sama berlaku untuk situs web. Sebuah situs web harus menyajikan struktur navigasi yang sederhana namun fleksibel kepada pengunjung sehingga mereka dapat dengan mudah menavigasi ke berbagai bagian situs web. ASP.NET 2.0 menyediakan fitur yang disebut SiteMap yang membantu Anda mencapai fungsionalitas ini. Artikel ini akan menjelaskan apa itu peta situs dan menjelaskan cara mengembangkan struktur navigasi situs web yang menggunakannya.

1. Peta Situs

Peta situs adalah file XML (dengan ekstensi .sitemap) yang menjelaskan secara rinci seluruh tata letak navigasi situs web Anda. Anda dapat menggunakan file peta situs untuk memenuhi semua kebutuhan Anda.

Sebuah contoh akan membantu menjelaskan file peta situs. Gambar 1 menunjukkan struktur direktori dari contoh situs web.

Gambar 1: Struktur situs web

Pada gambar, halaman beranda (Default.aspx) dan halaman Hubungi Kami (contact.aspx) terletak di folder root situs web. Ada juga dua subfolder yang disebut Produk dan Layanan. Ada dua formulir Web di bawah setiap subfolder: terkait dengan Product1.aspx dan Product2.aspx, serta Service1.aspx dan Service2.aspx.

Sekarang, cukup ikuti langkah-langkah berikut dan Anda dapat menggunakan peta situs untuk mendeskripsikan struktur situs web Anda:

1. Buat website baru menggunakan VS.NET 2005.

2. Klik kanan situs web dan pilih "Tambahkan Item Baru...".

3. Pilih Peta Situs dari kotak dialog "Tambahkan Item Baru..." (lihat Gambar 2) dan beri nama Web.sitemap.

Gambar 2: Menambahkan peta situs baru

Masukkan markup XML berikut di file web.sitemap:

＜?xml versi="1.0" pengkodean="utf-8" ?＞
＜siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" ＞
＜siteMapNode url="default.aspx" title="Beranda" deskripsi="Situs Web Saya"＞
＜siteMapNode url="~/products/default.aspx" title="Produk"＞
＜siteMapNode url="~/products/product1.aspx" title="Produk Pertama" /＞
＜siteMapNode url="~/products/product2.aspx" title="Produk Kedua" /＞
＜/siteMapNode＞
＜siteMapNode url="~/services/default.aspx" title="Layanan"＞
＜siteMapNode url="~/services/service1.aspx" title="Layanan Pertama" /＞
＜siteMapNode url="~/services/service2.aspx" title="Layanan Kedua" /＞
＜/siteMapNode＞
＜siteMapNode url="contact.aspx" title="Hubungi Kami" /＞
＜/siteMapNode＞
＜/Peta Situs＞

Akar file peta situs adalah peta situs. Ini berisi node siteMapNode, dan bergantung pada struktur situs web Anda, ini dapat berisi beberapa node siteMapNode.

Tag siteMapNode ini memiliki empat atribut penting (lihat Tabel 1).

Judul

deskripsi	properti
menampilkan	judul halaman. Properti ini sering digunakan oleh kontrol navigasi untuk menampilkan judul URL.
url	menampilkan URL halaman yang dijelaskan oleh node ini.
deskripsi	menentukan deskripsi tentang halaman ini. Anda dapat menggunakan deskripsi ini untuk menampilkan konten cepat.
peran	Dengan menggunakan pemangkasan keamanan (dibahas nanti), atribut ini menentukan peran yang diizinkan untuk mengakses halaman ini.

Tabel 1: Atribut penting dari tag

Ini membentuk peta situs Anda. Sekarang Anda dapat menggunakannya untuk tujuan navigasi.
2. Cara menggunakan Peta Situs

Anda dapat menggunakan file peta situs yang dibuat di bagian sebelumnya dengan tiga cara umum:

· Menggunakan kontrol SiteMapPath

· Menggunakan kontrol sumber data Peta Situs

· Menggunakan kelas Peta Situs

Kontrol SiteMapPath memungkinkan Anda membuat remah roti. Gambar 3 menunjukkan apa itu remah roti.

Gambar 3: Navigasi Breadcrumb

Kontrol SiteMapPath menampilkan berbagai tingkat navigasi. Misalnya, Anda dapat mengklik tingkat induk atau akar untuk menavigasi kembali atau menuju ke tingkat teratas. Tentu saja, Anda juga dapat menyesuaikan hierarki navigasi.

ASP.NET 2.0 juga dilengkapi dengan serangkaian kontrol navigasi yang bagus, termasuk TreeView dan menu. Dengan kontrol sumber data Peta Situs, Anda dapat mengikat file peta situs ke kontrol ini.

Dalam beberapa kasus, kontrol navigasi internal mungkin tidak memenuhi kebutuhan Anda. Dalam hal ini, Anda dapat mengakses file peta situs secara terprogram dan membaca berbagai node siteMapNode. Anda kemudian dapat membuat struktur navigasi khusus menggunakan judul dan properti URL siteMapNode.

3. Gunakan kontrol SiteMapPath

Sebelum masuk ke detailnya, mari kita buat dulu struktur direktori dan form web yang kita butuhkan. Pertama, tambahkan dua folder, Produk dan Layanan, ke situs web. Kemudian, tambahkan halaman Master baru MasterPage.master. Selanjutnya tambahkan formulir web yang ditunjukkan pada Tabel 2, dan pastikan untuk mengatur halaman masternya saat Anda menambahkannya.

Folder	nama formulir web
Default.aspx	Akar situs web
Contact.aspx	Akar situs web
Default.aspx	Produk
Produk1.aspx	Produk
Produk2.aspx	Produk
Default.aspx	Layanan
Layanan1.aspx	Layanan
Layanan2.aspx	Layanan

Tabel 2: Daftar formulir web

Sekarang, buka halaman Master yang Anda tambahkan sebelumnya. Seret kontrol Label dan kontrol SiteMapPath ke dalamnya. Kemudian, atur properti Teks pada Label menjadi "Selamat Datang!".

Daftar berikut menunjukkan semua tag di halaman MasterPage.master:

＜%@ Master Language="C#" AutoEventWireup="benar"
CodeFile="MasterPage.master.cs" Mewarisi="MasterPage" %＞
＜html xmlns="http://www.w3.org/1999/xhtml" ＞
＜head runat="server"＞
＜judul＞Halaman Tanpa Judul＜/judul＞
＜/kepala＞

＜form id="form1" runat="server"＞

＜asp:Label ID="Label1" runat="server" Font-Size="XX-Large" ForeColor="Biru" Text="Selamat Datang!"＞＜/asp:Label＞＜br /＞
Nama-Font="Verdana" Ukuran-Font="0.8em" PathSeparator=" : "＞
＜PathSeparatorStyle Font-Bold="True" ForeColor="#5D7B9D" /＞
＜CurrentNodeStyle ForeColor="#333333" /＞
＜NodeStyle Font-Bold="True" ForeColor="#7C6F57" /＞
＜RootNodeStyle Font-Bold="Benar" ForeColor="#5D7B9D" /＞
＜/asp:JalurPeta Situs＞
＜br /＞
＜br /＞

＜/asp:contentplaceholder＞
＜/div＞
＜/bentuk＞
＜/badan＞
＜/html＞

Sekarang, buka Default.aspx dari folder root. Default.aspx akan terlihat seperti Gambar 4.

Gambar 4: Contoh menjalankan Default.aspx

Untuk mendesain halaman ini, tambahkan tabel dengan 4 baris dan 1 kolom. Seret kontrol Label ke baris atas dan atur properti Teksnya ke "Selamat datang di situs web kami!". Lalu, seret ketiga kontrol HyperLink ke baris tersisa dan atur properti Teks dan NavigateUrlnya, seperti yang ditunjukkan pada Tabel 3.

Properti

ID HyperLink	teks Properti	NavigateUrl
Produk	HyperLink1	~/products/default.aspx
Layanan	HyperLink2	~/Services/default.aspx
HyperLink3	Hubungi Kami	~/contact.aspxTabel

3: Mengatur properti HyperLink

Daftar berikut menunjukkan markup lengkap di Default.aspx:

＜%@ Halaman Bahasa="C#" MasterPageFile="~/MasterPage.master"
AutoEventWireup="benar" CodeFile="Default.aspx.cs"
Inherits="_Default" Title="Halaman Tanpa Judul" %＞
ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
＜tengah＞

＜tr＞
＜td lebar="60%"＞
Text="Selamat datang di situs Web kami!"＞＜/asp:Label＞＜/td＞
＜/tr＞
＜tr＞
＜td lebar="60%"＞
Ukuran Font="X-Besar" NavigateUrl="~/Products/Default.aspx">Produk
＜/asp:HyperLink＞＜/td＞
＜/tr＞
＜tr＞
＜td lebar="60%"＞
NavigateUrl="~/Services/Default.aspx">Layanan
＜/asp:HyperLink＞＜/td＞
＜/tr＞
＜tr＞
＜td lebar="60%"＞
Font-Size="X-Large" NavigateUrl="~/Contact.aspx">Hubungi Kami
＜/asp:HyperLink＞＜/td＞
＜/tr＞
＜/meja＞
＜/tengah＞
＜/asp:Isi＞

Sekarang, buka Default.aspx dari folder Products dan desain seperti yang ditunjukkan pada Gambar 5.

Gambar 5: Halaman default folder Produk

Tabel 4 mencantumkan semua hyperlink yang digunakan dalam formulir Web.

ID HyperLink	Properti teks Properti	NavigateUrl
HyperLink1	Produk Pertama	~/products/product1.aspx
HyperLink2	Produk Kedua	~/products/product2.aspx

Tabel 4: Informasi hyperlink di halaman Default di bawah folder Produk

Mengikuti prinsip yang sama, desain Default.aspx dari folder Services, dan hasilnya ditunjukkan pada Gambar 6.

Gambar 6. Halaman default folder Layanan

Tabel 5 mencantumkan informasi hyperlink yang digunakan dalam formulir Web.

ID HyperLink	Properti teks Properti	NavigateUrl
HyperLink1	Layanan Pertama	~/Services/service1.aspx
HyperLink2	Layanan Kedua	~/Services/service2.aspx

Tabel 5: Informasi hyperlink di halaman Default di bawah folder Produk

Terakhir, tambahkan tag ke setiap formulir Web lainnya dan atur properti Teksnya seperti yang ditunjukkan pada Tabel 6.

Label

Atribut teks	nama formulir Web
~/Contact.aspx	Hubungi Kami
~/Products/Product1.aspx	Detail Produk Pertama
~/Products/Product2.aspx	Detail Produk Kedua
~/Services/Service1.aspx	Detail Layanan Pertama
~/Layanan/Layanan2. aspx	Detail Layanan Kedua

Formulir 6: Mengatur properti Teks Label dari formulir web yang tersisa

Sekarang, jalankan Default.aspx dari folder root dan navigasikan ke halaman Product1.aspx. Gambar 7 menunjukkan contoh menjalankan formulir web.

Gambar 7: Contoh menjalankan Product1.aspx

Perhatikan bagaimana atribut judul dan URL dari file web.sitemap digunakan untuk menghasilkan "remah roti". Perhatikan juga bagaimana induk ditampilkan bersama dengan judul halaman saat ini. Coba navigasikan ke berbagai halaman dan amati kontrol SiteMapPath.

4. Gunakan kontrol sumber data Peta Situs

Penggunaan peta situs tidak terbatas pada kontrol SiteMapPath. Anda juga dapat melampirkan peta situs ke kontrol yang dapat dinavigasi (seperti TreeView). Dalam contoh berikut, Anda akan menggunakan file peta situs yang sama untuk mengimplementasikan pengikatan ke kontrol TreeView.

Tambahkan formulir Web baru SiteMapDataSourceDemo.aspx ke situs web. Lalu, seret kontrol sumber data SiteMap (SiteMapDataSource1) dan kontrol TreeView (TreeView1) ke formulir. Setel properti DataSourceID dari kontrol TreeView ini ke SiteMapDataSource1. Selain itu, atur properti ShowLines pada kontrol TreeView ke true. Berikut markup lengkap dari halaman SiteMapDataSourceDemo.aspx:

＜%@ Halaman Bahasa="C#" AutoEventWireup="benar"
CodeFile="SiteMapDataSourceDemo.aspx.cs"
Mewarisi="SiteMapDataSourceDemo" %＞
＜html xmlns="http://www.w3.org/1999/xhtml" ＞
＜head runat="server"＞
＜judul＞Halaman Tanpa Judul＜/judul＞
＜/kepala＞

＜form id="form1" runat="server"＞
ShowLines="Benar"＞
＜/asp:Tampilan Pohon＞
＜asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" /＞
＜/bentuk＞
＜/badan＞
＜/html＞

Sekarang, jalankan formulir Web untuk melihat bagaimana struktur navigasi yang sama secara otomatis dihasilkan ke dalam TreeView (lihat Gambar 8).

Gambar 8: Mengikat file peta situs ke kontrol TreeView

5. Gunakan kelas Peta Situs

Menampilkan data peta situs di kontrol SiteMapPath atau TreeView berfungsi dengan baik. Namun, terkadang Anda mungkin perlu merancang logika pembuatan kustom. Misalnya, Anda mungkin ingin mengembangkan kontrol navigasi khusus yang hanya menampilkan induknya secara vertikal. Dalam hal ini, Anda perlu mengakses file peta situs secara terprogram. Kelas SiteMap memungkinkan Anda mencapai hal ini.

Jalur Peta Situs ini memiliki dua properti penting: RootNode dan CurrentNode. Tipenya semuanya SiteMapNode, dan keduanya memungkinkan Anda merujuk ke node akar dan node peta situs saat ini. Tabel 7 mencantumkan beberapa properti penting dari kelas SiteMapNode.

Deskripsi	properti
ChildNodes	mewakili kumpulan semua node anak dari node saat ini
HasChildNodes	menunjukkan apakah node peta situs memiliki node anak (benar/salah)
Judul	mengembalikan nilai atribut title yang ditentukan dalam file peta situs
Url	kembali dalam file peta situs Nilai atribut url yang ditentukan
Description	mengembalikan nilai atribut deskripsi yang ditentukan dalam file peta situs
ParentNode	menunjukkan referensi node peta situs induk dari node saat ini

Tabel 7: Beberapa atribut penting dari kelas SiteMapNode

Contoh berikut menggunakan jalur Peta Situs untuk mengakses satu simpul dari file peta situs. Kemudian, tambahkan secara terprogram ke kontrol TreeView.

Tambahkan formulir web bernama SiteMapCustom.aspx. Lalu, seret kontrol TreeView ke dalamnya. Tambahkan kode daftar ke acara Page_Load formulir web ini:

dilindungi kekosongan Page_Load (pengirim objek, EventArgs e)
{
int count = Peta Situs.RootNode.ChildNodes.Count;
untuk (int i = 0; i < hitung; i++)
{
SiteMapNode smNode=Peta Situs.RootNode.ChildNodes[i];
TreeNode tvNode = new TreeNode(smNode.Judul, "", "", smNode.Url, "");
TreeView1.Nodes.Add(tvNode);
jika (smNode.HasChildNodes)
{
int childCount=smNode.ChildNodes.Count;
untuk (int j = 0; j < jumlah anak; j++)
{
SiteMapNode smChildNode = smNode.ChildNodes[j];
TreeNode tvChildNode = TreeNode baru(smChildNode.Judul,
"", "",
smChildNode.Url, "");
tvNode.ChildNodes.Tambahkan(tvChildNode);
}
}
}
}

Di sini, pertama-tama Anda mendapatkan jumlah total node anak di node akar. Kemudian, Anda mengulang kumpulan ChildNodes dari simpul akar. Pada setiap iterasi, Anda membuat instance baru dari kelas TreeNode dan menentukan judul dan urlnya di konstruktornya. Kemudian, tambahkan TreeNode ini ke koleksi Node TreeView. Kemudian, Anda memeriksa apakah SiteMapNode saat ini memiliki simpul anak. Jika ada, Anda melintasinya dan ulangi proses pembuatan TreeNode. Perhatikan bahwa kali ini Anda menambahkan TreeNodes baru ke koleksi ChildNodes objek TreeNode saat ini.

Perhatikan bahwa Anda menggunakan 2 dalam perulangan karena Anda tahu hanya ada dua tingkat penyarangan. Untuk membuat logika Anda lebih umum, Anda bisa menggunakan rekursi untuk mengisi TreeView.

Jalankan formulir web dan Anda akan melihat sesuatu yang mirip dengan Gambar 8 lagi.

6. Gunakan pemeliharaan keselamatan

Seringkali, situs web menerapkan model keamanan berbasis peran. Misalnya, Anda dapat memiliki peran berbeda dalam aplikasi Anda seperti administrator sistem, penguji produk, dan penguji layanan. Dalam situasi seperti ini, Anda sering kali perlu mengontrol tautan navigasi situs yang ditampilkan kepada pengguna. Misalnya, jika pengguna yang masuk saat ini memiliki peran penguji produk, Anda mungkin ingin hanya menampilkan tautan yang terkait dengan produk dan menyembunyikan tautan lainnya. Salah satu cara untuk menangani peran adalah dengan menggunakan pengkodean tangan, namun hal ini memerlukan penerapan semua logika otorisasi secara terprogram. Untungnya, file peta situs dan kontrol sumber data Peta Situs bersama-sama menyediakan fitur yang disebut pemangkasan keamanan untuk membantu Anda.

Untuk menguji perombakan keamanan, Anda perlu mengaktifkan fitur keanggotaan dan peran situs Anda. Buka file web.config dan tambahkan tag berikut:

＜mode autentikasi="Formulir" /＞
＜otorisasi＞
＜menolak pengguna="?"＞＜/menolak＞
＜/otorisasi＞

Di sini, Anda telah mengatur mode otentikasi ke Formulir. Anda juga dapat menetapkan aturan otorisasi sehingga pengguna anonim akan diblokir untuk mengakses situs. Kemudian, Anda perlu mengaktifkan fitur manajemen peran - dengan menambahkan tanda berikut ke file web.config:

＜roleManager diaktifkan="benar" /＞

Kemudian, pilih "WebSite>ASP.NET Configuration" dari menu VS.NET untuk membuka alat manajemen situs Web. Gunakan alat ini untuk menambahkan dua peran: ProductTesters dan ServiceTesters (lihat Gambar 9). Saat pengguna yang termasuk dalam peran ProductTesters masuk, Anda hanya ingin menampilkan tautan terkait produk di kontrol navigasi TreeView. Demikian pula, ketika pengguna yang termasuk dalam peran ServiceTesters melapor masuk, hanya tautan terkait layanan yang harus ditampilkan di TreeView.

Gambar 9: Menambahkan peran menggunakan alat manajemen situs Web

Gunakan alat manajemen situs Web untuk membuat dua pengguna, bernama pengguna1 dan pengguna2. Tambahkan pengguna1 ke peran ProductTesters dan pengguna2 ke peran ServiceTesters (lihat Gambar 10).

Gambar 10: Membuat pengguna menggunakan alat manajemen situs web

Catatan: Secara default, informasi pengguna dan peran disimpan dalam database ASPNETDB di bawah folder App_Data situs web Anda. Database ini secara otomatis dibuat oleh ASP.NET jika tidak ada.

Sekarang, tambahkan file peta situs baru SecurityTrimming.sitemap ke situs web dan masukkan tag berikut:

＜?xml versi="1.0" pengkodean="utf-8" ?＞
＜siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" ＞
＜siteMapNode url="default.aspx" title="Beranda" deskripsi="Situs Web Saya"＞
＜siteMapNode title="Produk" role="Penguji Produk"＞
＜siteMapNode url="~/products/product1.aspx" title="Produk Pertama" /＞
＜siteMapNode url="~/products/product2.aspx" title="Produk Kedua" /＞
＜/siteMapNode＞
＜siteMapNode title="Layanan" role="Penguji Layanan"＞
＜siteMapNode url="~/services/service1.aspx" title="Layanan Pertama" /＞
＜siteMapNode url="~/services/service2.aspx" title="Layanan Kedua" /＞
＜/siteMapNode＞
＜siteMapNode url="contact.aspx" title="Hubungi Kami" /＞
＜/siteMapNode＞
＜/Peta Situs＞

Sebagian besar markup di sini sama dengan di file web.sitemap. Namun, ada atribut penting yang ditambahkan ke Produk dan Layanan—siteMapNodes:roles. Atribut role menentukan peran yang dapat mengakses node ini dan node turunannya. Karena tautan yang terkait dengan produk hanya ditampilkan kepada pengguna yang termasuk dalam peran ProductTesters, Anda akan mengatur atribut peran dari Products siteMapNode ke ProductTesters. Mengikuti logika yang sama, Anda akan mengatur atribut peran Layanan siteMapNode ke ServiceTesters. SiteMapNodes tanpa atribut role yang ditentukan dapat diakses oleh semua pengguna. Perhatikan juga bahwa node Produk dan Layanan tidak lagi memiliki atribut URL yang ditentukan.

Sekarang, Anda perlu mengonfigurasi penyedia peta situs dan mengaktifkan renovasi keamanan sehingga kontrol sumber data Peta Situs dapat berperilaku sesuai dengan kebutuhan Anda. Tambahkan tag berikut ke file web.config:

＜penyedia＞
＜tambahkan nama="penyedia saya"
ketik = "Sistem.Web.XmlSiteMapProvider "
siteMapFile="SecurityTrimming.peta situs"
securityTrimmingEnabled="benar" />
＜/penyedia＞

Di sini, Anda menambahkan bagian dan menentukan penyedia yang menunjuk ke file SecurityTrimming.sitemap. Perhatikan bahwa atribut securityTrimmingEnabled di sini disetel ke true untuk mendukung pemangkasan keamanan. Setelah Anda mengonfigurasi bagian , kontrol sumber data SiteMap secara otomatis "mengambil" pengaturan ini dari bagian ini.

Tambahkan formulir web baru bernama Login.aspx ke situs web. Lalu, seret kontrol Login ke dalamnya dan atur properti DestinationPageUrl ke "~/SiteMapDataSourceDemo.aspx". Perhatikan bahwa Anda sebelumnya telah mengembangkan SiteMapDataSourceDemo.aspx.

Jalankan Login.aspx (lihat Gambar 11) dan masukkan kredensial untuk pengguna1.

Gambar 11: Halaman login

Setelah Anda berhasil login, Anda akan melihat TreeView seperti yang ditunjukkan pada Gambar 12. Karena user1 termasuk dalam peran ProductTesters, tautan ke layanan disembunyikan.

Gambar 12: Gunakan perbaikan keselamatan

7. Ringkasan

Peta situs adalah file XML—berisi semua detail struktur situs Web Anda. Anda dapat menggunakan file peta situs untuk menghasilkan struktur navigasi. Tiga cara umum untuk menggunakan file peta situs adalah: menggunakan kontrol SiteMapPath, menggunakan kontrol sumber data SiteMap, atau menggunakan kelas SiteMap. Anda juga dapat menggunakan fitur yang disebut pemangkasan keamanan untuk mendukung keamanan berbasis peran pada tautan navigasi yang dihasilkan. Bersama-sama, kontrol dan kelas ini membantu menciptakan struktur navigasi profesional untuk situs Web Anda.