November 2008 - Posts
Pada artikel ini, saya akan mencoba untuk berbagi tips tentang membaca file resources (.resx) dengan menggunakan xPath. Kenapa bisa? yes, karena sesungguhnya file resources (.resx) adalah merupakan dokumen XML dan xPath adalah bahasa yang digunakan untuk mendapatkan informasi dari dokumen XML. Informasi tentang xPath dapat di baca lebih jauh di: http://www.w3schools.com/XPath/default.asp
Beruntung untuk fans nya .NET karena .NET sudah menyediakan kelas-kelas yang dapat di gunakan secara "out of the box" sehingga doing "XML thing" dan "xPath thing" menjadi lebih mudah. Kelas-kelas yang akan saya gunakan adalah:
1. kelas XPathDocument yang merupakan "representasi" dokumen XML. Dokumen XML yang di representasikan oleh kelas XPathDocument ini menggunakan model data XPath sehingga saya bisa menggunakan kelas dibawah ini untuk mencari informasi didalamnya. Untuk informasi lebih lanjut mengenai XPathDocument dapat di baca di: http://msdn.microsoft.com/en-us/library/system.xml.xpath.xpathdocument.aspx
2. kelas XPathNavigator merupakan sebuah kelas yang dapat digunakan untuk bernavigasi pada dokumen XML yang menggunakan model data XPath. Untuk informasi lebih lanjut mengenai XPathNavigator dapat dibaca di: http://msdn.microsoft.com/en-us/library/system.xml.xpath.xpathnavigator.aspx
Informasi lebih lengkap tentang cara memproses data XML dengan menggunakan model data XPath dapat dibaca di: http://msdn.microsoft.com/en-us/library/87274khy.aspx
action!!!
berikut adalah contoh file resources yang saya gunakan dalam POC:
Dan berikut adalah source code yang digunakan untuk membaca file resources diatas dengan menggunakan model data XPath
protected void Button3_Click(Object sender, EventArgs e)
{
string resourceFile = "~/App_LocalResources/ResourceTest.resx";
string resourceFilePhysical = Server.MapPath(resourceFile);System.Xml.XPath.XPathDocument xmlDoc = new System.Xml.XPath.XPathDocument(resourceFilePhysical);
System.Collections.
Hashtable hasil = new System.Collections.Hashtable();foreach (System.Xml.XPath.XPathNavigator nav in xmlDoc.CreateNavigator().Select("root/data"))
{
if (nav.NodeType != System.Xml.XPath.XPathNodeType.Comment)
{
hasil[nav.GetAttribute("name", string.Empty)] = nav.SelectSingleNode("value").Value;
}
}
}
dapat dilihat di source code diatas, bagaimana XPathDocument dan XPathNavigator beraksi. Informasi yang didapatkan kemudian saya simpan di hashtable.
Mengambil pelajaran dari seseorang yang sudah proven dan well known adalah hal yang menurut saya sangat penting. Dengan mencoba memahami rute yang telah di lalui oleh para pakar, akan menjadikan saya sebagai "new generation" menjadi sosok pribadi yang lebih berwawasan. Mempelajari, Memperbaiki dan Menyempurnakan. Hal yang sama terjadi pada teknologi yang sekarang ini sedang saya geluti yaitu web platform, web framework dan CMS. Dalam hal ini, saya mencoba untuk mengambil pelajaran dari salah satu CMS yang sudah sangat terkenal yang memiliki pengguna yang sangat banyak sekali. Yep, CMS yang saya maksud adalah Joomla yang beberapakali menjadi nominasi dan menjuarai best overall CMS. Saya merasa sangat penting untuk mencoba mencicipi Joomla dan mendapatkan "user experience". Tujuannya adalah demi memperbaiki, mengembangkan dan menyempurnakan "mainan" yang sedang saya oprek yaitu DotNetNuke.
Untuk dapat melakukan hal tersebut, saya harus bisa menginstall dan menjalankan Joomla di Windows XP saya. Beruntung saya bisa menemukan XAMPP (Apache) sehingga saya bisa dengan mudah menginstall dan mencoba-coba fitur2 Joomla.
Namun demikian, ada beberapa trik yang harus di lakukan agar XAMPP dan IIS dapat hidup berdampingan dengan damai dan harmonis. Sebelum saya menerapkan tips and trick tersebut, saya tidak dapat menjalankan XAMPP saya di Windows XP. Masalah utamanya adalah telah digunakannya port default oleh IIS. Tips and trick saya dapatkan dari Williamo's Blog. Adapun uraiannya adalah sebagai berikut: (saya menginstall XAMPP di folder C:\xampp\ )
1. Edit file httpd.conf yang dapat di temukan di C:\xampp\apache\conf:
- ganti "Listen 80" dengan "Listen 8080"
- ganti "ServerName localhost:80" dengan "ServerName localhost:8080"
2. Edit file httpd-ssl.conf yang dapat di temukan di C:\xampp\apache\conf\extra:
- ganti "Listen 443" dengan "Listen 4499"
- ganti "VirtualHost _default_:443" dengan "VirtualHost _default_:4499"
- ganti "ServerName localhost:443" dengan "ServerName localhost:4499"
setelah kedua file diatas di edit, maka XAMPP yang saya install di Windows XP kemudian dapat berjalan dengan baik:
dan berikut adalah Joomla in action:
Keamanan merupakan hal yang sangat penting dan tidak terbantahkan lagi. Pengiriman informasi penting dari client ke server dirasakan kurang aman jika menggunakan jalur HTTP. Munculah SSL yang berupaya menjadi solusi. Cerita selengkapnya mengenai SSL dapat di baca di: http://www.wisegeek.com/what-is-ssl.htm
Berangkat dari sana, maka saya akan mencoba untuk menerapkan SSL pada DotNetNuke dan coba tebak apa? yes, ternyata mudah sekali untuk menerapkan SSL di DotNetNuke :-) berikut adalah langkah-langkahnya:
1. Miliki certificate SSL dari vendor terpercaya
yep, sebelum dapat melangkah jauh, maka harus dimiliki terlebih dahulu SSL certificate untuk diinstallkan pada server production. Karena belum mampu beli, saya menggunakan SSL certificate trial yang dikeluarkan oleh vendor terkemuka yaitu verisign. Untuk memperoleh SSL certificate versi trial dapat mengunjungi http://www.verisign.com/ssl/buy-ssl-certificates/free-ssl-certificate-trial/index.html
setelah certificate SSL di dapatkan, maka installkan certificate tersebut pada web server. Untuk POC kali ini, saya menggunakan IIS 5.1 adapun langkah-langkah installasi certificate SSL pada IIS 5.1 bisa ditemukan di: http://www.petri.co.il/configure_ssl_on_your_website_with_iis.htm
2. Setup DotNetNuke agar SSL Enable
setelah web server ready maka tiba saatnya untuk setup di DotNetNuke, langkah-langkahnya:
- login sebagai Host, karena dengan user Host ini maka opsi SSL Settings dapat terlihat
- Masuk ke Admin > Site Settings > Advanced Settings > SSL Settings kemudian pilih SSL Enabled
- Masuk ke page yang hendak diamankan biasanya page-page untuk transaksi eCommerce. Di page tersebut masuk ke Page Settings > Advanced Settings > Other Settings dan kemudian pilih secure. And done!!! simple isn't it :-)
3. Setup Browser
karena POC kali ini pake Certificate SSL trial, maka si browser harus diinstal Test Root CA Certificate. Untuk certificate yang berbayar, hal ini tidak usah dilakukan di browser clients nanti repot ;-) . Silahkan visit http://www.verisign.com/server/trial/faq/index.html untuk informasi tentang how to install Test Root CA Certificate.
finish!!!
berikut adalah screenshot DNN SSL in action:
Seorang teman memberitahukan saya bahwa di codeplex ada sebuah projek Google API yang sangat bagus. Nama projek tersebut adalah Gapi.NET yang notabene merupakan .NET wrapper (C#) untuk Google API. See the full story at: http://www.codeplex.com/GAPIdotNET
Karena malam ini lagi ngoprek Custom Google Search Engine maka saya gunakan kemampuan si Gapi.NET untuk membuat google search. Berikut adalah skenario POC nya: Saya membuat google search dengan menggunakan Gapi.NET. Google search yang saya buat hanya akan menampilkan 80 item pertama. Hasil pencarian saya tampung dalam DataTable yang kemudian saya isikan pada GridView. Dengan GridView, kita bisa meng-cutomize hasil pencarian sehingga bisa lebih ok.
Dengan menggunakan Gapi.NET, yang harus dilakukan adalah membuat handler untuk button searchnya. berikut adalah potongan source code untuk handler button search:
protected void Zoeken_Click(object sender, EventArgs e)
{
DataTable dt = new DataTable("Table");dt.Columns.Add("Title");
dt.Columns.Add(
"Content");dt.Columns.Add("URL");for (int j = 0; j < 10; j++)
{
Gapi.Search.
SearchResults srs = Gapi.Search.Searcher.Search(Gapi.Search.SearchType.Web, TextBox1.Text, j);Gapi.Search.SearchResult[] arrHasil = srs.Items;for (Int32 i = 0; i < arrHasil.Length; i++)
{
dt.Rows.Add(arrHasil
.Title, arrHasil.Content, arrHasil.Url);
}
}
GridView1.DataSource = dt.DefaultView;
GridView1.DataBind();
}
Gapi.NET in action:
Google memiliki layanan yang disebut Google Custom Search Engine. Dengan layanan ini maka dimungkinkan untuk memiliki “search engine” yang sesuai dengan kebutuhan, plus memiliki ketangguhan yang dimiliki oleh google. Untuk informasi lebih lengkap silahkan baca di http://www.google.com/coop/cse/
Pertanyaan yang muncul adalah, bagaimana implementasi Google Custom Search di halaman ASP.NET ? just stick with this article J
Ada banyak cara untuk menampilkan google custom search engine di halaman web site, bahkan google sendiri membuat langkah2 yang sudah sangat jelas. Namun demikian langkah berikut adalah langkah yang saya ambil dikarenakan pendekatan yang dilakukan cocok dengan kebutuhan saya saat ini yaitu membuat pluggable module. Ok, berikut adalah yang saya lakukan:
1. Membuat Account di Google Custom Search Engine
Sebagai langkah awal yang harus dilakukan adalah medaftar di google custom search engine dan kemudian dapatkan code untuk menampilkan search results. Ada beberapa opsi yang ditawarkan untuk menampilkan hasil pencarian. Saya memilih opsi untuk menampilkan search result di website saya sendiri alih-alih menampilkannya di halaman google.
2. Membuat Search Box dan Result Box
Tidak akan sempurna sebuah halaman search tanpa adanya search box dan result box J jadi langkah berikutnya adalah mempersiapkan keduanya. Saya menjadikan search box dan result box dalam satu halaman yang sama. Karena akan di tampilkan dalam satu halaman, search box dan result box saya simpan dalam dua buah tag <div> yang berbeda. Div “cse-search-box” digunakan untuk menampilkan kotak search dan tombolnya. Div “cse-search-results” saya gunakan untuk menampilkan search results.
<%
@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<
head runat="server"><title>Untitled Page</title> </head>
<
body>
<form id="form1" runat="server">
<div>
<div id="cse-search-box">
<asp:TextBox ID="txtSearch" runat="server" />
<asp:Button runat="server" Text="Search" OnClientClick="SearchSite(); return false;"
UseSubmitBehavior="false" />
</div>
<!-- untuk menampilkan search results -->
<div id="cse-search-results">
</div>
</div></form> </body>
</
html>
Note: div “cse-search-results” akan diisi secara dynamic oleh google.
3. Javascripts Untuk Menampilkan Search Results
Langkah terakhir adalah membuat javascript untuk menampilkan search results. Javascript tersebut akan dipanggil ketika button search di klik. Javascript akan memanggil halaman yang digunakan untuk menampung search result. URL pemanggilan dilengkapi dengan query string yang informasinya diperoleh dari google custom search engine. Query string cx, cof, ie dan sa isinya dapat diperoleh dari source code google custom search engine. Sedangkan query string q, isinya diperoleh dari kotak search.
<
script type="text/javascript">
// Function retrieved from: http://cass- hacks.com/articles/code/js_url_encode_decode/ function URLEncode (clearString)
{
var output = '';var x = 0;
clearString = clearString.toString();
var regex = /(^[a-zA-Z0-9_.]*)/;while (x < clearString.length)
{
var match = regex.exec(clearString.substr(x));if (match != null && match.length > 1 && match[1] != '')
{
output += match[1];
x += match[1].length;
}
else
{
if (clearString[x] == ' ') output += '+';
else
{
var charCode = clearString.charCodeAt(x);
var hexVal = charCode.toString(16);output += '%' + ( hexVal.length < 2 ? '0' : '' ) + hexVal.toUpperCase();
}
x++;
}
}
return (output);
}
function SearchSite()
{
document.location.href='http://localhost:2360/cse/Default.aspx?cx=002881578700962372446%3Asuquqtzdcas&cof=FORID%3A9&ie=UTF-8&q=' + URLEncode(document.getElementById('<%=txtSearch.ClientID%>').value) + '&sa=Search';
}
var googleSearchIframeName = "cse-search-results";
var googleSearchFormName = "cse-search-box";var googleSearchFrameWidth = 600; var googleSearchDomain = "www.google.com";
var googleSearchPath = "/cse";</script>
<
script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>
Note: tanda titik dua pada value query string diganti dengan “%3A”.
That’s it. Dibawah adalah google custom search engine in action.
