Javascript ile sunucuya dosya yükleme sürecini kontrol etmek

Pazartesi, 21 Nis 2014 yorum yok

Sunucuya doysa yükleme(File Upload) işlemi, küçük boyutlu dosyalar için kısa zamanda sonuçlanan bir işlemdir. Birkaç KB veya MB boyutundaki dosyaların sunucuya  yüklenmesi çok fazla zaman alamayacağından kullanıcı sabrını fazla zorlamaz. Ancak büyük boyutlu dosyaların yüklenmesi sırasında, yükleme işleminin kullanıcıya süreç olarak ifade edilmesi gerekmektedir. Aksi halde sunucudan uzun süre cevap alamayan kullanıcılar, internet tarayıcısının kilitlendiğini zannederek işlemi sonlandırabilir. Bu durumda yüklemi işlemi yarıda kesilir. Böyle durumların yaşanmaması için dosya yükleme sürecini bir şekilde kontrol altına alarak kullanıcıya işlemin hangi aşamada olduğunu grafiksel veya sözel bir şekilde bildirmemiz gerekmektedir. Tam da bu noktada imdadımıza javascript asenkron programlama yetişmektedir.

Javascript kullananların sıkça başvurduğu asenkron işlemler, dosya yükleme işleminde de etkili bir şekilde kullanıldığında geliştiriciye büyük kolaylık sağlamaktadır.

Dosya yükleme işlemini basit bir şekilde ifade edecek olursak bir form yardımıyla bilgisayarımızdan seçilen dosyaların (resim, müzik, video, veri, v.s) sunucuya aktarılmasıdır diyebiliriz. Bu kısa özetin ardından işlemin nasıl yapıldığına dair bir örnek uygulama göstermek faydalı olacaktır.

File Upload

File Upload

Örnek uygulama ile resimden anlaşıldığı üzere dosya yükleme süreci takip edilmektedir.

Kod tarafında Javascript ile yapılan işlem sadece XMLHttpRequest nesnesine ait olayların(events) yakalanmasıdır. XMLHttpRequest  nesnesi süreci asenkron olarak işletmektedir. Belli durumları olaylar yardımıyla bize bildirmektedir. Örneğin Yükleme sürecini progress event ile, işlemin bittiğini load event ile yakalayabilmekteyiz.

  this.ajax = new XMLHttpRequest();
  this.ajax.upload.addEventListener("progress", onProgressChanged, false);
  this.ajax.addEventListener("load", onFileUploadSuccess, false);
  this.ajax.addEventListener("error", onFileUploadFailed, false);

Bu şekilde event’leri sıralayabiliriz. Arayüz (HTML) tarafında belirlenen progress bar, button gibi elementlerin güncellenerek sürecin kullanıcıya yansıtılması bize kalmıştır. Bu noktada çeşitli yöntemlerle çalışmak mümkündür. Doğrudan javascript tarafından DOM elementlere ulaşıp içerik güncellemesi yapabildiğimiz gibi, JQuery gibi kütüphaneler kullanabiliriz. Ben bu uygulamada MVVM(Model View ViewModel) prensibini de etkin şekilde kullanabilmek açısından Knockoutjs kütüphanesini kullandım.

Sunucu tarafında uygulama Asp.net MVC4 ile oluşturulmuştur. Sunucu tarafında dosyaları diske yazma işini şimdilik kodlamadan bıraktım. Zaten yazının konusu değil.

Örnek uygulamayı GitHub hesabıma yükledim.  MVC4-knockoutjs-fileupload adresinden uygulamaya ulaşabilir, isterseniz katkıda bulunabilirsiniz.

Categories: ASP.NET MVC, Javascript, JQuery, Knockoutjs Tags:

Visual Studio – Paste Special JSON

Pazartesi, 14 Nis 2014 3 yorum

Visual Studio ortamında JSON nesneleriyle haşır neşir olanlara kolaylık sağlayacak bir özelliği hatırlatmak istiyorum. Diyelim ki elinizde bir JSON nesnesi var ve bu JSON nesnesini  temsil eden C# tiplerini oluşturmak istiyorsunuz. Bu durumda oturup tek tek sınıfları yazmanıza gerek yok. Visual Studio bizim yerimize bu işlemi yapıyor. Nasıl mı?

JSON nesnemiz şu şekilde olsun:

{
   "Employee": {
     "Id": 1,
     "Name": "bayram",
     "salary": 100,
     "Department": {
           "Id": 12,
           "Name": "Development"
      }
   }
 }

Bu nesneyi kopyalayıp Visual Studio penceresinden Edit-> Paste Special -> Paste JSON as classes seçeneğini seçelim.

Paste Special JSON

Paste Special JSON

Sonuç:

Paste JSON as Clasess

Paste JSON as Clasess

Umarım faydası dokunur.

Categories: Visual Studio Tags: ,

ESRI Arcgis Javascript API with Knockout JS MVVM

Cuma, 04 Nis 2014 yorum yok

Yazıya başlamadan önce, yazının başlığında belirtilen kavramları daha önce duymamış olanlar için kısaca açıklamaya çalışayım. Arcgis Javascript API, ESRI firmasının harita tabanlı javascript uygulamaları geliştirmek için sunduğu bir araçtır. Knockout JS ise javascript tarafında MVVM(Model-View-View Model ) tasarım deseninin uygulanabilmesini sağlayan bir kütüphanedir.

Knockout Js Model

Knockout Js Model

Kısaca söylemek gerekirse Javascript kodu ile HTML kodunun arasında aktarım yapabilen, iki taraf arasında köprü vazifesi gören bir kütüphanedir.

Bu yazının konusu, Arcgis Javascript API ve Knockout JS kütüphanesinin bir arada kullanıldığı bir harita uygulamasını göstermektir. GitHub hesabımda oluşturduğum esri-knockout-mvvm repository içerisinde uygulama kodlarını bulabilirsiniz.

Neden Arcgis JS API ile birlikte Knockout JS kullanma ihtiyacı duydum?

Arcgis Javascript API ile uyglamalar geliştirirken Javascript kodu içerisinde HTML elemanlarının kullanılması noktasına takıldım. Örneğin bir butona tıkladığımızda, butonun olay yakalayıcı metodunda bir HTML tablosunu oluşturur ve sayfanın bir yerine yerleştirir. Burada farklı konuların birbirinden ayrılması (Separation of Concerns) prensibini Javascript programlama dilinde ihlal etmiş oluyoruz. Oysa programlama prensipleri genel kavramlar olup uygulama alanına göre değişmez. Bu sebepten dolayı Knockout JS kullanarak HTML ve Javascript kodunu birbiriden ayırdım.

Uygulama Araç Kutusu:

  • Arcgis Javascript API
  • Knockout JS
  • Bootstrap
  • JQuery
  • Dojo

Uygulama Özeti:

Uygulama, harita üzerindeki bir noktaya tıklandığında, tıklanan yerin yakınlarındaki sosyal aktiviteleri, olayları göstermektedir. Bu bilgileri seatgeek.com API üzerinden çekmektedir.

Uygulamanın çalışan halini buradan inceleyebilrsiniz.

Uygulama Görseli

Uygulama Görseli

Apache Benchmark ab başarım ölçme aracı

Pazar, 30 Mar 2014 yorum yok

Bu yazıda Aapche HTTP sunucusunun faydalı araçlarından biri olan ab (apache benchmarking tool) sunucu ölçümleme aracını incelemeye çalışacağız.

ab(ApacheBench) ölçümleme aracı, Linux veya Windows ortamında kurulu olan Apache sunucunuzun ek bir özelliğidir. Bu özellik sayesinde sunucunuzun stres altında nasıl cevaplar verdiğini inceleyebilirsiniz. Sunucunuza aynı anda istediğiniz kadar istek gönderebilirsiniz. Kaç kullanıcıdan sonra kriz durumunun oluşabileceğini test edebilirsiniz.

ab aracı, konsol ortamından komutlarla yönetilen bir araçtır. Şimdi örnek bir komutun nasıl kullanılacağını görmeye çalışalım. Örneğin HTTP sunucunuzda bulunan bir web sitenize aynı anda işleme sokulacak “c” tane işlemi “n” kez  gönderiyormuş gibi bir test etmeye çalışalım.

Örnek işlemi gerçekleştirdiğim sistem Linux Ubuntu server, Apache2 sürümüdür.

Örnek Komut: ab -n 50 -c 50 http://localhost/myweb/

  • n = 50 talep sayısı.
  • c = 50 tane aynı anda işleme sokulacak talep.

Kullanılacak parametreleri ve ne işe yaradıklarını görmek için buradan faydalanabilirsiniz.

