Makale Özeti

Birçok web uygulamasında en çok dikkatimizi çeken özeliklerden bir tanesi de otomatik tamamlama özelliğine sahip arama kutuları. Size aradığınız ürünle ilgili öneriler sunan bu kutular sayesinde ulaşmak istediğiniz ürüne çok kısa bir sürede ve en doğru tahminle ulaşmayı mümkün kılmakta bu yöntem. Biz de bugünkü makalemizde, bir e-ticaret uygulamasında bu otomatik tamamlama özelliğine sahip arama kutusunu nasıl yapabiliriz sorusuna cevap aramaya çalışacağız.

Makale

         Birçok web uygulamasında en çok dikkatimizi çeken özeliklerden bir tanesi de otomatik tamamlama özelliğine sahip arama kutuları. Size aradığınız ürünle ilgili öneriler sunan bu kutular sayesinde ulaşmak istediğiniz ürüne çok kısa bir sürede ve en doğru tahminle ulaşmayı mümkün kılmakta bu yöntem. Biz de bugünkü makalemizde, bir e-ticaret uygulamasında bu otomatik tamamlama özelliğine sahip arama kutusunu nasıl yapabiliriz sorusuna cevap aramaya çalışacağız.

Uygulamamızın altyapısından bahsetmek gerekirse, üzerinde son makalelerde sıklıkla durduğumuz AJAX tekniğinden yararlanacağız. Böylece asenkron olarak ürünlerimizi çekip, arama kutumuzun otomatik tamamlama özelliğine atama yapacağız. Veriler de tam tahmin ettiğiniz üzere SQL Server’da yer alan veritabanımızda muhafaza edilecek. Ayrıca otomatik tamamlama özelliğini biraz daha genişleterek kullanıcıya, aradığı ürünün fiyatını önerilen aramalar sonucunda göstermiş olacağız. Böylece kullanıcımız dilediği fiyat aralığında ürünü henüz arama ekranındayken öğrenmiş olacak ve zamanının çok büyük bir kısmını asıl işe, ürün incelemeye ayırma fırsatını elde etmiş olacaktır.

Ortak bir fikirde buluşabildiysek, o hâlde sizi makalemizin devamına alalım.

         Öncelikle ihtiyacımız olan temel JQuery kütüphanelerini internetten edinmekle işe başlayabiliriz. http://jqueryui.com/download adresine girdiğimizde karşımıza çıkan sayfada yer alan Quick downloads: Stable (Themes) (1.8.21: for jQuery 1.3.2+) linkinden ihtiyacımız olan dosyayı indirelim (versiyon, yazının yazıldığı tarihte bu şekildedir. Yeni versiyon çıktığı takdirde kütüphane de değişecektir). Dilerseniz temanızı da değiştirerek uygulamanızı farklı görseller eşliğinde kullanıcınıza sunabilirsiniz. Sağ blokta bulunan tema seçim alanından bu işlemi gerçekleştirmeniz mümkün olacaktır.

         İndirdiğiniz sıkıştırılmış dosyayı arşivden çıkarttığınız takdirde aşağıdaki gibi bir klasör yapısıyla karşılaşıyor olmalısınız. Eğer eksik ya da farklı bir görüntüyle karşılaştıysanız doğru indirme linkine tıkladığınızdan emin olun, sonra başımız ağrımasın.

       Bu adıma kadar herhangi bir sorun yoksa eğer, Visual Studio’larımızdan bir adet “ASP.NET Empty Web Application” açmanın vakti gelmiş demektir. Uygulamamızı açtıktan sonra öncelikli olarak klasör yapılarımızı oluşturmakta fayda var, böylece daha düzenli çalışma olanağını kendimize sağlamış olacağız. Bir adet css ve js klasörünü projemiz içerisine ekleyelim. İndirmiş olduğumuz klasör içerisindeki css klasörünün tüm içeriğini kendi projemizdeki css klasörünün içerisine kopyalayalım. Aynı işlemi js klasörü için de gerçekleştirelim. Bu işlemden sonra da http://i51.tinypic.com/bjcx03.gif adresinde yer alan küçük büyüteç resmini indirip “arama.gif” adıyla css klasörümüz içerisine yerleştirelim.

         Sırada veritabanı tasarımımız var. “Urunler” adındaki veritabanımızı oluşturduktan hemen sonra “Urun” adlı tablomuzu da veritabanımız içerisine dâhil ediyoruz. Aşağıdaki fotoğraf tek tablolu veritabanımızın fotoğrafı. “UrunID” adlı kolonumuz “Primary Key” ve otomatik artış kolonudur.

 

