.Net İle Mvc Yapısı

 Herkese merhabalar uzun bir aradan sonra ertelediğim yayınlarıma bugün .Net frameworkünde basit bir MVC modelini tanıtarak devam ediyorum. Mvc ismi Model,View ve Controller isminin baş harflerinden oluşmaktadır. Mvc tanımlanmak gerekirse bir web uygulaması geliştirirken kullanıcıya yüklü miktarda verinin sunulduğu karmaşık uygulamalarda veri ve gösterimin soyutlanması esasına dayanır. Böylece veriler ve kullanıcı arayüzü birbirini etkilemeden controller adı verilen ara bileşenle veri gösterimi ve kullanıcı etkileşiminden veri erişimi ve iş mantığını çıkarma suretiyle çözümlenmektedir. Kısacası işlemlerin birbirinden ayrı tutulduğu bir mimari desendir. Model dediğimiz kısım veritabanımıza bağlandığımız classları temsil eder. View kısmı kullanıcıya HTML döndürdüğümüz sayfaları temsil eder. Controller kısmı fonksiyonlarımızı tuttuğumuz arka planda çalışan kodları temsil eder. Bu  MVC yapısını neredeyse her dilde gerçekleştirebiliriz önceki makalelerimde anlattığım şekilde NodeJS üzerinde, servlet ve jspler ile Java gibi diğer dillerdede mümkündür. Bu yayında .Nette olanına değineceğiz.

  Şimdi basit bir uygulama gerçekleştirelim. Öncelikle aşağıda görüldüğü şekilde Empty bir proje oluşturuyoruz.

Projeyi oluşturduktan sonra solution explorer da yaratılan dosyalara göz atalım.

• İlk baştan başlarsak app_data klasöründe okuyup yazabileceğimiz veri dosyaları bulunur.
• Content klasöründe projede kullanacağımız görüntüler, css dosyaları tarzında veriler tutulur.
• Controllers klasöründe yukarda anlattığım controller dosyaları bulunur.
• Models kısmında ise veritabanımızı temsili classlar bulunur.
• Scripts klasöründe projede kullanacağımız script dosyaları tutulutr.
• Views klasöründe kullanıcı sunulacak html sayfalar tutulur.
• Global.asax klasörü kullanımı zorunlu olmamakla birlikte uygulama seviyesindeki olayları, nesneleri, değişkenleri yönetmek için kullanılır.
• Web.config dosyası bir XML dosyasıdır ve içinde çeşitli yapılandırma ayarlarını barındırır. Örneğin bir web uygulamasının debug modda çalışabilme ayarları.

 Bu günlük bu kadar anlattıktan sonra diğer günlerde örnek bir uygulama paylaşacağım ve diğer dillerde bu ortamı göreceğiz. Github adresimdende takip edebilirsiniz. Sağlıcakla kalın . İyi günler.