ab (ApacheBenchmark)

ab (ApacheBenchmark) sonuçları

Sonuçları incelediğimizde, en uzun süren talebin 134ms olduğunu görüyoruz. Sonuç ekranında toplam transfer edilen veri miktarından süre bazlı istatistiklere kadar birçok bilgi bulunmaktadır.

ab aracı ne değildir?

ab bir hacking aracı değildir. Birilerinin sunucusunu komaya sokmak için kullanılan bir araç değildir. Dış dünyaya açılan sunucularda art arda gelen taleplerin başıboş talepler olduğunu anlayan güvenlik önlemleri mevcuttur. Normal olarak hiçbir insan aynı anda onlarca talep gönderemez. Ayrıca sunucuya gelen taleplerde bir anormallik olduğunu anlayan birimler IP adresinizden sizi tespit edebilirler.

ab aracı, kendi sisteminizi stres testlerinden geçirmek istediğinizde kullanabileceğiniz son derece kullanışlı ve faydalı bir araçtır. Değişik işlevler sunan parametreleriyle testlerimizi farklı varyasyonlarla gerçekleştirebilmemize olanak sağlar.

Categories: Linux Tags: ,

Windows 8.1 Update Sonrası VMware Network Sorunu

Cumartesi, 08 Mar 2014 1 yorum

Bu yazıda beni saatlerce uğraştıran bir VMware network sorundan bahsetmek istiyorum. Linux ile ilgili  çalışmalarımı yapmak üzere Windows 8 yüklü makinemde VMware üzerinde Ubuntu işletim sistemini kurmuştum. Bir gün, windows 8 için güncelleme uyarısını aldım ve 8.1 dahil olmak üzere bütün güncelleştirmeleri yükledim. Aradan bir kaç gün geçti ve Linux üzerinde bir deneme yapmam gerekti. Sanal makineye çalıştırdığımda bir de ne göreyim, ağ bağlantısı sağlanamıyor uyarısı! Sanal makine ayarlarından Network Adapter sekmesindeki ayarlar aynı duruyor fakat ağ bağlantısı bir türlü sağlanmıyordu.

Virtual Mechine Settings

Virtual Mechine Settings

Windows ağ bağlantı ayarlarında da bir anormallik olmadığını gördüm. Sanal makine ayarlarında denemedik varyasyon bırakmadım fakat nafile. Bir türlü sorunu gideremedim. En sonunda VMware ana penceresinden Edit > Virtual Network Editor penceresi gözüme çarptı.

Virtual Network Editor

Virtual Network Editor

Bu pencerede VMnet1 ve VMnet8 tanımlanmış durumdaydı. Ancak VMnet0 Bridge Type tanımlı değildi. Pencerenin en altında bulunan Restore Default düğmesine tıkladım ve devam ettim. İşlem tamamlandığında Virtual Network Editor penceresi aşağıdaki gibi oldu.

Virtual Network Editor

Virtual Network Editor

Yeniden sanal işletim sistemini çalıştırdığımda ağ bağlantı sorunundan kurtulduğumu gördüm. İnternet bağlantısını başarılı bir şekilde sağlamıştım.

Bu sorunu Windows 8.1 update ile ilişkilendirmemin sebebi, diğer iki bilgisayarda da windows 8.1 update sonrası aynı sorunu yaşamış olmamdı. Windows 8.1 kurduktan sonda VMware kurulumu yapanlar böyle bir sorun yaşamayacaktır. Tekrar hatırlatmalıyım ki bu sorun VMware kurulu makinede 8.1 güncellemesi yaptıktan sonra oluştu.

Umarım faydası dokunur.

Categories: Genel, Linux, Windows Tags: , ,

Kitap – Clean Code

Cumartesi, 25 Oca 2014 yorum yok
Clean Code

Clean Code

Kitaplar kategorisinin bu yazısında Clean Code isimli kitabı konu ediyorum. Robert Cecil Martin imzalı bu kitap, Prentice Hall yayınlarından çıkmıştır.

Yaklaşık 430 sayfalık bir kitaptır. Dili İngilizce olup gayet akıcı ve anlaşılırdır.

Clean Code, yazılım geliştiricilere temiz kod yazma konusunda iyi bir rehberdir. Yazılım geliştirme deneyimi 40 yılı aşkın olan bir yazar tarafından kaleme alınmıştır. Bu bağlamda, sırf kod örnekleri ile kalmayıp tecrübe aktarımı ile de süslenmiş bir eserdir.