Pek tabii ki aşağıdaki fotoğraf da tablomuz içerisinde yer alan kayıtlarımızın bir göstergesidir.

 

Artık projemize geri dönebiliriz. Parmaklarımızın tozuyla da hemen bir adet sınıf (class) oluşturalım. Adı da “urunler” olsun.

public class urunler
{
    public string value { get; set; }
    public decimal Fiyati { get; set; }
}

         Class içerisinde dikkatimizi çeken nokta eminim ki “value” adıyla yer alan özellik (property). Bu özellik tamamen, kullanacağımız JQuery fonksiyonu için geçerli bir özellik. Tablomuza gelen karşılığı ise “UrunAdi”.

Artık sayfamıza oluşturabiliriz. Bunun için projemize yeni bir “Web Form” ekliyoruz ve adını “default.aspx” koyuyoruz. Sayfa tasarımına geçmeden hemen önce sayfamızın kod tarafına göz atmakta fayda var.

[System.Web.Services.WebMethod]
public static List<urunler> TumUrunleriGetir()
{
    List<urunler> dondurulecek = new List<urunler>();
    using (SqlConnection con = new SqlConnection("Server=.;Database=Urunler;Integrated Security=true"))
    {
        using (SqlCommand com = new SqlCommand("Select UrunAdi, Fiyati from Urun", con))
        {
            if (con.State == System.Data.ConnectionState.Closed)
                con.Open();

            using (SqlDataReader dr = com.ExecuteReader())
            {
                if (dr.HasRows)
                {
                    while (dr.Read())
                    {
                        urunler gelen = new urunler();
                        gelen.value = dr.GetString(0);
                        gelen.Fiyati = dr.GetDecimal(1);
                        dondurulecek.Add(gelen);
                    }
                }
            }
        }
    }
    return dondurulecek;
}

         İlk iş olarak “TumUrunleriGetir()” adlı bir metodu sayfamızın sınıfı içerisine tanımlıyoruz. Bu metodu istemci tarafından çağıracağız. Sunucu taraflı bir metodu istemci tarafından çağırabilmek için bize gerekli olan bir öznitelik (attribute) vardır. Bunun da adı “WebMethod”dur, hemen metodumuz üzerinde yer alan öznitelik. Metodumuzun amacı veritabanımızda yer alan ürünleri bir “Generic List” halinde geri döndürmek. Kodları okuduğumuz zaman klasik ADO.NET – Connected Mimari’nin kullanılmış olduğunu göreceksiniz. Yine “value” özelliğine atamış olduğumuz değere dikkat! Ürünümüzün adını karşılamaktadır.

Gelelim .aspx uzantılı sayfamıza. Öncelikli olarak sayfamızın “body” bloğu içerisine aşağıdaki html elementlerimizi yerleştiriyoruz.

<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox runat="server" ID="txtAramaAlani" Width="350" />
    </div>
    </form>
</body>

Hemen ardından da sayfamızın “head” bloğu içerisine aşağıdaki stil bilgilerini yerleştiriyoruz.

<style type="text/css">

    .fiyat
    {
        margin-top: 0px;
        font-weight: bold;
        color: Yellow;
    }

    #txtAramaAlani
    {
        background-image: url('css/arama.gif');
        background-repeat: no-repeat;
        padding-left: 20px;
        font-family: Verdana;
        font-weight: bold;
        font-size: 9pt;
    }

