Cenk SARI

Her ne kadar günümüzde framework 4.0 sürümüne ulaşmış olsakta geçmişten gelen (asp.net 2.0) ve gerçekten çok kullanışlı bir özellikten bahsediyorum. app_offline.htm

Bu özellikten haberi olmayan kişiler mutlaka çalışan bir siteyi durdurmak için birçok çözüm denemiş, zaman kaybetmiş ve birkaç satır olsada kod yazmak zorunda kalmıştır. Asp.net in bize sunduğu hayatı kolaylaştıran özelliklerden bir tanesi de uygulaması çok kolay olan sihirli dosya app_offline.htm. Bu isimde bir dosyayı çalışan sitenizin kök dizinine koyduğunuzda asp.net sizin için siteyi ve tüm açık veritabanı bağlantılarını kapatacak, açık olan herşeyi bitirecek, gelen isteklere cevap vermeyerek doğrudan bu dosyaya yönlendirecektir.

Bu sayede güncellemelerinizi kolayca yapacak, kısa veya uzun süre kapalı kalmanız gereken zamanlarda dosyalarınızı server'dan silmeden veya herhangi bir yönlendirme kullanmadan projenizi kapatabileceksiniz. Dosyayı (app_offline.htm) kök dizininizden sildiğinizde projeniz yeniden açılacak ve çalışmaya devam edecektir. Üstelik bu dosya için herhangi bir şablona bağlı değilsiniz. Tasarımınıza göre özelleştirebilir istediğiniz mesajı kullanıcılarınıza iletebilirsiniz. Siteniz üzerinde herhangi bir dosyanın direkt olarak adresini yazdığınızda bu dosyanın görüntülendiğini göreceksiniz.

Unutmadan bu dosyanın içeriğinin 512 byte tan büyük olması gerekiyor. Aksi taktirde browser kendi hata mesajını gösterecektir.

Tüm zamanların en iyi IDE si olduğunu düşündüğüm Visual Studio 2010 RTM sürümüyle resmi olarak duyuruldu. Visual Studio 2010 un 4 sürümü (Professional, Premium, Ultimate, Test Professional) mevcut. Henüz indirip kurmuş olmasamda en kısa zamanda bunu gerçekleştirip burada paylaşıyor olacağım. http://www.microsoft.com/turkiye/net/default.mspx ve http://www.microsoft.com/visualstudio/en-us adreslerinden bilgi edinebilirsiniz.

Bu yazımda çoğumuzun en az bir kere yapmayı denediği etiket bulutunun (Tag Cloud) nasıl yapıldığını anlatmaya çalışacağım. Bir çok sitede gördüğümüz ve web 2.0 ile hayatımıza girmiş etiket sistemi, güzel bir görüntü vermesinin yanı sıra kategorizasyon konusunda çok işe yarayan bir uygulama. Verilerin girilmesinden değil, database yapısı ve gösterilmesi üzerinde duracağım yazıma ilk olarak database yapısını ve çalışma mantığını anlatarak başlayayım.

Biliyoruz ki veritabanına girilen kayıtların (ürün,makale vb.) etiketler ile eşleştirilmesi için ait olduğu kaydın ID değerine ihtiyacı var. Bunun için oluşturacağımız tbl_etiket adındaki tablomuz 3 alandan oluşacak. EID, ETIKET ve ID isimli alanlarımız isimlerinden de anlaşılacağı gibi,

1) EID (autonumber) Etiketin ID numarası
2) ETIKET (string) Etiketin ta kendisi
3) ID (integer) Hangi kayıt ile ilişkili olduğu

şeklinde basit bir yapıya sahip ve aşağıdaki gibi görünüyor.



Tablomuzu oluşturduktan sonra etiketletimizi göstermek için css dosyamızı hazırlayalım.

.etiketler {
    width: 200px;
    list-style-type: none;
    margin: 0;
    padding: 0; }
.etiketler li {
    display: inline;
    margin-right: 8px; }
