Geliştirdiğiniz bir web sitesine arama özelliği mi eklemek istiyorsunuz? Eskiden olsa bunu şöyle yapardık:

1.  içeriğimiz dinamik ise, veritabanına sorgu yapmak ve dönen sonuç kümesini anlamlı bir formatta yazdırmak;
2.  içeriğimiz sabit ise, yani içerik sayfalarına gömülü olarak duruyorsa, dosya işlemleri kullanarak içerik sayfalarında arama yapmak ve sonuçları yazdırmak.

Bundan birkaç yıl öncesine kadar bu karmaşık işlemlerle boğuşmak zorundaydık. Asp.Net’in çıkması Perl/CGI, Php, Asp vs. gibi betik dilleri kullananların çilesini bir nebze olsun hafifletmişti ama bu yeterli değildi. Ortada Google, Yahoo, Altavista gibi işini iyi yapan arama motorları varken neden biz kendi sitelerimiz için karmaşık içerik arama kodları yazıyorduk, neden çözülmüş bir sorunla tekrar tekrar uğraşıyorduk. Web 2.0 ile birlikte daha fazla web içeriği üretme ve bu içerikleri çeşitli platformlarda kolayca paylaşabilme olanakları arttı. Web’deki bu gelişim süreci Web’in büyük oyuncularının ardı ardına içerik API’lerini yayınlamalarıyla devam etti. Herşey geliştiricilerin daha zengin içerikler geliştirmeleri içindi. Geliştiricilerin önemini çok önceden farkeden Microsoft’tan Steve Ballmer’ın sahne performansını izleyin.

Web içerik API’lerini konu aldığım makale dizimin ilk bölümünde Google Search API’den bahsedeceğim. Bu API’den önce Google aynı hizmeti webservis desteğiyle sağlıyordu fakat bu hizmette sonuç kümesi sınırı vardı, sınırsız kullanım ücrete tabiydi.

Artık web safyamızda kendi web arama sonuçlarımızı istediğimiz formatta kullanıcılarımıza gösterebilmemiz çok kolay.

Google Search API’nin sunduğu arama seçenekleri şunlar:

1. Web Search
2. Blog Search
3. Book Search
4. Image Search
5. Local Search
6. News Search
7. Patent Search
8. Video Search

Örneğimizde sadece web search seçeneği için kodlama yapacağız. Diğer seçeneklerin kullanımı da hemen hemen aynı çünkü.

Yapmamız gereken ilk iş GoogleSearchAPI.dll‘i edinmek. Sonrasında bu API’yi kullanabilmemiz için Google’dan bir APIKey temin etmemiz gerekiyor. APIKey’imizi de aldıktan sonra VS .NET geliştirme ortamımızda uygulamamızı geliştirmeye başlayalım.

Bir ASP.Net Web Application projesi açıyoruz. Arama sayfamız için Search.aspx adında yeni bir web form ekleyelim.

Search.aspx

<asp:TextBox ID="txtSearch" runat="server" Width="500px"></asp:TextBox>
<asp:Button ID="btnSearch" runat="server" OnClick="btnSearch_Click" Text="Ara" />
<br />
<br />
<asp:Label ID="lblSearchResult" runat="server"></asp:Label>
<br />

<asp:GridView ID="gvResult" runat="server" AllowPaging="True" AutoGenerateColumns="False"
    OnPageIndexChanging="gvResult_PageIndexChanging">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <a href='<%# DataBinder.Eval(Container, "DataItem.Url")%>' style="color: Blue;">
                    <%# DataBinder.Eval(Container, "DataItem.Title")%></a>
                <br />
                <%# DataBinder.Eval(Container, "DataItem.Content")%>
                <br />
                <a href='<%# DataBinder.Eval(Container, "DataItem.Url")%>' style="color: Green;">
                    <%# DataBinder.Eval(Container, "DataItem.Url")%></a>

                    <a href='<%# DataBinder.Eval(Container, "DataItem.VisibleUrl")%>'>
                        <img src="/images/home.png" border="0" alt="" /></a>
                <br />
                <br />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Bu API’nin güzelliklerinden biri de sonuçların gösterim şeklini istediğimiz gibi ayarlayabilmemiz. Ben örnekte basit bir gridview kullandım.