</style>

Asıl fırtınanın koptuğu, ajax metodumuzun çalıştığı kısma geçmeden hemen önce son bir işlem daha yapalım ve aşağıdaki html elementlerini sayfamızın “head” bloğu içerisine yerleştirelim.

<link href="css/vader/jquery-ui-1.8.13.custom.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.13.custom.min.js" type="text/javascript"></script>

Mutlu sona çok az kaldı. Yolu daha da kısaltmak için aşağıdaki script kodlarını yukarıda yerleştirdiğimiz elementlerin hemen altına yerleştirelim.

<script type="text/javascript">

    $(document).ready(function () {

        $.ajax({
            type: "POST",
            url: "default.aspx/TumUrunleriGetir",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            cache: false,
            success: function (msg) {

                $('#txtAramaAlani').autocomplete({
                    minLength: 3,
                    source: msg.d,
                    focus: function (event, ui) {
                        $('#txtAramaAlani').val(ui.item.value);
                        return false;
                    }
                })
.data("autocomplete")._renderItem = function (ul, item) {
                return $("<li></li>")
		.data("item.autocomplete", item)
.append("<a>" + item.value + "<br><p class=\"fiyat\">" + item.Fiyati + " TL</p>" + "</a>")
.appendTo(ul);
                };
            }
        })
    });

</script>

         Yukarıdaki script kodumuzda ne yapmaya çalıştık kısaca anlatalım. Öncelikle “type” özelliği yardımıyla verilerin “POST” metoduyla asenkron olarak alınacağını belirttik. Hemen altındaki satırda bu verinin hangi sayfadan ve bu sayfadaki hangi metottan isteneceğini söyledik. “contentType” ve “dataType” özelliklerinde “json” kullanmamızın sebebi, veri alışverişinin bu yardımcı ara dille gerçekleşecek olması. Yeri gelmişken belirtelim, bu konuyla ilgili de çok yakında ufak bir makale yazmakta fayda görüyorum.

         “success” özelliğinde ise bir fonksiyon çalıştırdık. Bu fonksiyon “txtAramaAlani” ID’li HTML elementimize autocomplete özelliğini yükleyecek. “minLength” özelliğiyle arama kutusuna en az 3 karakter yazılmadan öneri yapılmamasını sisteme belirtmiş olduk. Böylece kullanıcı, sadece “a” yazdığında yüzlerce öneri çıkması yerine “say” yazdığında “bilgisayar” ürünlerinin çıkmasını ve arama işleminin daraltmasını sağladık. Tabii sizler bunu kendinize göre özelleştirebilirsiniz. “source” özelliğine ise fonksiyondan gelen msg adlı parametreyi verdik. Buradaki “d” json formatındaki veri akışından gelen verileri alabilmek için kullandığımız anahtar karakterimizdir.

         “focus” özelliğine de bir fonksiyon yazdık. Bu fonksiyon, önerilerden birine tıklandığı takdirde tıklanan ürünü textBox’ımıza yazmakla görevli fonksiyonumuz. Buradaki “ui.item” sabit bir değer. Metodumuzdan dönen listedeki her bir ürünü temsil etmekte. Biz de sonuna bir “.value” koyarak ürünümüzün adını textBox’a yazdıracağımızı söylüyoruz.

“_renderItem” fonksiyonu ise öneri sonuçlarına fiyat eklemek için kullandığımız, autocomplete’e özel bir fonksiyonumuz. Elemanlarımıza özel görsel değişikliklerimizi oluşturmaya yaramaktadır. Daha fazla bilgiyi JQuery’nin resmi kaynaklarından edinmeniz mümkün, detaya fazla girmeyeceğim.

Sonuç sizde de aşağıdaki gibiyse eğer, bir uygulamamızı daha başarıyla tamamlamanın sevincini yaşıyoruz demektir. Umarım uygulamalarınız için yararlı bir makale olmuştur.

         İyi çalışmalar :)