Temiz kod yazmak, bilgisayarlar tarafından kodun düzgün çalıştırılmasını veya anlaşılmasını değil, kodumuzu okuyan diğer geliştiriciler tarafından kodun doğru şekilde anlaşılmasını amaçlamaktadır. Temiz kod, projelerin zamanla yönetilebilir olmaktan çıkmasını engellemektedir. Dolaylı olarak maliyetleri de düşürdüğü görülmektedir.

Örnek kodlar Java programlama dili ile yazılmıştır. Örnekleri anlamak için Java, C, C# gibi programlama dillerini bilenler de örnekleri anlama noktasında çekmeyeceğini düşünüyorum. Örnekler gayet anlaşılır şekilde açıklanmıştır. Nelerin yapılıp yapılmaması konusunda birçok örnek verilmiştir.

Tek başına program yazanların kendine özgü kod yazım biçimleri veya geliştirdikleri kişisel yöntemler olabilir. Bu kitabı önemsemeyebilirler. Ancak kurumsal bazda proje geliştirenlerin aynı standartta, okunabilir ve yönetilebilir kod yazmaları, projenin hayatını devam ettirebilmesi için şarttır. Kurumsal geliştiriciler için iyi bir kaynak olabileceği kanısındayım.

Kitabı amazon.com’dan satın aldım. Kitaba diğer yurt dışı alışveriş siteleri üzerinden ulaşmak da mümkündür. Şu anda bu tarz kitaplara ülkemizde satılmamaktadır. Temennimiz bu tarz kitapların ülkemizde de satılmaya başlamasıdır.

Categories: Kitap Tags: ,

Eclipse Ortamından TFS ile Çalışmak

Perşembe, 09 Oca 2014 yorum yok

Büyük ölçekli kurumlarda geliştirilen projelerde birden fazla programlama dili ile geliştirme yapılabilmektedir. Bu yüzden birbirinden farklı çalışma ortamları gerektiren bir durum ortaya çıkmaktadır. Farklı ortamlarda çalışılsa bile proje kaynakları aynı noktada toplamak gerekebilir. Örneğin Microsoft ürünleri ile geliştirme yapan bir şirketin, Java ile ilgili bir projeye de yer vermesi gerektiği durumlara çözüm sunulabilmelidir.

Microsoft tarafından geliştirilen uygulama yaşam döngüsü (ALM) çözümü olan TFS (Team Foundation Server) Microsoft ürünleri dışındaki platformlara da hizmet sunabilmektedir. Visual Studio üzerinden bağlanarak geliştirme yapabildiğimiz gibi Eclipse üzerinden de TFS projesi oluşturup yönetebiliriz.

TFS Cross-Platform

Eclipse üzerinden TFS bağlantısı sağlayabilmek için öncelikle Eclipse için TFS plug-in eklentisini yüklememiz gerekir. Eklentiyi yükledikten sonra TFS bağlantısını sağlamak için üst menüden Window->Show View-> Other seçeneği seçilerek açılan pencerede Team Foundation Server içerisindeki Team Explorer seçilir.

Show View

Show View

(TFS Plug-in yüklenmeden bu seçenek görünmeyecektir.) Bu menü seçildiğinde açılan pencere aşağıdaki gibi olacaktır.

Team Project

Team Project

TFS üzerindeki bir projeye bağlantı sağlandıktan sonra mevcut projede bir kaynak varsa bu kaynağı Eclipse üzerine çekip çalışmaya başlayabiliriz. Eğer önceden çalışılmış bir proje kaynağı yoksa kendimiz bir proje oluşturup bu projeyi TFS üzerinde paylaşabiliriz.

Eclipse üzerinde bir proje oluşturup bu projeyi TFS üzerinde paylaşarak ilerleyelim. File-> New -> Project seçeneği ile bir Java projesi oluşturalım. Oluşturduğumuz yeni projeyi TFS üzerinde paylaşmak için Package Explorer penceresinden projeye sağ tıklayıp Team->Share Project seçeneğini seçelim.

Eclipse Share Project

Eclipse Share Project

Proje paylaşım süreci tamamlandığında Eclipse üzerinde Team Explorer adında yeni bir pencere açılacaktır.

Eclipse Team Explorer

