Google maps api kullanarak bir noktayı işaretleme olayına marker diyoruz. Bir raporda harita üzerinde bayilerimizi bulundukları şehirlere göre işaretlemem gerekiyordu fakat şehir adeti arttıkça aranan şehrin bulunamaması gibi bir problem oluşuyor. Bunun sebebi de şehirlerin isimlerini bir servise gönderip geriye koordinatları almakla ilgili..

Google map api de bulunan getLatLng fonksiyonu http://maps.google.com/maps/geo?output=json&oe=utf-8&q=TRABZON servisinden şehrin bilgilerini istiyor ve json olarak bu bilgi geri dönüyor.

{
  "name": "trabzon",
  "Status": {
    "code": 200,
    "request": "geocode"
  },
  "Placemark": [ {
    "id": "p1",
    "address": "Trabzon, Türkiye",
    "AddressDetails": {
   "Accuracy" : 4,
   "Country" : {
      "AdministrativeArea" : {
         "AdministrativeAreaName" : "Trabzon",
         "Locality" : {
            "LocalityName" : "Trabzon"
         }
      },
      "CountryName" : "Türkiye",
      "CountryNameCode" : "TR"
   }
},
    "ExtendedData": {
      "LatLonBox": {
        "north": 41.0336756,
        "south": 40.9663072,
        "east": 39.7973630,
        "west": 39.6693036
      }
    },
    "Point": {
      "coordinates": [ 39.7333333, 41.0000000, 0 ]
    }
  } ]
}

Gelen bu bilgideki koordinatı alıp işaretlemek istediğimiz noktayı işaretliyoruz yani marker ekliyoruz. Bu istek sayısı arttığında şehirler bulunanamamaya başlıyor. Belkide bir ayarı vardır ama ben bu ayarı bulamadım ve laz işi bir çözümle olayı halettim :)

Nasıl mı ? setInterval() kullanarak. Bu javascript fonksiyonu bir kodu belirlediğimiz zaman kadar bekleyerek yeniden tekrarlatır, zamanı mili saniye cinsinden alır. Olayımız şu; Google Map servisini belirleyeceğimiz zaman aralıklarında kullanıp, aynı anda birden çok isteğin gitmesine engel olacağız. Ben 300mili saniye de şehirleri başarılı bir şekilde harita üzerine işaretletebildim, bu süreyi gözlemlerinize göre değiştirebilirsiniz.

            var sehirler = "TRABZON;RİZE;ORDU;GİRESUN;GÜMÜŞHANE;ERZURUM;SAMSUN;ARTVİN;ERZİNCAN;VAN;TOKAT;KARS;AĞRI;ÇORUM;BAYBURT;İSTANBUL;IĞDIR;ZONGULDAK;DÜZCE;AMASYA;ANKARA;ANTALYA;ARDAHAN;DİYARBAKIR;BATMAN;GAZİANTEP;GÜRCİSTAN;HAKKARİ;KIRŞEHİR;MUŞ;KAHRAMANMARAŞ;KARABÜK;SİİRT;SİNOP;SİVAS;UŞAK;İZMİR;MALATYA;NİĞDE,KONYA;ESKİŞEHİR;KÜTAHYA;AYDIN;MANİSA";
            var sehir = sehirler.split(';');
            var j = 0;
            var x = setInterval(function () {
                if (j == sehir.length) {
                    clearInterval(x); // tüm şehirleri işaretledikten sonra intervali temizliyoruz, yani durduruyoruz.
                }
                showAddress(sehir[j]);
                j++;
            }, 300);

Bu arada setInterval() fonksiyonu şu şekillerde kullanılıyor.

           setInterval("alert('test')",1000);
           setInterval(function(){
               // buraya kodlarımız geliyor.
           },1000);

Örneği buradan indirip, api keyi değiştirip çalıştırabilirsiniz.

Uzun bir aradan sonra kontrollerimizi tanımaya kaldığımız yerden devam ediyoruz. Ana hatlarıyla anlatmaya çalışacağım kontrol namı diğer GridView1 :) Çok fazla detaya girmeden en sık kullanılan özelliklerini ve jQuery ile birlikte neler yapabileceğimize vakit kaybetmeden bir göz atalım.