.Net WebApi OAuth 2.0 ile Authorization

  Merhabalar bugün ASP.NET'te çalışacağız. Önce .NET Web API ile bir Restful web servisi oluşturup sonra OAUTH 2.0 ile koruyacağız. OAuth bilmeyenler için açık standartlı bir kimlik doğrulama protokolüdür, genellikle internet kullanıcıları tarafından kendi Google, Microsoft, Facebook, Twitter, One Network v.b. hesaplarının şifrelerini açığa çıkarmadan third party web sitelerine erişmek için kullanılır. Genellikle OAuth kaynağın sahibi adına, kullanıcılara sunucu kaynakları için "güvenli temsili erişim" sağlıyor. Kaynak sahipleri için bir süreç başlatıyor. Bu süreçte kaynak sahiplerinin sunucu kaynaklarına herhangi bir kimlik paylaşımı olmadan üçüncü taraf erişim yetkisi sağlanıyor. Projeye geçecek olursak önce yeni bir Asp.Net Web Application oluşturuyoruz gelen kısımda WebAPI seçeneğini seçiyoruz. Projemizi oluşturduğumuza göre hemen projemiz üzerine sağ tıklayarak NuGet Package Manager’ı açıp Search kısmından OAuth yazarak çıkacak olan sonuçlar içinden Microsoft.AspNet.WebApi.Owin, Microsoft.Owin.Host.SystemWeb ve Microsoft.Owin.Security.OAuth‘u seçerek projemize kuruyoruz. Şimdi projeye veritabanı yaparak başlayalım. Ben code first yöntemini tercih ederek otobüs bilgileri tutan basit bir veritabanı yapacağım.

  Yukarıda veritabanı model classları oluşturdum şimdi ise yazdığım kod ile etkileşim ve bu modelleri temsil için context sınıfı oluşturacağım.

  Context sınıfını oluşturduktan sonra api için otomatik oluşturulan valuescontroller sınıfına geliyoruz ve servisimizin metodlarını ekliyoruz.

  Namespace dan sonra yazdığımız [Authorize] komutu ile servisimizi browserdan link ile erişimi engelliyoruz.RoutePrefix ile de yolu belirliyoruz. Daha sonra datacontext sınıfından bir obje türetip fonksiyonlarda kullanıyoruz. Bu fonksiyonlar veritabanındaki CRUD işlemleri ile aynı olup isterseniz isimlerini değiştirebilirsiniz. Şimdi Owin Pipeline'ı gerçekleştirmek üzere Startup sınıfını açıyoruz ve aşağıdaki kodları ekliyoruz.

Burada önemli nokta Owin'i bir boru gibi düşünürsek herşeyin bir sırası vardır işlem görürken  o yüzden Configuration fonksiyonunun içindeki sıra önemlidir. ConfigureOAuth fonksiyonu içindede alacağımız tokenin yolunu ve kullanım süresini belirliyoruz ve bir provider nesnesi oluşturuyoruz. Şimdi gelelim bu sınıfın kodlarını incelemeye.

Burada da kısıtlayıcı username ve password belirledikten sonra api kısmında her şeyi tamamlıyoruz. Şimdi test zamanı ben test için POSTMAN programını tercih ediyorum.

Görüldüğü üzere veri almak istediğimizde blok yedik. Çünkü önce bir bearer token almamız lazım.

Bunun için POST tipinde /token url’ine Headers’a ve Body’e bir kaç parametre ekleyeceğiz. Headers’e ekleyeceklerimiz: 

Header: Accept   Value: application/json 

Header: Content-Type Value: application/x-www-form-urlencoded 

Body’e ekleyeceklerimiz: data tipini x-www-form-urlencoded olarak seçip,

 Key: grant_type   Value: password 

Key: username    Value: Emre

Key: password  Value: 123456 

 bilgilerini girdikten sonra POST ediyoruz:

Ve bir gün içinde kullanılmak üzere açılan bearer tokeni aldık. Şimdi bu token ile birde get metodu yazacağız ve servisimize erişebileceğiz.

Get metodunda Headers’e eklenecek parametreler: 

Header: Content-Type   Value: application/json 

Header: Authorization   Value: Bearer j3QQ9g8npPS238HNJFm8rhZBV6IE_PhE1fUyDc8Z2b2svsUP0w1mUkcK_DbKGTlewocDAzWTgI7Gloso3LnBqzD7cm7lkKk1SAx3y-_A0x05NNKSk8CBBp7XxWSu8vIoX1SCBWFgGQGmprP453h4uj8y6EuHY9EJi8LFJCfQtWhmvKkWfRH8436LKPrO0QD0eLMqlqFegu6anxwm-nzj2dSLapbM2k45ke3wbDHDxRJs

Bearer kısmından sonra bir boşluk bırakıp tokenimizi yazıyoruz. Sonra çıkan sonuca bakalım.

Görüldüğü üzere artık verilerimizi görüntüleyebiliyoruz. Unutmayın bu tokeni sadece 1 gün kullanabiliyoruz. Projenin tüm kodlarını https://github.com/emresolugan/.Net-WebApi-OAuth2.0-Authorization github adresimde bulabilirsiniz. Bir sonraki makalede görüşmek üzere sağlıcakla kalın. İyi günler.

