MVC Jquery ve Css ile Papaz Nerede Oyunu

Küçük bir kağıt oyunu yapmak istedi canım. Bende kendi kendime bir oyun ürettim ve onu yazayım dedim. Adı Papaz Nerede. Oldukça basit bir oyun. Sadece sineklerden oluşan 13 kağıt var elimizde. Astan papaza kadar bütün seri masaya karışık bir şekilde geliyor ve bizde bu seriden papazı 3 hakta bulmaya çalışıyoruz.


Bu oyun için kağıtları ben internetten buldum. Siteden dosya paylaşamadığım için buraya ekleyemiyorum ama hem kağıtları hemde uygulamayı isterseniz bana mail adresimden ulaşabilirsiniz.


Şimdi uygulamamıza başlayalım.

Javascript Basit Hesap Makinesi

Yazılım yeni başlayanlara ilk yaptırılan uygulama ekrana "Hello World" yazdırmaktır. Bir sonraki proje de genelde hesap makinesi yaptırmak olur. Bende can sıkıntısından bunu javascript ile yapayım dedim. Tabi detaylı değil sadece tam sayıları toplayıp çıkaran bir sistem olacak ama olsun :)

İlk olarak ekrana hesap makinemizin tuşlarını ekleyelim.

Javascript ile CheckBox Kullanımı

Bir önceki yazımda sizlere javascript ile küçük bir radiobutton örneği yapmış ve nasıl kullanacağımız hakkında bir bilgi vermiştim. Bu yazımda da checkboxlara biraz giriş yapacağım. Checkboxlar radiobuttonların aksine çoklu seçim için kullanılan araçlardır.

Zaman kaybetmeden örnek uygulamamıza başlayalım. İlk olarak sayfama dört adet checkbox ve bir adet buton ekleyerek örneğime başlıyorum. Butonu nerede kullanacağımızı birazdan göreceğiz.

Javascript ile RadioButton Kullanımı

Web projelerinde genel olarak kullandığımız bir component olan radiobuttonların bir de javascript ile nasıl kullanıldığına bakıp küçük bir örnek ile konuyu pekiştirmeyi düşünüyorum.

İlk olarak bir html sayfası oluşturalım ve içine dört adet radiobutton ekleyelim.

C# T4 Code Generator Kullanımı

Üniversite zamanında bir arkadaşım (Yakup Buğra Bozkurt) bana bu konuyu göstermişti. Uzun zamandır hiç kullanmadım. Geçen günlerde gittiğim bir toplantıda bu yapıyı görünce aklıma geldi. Bende sizlerle paylaşayım dedim.

İlk olarak T4'ün ne olduğundan kısaca bahsedeyim sonra da örneğe geçeriz. T4 (text template) kısaca text'e yazdığımız kodun gerçeklenmesi olarak tanımlayabiliriz. Örnek vermek gerekirse; 20 tane sınıfın Ekle, Sil ve Güncelleme işlemleri ortak ise bunları teker teker yazmak yerine text olarak yazıp for döngüsü ile döndüğümüzde kodun oluşturulmasını hayal edin. Uygulama üzerinde bakalım bir de.

Bir tane console uygulaması açarak işe başlayalım.

C# Linq Sorguları Kullanımı

Merhaba. Bu yazımda sizlere C# da bence çok önemli bir yeri olan Linq sorgularının nasıl kullanıldığına dair kısa ama etkili olduğunu inandığım bilgiler paylaşacağım.

Kodlara başlamadan önce şunu belirtmek isterim ki ben sonuçları "var" değişkenine atadım. Bu değişken sorgu sonucunda dönecek olan tipleri direk olarak bildiği için sonuçların tipleri belli olmaya bilir. Bu nedenle sonunda ToList olanların liste olarak döndürüldüğünü belirtmek istedim.

WPF ile Reporting Service Kullanımı -1

Bu yazımda sizlere SSRS (SQL Server Reporting Service) ile oluşturduğumuz bir raporu WPF içerisinde nasıl görüntüleyeceğimizi anlatacağım. Benim yaptığım örnekte verileri içeriden elle dolduracağım ama siz isterseniz bunları veritabanından çekerek de doldurabilirsiniz.

Şimdi yapmamız gereken ön çalışmalar ile işleme başlayalım. Tabiki ilk yapacağımız işlem bir adet WPF projesi oluşturmak.

MVC RouteValueDictionary Kullanımı

Genel olarak yazdığım MVC yazılarında birine yine hoş geldiniz. Bugün ki yazımız ActionResultlar arasında veri gönderimi için kullanılan RouteValueDictionary. Çok uzun bir konu değil hatta kısa bir örnek yazarak ve birazda dikkat edilmesi gereken durumlara bakarak yazıyı sonlandıracağım.