GridView, bir veri kaynağından gelen veriyi ekrana liste şeklinde basan kontrolümüz. Bir çok yerde kullandığımız bu kontrolde, sayfalama ve sıralama işlemlerini rahatlıkla yapabiliyoruz.

Kontrolümüzü <asp:GridView runat=”server” ID=”GridView1″></asp:GridView> şeklinde ekliyoruz.

Gridimizi şekillendirmek için ana hatlara sitil tanımlaması yapabiliyoruz. Nedir bu ana hatlar, header, row, footer ve pagerstyle. Bunları elle manuel stil tanımlaması yapabildiğimiz gibi style classı da atayabiliyoruz. Eğer elle stil yazarsak gridimizi oluşturan html çıktısında fazlasıyla kod tekrarı olur, bu ve yönetilebilirlikten dolayı class atamak en performanslı çözüm olacaktır.

    <asp:GridView runat="server" ID="GridView1">
        <HeaderStyle/>
        <RowStyle/>
        <AlternatingRowStyle/>
        <FooterStyle/>
        <PagerStyle/>
    </asp:GridView>

Şeklinde gridimizi oluşturuyoruz, sonrasında herbir kalıp için css mizi yazıyoruz.

    <style type="text/css">
        body{font-size:12px;font-family:Arial}
        /* GridView */
        .grid caption, tbody, tfoot, thead, tr, th, td,form {
	        margin: 0;
	        padding: 2px;
	        border: 0;
	        outline: 0;
	        color:#333;
	        font-size:12px;
        }
        .grid a:hover{color:#008aeb}
        .grid{border:none;width:100%;}
        .grid .header{background-color:#e5e5e5;height:30px;cursor:pointer;text-align:left}
        .grid .pager table{background-color:#333333;margin:5px auto}
        .grid .pager table td{font-size:15px;background-color:#3e3e3e}
        .grid .pager table td span{display:block;width:25px;height:20px;text-align:center;color:#868686;background-color:#333333}
        .grid .pager table td a{display:block;width:25px;height:20px;text-align:center;color:White}
        .grid .pager table td a:hover{background-color:#333333}
        .grid .row{}
        .grid .alternate{background-color:#f6f6f6;}
        .grid .alternate:hover,.grid .row:hover{background-color:#a8a8a8;cursor:pointer;}
        .grid .footer{background-color:#e3f1f8;font-weight:bold;}
    </style>

Son olarak gridimize class ları veriyoruz ve sitil olayını sonlandırıyoruz.

    <asp:GridView runat="server" ID="GridView1" CssClass="grid">
        <HeaderStyle CssClass="header" />
        <RowStyle CssClass="row" />
        <AlternatingRowStyle CssClass="alternate" />
        <FooterStyle CssClass="footer" />
        <PagerStyle CssClass="pager" />
    </asp:GridView>

Gördüğünüz gibi çok kolay bir şekilde gridimizi şekillendirdik. Hız kesmeden birde sayfalama işleminin nasıl yapıldığına bir bakalım. Bunun için ilk önce gridimizin sayfalama özelliğini AllowPaging=”true” diyerek aktif ediyoruz. Sonrasında olaylar (events) kısmından onpageindexchanging olayına çift tıklıyor ve ilgili olayı gerçekleştirecek methodu oluşturuyoruz. Kodumuz şu şekilde..

    protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
    {
        GridView1.PageIndex = e.NewPageIndex; // yeni sayfa indexini gridimizin PageIndex değerine setliyoruz.
        GridViewDoldur(); //gridimizi tekrar dolduruyoruz.
    }
    

Kodlarımızın tamamı şu şekilde.

        <asp:GridView runat="server" ID="GridView1" CssClass="grid" AllowPaging="true" onpageindexchanging="GridView1_PageIndexChanging">
            <HeaderStyle CssClass="header" />
            <RowStyle CssClass="row" />
            <AlternatingRowStyle CssClass="alternate" />
            <FooterStyle CssClass="footer" />
            <PagerStyle CssClass="pager" />
        </asp:GridView>
    

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

    protected void GridViewDoldur() {
        GridView1.DataSource = db.DTGetir("Select top 100 * from EKOTEKNOBAYILOG order by id desc");
        GridView1.DataBind();
    }

    protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
    {
        GridView1.PageIndex = e.NewPageIndex;
        GridViewDoldur();
    }
    

2 satırda sayfalama işlemimizide yapmış olduk. Bu şekilde ki bir sayfalama işlemi küçük projelerde rahatlıkla kullanılabilir fakat kayıt sayısı arttıkça performansda düşer. Neden düşer ? Çünkü ilk anda veri kaynağındaki tüm veriyi önce gridimize yüklüyoruz ve sayfalamayı grid içerisinde yapıyoruz. Bu durumun tersi olması durumunda performans artacaktır. Şimdide footer yani gridin en alt kısmının kullanıma bir bakalım. Neden footer kullanmamız lazım onuda hemen söyleyeyim. İlk sebep, hizalama problemlerinin çıkmaması ve haliyle çok daha derli toplu bir görüntü elde etmemiz. İkinci ve bence en önemlisi sebep ise gridview içerisindeki veriyi word, excel yada farklı bir formatta dışarı aktarmak istediğimizde hiç bir tasarımsal sıkıntının doğmaması. Footerı göstermek için ilk önce ShowFooter=”true” yapıyoruz. Artık footerimizi kullanabiliriz. Mantığını anlamak adına bir örnek yapalım.

    protected void GridViewDoldur() {
        GridView1.DataSource = db.DTGetir("Select top 10 * from EKOTEKNOBAYILOG order by id desc");
        GridView1.DataBind();

        decimal toplamSayi = 0; //burada basit bir toplama işlemi yapıyoruz. 6. sutundaki verileri alt alta topluyoruz.
        for (int i = 0; i < GridView1.Rows.Count; i++)
        {
            toplamSayi += Convert.ToDecimal(GridView1.Rows[i].Cells[6].Text);
        }

        GridView1.FooterRow.Cells[3].Text = "Toplam: " + GridView1.Rows.Count + " kayıt."; // kaçtane kayıt olduğunu footerımızın 3. sutununa yazıyoruz.
        GridView1.FooterRow.Cells[6].Text = toplamSayi.ToString(); // topladığımız değerleri footerdaki 6. sutuna yazıyoruz.
    }
    

Görüldüğü üzere footer kullanımıda oldukça basit. Herşey gayet derli toplu ve kontrolümüz altında. Şuana kadar ki örneklerimizi gridviewımızı otomatik doldurarak yaptık, şimdide veri kaynağından gelen veriyi nasıl özelleştirebiliriz buna bir bakalım. İlk önce sutunlarımızı kişiselleştirip istediğimiz sutunları alalım. Bu işlem için önce AutoGenerateColumns=”false” yapmamız gerekiyor, bunun nedenide bu işlemi biz manuel olarak elle yapacak olmamız. Örnekte kendi verikaynağımdaki isimleri kullanacağım

        <asp:GridView runat="server" ID="GridView1" CssClass="grid" ShowFooter="true" AutoGenerateColumns="false">
            <HeaderStyle CssClass="header" />
            <RowStyle CssClass="row" />
            <AlternatingRowStyle CssClass="alternate" />
            <FooterStyle CssClass="footer" />
            <PagerStyle CssClass="pager" />

            <Columns>
                <asp:BoundField DataField="id" HeaderText="Id" />
                <asp:BoundField DataField="tarih" HeaderText="Tarih" />
                <asp:BoundField DataField="sessionid" HeaderText="Oturum Kimliği" />
            </Columns>

        </asp:GridView>
    

Gördüğünüz üzere Columns adında bir bölüm oluşturup altına istediğimiz sutunları tanımladık. Şimdi verimizi biçimlendirelim (format). Ne demek bu ? Tarih, sayı vb.. verileri kendi ihtiyacımız doğrultusunda düzenleyebilmemize olanak sağlayan yapılardır. Örneğin; veritabanından gün/ay/yıl şeklinde gelen bir tarihi ay.gün.yıl şekline çevirmek gibi.. Burada şöyle bir püf noktası bulunuyor, verikaynağında ki veri tipinin tarih yada sayı olması gerekiyor. Yani veri kaynağında string şeklindeki bir tarihe yada sayıya direk biçimlendirme yapamıyoruz. Kendi oluşturduğumuz sutunlarda DataFormatString özelliğini kullanarak çok kolay bir şekilde istediğimiz biçimlendirmeyi rahatlıkla yapabiliyoruz. DataFormatString=” 0:n}”, DataFormatString=”{0:MM.dd.yyyy}” gibi.. Biçimlendirme işlemleri ve parametleri hakkında burayı ziyaret edebilirsiniz.

Herşey iyi güzel ama verikaynağında olmayan bir alanı gridimize nasıl ekleyeceğiz diye sorabilirsiniz. Bu noktada imdadımıza TemplateField koşuyor. Hemen örneğimize bakalım.

</span>
<pre>
        <asp:GridView runat="server" ID="GridView1" CssClass="grid" AutoGenerateColumns="false">
            <HeaderStyle CssClass="header" />
            <RowStyle CssClass="row" />
            <AlternatingRowStyle CssClass="alternate" />
            <FooterStyle CssClass="footer" />
            <PagerStyle CssClass="pager" />
            <Columns>
                <asp:BoundField DataField="id" HeaderText="Id" />
                <asp:BoundField DataField="tarih" HeaderText="Tarih" />
                <asp:BoundField DataField="sessionid" HeaderText="Oturum Kimliği" DataFormatString="{0:n}" />
                <asp:TemplateField HeaderText="Bu bir textbox">
                    <ItemTemplate>
                        <asp:TextBox runat="server" ID="TextBox1" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Bu bir literal">
                    <ItemTemplate>
                        <asp:Literal runat="server" ID="Literal1" Text='<%#Eval("id") %>' />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <a href="">Detay</a>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

Yukarıda da gördüğünüz gibi TemplateField içine ItemTemplate ile istediğimiz kontrolü yada herhangi birşeyi rahatlıkla girdik. Burada dikkat ederseniz Eval(“id”) şeklinde bir kullanım gerçekleştirdik. Eval veri kaynağımızdan manuel bir şekilde veriyi gridimizin içine çekmemize olanak sağlayan bir fonksiyon. Şöyle bir soru gelebilir buraya textbox ları ekledik fakat içerisindeki veriyi nasıl alabiliriz ? Bu sorunun cevabını bir sonraki yazımda yazacağım.

Gridview in çok fazla özelliği bulunuyor. Bu özelliklere verileri güncelleme ve silme gibi olaylarda dahil fakat ben bu özelliğin kullanılmasını çok sağlıklı bulmuyorum. Neden bulmuyorum, çünkü sayfa yeniden yükleniyor, haliyle griddeki verilerde yeniden yükleniyor, bu son son derece gereksiz ve verimsiz. Bu düzenleme işlemi için hem grid tarafında hemde kod tarafına bir sürü kod yazmamızın gerekmeside ayrı bir handikap. Düzenleme işlemi için jQuery ile veriyi olduğu yerde düzenleme (inline edit) yöntemini hem daha kolay kullanılabilir hemde maliyetinin daha az olduğunu düşünüyorum. Bu konuyu ilerleyen günlerde ele alacağım. Dipnot olarak burada dursun istedim.

Footer ile ilgili aklıma bir şey daha geldi. Gridimize footer ekledik fakat patronumuz yada iş verenimiz bize footerin aynısının headerında üstünde olmasını istedi. Böyle bir istek neden gelir ? Gridimizde çok fazla satır olduğunu düşünürsek, alt toplamlar yada diğer bilgilere erişmek için kullanıcı sayfayı dibe kadar çekmek zorunda kalacaktır. Bu işi yapmanın bir çok yolu bulunuyor. Tabiri caizse bir gumul kodun yazılacağı çok can sıkıcı bir durumdur bu. Bu noktada imdadımıza jQuery yetişiyor. Hemde ne yetişme, bir satırda olayı çözüyoruz. Footerımıza bir class atamıştık, ilk önce footerımızı seçiyoruz sonrasında klonluyoruz (clone) ve headerımızın önüne ekliyoruz. Bu sayede footerda değişiklikler olduğunda aynen headerada uygulanmış oluyor. Sürekli footera ayrı kod headerdakine ayrı kod yazmaktan kurtulmuş oluyoruz.

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".grid .header").before("<tr class='footer'>" + $(".grid .footer").clone().html() + "</tr>");
        })
    </script>
    

Gridview ile ilgili yazacaklarım şimdilik bu kadar, umarım anlaşılır bir yazı olmuştur. Yukarıda da belirttiğim gibi gridview ile ilgili yazacak çok fazla şey bulunuyor. Ben en ana hatlarıyla ve en sık kullanılan özelliklerini anlatmaya çalıştım. İlerleyen günlerde daha farklı özelliklerini ele almaya çalışacağım, herkese kolay gelsin.

Kaç zamandır aklımdaydı siteme sosyal imleme mekanızması eklemek. Öcelikle sosyal imleme nedemek kabaca bunu anlatmaya çalışayım. Beğendiğiniz bir siteyi veya bir yazıyı tekrar lazım olur diye tarayıcılarımızda bulunan Sık Kullanılanlar kısmına ekliyoruz ve ne hikmetse bilgisayarımıza format atarken genellikle yedeklemeyi unutuyoruz ve hepsi birden siliniyor. Yada kendi bilgisayarımız başında değilken sık kullanılanlara erişmemiz mümkün değildir.  Bağlantılarımızı saklayıp insanlarla paylaşabileceğimiz sitelere, sosyal imleme sitesi diyoruz. Özellikle Facebook gibi sosyal ağların popüler olduğu günümüzde bu ağlarda haber, resim ve video paylaşımlarıda epeyce popüler. Şimdi düşünelim kullanıcı sitemizdeki bir yazıyı çok beğendi ve Facebook’ da bunu arkadaşlarıyla paylaşmak istiyor. Eğer sitemizde paylaşım için herhangi bir bilgi yoksa %99 kullanıcı paylaşımdan vazgeçiyor, varsa bir tıkla işini hallediyor ve sitemizin ciddi anlamda ziyaretçi kazanmasını sağlıyor. Uzun lafın kısası Web 2.0 ile birlikte popüler olan bu paylaşım tarzı bize güzel şeyler sunuyor. Geçelim mekanızmamızı yapma işlemine;

Öncelikle JavaScript ile birlikte küçük bir yapı kuracağız, amacımız yeni bir imleme sitesi eklerken çıkarırken kolaylık olsun. Kodlarda anlatılacak çok fazla bir şey bulunmuyor, baktığınızda basit bir yapı olduğunu zaten anlayacaksınız.

Farklı bir imleme sitesi eklemek isterseniz, if bloklarına bir yenisini ekleyecek olduğunuz sitenin adresi ve değişken kısımları şeklinde ekleyebilirsiniz.  Buradan bitmiş halini indirebilir, demosu içinse bu yazının altına bakabilirsiniz ;) bu arada dosyaları indirdiğinizde diğer sosyal paylaşım sitelerinin logolarını kendimce bonus olarak sizlere sunuyorum :)

function sosyalAdres(gelen)
{
  var baslik = encodeURI('Eklencek yazının başlığı');
  var adres = escape('Eklenecek yazının içeriği');
  var pencereAyar = "height=700,width=800,titlebar=no,status=no,toolbar=no,menubar=no,location=no,resizable=no,scrollbars=1";
  var sAdres='';

  if(gelen==1)
  sAdres="http://www.facebook.com/sharer.php?title=" + baslik + "&u=" + adres;

  if(gelen==2)
  sAdres="http://www.google.com/bookmarks/mark?op=edit&bkmk=" + adres+ "&title=" + baslik;

  if(gelen==3)
  sAdres="http://digg.com/submit?url="+adres+"&title=" + baslik;

  if(gelen==4)
  sAdres="http://del.icio.us/post?url="+adres+"&title=" + baslik;

  if(gelen==5)
  sAdres="http://reddit.com/submit?url="+adres+"&title=" + baslik;

  window.open(sAdres.replace(/amp;/gi,''),null,pencereAyar);
}

Daha Sonrasında, güzel bir görüntü için style kodlarımızı ve işin görüntü olan kısmını ekliyoruz.

	.sosyal{background-color:#f5f5f5;border-bottom:1px solid #ededed;width:715px;padding:5px 0 0 5px;cursor:default;margin-bottom:5px}
	.sosyal span{font-family:Helvetica,sans-serif;color:#0063dd;font-size:14px;font-weight:bold}
	.sosyal:hover {border-bottom:1px solid #c0c0c0}
	.sosyal img{margin-left:20px;cursor:pointer;}
	.sosyal img:hover{margin-bottom:-5px}
[/html]
 
	<div class="sosyal">
		<span>Bu yazıyı paylaşın;</span>
		<img border="0" src="img/sosyalButton/google.png" alt="bu bağlantıyı Google' e eklemek için tıklayın" onclick="sosyalAdres(2)" />
		<img border="0" src="img/sosyalButton/facebook.png" alt="bu bağlantıyı Facebook' e eklemek için tıklayın" onclick="sosyalAdres(1)" />
		<img border="0" src="img/sosyalButton/reddit.png" alt="bu bağlantıyı Reddit' e eklemek için tıklayın" onclick="sosyalAdres(5)" />
		<img border="0" src="img/sosyalButton/digg.png" alt="bu bağlantıyı Digg' e eklemek için tıklayın" onclick="sosyalAdres(3)" />
		<img border="0" src="img/sosyalButton/delicious.png" alt="bu bağlantıyı Delicious' e eklemek için tıklayın" onclick="sosyalAdres(4)" />
	</div>


Volkan arkadaşıma teşşekür ediyor ve ekliyorum.

 Bu hizmeti Türkçe olarak EkleBunu sitesinden edinebilirsiniz.

Formu birden fazla yere post etmek.

	<script>
		function formuGonder(adres,pencere){
			document.formumuz.action = adres;
			document.formumuz.target = pencere;
			document.formumuz.submit();
		}
	</script>
	<form name="formumuz" method="post">
		<input type="text" name="adsoyad">
			<input type="button" value="x Adresine Gönder" onclick="formuGonder('x.html','_top')">
			<input type="button" value="y Adresine Gönder (yeni pencerede)" onclick="formuGonder('y.html','_blank')">
	</form>

Form butonlarını istediğiniz kadar çoğaltabilirsiniz.

Yahu şu site için günlerdir yazı eklemede kullanmak üzere yazı editörü arıyorum (texteditör) fakat bir türlü istediğim gibi sade ve kullanışlı bişiy bulamadım. Ben başka bişiy yapıştırıyorum o bi ton arka plana kod ekliyor en uyuz olduğum şey bu ya, sırf bu yüzden yıllar önce Dreamweaver kaldırıp yerine FrontPage kurmuştum ki aradan dünya kadar zaman geçti haleda frontpageyi silmedim.. En sonunda kafam bozuluyor düz yazı alanı kullanıp elle yazacam html sini css sini..

İkinci bir sıkıntımda şu kod renklendirme scriptleri, alayı beş para etmez scriptler. Bir çalışıyorlar beş çalışmıyorlar. Zamanım olsa yazcam bi tane paşalar gibi yastlanacam arkama. Haaa bu iş içinde güzel istediğim gibi bişiyler bulamazsam, ellerimle renklendirecem kodları.. Neyse öldüm uykusuzuluktan hadi iyi geceler cümleten…