NodeJS-3: Socket.io ve MongoDB ile MVC Chat Uygulaması

Daha önceki yayında package.json dosyasını oluşturmuş express kütüphanesini eklemiştik. Bu yayında artık proje kodlarını göreceğiz. Önceki yayınlar için http://emresolugan.blogspot.com.tr/search/label/NodeJS adresini ziyaret edebilirsiniz. İlk önce işimize yarayacak npmleri açıklayarak kuralım.

Socket.io her client-server uygulamada olması gereken bir npm. Mongodb ve Mongoose veritabanını eklerken kullanıyoruz. Body-parse ise viewlardan veri çekerken req.body özelliğini kullanmamıza olanak sağlıyor. Express'i açıklamıştım kalanlar fazla önemli değil.

Şimdi proje klasörümüzün içine app.js isiminde bir dosya, içinde siteye ait her türlü resim, css, javascript dosyalarını tutacağımız public isminde bir klasör, controller klasörü ve veritabanı bağlantımızı gerçekleştireceğimiz models klasörünü oluşturuyoruz. Models kalsöründen başlayalım anlatmaya. İlk önce bir tane Users isminde javascript dosyası oluşturalım ve içine resimdeki kodları ekleyelim.

Kodları açıklamak gerekirse, 1. satırda mongoose kütüphenesini require komutuyla çağırıyoruz bir nevi tanıtıyoruz. Sonrasında bir şema oluşturuyoruz ve içinde veritabanındaki nesnelere ithafen tutacağımız girdileri yazıyoruz. Sonrasında User isminde bu şemaya örnek bir obje oluşturyoruz ve ensonda ise User'i exports ediyoruz. Şimdi gelelim controllerımıza:

2 tane controller dosyamız var home_controller ve account_controller. Home _controller dosyasında sadece anasayfayı alıyoruz oluşturduğumuz getIndex metodu ile bu metodu daha sonra app.js dosyasında tanımlıcaz.

Buda 2. controller dosyamız account_controller burada da register ve login sayfalarını get ve post yapıyoruz. Post ederken de tipik mongodb sorgularını ve veritabanı kodlarını kullanıyoruz. Sayfadan ise verileri req.body ile alıyoruz. En sonunda querystring metodu ile kullanıcının kullanıcı adını alarak chat sayfasına yönlendiriyoruz. Şimdi gelelim nodeJS'in bel kemiği olan app.js dosyasına.

Yukarıda görülen app.js dosyası projeyi çalıştırmamızı sağlar. Komut istemcisin de projemizin olduğu kısıma gelip node app.js komutunu yazarsak projemiz çalışıp browserda görünmeye başlayacaktır. Koda gelirsek ilk 11 satırda yüklediğimiz npmleri çağırdık. Sonrasında controllerlarımızı belirtip Mongodb bağlantımızı gerçekleştirdik gerçekleşmez ise hata mesajı ayarladık. 44. satıra geldiğimizde sayfaların post ve get durumlarında kullanacağı route yi ayarladık controllerlarda yazdığımız fonksiyonları gösterterek. En son kısımda ise socket bağlantılarını yapıyoruz. Bu  kısımdaki kodları socket.io sitesinden alabilirsiniz. Proje buraya kadardı. Proje ile ilgili bütün kodları https://github.com/emresolugan/NodeJS-Chat-Application-with-MongoDB github adresimden bulabilirsiniz. Ayrıca yanda bulunan sosyal ağ seçeneklerinden takip edebilirsiniz. Bir sonraki yayınımda görüşmek üzere takipte kalın.