İlk olarak iki adet ActionResult oluşturalım. Benim yazıdaki ActionResultlarımın adı Route1 ve Route2 olacak. Route1 ActionResultından yolladığımız bir listeyi Route2 de yakalamaya çalışacağız. O zaman kodlamaya başlayalım.

.Net WebRequest ve WebResponse Kullanımı

Uzun bir aradan sonra yine yeni bir yazı ile blogumdayım. Bu yazıda sizlere bir siteden nasıl bilgiler toplayabileceğinizi elimden geldiğince göstereceğim. Kodlara geçmeden önce yapacağımız çalışmanın ne olduğundan kısaca bahsedeyim.

Kendi blogumun ana sayfasına kod tarafından bir request göndereceğim. Bu request bana sayfanın html bilgisini döndürecek. Daha sonra bu bilgiler üzerinden sayfa üzerindeki yazı linklerini toplayacağım. Topladığım bu linkleri teker teker gezeceğim.

Peki bu bizim nerede işimize yarayabilir? Bilgi toplamak amacı ile hedef sitelerinizi analiz eder ve buradaki açık bilgileri toplayabilir, kendinize güzel bir veri yığını yapabilirsiniz. Şimdi kodlama aşamasına geçelim.

CSS Gösterim Hiyerarşisi - 2

Bir önceki yazımda sizlere css hiyerarşisi ile ilgili bilgiler vermiştim. Bu yazımda da bu yazının devamı niteliğinde css hiyerarşisi hakkında bilgi vermeye devam edeceğim.

Yazımızın temel konusu bir tage birden fazla css class atanırsa neler gerçekleşeceği.

CSS Gösterim Hiyerarşisi

Ne demiş atalarımız? Her gördüğün sakallıyı deden zannetme. CSS kullanırken de bu kural bir nebze

geçerli. Her gördüğünüz css kodu sizin kodunuzu etkileyen bir kod olmayabilir :) Bunu en basit şekilde bu yazıda göstermeye çalışacağım.

Jquery Get Post Çalışma Mantığı

Daha önce karşıma çıkan ama blogu yazarken aklıma gelmeyen bir durum geçen gün karşıma çıktı. Bende hazır görmüşken bu durumu sizlerle paylaşayım dedim. Web projelerinde ekrandan codebehind'a giderken jquery kullanıyorsanız dikkat etmeniz gereken durum şudur diyerek örnek koda geçelim.

Factory Design Pattern

Bir sınıf veya bir interfaceten türeyen ve aynı metotlara sahip birden çok sınıfınız varsa ne yaparsınız.
Örnek olarak bir Personel interface'imiz olsun ve içinde maaş bilgisini ve personelin ünvanını getiren metotlarımız olsun. Böylece bütün sınıflarımızı buradan kontrol edebiliyoruz. Bir değişiklik gerektiğinde tüm projede teker teker sınıflarımızı arayacağımıza buradan gerekli değişiklikleri yapıp tüm projeye entegre edebileceğiz. Aslında bir nevi kontrol merkezi kurmuş olacağız :)

Bu iki metot her sınıfta olacaktır. Elimizde de uzman yardımcısı, uzman, kıdemli uzman, teknik müdür ve müdür sınıflarımız olsun. Kullanacağımız patter factory pattern'dir. Peki bu pattern'i nasıl kullanacağız?

MVC Angular Kullanımı : Listeleme, Filtre ve Sıralama İşlemleri

Daha önceki angular yazımda sizlere listeleme, filtreleme ve sıralama işlemlerini yazacağımı söylemiştim. Gün bugündür diyerek yazımı yazmaya başlıyorum :)

Bir önceki yazımda tek bir nesne üzerinden işlem gerçekleştirmiştim. Artık birden çok veriyle çalışmamızın zamanı geldi. Bunun için daha önceki yazımda kullandığım gibi yine bir Personel sınıfı kullanacağım.

C# Composite Design Pattern Kullanımı

Geçenlerde design pattern'ları araştırırken daha önce bilmediğim ama projelerimde bilinçsizce de olsa kullandığım bir pattern olduğunu öğrendim. Bu yapıyı bir ay önce bir MVC projesinde dinamik menü yapımı için kullanmıştım. Demekki insanlar bunu daha önce çok kullanmış ve pattern haline getirmiş :)

Bende biraz daha detaylı inceledikten sonra bu yapıyı size bir örnek ile göstermek istedim. Oldukça kullanışlı ve hiyerarşi işlemlerinde kullanılan bu pattern'e hep beraber bakalım. Tabi ben bu örneği genelde olduğu gibi MVC'de gösteriyor olacağım.

Hangi Browser'dasınız?

