Mungkin diantara kita ada yang pernah atau bahkan sering melihat url sebuah situs dimana nama halamannya sesuai dengan title dari halaman tersebut. Hal ini sering kita temui misalnya pada blog. Url yang terlihat di address bar disesuaikan dengan title blog yang di posting tersebut. Bagaimana caranya melakukan hal tersebut?
Teknik di atas dinamakan Url Mapping atau Url Rewriting. Jadi kita bisa merubah url tujuan sesuai dengan kehendak kita. Kenapa hal tersebut sebaiknya dilakukan? Hal ini berhubungan dengan SEO (Search Engine Optimization). Ya, si search engine akan mudah untuk mengindeks halaman yang menggunakan teknik tersebut karena url nya lebih user friendly. Biasanya kalau sebuah web page dirujuk dari sebuah halaman dimana halaman tujuan membutuhkan informasi dari halaman yang merujuk maka kita lakukan dengan mengirimkan Query String. Query string ini digunakan untuk mengirimkan parameter ke sebuah web page. Contoh query string seperti ini misalnya : http://www.yulianmf.com/DetailsArticle.aspx?art=77 atau biasanya kita gunakan id sebagai query string. Url tersebut relatif lebih susah diindeks kalau dibandingkan dengan menggunakan teknik url mapping yang lebih "human readable".
Di blog engine atau CMS engine yang sudah dikenal seperti DotNet Nuke (DNN) dan CS (Community Server) teknik tersebut sudah diimplementasikan dan dapat dicustomize. Hmmm...saya berpikir bagaimana caranya saya lakukan hal tersebut di dalam asp.net web site yang saya buat from scratch? Sebenarnya fitur Url Mapping ini sudah ada semenjak asp.net 2.0 di release dan saya sudah tahu fitur tersebut semenjak asp.net 2.0 tersebut di release. Namun waktu itu yang saya tahu hanya sebatas setting url mapping secara hard coded di web.config. Lalu bagaimana caranya kalau saya ingin buat secara dinamis? saya ingin kapanpun url mapping tersebut dapat saya rubah tanpa harus buka file web.config secara manual setiap kali saya akan posting sesuatu ke blog. Repot jadinya kalau seperti itu :) dan tidak efektif...
Lalu bagaiman kalau jumlah artikel yang sudah di posting dan dimapping url nya itu jumlahnya sudah banyak? dan semuanya ditampung di web.config? wah ga kebayang banyaknya elemen yang ada di file tersebut bercampur aduk dengan setting web lainnya. Hmmm...bagaimana caranya saya split file web.config tersebut ke file .config lainnya yang buat sendiri? Mungkinkah?Mungkin sekali, dan caranya sangat-sangat simple, nanti akan saya tunjukkan :) Jadi dengan splitting elemen-elemen tertentu di web.config ke file.config lainnya kita dapat mengatur element-element tersebut dengan mudah dan tidak terlalu banyak bercampur dengan elemen lainnya.
Back to pertanyaan di atas sebelumnya, bagaimana caranya saya implementasikan teknik url mapping ini di asp.net web project yang kita buat sendiri? Kalau DNN sama CS saja bisa kenapa asp.net web site yang kita buat sendiri tidak bisa? :D Toh kedua engine tersebut sama-sama berbasiskan asp.net yang dibuat oleh framework yang sama :) ...Ok langsung saja saya jelaskan step-stepnya dibawah ini.
Skenario yang akan saya buat seperti ini : Saya buat sebuah halaman untuk posting artikel, ketika artikel tersebut disimpan ke database pada saat itu juga url baru yang akan mapping url aslinya saya simpan ke file .config lainnya yang saya buat sendiri untuk melakukan splitting elemen urlMappings yang defaultnya terdapat di file web.config. Setiap artikel yang diposting memiliki id nya tersendiri dan unik, nah id ini dijadikan sebagai query string nantinya di web page tujuan yang digunakan untuk melihat detail dari artikel tersebut. Design interfacenya dibuat sedinamis mungkin dalam artian kita bisa melakukan mapping url yang kita inginkan atau tidak, dan kalau kita lakukan mapping url apakah url baru tersebut mau disesuaikan dengan title atau dirubah lagi.
Uniknya dari teknik ini kita bisa buat url baru yang ekstensi file nya menggunakan ekstensi selain .aspx, jadi misalnya kalau kita ingin memberikan ekstensi .html atau .htm atau mungkin yang lainnya maka hal tersebut mudah sekali dilakukan :D atau mungkin kita tidak memberikan sama sekali ekstensi filenya juga bisa :) ...dari pada berpanjang lebar here it is :
1). Buat sebuah table dengan design seperti ini :
2). Buat file .dbml dari table tersebut
Kolom MappedUrl tersebut digunakan untuk menandakan apakah artikel tersebut menggunakan urlMapping atau tidak.
3). Buat design interface untuk insert artikel baru ke database dan melihat hasil artikel yang sudah disimpan. Untuk insert data saya menggunakan kontrol FormView dengan mode Insert dan Insert Template yang di customize. Sedangkan untuk melihat artikel-artikel yang ada di database saya menggunakan kontrol GridView dengan ItemTemplate yang discustomize yang hanya menempatkan control Hyperlink didalamnya. Kolom hyperlink ini akan di set secara run time properti NavigateUrl nya berdasarkan urlMapping yang telah dibuat. O ya jangan lupa anda lakukan DataBinding terhadap kontrol yang terdapat didalam FormView sesuai dengan kolom yang terdapat di table kecuali untuk kolom Id karena kolom tersebut merupakan Auto Number Column.
kontrol FormView dan GridView menggunakan LinqDataSource yang sama. Anda bisa gunakan SqlDataSource sebagai alternatif lainnya. LinqDataSource tersebut hanya saya set untuk Insert saja. Interface dibawah ini merupakan page ArticleDetails.aspx yang digunakan untuk melihat detail dari artikel yang dipilih oleh user dari GridView yang terdapat pada gambar diatas.
LinqDataSource untuk GridView artikel detail menggunakan klausa Where sebagai filtering record dari artikel yang akan ditampilkan. Filteringnya menggunakan Query String dengan parameter yang diberi nama id.
4). Buat file .config baru, beri nama misalnya UrlMappingSite.config. File ini merupakan file xml biasa. Jadi anda tinggal tambahkan item baru ke projectnya, cari xml file, lalu rename sesuai dengan nama file .config diatas. Tambahkan elemen ini sebagai default elemennya :
Anda akan melihat bahwa elemen urlMappings tersebut akan digaris bawahi warna biru dengan tooltip "The 'urlMappings' element is not declared"...ya memang elemen tersebut harusnya berada di bawah elemen <system.web>. tapi ga papa biarkan saja, toh ga error ketika dijalankan :) soalnya elemen tersebut di refer dari file web.config. Kenapa saya buat sebuah elemen add default dengan url atribut dan mappedUrl bernilai kosong? yeah... that's the tricky way :D i need the xsd file from the xml file generated automatically from this way...untuk apa? strongly typed Linq To XML !!! saya dapat dengan mudah melakukan query xml elemen via Linq To XML di VB 9.0, strongly typed XElement !!!. O ya...atribut url tersebut nantinya akan diisi dengan nama url baru, sedangkan mappedUrl atribut diisi dengan url aslinya yang akan dimapping.
5). Tambahkan elemen berikut ini di file web.config. Nah ini dia...bagaimana caranya kita splitting elemen tertentu yang terdapat didalam file web.config ke file .config lainnya (simple ternyata caranya :) ) ...
1: <system.web>
2: <urlMappings configSource="UrlMappingSite.config"/>
urlMappings elemen tersebut di split ke file yang diisi kedalam atribut configSource. Anda tidak dapat menambahkan atribut lainnya kedalam elemen yang akan di split ke dalam file .config lainnya.
6). Tambahkan kode berikut pada event Inserted untuk LinqDataSource control yang terdapat pada interface untuk input artikel.
1: Protected Sub LinqDataSource1_Inserted(ByVal sender As Object, _
2: ByVal e As System.Web.UI.WebControls.LinqDataSourceStatusEventArgs) _
3: Handles LinqDataSource1.Inserted
4:
5: If e.Exception Is Nothing Then
6: '//get NewUrl textBox in the FormView control
7: Dim txtNewUrl = _
8: DirectCast(FormView1.FindControl("txtNewUrl"), TextBox)
9:
10: If txtNewUrl.Enabled AndAlso txtNewUrl.Text <> String.Empty Then
11: '//load your own .config file
12: Dim myOwnConfig = XDocument.Load( _
13: Server.MapPath("UrlMappingSite.config"))
14:
15: '//get urlMappings element
16: Dim UrlMappings = myOwnConfig.<urlMappings>(0)
17:
18: '//cast the result to the appropriate entity class
19: Dim lastArticle = DirectCast(e.Result, Article)
20:
21: '//get the new autoGenerated id
22: Dim lastID = lastArticle.Id
23:
24: '//get radioButtonList for the extension
25: Dim rblExtension = _
26: DirectCast(FormView1.FindControl("rblExtension"), _
27: RadioButtonList)
28:
29: '//get the extension file
30: Dim strExtfile = String.Empty
31: Select Case rblExtension.SelectedIndex
32: Case 0 '//.aspx
33: strExtfile = ".aspx"
34: Case 1 '//.html extension
35: strExtfile = ".html"
36: Case 2 '//no extension
37: strExtfile = String.Empty
38: End Select
39:
40: '//construct new url and mappedUrl
41: Dim newUrl = String.Empty
42: If strExtfile <> String.Empty Then
43: newUrl = "~/" & txtNewUrl.Text.Replace(" "c, "_"c) _
44: & strExtfile
45: Else
46: newUrl = "~/" & txtNewUrl.Text.Replace(" "c, "_"c)
47: End If
48:
49: Dim mappedUrl = "ArticleDetails.aspx?id=" & lastID
50:
51: '//add new add element for url mapping
52: Dim newUrlMapped = _
53: <add url=<%= newUrl %> mappedUrl=<%= mappedUrl %>/>
54: UrlMappings.Add(newUrlMapped)
55:
56: '//finally save the .config file
57: myOwnConfig.Save(Server.MapPath("UrlMappingSite.config"))
58: End If
59: End If
60:
61: '//rebind gridview
62: grdArticles.DataBind()
63: End Sub
Ouw...I love Linq To XML and XML Literal in VB 9.0 !!! :D ...kenapa menggunakan event tersebut? saya membutuhkan id yang auto generated untuk saya simpan di atribut mappedUrl. File .config dibaca dengan menggunakan XDocument class seperti yang dapat dilihat pada line-12. Keterangan lainnya dapat anda baca pada comment code di atas. Intinya terletak pada code di line-52. Pada line tersebut kita tambahkan element add baru untuk mapping url yang akhirnya element add tersebut ditambahkan ke parent elementnya yaitu urlMappings element, setelah itu tinggal save kembali file .config nya. Hasil dari file .config yang telah disimpan seperti ini :
1: <?xml version="1.0" encoding="utf-8"?>
2: <urlMappings>
3: <add url="~/Using_SQL_Cache_Dependency.aspx"
4: mappedUrl="ArticleDetails.aspx?id=1" />
5: <add url="~/How_to_Use_Url_Mapping_in_ASP.NET_2.0.aspx"
6: mappedUrl="ArticleDetails.aspx?id=2" />
7: <add url="~/The_Power_Of_XML_Literal_In_VB_9.0.html"
8: mappedUrl="ArticleDetails.aspx?id=4" />
9: <add url="~/XPath_Or_Linq_To_XML?Confusing?"
10: mappedUrl="ArticleDetails.aspx?id=5" />
11: <add url="~/Where_is_the_appropriate_CR_2008_Redistributable_file?.html"
12: mappedUrl="ArticleDetails.aspx?id=6" />
13: </urlMappings>
Hey...anda dapat dengan sesuka hati untuk rewrite your url !! :)
7). Sekarang mari kita lihat code untuk menampilkan artikel yang telah tersimpan didatabase yang ditampilkan di ItemTemplate GridView. Event yang digunakan yaitu RowDataBound yang terjadi ketika GridView tersebut melakukan proses binding data kedalam control yang terdapat didalam GridView. Kode ini dibuat untuk mengatur properti NavigateUrl kontrol Hyperlink secara run time.
1: Protected Sub grdArticles_RowDataBound(ByVal sender As Object, _
2: ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) _
3: Handles grdArticles.RowDataBound
4:
5: If e.Row.RowType = DataControlRowType.DataRow Then
6: '//get the hyperlink control
7: Dim linkTitle = DirectCast( _
8: e.Row.FindControl("linkTitle"), HyperLink)
9:
10: '//get Article entity from the current row
11: Dim getArticle = DirectCast(e.Row.DataItem, Article)
12:
13: '//get the id article
14: Dim id = getArticle.Id
15:
16: '//check whether its url being mapped or not
17: Dim bolMapped = getArticle.MappedUrl
18:
19: If bolMapped Then
20: '//read the .config content
21: Dim myOwnConfig = XDocument.Load( _
22: Server.MapPath("UrlMappingSite.config"))
23:
24: '//query the xml content
25: '//match the idarticle with
26: '//the substring of mappedUrl attribute
27: Dim addElement = From element In myOwnConfig...<add> _
28: Let mappedUrl = element.@mappedUrl _
29: Where mappedUrl.Substring( _
30: mappedUrl.IndexOf("="c) + 1).Equals( _
31: id.ToString) _
32: Select element
33:
34: linkTitle.NavigateUrl = addElement(0).@url
35: Else
36: linkTitle.NavigateUrl = "ArticleDetails.aspx?id=" & id
37: End If
38: End If
39: End Sub
Hmmm...lagi-lagi ada Linq To XML nya...yeah i love it :D ...kode tersebut intinya yaitu untuk mengatur properti NavigateUrl Hyperlink control. Pertama kita ambil terlebih dahulu informasi id dari artikel yang sedang di fetch. Setelah id nya didapat kita baca nilai MappedUrl nya apakah true atau false, ini untuk menandakan apakah url artikel tersebut menggunakan fitur urlMapping atau tidak. Jika artikel tersebut menggunakan fitur urlMapping maka langkah selanjutnya yaitu membaca value atribut url yang terdapat didalam file .config sesuai dengan id value yang terdapat didalam atribut mappedUrl yang hanya diambil Substring nya saja...jika artikel tersebut url nya tidak di rewrite maka cukup menggunakan url seperti biasa seperti yang dapat anda lihat pada kode yang terdapat di line-36.
8). Langkah terakhir yaitu membuat web page dengan nama ArticleDetails.aspx (anda harus sesuaikan nama page ini sesuai dengan value dari mappedUrl atribute) untuk menampilkan detail dari artikel yang dipilih. Pada page tidak ada sama sekali imperative code...anda cukup tambahkan GridView atau Data Display control lainnya, kemudian gunakan LinqDataSource atau SqlDatasource yang membaca data dari tabel Artikel dimana record nya anda filter dengan klausa Where dengan filtering source nya diambil dari Query String yang anda beri nama id...That's it :D ...Mari kita lihat hasil web preview nya :
Dari gambar diatas dapat kita lihat anda dapat dengan bebas untuk rewrite your url sesuai dengan keinginan, begitu juga dengan ekstensinya whether .aspx, .html, or maybe no extension file :) ...GridView yang ada dibawahnya menampilkan artikel yang sudah disimpan dengan display hanya title nya saja. Hyperlink yang terdapat didalam control tersebut sudah di set properti NavigateUrl nya secara run time...and then the magic things happened here...you can see the text in the browser's status bar when you mouse over the title on the gridview...
when you try to click the link, the page will be move to ArticleDetails.aspx where the url has been mapped (look at the address bar) :
the original url shown in the image below :
using the .html extension file :
no extension file :
Enjoy it ! :)