Eclipse Team Explorer

Java projesi üzerinde gerekli değişiklikler yapıldıktan sonra, örneğin yeni sınıf eklemesi gibi değişikliklerden sonra Team Explorer penceresindeki Check In  düğmesini tıklayarak proje dosyalarını TFS üzerine gönderebiliriz. Örneğin bir sınıf oluşturup Check In işlemini gerçekleştirdiğimde TFS üzerindeki değişikliği göstermek istiyorum.

Eclipse Code

Eclipse Java Code

Bu kodu Check In işleminden sonra TFS üzerinde şu şekilde görüntüleyebiliriz.

TFS Java Code

TFS Java Code

Artık istediğimiz noktadan kodlarımıza erişim sağlamamız mümkün. TFS üzerinde gerekli ayarlamaları yaparak projemize istediğimiz takım arkadaşımızı ekleyebiliriz.

Categories: Eclipse Tags: ,

Bir Metodun Single Responsibility Principle Bakımından İncelenmesi

Cumartesi, 04 Oca 2014 yorum yok

Bu yazımızda SOLID prensiplerinden ilki olan Single Respoinsibility Principle(Tek Sorumluluk İlkesi) üzerinde duracağız. Daha önceki yazılarımdan birinde bu prensibi giriş seviyesinde inceleme şansı bulmuştuk. Bu yazıda biraz daha farklı bir yöntemle prensibe yaklaşmak istedim. Bir örnek kod üzerinde yapılmış ihlalleri ortaya koyup, bu soruna SRP ile çözüm bularak ilerlemeye çalışacağız.

public class StringCalculator
{
    public int Add(string number)
    {
       if (number.Length==0)
       {
           return 0;
       }
       return int.Parse(number);
   }
}

Bu sınıfa ait Add() metoduna baktığımızda metodun, Single Responsibility Principle bakımından bazı problemleri olduğu görüyoruz. Bu metodun çok fazla bilgiye sahip olduğu ortada. Metodun sahip olduğu bilgiler:

  • Ne zaman “0″ döndüreceğini biliyor.
  • Döndürülecek default değerin “0″ olduğunu biliyor.
  • Sayıların dönüştürme(parse) detaylarını biliyor.
 public class StringCalculator
 {
    private const int DefaultValue = 0;

    public int Add(string number)
    {
        if (isNumberEmpty(number))
        {
           return DefaultValue;
        }
        return parseSingleNumber(number);
    }

    private static bool isNumberEmpty(string number)
    {
        return number.Length == 0;
    }

    private static int parseSingleNumber(string number)
    {
       return int.Parse(number);
    }
}

Add() metodunun bilmemesi gereken durumları metodun dışına çıkardık. DefaultValue değeri değişeceği zaman veya number parametresinin boş(empty) olduğu durum kontrolünün değişeceği zaman sadece ilgili private metoda bakmamız yeterli olacaktır.

Bu durumda Add() metodunun, sadece algoritmayı bildiğini görebiliriz. Uygulama detaylarına dair hiçbir şey ile ilgilenmiyor. Yani metodun tek sorumluluğu sadece algoritmayı takip etmektir.

Metodalarımıza baktığımızda onları kitap gibi okuyabilmeliyiz. Ne yaptığını ve niyetini anlayabilmeliyiz. Bu şekilde çalışırsak gereksiz yorum satırlarıyla kod açıklaması yapmak zorunda kalmayız.

Bir başka ipucunda görüşmek dileğiyle.

Microsoft’un Çöpe Giden Yazılım Teknolojileri

Çarşamba, 25 Ara 2013 2 yorum
  • Silverlight
  • WCF
  • WPF
  • Windows Forms
  • Web Forms

Microsoft teknolojilerinde son yıllarda önemli gelişmeler yaşanıyor. Takip etmekte zorlandığımızı söylemek yalan olmaz. Bu değişiklikler hiç boşuna değildi. Sanki bir arayış, bir çıkış noktası bulmak için atılan adımlar gibi geldi bana. Beni bu tür düşüncelere nedeni birazdan anlatmaya başlayacağım. Yukarıda listelediğim teknolojiler, Microsoft’un  bir dönem parlayan yıldızarıydı. Geçen zaman içinde evrilen yazılım dünyası, Microsoft tarafında bir takım sorunlara çözüm bulmak ve bazı teknoojilerle rekabeti yakalayabilmek adına bir takım gelişmelere neden oldu. Yazılım dünyasındaki her yeni gelişme karşımıza yeni bir ürün olarak çıktı. Gelişme ilerledikçe evrim, bir takım organların sonunu getirdi.