Konu başlıkta açıkladığım gibi çok net. Bir uygulamanız var ve bu uygulamanızı kullanıcının açtığı browser'a göre özelleştireceksiniz. Bunun için de kullanıcının hangi browserdan giriş yaptığını bilmeniz gerekiyor. O zaman kısa ve net bir şekilde aşağıdaki kodları kullanmanız yeterli olacaktır.

var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
    // Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
var isFirefox = typeof InstallTrigger !== 'undefined';   // Firefox 1.0+
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
    // At least Safari 3+: "[object HTMLElementConstructor]"
var isChrome = !!window.chrome && !isOpera;              // Chrome 1+
var isIE = /*@cc_on!@*/false || !!document.documentMode;   // At least IE6

var output = 'Detecting browsers by ducktyping:<hr>';
output += 'isFirefox: ' + isFirefox + '<br>';
output += 'isChrome: ' + isChrome + '<br>';
output += 'isSafari: ' + isSafari + '<br>';
output += 'isOpera: ' + isOpera + '<br>';
output += 'isIE: ' + isIE + '<br>';
document.body.innerHTML = output;

Kaynak : https://jsfiddle.net/wvbdnb8o/

MVC Angular Kullanımı:Başlangıç

Geçenlerde şöyle internette bir gezineyim dedim. Tabi genel olarak baktığım konu yine MVC'ydi. Sadece bu sefer ek olarak SignalR konusunu da araştırıyordum. Biraz gezindikten sonra karşıma Bora Kaşmer'in sitesi  denk geldi. Açıkçası ufkumun bu kadar açılacağı Türkçe bir sayfa bulmak beni çok mutlu etti.

İlk olarak MVC konusuna girdim tabiki. Yazıları okurken seminerlerde yapılan örneklerin olduğu bolca kod örneği bulabilirsiniz. Tabi asıl araştırdığım konu SignalR'dı ama örneklerde genelde angular vardı. İlk olarak SignalR konusunu anladıktan sonra Bora Kaşmer'i de bol bol rahatsız ederek angular konusuna daha fazla önem vermeye karar verdim. Sağolsun kendisi de her soruma cevap verdi.

Şimdide öğrendiklerimi sizlerle paylaşma aşamasına geldim. Bu kadar sözden sonra artık kodlamaya başlayalım.

Jquery ile HTML MasterPage Oluşturmak

Web sitelerinde menüler, reklamlar vb alanların her sayfada bulundukları dikkatinizi çekmiştir. Peki her sayfa için bu alanlar tekrar tekrar Html olarak oluşturuluyor mu? Tabi ki hayır. Bu alanlar masterpage olarak adlandırılan ve her sayfa sabit bulunacak alanları içinde tutan bir sayfadan geliyor. Sayfada değişecek alanlar ise sayfanın kendi içerisinde oluşturuluyor ve daha sonra masterpage'in içine entegre oluyor. Peki masterpage kullanmazsak ne olur?

Otuz sayfalık bir projeniz olduğunu düşünün. Masterpage kullanmıyorsunuz ve her sayfanızda 5 tane menümüz, altında sabit footerımız ve arkada bir arkaplan resmi olduğunu varsayalım. Bu durumda menülerden birinde değişiklik yaptığınızda otuz sayfada da teker teker bu işlemi uygulamanız gerekecek. Bu hem maliyet açısından hemde hata yapma oranı açısından büyük bir dezavantaj. Biz bu sorunu jquery ile çözeceğiz.

Bootstrap Modal Kullanımı

Herkesin projelerde bolca kullandığı popupları bootstrap ile nasıl yapacağımızı bu yazımda sizlerle paylaşacağım. Öncelikle bootstrap nedir diye merak eden arkadaşlar bu linkten bootstrap'i detaylı olarak inceleyebilirler.

Şimdi tasarıma bakalım. İlk olarak sayfamıza bir modal ve iki adet buton koyalım. Bunlardan birincisi modalımızı gösterecek olan buton diğeri ise gizleyen buton olacak. Ben bu işlemleri MVC'de yapıyor olacağım.

MVC'de bootstrap içinde mevcut geliyor o nedenle sayfama bootstrap linklerini eklemedim ama siz html olarak oluşturacaksanız yukarıdaki linkten bootstrap'i indirerek gerekli kütüphanelerin linklerini sayfanıza eklediğinizde kullanabiliyor olacaksınız. Tabi ben sayfamda birde jquery kullandım. Onun kütüphanesini de sayfanıza eklemeniz lazım.

MVC PartialView Kullanımı

Yeni bir yazıyla merhaba. Bu yazıda sizlere MVC'de PartialView kullanımını elimden geldiğince anlatacağım. PartialView'leri viewlere yapacağımız yama gibi düşünebilirsiniz.

Ayrıca benzer bir örnekde masterpagelerin içindeki content alanları da olabilir. PartialViewler de normal sayfalarımız içindeki contentler gibi düşünülebilir.