NodeJS-2: Proje ve Npm Kurulumu

  Şimdi daha önceden bahsettiğimiz chat projesini kurmaya başlayalım. Command prompt penceresini yönetici olarak çalıştıralım ve resimde görünen kodları yazalım.

  Mkdir ile projemizi kuracağımız klasörü oluşturduk sonrasında ise npm init ile  NodeJS'nin can damarı olan NodeJS Packae Manager (npm) başlatıyoruz. NPM'yi biraz açıklamak gerekirse NPM node.js için hazırlanmış olan scriptleri bir nevi kütüphaneleri otomatik olarak projenize yüklemenizi,  sağlayan, command prompt'tan çalışan, bir program. Command promp' ta npm yazarak kurulup kurulmadığını güncelliğini kontrol edebiliriz. Diyelim ki projemize önceden hazır yazılmış bir paket eklemek istedik buda chat uygulaması yazarken ihtiyacımız olan socket.io olsun. "npm install socket.io" söz dizimi bize en güncel paketi yüklemeye yardımcı olur, silmek için ise "npm uninstall socket.io" kodu, eğer paketi güncellemek istiyorsak "npm update socket.io" söz dizimini kullanmalıyız. Npm init dedikten sonra enter'a basalım ve resmi inceleyelim.

Çıkan yazıda ilk cümle npm init sizin için bir package.json dosyası oluşturacaktır diyor. Package.json dosyası her projede bulunan sizin uygulamanızın çeşitli meta bilgileri ve npm ile yüklediğiniz paketlerin dependency (bağımlılık) bilgilerini içeren bir dosyadır. ASP.NET'te web.config dosyasına benzer. Yazılardan sonra sizden name, version gibi bilgiler istenir, isterseniz bu bilgileri doldurabilirsiniz ama genelde boş bırakılır. Burada tek önemli olan:

bu satırdır. Genelde app.js olarak adlandırılır ama istediğinizi seçebilirsiniz. En son bilgiler kontrol edildikten sonra enter tuşuna basıp çıkılır. Şimdi proje klasörünü açalım: 

   Görüldüğü üzere sadece package.json dosyası oluştu. Bundan sonraki bütün dosyaları elle oluşturacağız. Şimdi tekrar command prompt penceresine dönelim proje klasörünü seçelim ve npm install express --save    söz dizimini yazalım ve express paketini yükleyelim. Express nodejs için bir web framework' üdür ve nodejs ile çalışan bütün web projelerinde bulunması gerekir rahatlık ve profesyonellik için. Bu arada --save ile kalıcı olarak ve package.json dosyasına otomatik olarak dependency ekledik.

NodeJS-1: Nodejs Nedir?

  Node.js, açık kaynaklı, sunucu tarafında çalışan ve ağ bağlantılı uygulamalar için geliştirilmiş bir çalıştırma ortamıdır. Javascript kullanılarak geliştirilen bir betik dilidir. Javascript tarafından sağlanan non-blocking  çalışma prensibiyle çok hızlı veri aktarımı yapılabilir. En büyük avantajı budur aslında asenkron çalışması bu sayede sık sık gerçek zamanlı Web uygulamalarında tercih edilmekle beraber kullanım alanı popülaritesiyle orantılı olarak genişlemiştir. En yaygın örneğiyle çok kullanıcılı chat programlarını buna örnek verebiliriz. Eğer .NET'te bir chat sistemi yapmak istersek SignalR gibi asenkron çalışan kütüphanelere ihtiyacımız kalır buda gereğinden fazla kod ve iş yükünden başka bir şey getirmez onun yerine bu gibi işlemler gerektiren uygulamalarda doğasında asenkron çlaşıma prensibi bulunan NodeJS  tercih edilir. Ve diğer bir belirgin özelliği ise normalde Javascript ile sadece kullanıcı tarafına kod yazabiliyorduk fakat nodejs sayesinde Javascript ile server tarafına kod yazabiliriz. Bu kadar bilgiden sonra geçelim kuruluma...

  Öncelikle http://nodejs.org/ adresinden setup dosyasını indiriyoruz. Kurulum bitikten sonra cmd penceresini yönetici olarak çalıştırıyoruz ve nodejs kurduğumuz dizine giderek node yazıyoruz ve enter'a basıyoruz.

  Bu noktadan sonra istediğimiz Javascript kodunu yazarak derleyebiliriz. .help yazarak bütün komutları görebilir .exit ile ortamdan çıkabilirsiniz.

  NodeJS anasayfasındaki kodu inceleyelim bu kodu bir JS uzantılı dosyaya kaydedip çalıştırırsak 127.0.0.1 adresli bir sayfada Hello World yazısı yazılacak.

  Kodu incelemek gerekirse 1. satırda http modülünü ekliyoruz böylelikle server yaratma, çağrı atma, çağrı yönlendirme gibi işlerimizi yapabileceğimiz fonksiyonları getirmiş oluyoruz. Daha sonrasında "http.createServer(function (req, res) {" komutu ile serverımızı oluşturuyoruz. Yarattığımız server'a yapılan çağrılarda content-type olarak text/plain olduğunu söylüyoruz. Sonra ise response set yapıp sayfamızın response'unu bitiriyoruz. Ve helloworld'u ekrana basıyoruz.

 Giriş kısmı bu kadar bu kısımda NodeJS geliştirme ortamını command-promptan nasıl gerçekleştirdiğimizi anlattım. Sonraki makalede bir Chat uygulaması oluşturacağız ve oluşturulan dosyaları tanıyacağız.