Search.aspx.cs

        private DataTable DTResult;

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                DTResultInit();
            }
        }

        private void DTResultInit()
        {
            DTResult = new DataTable();
            DTResult.Columns.Clear();
            DTResult.Columns.Add(new DataColumn("Title", typeof(System.String)));
            DTResult.Columns.Add(new DataColumn("Content", typeof(System.String)));
            DTResult.Columns.Add(new DataColumn("Url", typeof(System.String)));
            DTResult.Columns.Add(new DataColumn("CacheUrl", typeof(System.String)));
            DTResult.Columns.Add(new DataColumn("VisibleUrl", typeof(System.String)));
        }

        private void SearchOnWeb()
        {
            DTResultInit();
            GwebSearchClient GSClient = new GwebSearchClient("http://www.clubcrema.com");
            GSClient.ApiKey = GlobalKeys.APIKey;
            TimeSpan ts = GSClient.OpenTimeout;
            IList<IWebResult> results = GSClient.Search(txtSearch.Text, 2000000000);
            ts.Subtract(GSClient.ReceiveTimeout);
            StringBuilder sb = new StringBuilder();
            DTResult.Rows.Clear();
            foreach (IWebResult result in results)
            {
                DataRow row = DTResult.NewRow();
                row["Title"] = Helpers.HighlightKeywords(txtSearch.Text, result.Title);
                row["Content"] = Helpers.HighlightKeywords(txtSearch.Text, result.Content);
                row["Url"] = result.Url;
                row["CacheUrl"] = result.CacheUrl;
                row["VisibleUrl"] = Helpers.HttpComplete(result.VisibleUrl);
                DTResult.Rows.Add(row);
            }
            gvResult.DataSource = DTResult;
            gvResult.DataBind();
        }

        protected void btnSearch_Click(object sender, EventArgs e)
        {
            SearchOnWeb();
        }

        protected void gvResult_PageIndexChanging(object sender, GridViewPageEventArgs e)
        {
            gvResult.PageIndex = e.NewPageIndex;
            SearchOnWeb();
        }

Google Search AJAX

Yukarıdaki örnekte Google Search API’nin ServerSide kullanımını gördük. Bunun yanında kod tarafına (codebehind) ihtiyaç duymayan bir javascript tabanlı (ajax) kullanımı da mevcut. Fakat iki kullanım arasında bazı farklar var:

ServerSide kullanımda, sonuçların gösterim şeklini belirleyebiliyoruz yani sonuç gösterim tasarımı tamamen bize ait. Hatta gelen sonuç kümesini “filtreleme” olanağına da sahibiz. Fakat ajax kullanımında Google bize ne gönderirse onu ekrana basıyoruz ve Google’ın istediği formatta (İlla formatı değiştirmek isterseniz sonuçları JSON tabanlı olarak da alabilirsiniz ancak bu pek pratik bir uygulama değil). Peki öyleyse neden javascript tabanlı kullanımına gerek olsun? Cevabı: hız. Sayfa postback olmadan sonuçları görüntüleyebiliyorsunuz ve daha hızlı bir şekilde.

Örnek kullanım :

Arama yapacağımız sayfanın head bloğuna aşağıdaki kodları ekleyelim.

    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script language="Javascript" type="text/javascript">
        //<![CDATA[
        google.load('search', '1');
        function OnLoad() {
            // Arama nesnesi tanımlanıyor..
            var searchControl = new google.search.SearchControl();
            // Sonuç kümesi boyutu
            searchControl.setResultSetSize(google.search.Search.LARGE_RESULTSET);
            searchControl.addSearcher(new google.search.WebSearch());
            searchControl.addSearcher(new google.search.ImageSearch());
            searchControl.addSearcher(new google.search.BlogSearch());
            searchControl.addSearcher(new google.search.LocalSearch());
            searchControl.addSearcher(new google.search.VideoSearch());
            searchControl.addSearcher(new google.search.NewsSearch());
            searchControl.addSearcher(new google.search.BookSearch());
            searchControl.addSearcher(new google.search.PatentSearch());
            // Sonuç gösterim seçenekleri tanımlanıyor..
            var drawOptions = new google.search.DrawOptions();
            drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);
            // Sonuçların gösterileceği eleman ayarlanıyor..
            searchControl.draw(document.getElementById("searchcontrol"), drawOptions);
            searchControl.execute("");
        }
        google.setOnLoadCallback(OnLoad);
        //]]>
    </script>

Body bloğuna ise sonuçların gösterileceği bir div koymamız yeterli:

<div id="searchcontrol">Yükleniyor...</div>

Örneklerimizi çok basit tutuyor ve işin yaratıcılık kısmını size bırakıyorum. API’nin kullanım detayları http://code.google.com ‘dan bakabilirsiniz. Burada Google ajax search kullanım örneği var.

Referans :

http://code.google.com/intl/tr/apis/ajaxsearch/documentation/

Makalenin kaynak kodlarını buradan indirebilirsiniz.

Yazar Hakkında:  Kod adı: kemal.sln