.etiket-1 {
    font-size: 11px; }
.etiket-2 {
    font-size: 14px; }
.etiket-3 {
    font-size: 18px; }
.etiket-4 {
    font-size: 22px; }
.etiket-5 {
    font-size: 24px; }

Css dosyamızı sayfamıza bağladıktan sonra etiket gösterimi için kodlarımızı yazmaya başlayabiliriz. İlk olarak sayfamıza bir adet literal kontrolü koyuyoruz. Etiketlerimizi bu kontrole yazdıracağız.

<asp:Literal ID="ltrEtiketler" runat="server"></asp:Literal>

Etiketleri getiren yordamımız ise şöyle

    ltrEtiketler.Text = String.Empty
    Dim sbEtiket As New StringBuilder()
    sbEtiket.AppendLine("<ul class=""etiketler"">")

    ' Etiketlerimizi datasete aktarıyoruz
    Dim Sql As String = "SELECT tbl_etiket.ETIKET, COUNT(x.EID) AS TOPLAM FROM tbl_etiket "
    Sql += "LEFT OUTER JOIN tbl_etiket AS x ON tbl_etiket.EID = x.EID "
    Sql += "GROUP BY tbl_etiket.ETIKET;"
    Dim Veritabani As New OleDbConnection("Data Source=" & Server.MapPath("App_Data/etiketBulutu.mdb") & ";Provider=Microsoft.Jet.OLEDB.4.0;")
    Dim Veriler As New OleDbDataAdapter(Sql, Veritabani)
    Dim Cenk As New DataSet
    Veriler.Fill(Cenk, "ETIKETLER")
    ' Etiketler tablosunda veri varsa bu işlemleri yap
    If Cenk.Tables("ETIKETLER").Rows.Count > 0 Then
        ' Etiketlerimizi dataview e aktarıyoruz
        Dim etiketVerileri As DataView = Cenk.Tables("ETIKETLER").DefaultView
        ' Etiketlerimizin boyutlarını tanımlıyoruz
        Dim fontBoyutu() As String = {"etiket-1", "etiket-2", "etiket-3", "etiket-4", "etiket-5"}
        ' Etiketlerimizin boyutlarını bulmaya başlıyoruz, minimum boyut
        Dim minBoyut As Decimal = Decimal.MaxValue, maxBoyut As Decimal = Decimal.MinValue
        ' Bu döngü ile en küçük ve en büyük boyutta olacak etiketlerimizi buluyoruz
        For Each row As DataRowView In etiketVerileri
            ' Her bir etiketten kaç tane var
            Dim etiketToplami As Object = row("TOPLAM")
            If Not Convert.IsDBNull(etiketToplami) Then
                Dim etiketToplamiDec As Decimal = Convert.ToDecimal(etiketToplami)
                If etiketToplamiDec < minBoyut Then minBoyut = etiketToplamiDec
                If etiketToplamiDec > maxBoyut Then maxBoyut = etiketToplamiDec
            End If
        Next
        ' Etiketlerimizi boyutlandırmaya devam ediyoruz
        Dim etiketBoyutlandir As Decimal = (maxBoyut - minBoyut + 1) / Convert.ToDecimal(fontBoyutu.Length)
        ' Etiketlerimizi formatlayıp yazdırmaya hazır hale getiriyoruz
        For Each row As DataRowView In etiketVerileri
            Dim etiketToplami As Object = row("TOPLAM")
            If Not Convert.IsDBNull(etiketToplami) Then
                Dim etiketToplamiDec As Decimal = Convert.ToDecimal(etiketToplami)
                Dim boyutDegeri As Integer = Math.Truncate((etiketToplamiDec - minBoyut) / etiketBoyutlandir)
                sbEtiket.AppendLine("<li class=""" & fontBoyutu(boyutDegeri) & """><a href=""Etiket/" & row("ETIKET").ToString & """>" & row("ETIKET").ToString & "</a></li>")
            End If
        Next

    End If
    sbEtiket.AppendLine("</ul>")
    ' Etiketlerimizi yazdırıyoruz
    ltrEtiketler.Text = sbEtiket.ToString

Projemiz bittiğinde şöyle görünüyor olacak. Siz stil dosyası yardımı ile daha güzel görünür hale getirebilir ve etiketlerinizi renklendirebilirsiniz.



Projemizin çalışan halini aşağıdaki linkten indirebilirsiniz. Kolay çalıştırabilmeniz için access database kullandım. Siz SQL server veya başka bir veritabanı kullanabilirsiniz.

Projenin çalışan halini indirmek için tıklayınız

İnternette bu konu ile ilgili birçok kaynak bulusa da Asp.Net ile ilgili çok az kaynağa rastlanıyor. Epayment.dll kullanacağımız bu uygulamada çok fazla teknik konuya girmeden sanal pos'un asp.net üzerinde nasıl uygulandığına değinmeye çalışacağım. Yaptığımız örnek epayment.dll kullandığı için birçok bankayla uyumlu çalışmaktadır. Garanti bankası, Akbank, Citibank, Finansbank, HSBC ve İş Bankası bu sistemi kullandığından hepsinde sorunsuz olarak çalışıyor. Bankanızın dökümanlarında epayment.dll i bulabilir ya da projenin çalışan halini download ederek içindeki dll i kullanabilirsiniz. İlk olarak epayment.dll ilimizi projemize referans olarak ekleyerek işe başlayalım.

Daha sonra gerekli bilgileri alacağımız form tasarımımızı yaparak uygulamamıza giriş yapalım.

    <form id="form1" runat="server">
    <label id="lblSonuc" runat="server"></label>
    <h2>Kredi kartı ödeme bilgileri</h2>
    <p>
        <label>Ödenecek miktar</label>
        <asp:TextBox ID="kkmiktar" MaxLength="4" Columns="5" runat="server"></asp:TextBox>
        <asp:DropDownList ID="kkcekim" runat="server">
            <asp:ListItem Text="Tek çekim" Value="1"></asp:ListItem>
            <asp:ListItem Text="6 taksit" Value="6"></asp:ListItem>
            <asp:ListItem Text="12 taksit" Value="12"></asp:ListItem>
        </asp:DropDownList>
    </p>
    <p>
        <label>Kart sahibi</label>
        <asp:TextBox ID="kksahip" Columns="50" runat="server"></asp:TextBox>
    </p>
    <p>
        <label>Kart no / CVC no</label>
        <asp:TextBox ID="kknum" MaxLength="16" Columns="20" runat="server"></asp:TextBox>
        /
        <asp:TextBox ID="kkcvc" MaxLength="3" Columns="4" runat="server"></asp:TextBox>
    </p>
    <p>
        <label>Son kullanma tarihi>/label>
        <asp:DropDownList ID="kkay" runat="server">
            <asp:ListItem Text="1" Value="1"></asp:ListItem>
            <asp:ListItem Text="2" Value="2"></asp:ListItem>
            <asp:ListItem Text="3" Value="3"></asp:ListItem>
            <asp:ListItem Text="4" Value="4"></asp:ListItem>
            <asp:ListItem Text="5" Value="5"></asp:ListItem>
            <asp:ListItem Text="6" Value="6"></asp:ListItem>
            <asp:ListItem Text="7" Value="7"></asp:ListItem>
            <asp:ListItem Text="8" Value="8"></asp:ListItem>
            <asp:ListItem Text="9" Value="9"></asp:ListItem>
            <asp:ListItem Text="10" Value="10"></asp:ListItem>
            <asp:ListItem Text="11" Value="11"></asp:ListItem>
            <asp:ListItem Text="12" Value="12"></asp:ListItem>
        </asp:DropDownList>
        /
        <asp:DropDownList ID="kkyil" runat="server">
            <asp:ListItem Text="2010" Value="2010"></asp:ListItem>
            <asp:ListItem Text="2011" Value="2011"></asp:ListItem>
            <asp:ListItem Text="2012" Value="2012"></asp:ListItem>
            <asp:ListItem Text="2013" Value="2013"></asp:ListItem>
            <asp:ListItem Text="2014" Value="2014"></asp:ListItem>
            <asp:ListItem Text="2015" Value="2015"></asp:ListItem>
            <asp:ListItem Text="2016" Value="2016"></asp:ListItem>
            <asp:ListItem Text="2017" Value="2017"></asp:ListItem>
        </asp:DropDownList>
    </p>
    <p>
        <label>&nbsp;</label>
        <asp:Button ID="kksubmit" Text="Ödeme yap" runat="server" />
    </p>
    </form>

Formumuzun görünümü şu şekilde oldu :


Bilgileri alacak kodlarımızı yazmaya başlayalım. Bu formdan gelecek bilgileri kontrol ettirmek vs. gibi işlemleri yapmadan basitçe anlatmaya çalışıyorum. Siz gelen bilgileri uygun formatta mutlaka kontrol edin.

    Protected Sub kksubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles kksubmit.Click
        Try
            Dim mycc5pay As New ePayment.cc5payment()
            mycc5pay.host = "ADRES" ' Verileri göndereceğimiz adres
            mycc5pay.name = "KULLANICIADI" ' Bankadan verilen kullanıcı adı
            mycc5pay.password = "PAROLA" ' Bankadan verilen parola
            mycc5pay.clientid = "MAGAZAID" ' Bankadan verilen mağaza id

            mycc5pay.orderresult = "0" ' 0 Gerçek işlem, 1 Test işlemi
            mycc5pay.cardnumber = kknum.Text ' Kredi kartı numarası
            mycc5pay.expmonth = kkay.Text ' Kredi kartı son kullanım ay
            mycc5pay.expyear = kkyil.Text ' Kredi kartı son kullanım yıl
            mycc5pay.cv2 = kkcvc.Text ' Kredi kartı CVC numarası
            mycc5pay.currency = 949 ' TL için 949
            mycc5pay.chargetype = "Auth"
            mycc5pay.ip = Request.ServerVariables("REMOTE_ADDR") ' IP adresi

            mycc5pay.subtotal = kkmiktar.Text ' Çekilecek tutar

            If kkcekim.SelectedItem.Value = 6 Then ' 6 taksit seçilmişse
                mycc5pay.taksit = "6"
            ElseIf kkcekim.SelectedItem.Value = 12 Then ' 12 taksit seçilmişse
                mycc5pay.taksit = "12"
            End If

            Dim bankaSonuc As String = mycc5pay.processorder() ' Fonksiyonumuzu çağırıyoruz
            Dim bankaHata As String = mycc5pay.errmsg ' Geri dönen hata mesajı
            Dim bankaOid As String = mycc5pay.oid ' Geri dönen order id
            Dim bankaAppr As String = mycc5pay.appr ' Geri dönen işlem sonucu
            Dim bankaProv As String = mycc5pay.code ' Geri dönen provizyon numarası

            ' Bankadan gelen sonuçları lblSonuc labelına yazdırıyoruz.
            If bankaSonuc = "1" Then
                If bankaAppr = "Approved" Then ' Ödeme işlemi tamam
                    lblSonuc.Text = "Ödeme işlemi başarıyla gerçekleşti"
                ElseIf bankaAppr = "Declined" Then ' Ödeme işlemi reddedildi
                    lblSonuc.Text = "Ödeme işlemi banka tarafından reddedildi! : " & bankaHata & ""
                Else
                    lblSonuc.Text = "Bir hata oluştu : " & bankaHata & ""
                End If
            Else
                lblSonuc.Text = "Bankayla irtibat kurulamadı!"
            End If
        Catch ex As Exception
            lblSonuc.Text = ex.Message
        End Try
    End Sub

Önemli notlar :
Kullanıcıdan alınan bilgileri mutlaka ama mutlaka kontrol edip gönderin.
Taksit parametresi bankayla anlaşma yaptıysanız çalışır aksi halde hata döndürür.
Test yaparken orderresult parametresini "1" olarak değiştirin.
Satış yapacağınız para birimine uygun kodu currency parametresine eşitleyin.

Form tasarımını basit tuttum ve ne yaptıysam yanlarına açıklamalarını yazdım. Formdaki bilgileri siz ister veritabanınızdan alın ister döngülerle çoğaltın. Başlangıç seviyesinde bilmeniz gereken şeyleri çok kafa karıştırmadan anlatmaya çalıştım. Sonraki yazılarımda gönderilen ekstra parametreleri ve diğer özellikleri anlatmaya çalışacağım.

Projenin çalışan halini buradan indirebilirsiniz

Bu yazıyı okumadan önce bir önceki yazımda (Kişiselleştirilebilir LightBox üretimi) bahsettiğim konuya göz atmanızı öneririm. Çünkü genel şablonumuzu ona göre oluşturacağız.

Şimdi bu pencerelerin içinde nasıl Ajax çağrısı yapabileceğimizi incelemeye başlayalım. Bir önceki örnekten yola çıkarsak penceremizin genislik,uzunluk,baslik ve icerik adlarında 4 parametre aldığını hatırlıyoruz. icerik isimli parametreyi, çağıracağımız sayfanın adı olarak değiştirip ufak bir modifikasyonla ajax çağrısı yapalım.

Bu sefer bize 1 adet yükleniyor imajı ve ajax ile çağırılacak bir sayfa gerekecek (Bu server side bir dosya olabilir). Bunun için aşağıdaki imajı ve kodları kullanabilirsiniz.

Yükleniyor imajımız :



Ajax ile çağıracağımız sayfa :

<html>
<head>
<title></title>
</head>
<body>
    bu sayfa ajax isteği sonucunda gönderilmiştir.
</body>
</html>

Eski pencereGoster() javascript fonksiyonumuzu şu şekilde değiştirelim :

var pencereAcikmi = false;
function pencereGoster(genislik,uzunluk,baslik,sayfa) {
    var apSec = $("#pencere");
    if(pencereAcikmi == false) {
        $("#karart").css("display","block");
	    var winH = $(window).height();
	    var winW = $(window).width();
        $("#pencerebasliksol").html(baslik);
        $("#pencereicerik").html("<div style='text-align: center;'><br /><br /><img src='ajaxLoading.gif' width='220' height='19'></div>");
	    $.ajax({
		    type: "GET",
		    url: sayfa,
		    cache: false,
		    success: function(msg){
		        $("#pencereicerik").html( msg );
	       }
	    });
        apSec.css("width",genislik);
        apSec.css("height",uzunluk);
	    apSec.css('top',  winH/2-apSec.height()/2);
	    apSec.css('left', winW/2-apSec.width()/2);
        pencereAcikmi = true;
    }
    else {
        pencereAcikmi = false;
    }
    apSec.css("display","block");
}

pencereGoster() fonksiyonumuz yine 4 parametre alıyor. Fakat bu sefer son parametremiz değişik. Bunlar genislik, uzunluk, baslik ve sayfa. Tek değişen sayfa parametremiz. Bu da çağıracağımız sayfayı temsil ediyor.

Herşey bittiğinde pencere açma fonksiyonumuzu artık şu şekilde çağırıyoruz.

<a href="javascript:pencereGoster(350,100,'Penceremizin başlığı','ajaxSayfa.html');">Pencere aç</a>

Bunları uygulamak için yazının başında söylediğim gibi şu sayfadaki genel şablona ihtiyacınız olacak.

Bittiğinde şöyle gözükecek.


Daha önce de söylediğim gibi siz kendi tasarımınıza göre özelleştirip daha güzel bir görüntüye dönüştürebilirsiniz fakat bu haliyle de güzel görünüyor.

Penceremizin çalışan halini buradan indirebilirsiniz.