Silverlight

Adobe Flash alternatifi olarak üretilen zengin içerik ürünü Silverlight, mobil teknolojileri tarafında yetersiz kalınca ve yeri javascript tarafından doldurunca fişi çekilen teknolojilerden biri oldu. Ülkemizde ve düğer ülkelerde Silverlight düşkünü yazılımcılar için adeta bir hayal kırıklığı oldu. Çünkü bu gelişme birçok yatırımın çöpe gitmesi demektir.

WCF

Servis odaklı altyapı sistemleri için geliştirilen WCF teknolojisi, HTTP tabanlı REST servislarinin yaygınlaşmasıyla ivme kaybeden ve durma noktasına gelen hatta bitti denilebilecek teknolojilerden birisi. Bu teknolojinin yerini Microsoft tarafında artık WEB API teknolojisi alacak. WEB API teknolojisi  HTTP tabanlı çalışan platform bağımsızlığı sağlayan bir teknolojidir. WCF ise Microsoft teknolojileri ile çalışmaya yatkın bir teknolojidir. WCF servislerini diğer platformlar tarafından kullanmak biraz çetrefilli iştir. Çünkü uyumsuz iki farklı platform için önce bir ortak nokta hazırlamak gereklidir. WEB API servisleri ise talep-cevap işlemlerini tüm platformlar tarafından tanınan HTTP komutları aracılığıyla gerçekleştirebilmektedir. Bu durum WCF teknolojisini de bitme noktasına getirmiştir.

Windows Forms

Masaüstü programlama araçlarından Windows Forms teknolojisi ise WPF teknolojisinin gelmesiyle silikleşen teknolojiler arasında. WPF teknolojisini Windows Forms teknolojisine göre makul kılan özelliklerin başında View tarafı ile Model tarafının birbirinden ayrılmasını sağlamasıydı. Windows Froms, kod arayüzü ve grafik arayüzü ile çalışmaktadır. WPF ise kod arayüzü, grafik arayüzü ve grafik arayüzünü şekillendirebilen XAML arayüzü ile ortaya çıkmıştır. Bu durumda MVVM (Model-View-ViewModel) yazılım desenlerinin uygulanması kolaylaşmakta ve daha kolay yönetilebilir uygulamalar geliştirilebilmektedir.

WPF

Windows 8 ile birlikte bizi işletim sistemi düzeyinde şaşırtan Microsoft, XAML teknolojisini .Net framework tarafından işletim sistemi üzerine alarak bizi tekrar şaşırttı. Bu da demek oluyor ki artık masaüstünde artık WinRT teknolojisi yer alacak. Bu durumda WPF teknolojisi yıkılmak üzere demektir.

Web Forms

Microsoft’un ilk başlarda Web tarafında sihirli çubuğu gibi görünen Web Forms teknolojisi de MVC uygulama teknolojisine yenik düştü. Bu gayet normal ve makul bir gelişme gibi geldi bana. Web Forms bana göre çok gereksiz. İlk başlarda herşeyi yapan bir uygulama motoru oluşturmak için çıkıldığı belli. Sonuçta karmaşık, yönetmi zor kapalı kutular, içeriği belli olmayan hazır bileşenler yığını oluşmuş. Ben direk MVC tarafından başlayanlardanım. Web Forms ile ilk uygulama yapmaya kalktığımda böyle bir enkaz olamaz diyenlerdenim. Sonunda basitlik ve yönetilebilirlik kabul edilmiş ve MVC teknolojisine müthiş ağırlık verilmiş. Sunucu taraflı yönetilebilir, esnek bir yapı oluşturulmuş.

Microsoft gelişime, yeniliğe önem veren bir şirket. Ancak insanların yıllarca üzerinde çalışıp yatırım yaptığı teknolojilerin birden yok olması geliştiricileri ve şirket yöneticilerini sıkıntıya sokabiliyor. Bu durumda şu soru akıllara geliyor. Bu teknoloji de son bulursa ne yapacağız? Gelişim oldukça bir şeylerin sonu gelecek elbette.