Ajax XML File

Merhabalar,

 Bugün yayınımın ilk gününde sizlerle Ajax'a giriş yapacağız. Sizlere önceden geliştirdiğim bir uygulamadan bahsedeceğim, bu uygulamada dış kaynaklı bir XML dosyasından sayfamıza veri çekip sayfamızda gösterteceğiz. Ama isterseniz kodlara geçmeden önce Ajax hakkında kısa bir bilgi verelim.

 Ajax, “Asynchronous JavaScript and XML” (Türkçe: Eşzamansız JavaScript ve XML) anlamına gelen, JavaScript ve XMLHttpRequest kullanımı ile etkileşimli uygulamalar yaratan ve bir çok programlama dili ile uyumlu çalışan bir tekniktir. Kesinlikle bağımsız bir programlama dili değildir. Peki ama Ajax ile neler yapılabilir? Birden fazla amaca hizmet eder.

• Sayfayı yeniden yüklemeye gerek kalmadan güncellememizi sağlar.(Bana göre en büyük özelliği)
• Sayfa yüklendikten sonra sunucuya istek gönderebilir.
• Sayfa yüklendikten sonra sunucudan veri alabilir.
• Arka planda sunucuya veri gönderebilir.

gibi özellikleri mevcuttur. Daha fazlası için http://www.w3schools.com/ajax/ adresini ziyaret edebilirsin. Bahsettiğim projeye gelecek olursak.

İlk önce XML dosyasını oluşturuyoruz ve verileri giriyoruz. Sonrasında ise:

oluşturacağımız HTML dosyası içine Ajax olayını tetikleyebileceğimiz bir buton ve XML verilerini göserebileceğimiz bir tablo oluşturuyoruz.

Son aşamada ise script olaylarının gerçekleşeceği script kodlarını yazıyoruz. İlk olarak butona basıldığında tetiklenecek fonksiyonu yazıyoruz. Bu fonksiyonu açıklamak gerekirse ilk önce sunucuya istek oluşturuyoruz (14.satır). Daha sonra Ajax içinde gerçekleştireceğimiz olayları tanımlamak için onreadystatechange() fonksiyonu oluşturuyoruz. En son get metodu ile bir bağlantı açıyoruz ve isteğimizi gönderiyoruz.

İkinci aşamada myFunction fonksiyonunda ise sunucudan gelen XML cevabı for döngüsüyle oluşturduğumuz tabloya kaydediyoruz.

Kodları anlaşılır kılmak için  en sade halleriyle yazdım. Kodu indirmek isteyenler https://github.com/emresolugan/Ajax-XML-File-Example github adresimden indirebilirler.

Bir sonraki makalede NodeJS ile chat uygulaması yapacağız. İyi günler.