Çöpe giden teknolojiler sadece Microsoft tarafıyla sınırlı değildir. Open source tarafında da çok fazla proje çöpe gitmiştir. Örneğin java tarafında da MVC yaygınlaşınca Serve taraflı bileşen teknolojiler pek tercih edilmez hale gelmiştir.

Bu durumda öngörülü olmak önem arz etmektedir. Spesifik teknolojiler yerine platform bağımsız teknolojilere eğilim göstermek her zaman faydalı olacaktır. Hangi programlama dili olursa olsun, yapılan iş genele hitap edecek şekilde tasarlanmalıdır. Bu sayede genişletilebilirlik(extensibility) ilkesi ile hareket etmiş oluruz ve hiç bir teknolojiye sıkı sıkıya bağımlı kalmayız.

Javascript ve HTML Dom element etkileşimleri

Pazar, 08 Ara 2013 yorum yok

Javacsript kodu ile HTML Dom elementler arasındaki etkileşimleri genelde elementin ID değeri üzerinden sağlarız. Javascript kodu ile document.getElementById(“elementId”) şeklinde ID aracılığıyla elementin seçilebilmesi mümkündür. Bu aşamadan sonra ise element üzerindeki bir değerin değiştirilmesi veya bir olayın(event) tetiklenmesi gibi işlemeri yapmak daha kolay hale gelmektedir.

HTML elementleri üzerinde tanımlı mevcut nitelikler(attributes), javascript tarafından elemente erişmemizi sağlarlar. Mevcut elementlerin kullanılabildiği gibi kendi tanımlayacağımız özel elementler üzerinden de bağlantı kurmamız mümkündür. Günümüzde kullanılan birçok Javascript kütüphanesi kendi tanımladığı nitelikler üzerinden işlemlerini yürütmektedir. Örneğin AngularJS ile çelışırken “ng-*” şeklinde veya JQuery ile çalışırken “data-*” şeklinde nitelikleri görürüz.

Şimdi bir senaryo geliştirerek biz de kendi tanımladığımız HTML nitelikler aracılığı ile bir uygulama geliştirmeye çalışalım. Bir buton elementi üzerine ekleyeceğimiz netelikleri(attribute) javascript tarafında kullanmaya çalışalım.

<button type="submit"
         data-get-async="true"
         data-url="/products.txt"
         data-attr-target="#getasyncresult">Getir
 </button>

Buton üzerinde data-get-async, data-url, data-attr-target şeklinde tanımladığımız nitelikleri anlamlandırmamız gerekmektedir.

data-get-async: işlemin asenkron gerçekleştirileceğini,
data-url: talebin gönderileceği adresi,
data-attr-target: talep sonrasında dönen cevabın hengi elementi etkileyeceğini belirtiyoruz.

Javascript dosyasını (deneme.js) ise şu şekilde düzenliyoruz:

<script type="text/javascript">

   $(function() {
       var buttonRequest = function () {
       var $button = $(this);
       var options = {
           url: $button.attr("data-url")
      };

      $.ajax(options).done(function(data) {
        console.log(data);
        var $target = $($button.attr("data-attr-target"));
        $target.html(data);
      });
  };

  $("button[data-get-async='true']").click(buttonRequest);
})
</script>

javascript tarafında gerçekleştirdiğimiz işlemi kısaca özetleyecek olursak, yaptığımız şey data-get-async niteliğini barındıran buton tıklandığında yapılacak işlemi belirlemektir.

$(“button[data-get-async='true']“).click(buttonRequest);

Bu örnekte “data-*” şeklinde nitelikler tanımlamamın sebebi yardımcı olarak JQuery kütüphanesini kullanıyor olmamdır.

JQuery ajax sorgusu için gerekli url gibi seçenekleri de yine buton üzerinde tanımlanan niteliklere tanımlıyoruz. Geriye kalan ise javascript işlemleridir.

Bu şekilde bir uygulama ile HTML tarafı ile Javascript kod tarafı birbirinden ayrılmış olmaktadır. Yani ön yüz(front end) geliştirme tarafında, Model ve View şeklinde bir ayrım yapılmış olmaktadır. Javascript MVC geliştirme araçlarının yaptığı işlem de bu şekildedir aslında. Direktifleri HTML nitelikeri(attributes) aracılığı ile alır ve komutları çalıştırırlar.

Bir sonraki yazıda görüşmek dileğiyle.

Categories: Javascript, JQuery Tags: ,