2012'de Hazırladığım Asp.Net MVC 4 Eğitim Seti - MESUT ÇAKIR - PART 1

2012 Yılında Hazırlamış olduğum Eğitim Setini sizlerle paylaşmak istedim. Kullandığım bilgisayar biraz yavaş olsa da içerik olarak doyurucu olduğunu düşünüyorum yeni başlayanlar için ideal bir eğitim seti olmuştu. İlk Video şimdi yükledim diğer videoları vakit buldukça yüklüyor olacağım. 1,5 kat hızla izlemenizi tavsiye ediyorum.

https://www.youtube.com/playlist?list=PLXBcEiVbL-wm8mZLSPkNTfVE_Ug3FQRkt

Asp.Net MVC 4 Eğitim Seti İçeriği

1.       MVC Tanıma ve Giriş

2.       Controller Tanıma

3.       ViewEngine Seçimi

4.       Razor ViewEngine ile @ Operatörünün kullanımı

4.1.    Değişken tanımlama

4.2.    Yorum satırı tanımlama

5.       Model bazlı hazır sayfaların oluşturulması

5.1.    Veritabanı oluşturmak ve View’e otomatik verileri basmak

5.2.    Model’e ait Özelliklerin belirlenmesi , validasyon mesajlarının set edilmesi

5.3.    HttpPost-HttpGet hakkında bilgilendirme

5.4.    WebGrid Kullanımı

5.5.    Duzenleme işlemi

5.6.    Mail Regex İşlemleri

5.7.    Detail ve Delete sayfaları oluşturmak

6.       Html Helpers

6.1.    ActionLink tanımlama ve yöntemleri

6.2.    Label tanımlama ve yöntemleri

6.3.    BeginForm tanımlama ve yöntemleri

6.4.    TextBox tanımlama ve yöntemleri

6.5.    TextArea tanımlama ve yöntemleri

6.6.    CheckBox tanımlama ve yöntemleri

6.7.    RadioButton tanımlama ve yöntemleri

6.8.    Password tanımlama ve yöntemleri

6.9.    AntiForgeryToken tanımalama

6.10.Kendinize ait helper methodlarının oluşturulması ve kullanımları

6.11.ReSharper kurulumu ve kullanımı(Ek bilgidir)

7.       Validation Attributes

7.1.    Required

7.2.    Display

7.3.    Range

7.4.    Regular Expression

7.5.    StringLengh

7.6.    Compare

7.7.    *.Resx dosyası ile çalışma ve Multi-Language Desteği vermek

8.       Url Helpers

8.1.    Mvc Routing tanıtımı

8.2.    Action tanımlama

8.3.    Content tanımlama

8.4.    Yeni bir Route tanımlama

8.5.    RouteUrl tanımlama ve yöntemleri

9.       Action’ları incelemek

9.1.1. Dynamic Model kullanımı

9.1.2. ActionResult kullanımı

9.1.3. JsonResult Kullanımı

9.1.4. JavaScriptResult Kullanımı

9.1.5. FileResult Kullanımı

9.1.6. ControllerBase Method İnceleme

9.1.6.1.             OnActionExecuting

9.1.6.2.             OnActionExecuted

9.1.6.3.             OnException ve Handle etmek

10.   MVC ile kullanılan önemli tanımlamalar

10.1.ViewBag

10.2.ViewData

10.3.TempData

10.4.Session

11.   MVC Bundle Minification

12.   MVC Ajax Helpers

12.1.ActionLink

12.2.BeginForm

13.   MVC Paypal Helpers

 

E-Ticaret Sistemi yapımı

Front End Developer Tarifini Beğendiğim Bir Güzel Yazı Mutlaka Okumalısınız...

Front-end Web Developer, CSS Developer, Front-end JavaScript Developer, Front-end Software Developer, Front-end JavaScript Application Developer, Web/Front-end user Interface Developer, Mobile/Tablet Front-end Developer, Front-end SEO Expert, Front-end Accessibility Expert, Front-end Testing/QA

Yukarıda yazdığım terimler ile ilgili açıklayıcı bir yazı olmuş, güzel bir harita olabilir diye düşündüm. Çünkü buradaki deneyim paylaşımları çok önemli detaylar içermektedir.

Bu yazı için Metin Yılmaz'a teşekkür ederim.


#2015-11-14 Güncesi | Global Day Of Code Retreat

Bir hafta önce facebook üzerinden bir EventBrite adlı site üzerinde pair-programming konusu üzerine bir toplantıya rastladım. İçeriği olağan dışı geldi ve katılma kararı aldım. Bu linkteki adresten kayıt yaptırdım. Kafamdaki ilk düşünce gidip bir kaç insan tanıyıp gelmekti.


Günün Kuralları
  1. Oturum
    1. Her kişi 1 kişi ile Pair olacak ve 45 dakika boyunca bu konunun çözümü üzerine geliştirmelerde bulunacak. Bilgisayarda kod yazan bir kişi olacak diğeri gözlemci olacak.
    2. 45 dakika sonunda tüm kodlar silinecek.
    3. 10 dakikalık Code Retreat için 8-10 kişilik gruplar halinde 45 dakikada yaşadıklarımızın kritikleri yapılacak.
    4. 5 dakika çay ve kahve molası.
  2. Oturum 
    1. Pair olmadığımız yeni bir kişi ile pair olunacak..
      • Buradaki kriter sana bağlı ben C# yazıyordum , Java yazan bir pair buldum. Java üzerinde Eclips ve Test süreçlerini gördüm. #Beğendim.
    2. 45 dakika boyunca çözüm üzerine geliştirilecek. Fakat Bu Sefer Ping ve Pong eylemi kuralı var. Yani Bir yere kadar yazılacak ve arkadaşına pas atılacak oradan arkadaşı alıp devam edecek.
      1. Örnek olarak; GetModelCount() methodu 10 sayısını döndürmesi lazım şeklinde bir test yazdığımı varsayıyorum. Test şuan çalışmıyor çünkü method içi geliştirilmedi. Arkadaşımda alıyor ve method içini gerekli kodlarla dolduruyor. Oda bir test yazıyor ve bana teslim ediyor bende aynı şekilde dönüş yapıyorum. İşi bu şekilde sonuçlandırıyoruz.
      2. Burada iki kişinin o framework üzerinde kod tecrübesi etkili ama sonuç olarak 3-5 kere sonra alışılıyor.
    3. 45 dakika dolar yazılan kodlar silinir.
    4. 10 dakikalık Code Retreat yapılır.
    5. 5 dakika mola.
  3. Yemek Molası - Yemekler Beleş. :)
  4. Oturum
    1. Pair olmadığımız yeni bir kişi ile pair olunacak..
    2. 45 dakika boyunca çözüm üzerine geliştirilecek. Yine Ping ve Pong eylemi kuralı var. Ek olarak bu oturum üzerinde İf, Switch, For, ForEach, While vb. Condition ve Loop kullanılmayacak.
    3. 45 dakika dolar yazılan kodlar silinir.
    4. 10 dakikalık Code Retreat yapılır.
    5. 5 dakika mola.
  5. Oturum
    1. 3 oturum'a ek olarak yazılan her method içi 5 satırdan daha fazla  olmayacak.
  6. Oturum
    1. Yeni bir kişi ile pair olunur. 
    2. Bu oturumda tek kural vardır yanındaki kişi ile sözlü iletişim kurmayacaksın.
Bunları yapacağımız çalışmanın detayları ise şu şekildeydi;
  1. Conway's Game of Life isimli bir algoritma tanıtıldı. Bu algoritmayı bir kağıt aracılığı ile teslim aldık. Kağıt Eklerde Ek1.jpg olarak bulunmaktadır. Buradaki kurallar wikipedia içerisinden belirtilmiş durumdadır. Ancak ben buraya da yazmak istiyorum. Video'dan anlamak için tıklayın.
    • Any live cell with fewer than two live neighbours dies, as if caused by under-population.
      • Yaşayan bir Hücrenin 2'den daha az yaşayan komşusu varsa, Komşusu olmadığından ölecektir.
    • Any live cell with two or three live neighbours lives on to the next generation.
      • Yaşayan bir Hücrenin 2 veya 3 canlı komşusu olduğunda bir yeni cell doğumu olur.(Burada doğum nerede gerçekleşecek sorunu sordum bilmiyorum. Fikrim 3 hücrenin kesişim kümesi olması olabilir.) Burayı daha iyi anlamak lazım.
    • Any live cell with more than three live neighbours dies, as if by over-population.
      • Yaşayan bir hücrenin 3'den daha fazla komşusu olursa fazla komşusu olduğu için ölecektir.
    • Any dead cell with exactly three live neighbours becomes a live cell, as if by reproduction.
      • Ölü bir hücrenin 3 adet komşusu olursa Hayata Döner.
  2. TDD - Test Driven Development veya BDD - Behavior Driven Development kullanımı yapabileceğimiz kısıtlaması getirildi.
    • Benim burada TDD geliştirme ile ilgili biraz fikrim vardı fakat BDD ilk defa duymuştum.
Günün Kazanımları;
  1. Thought Works Şirketini tanıdım. Çalışanları çok sempatik ve zeki genç insanlardı. Mutlaka iletişimde olunması gereken insanlar.
  2. TDD öğrenmek için Kent Beck adlı adamı takip edebileceğim söylendi. Ayrıca kendimde bir eğitim buldum.
  3. CoderDojo adında çocukların yazılıma kazandırılması için ileriye dönük bir projeden bahsedildi.
    1. Ayrıca MBB ile görüşmemizde @sulhadin arkadaşımında daha önce bahsettiği Code Monkey adlı oyun mantığını çok beğendim.
      1. 15 bölümlük bir seriyi 6 yaşımdaki kızıma sadece 1-2 direktif vererek yaptırmayı başardım. (heyecanlandım)
    2. Karaköy veya Kadıköy tekrar bakmak lazım haftada 2 saatlik seansları oluyormuş çocukların yazılımları ile ilgili ücretlimidir bilmiyorum.
    3. Bize gösterilen Video buradaki gibiydi.
  4. Isaac Asimov ile ilgili bir kaç bilgi edindim.
    1. Ben Robot - IMDB filmi için öneri aldım. İzlemek için tıklayın
    2. System.Core.dll ile makinenin işlemcisine kadar kodlama yapabileceğimi öğrendim.
  5. Şuanki fikrimiz olan Günce yada Haftalık yazma mantığından bahseden @mbb abimizin önerisi ile Serdar Kuzuoğlu adlı kişinin takibine başladım. 
Kendime önerilerim.
  1. Haftanın en az 1 günü algoritma geliştirme çözümleme üzerine geçireceğim. Bunu yaparken TDD kullanmaya özen göstereceğim. SOLİD prensiplerini uygulamayada devam ediyor olacağım.
  2. Haftalık Çalışmalarını @MBB yönetimine benzer şekilde 1 ay dene ve feedbacklerini ver.
  3. Çalışma, Dinlenme, Aile ve Motivasyon zamanlamalarını yapılandırma için bir model oraya koy.

Yönetim Paneli Tasarlamada geldiğim son nokta !

Baktığınızda bu nedir demeyin sadece kafamdakileri yazdım yarın değişebilir bu fikirler pek takmayın yani :)


Projenin temel sorunu bir frontent mimarisinin olmayışı, bu mimari sorunun çözümü için aylardır bir çok şey denedik fakat tam manasıyla başarılı olamadık. Bunun temel sebebi kullandıığımız teknolojiler değildi, Bu güne kadar yanlış bildiğimiz şeyleri doğru olarak kabul edip ilerlemeye çalışmamızdı.


Yapılması gereken sadece işleri basitçe ele almaktı hepsi bu, bir tarih seçtirmek için koskoca kütüphanenin yüklenmesi yerine HTML5 kullanmak mesala çok basit bir değişimle performansa etki eden önemli bir adım.


Bu çalışma ile SammyJs’den edindiğimiz bilgiyi, Metronic(Bootstrap) Admin Theme’den aldığımız tasarım düsturunu ve d3’dn altığımız grafik işleme mantığını doğru bir şekilde hayata geçirebileceğiz.


Bootstrap çıkar PureCss girer.

Bootstrap ile yaşadığımız birincil sorun bir dosya içerisinde tüm herşeyin gömülmüş olması test ve analizlerde bir sayfa kullanımında %99’u boşa gidiyor şeklinde ifadeler vardı. Bu durumu aşmak için 5’e bölünmüş PureCss kullanımı ile bir tasarım planlanması önerilmektedir. Forms, Buttons, Menu, Tables, Layouts olarak farklı başlıklara bölebiliriz.

Kullanım kolaylığı ikisi içinde makul seviyededir.


Jquery, Bootstrap Çıkar -> Pure Javascript + AngularJS girer.

Jquery ve Bootstrap teknolojileri çok güzel ve hızlı geliştirilselerde sayfa hızlarının büyük kısmını yemekteler. Performanslı bir çalışma için yapılması gereken jquery ve bootstrap componentlerinden kurtulmaktır.

DateTime, Time, Week, Month, Color, Number, Email , Range(1-5 arası bir değer seçtirmekgibi) Selectorler için HTML5 desteği mevcut durumdadır. Geriye modal popup, dialog gibi kullanımlar kalıyor. Bunların kullanımlarını tamami ile yasaklıyor olacağım bunlar mobil kullanımıda engelleyen teknolojiler. Artık sadece HTML5 + Javascript kullanımına odaklanıyor olacağız. CKEditor ile ilgili jquery bağlantısı yok kontrol ettim. D3 library kullanımına devam edilebilir. 


Kayıplarımız  olarak en önemli konu efeklerimiz, geçiş efektleri kullanabiliyorduk. Jquery gittikten sonra bu işi Angularjs bırakıyor olacağız.

http://www.nganimate.org/



Yönetim Paneli Yapımı İçin Gerekli Bilgiler

Bir Yönetim Paneli tasarlanırken gerekli temel tasarım özelliklerimiz harici çok fazla şatafat gereksinimi duymayız. Yapmak istediğimiz işler CRUD ekranları etrafında toplanırlar.  muhtemelen tüm benzer yönetim panelleri için gerekli tüm componentlerin listesini hazırlamaya çalıştım.

DateTime Picker (HTML5)

Time Picker(HTML5)

Color Picker(HTML5)

Week Picker(HTML5)

Month Picker(HTML5)

Email(HTML5), Number(HTML5-Max-Min özellikleri kullanılacak), Text(Single Line) (MaxLength özelliği kullanılacak – spellcheck gözden geçirilecek HTML), Textarea(Multi)(HTML)

HTML Editor(CKEDİTOR JS) kullanılacağı sayfada js eklenerek çözülecek.

Range Slider (HTML5) -> 1-5 arası bir değer seçmek istediğimizde jquery içerisinden kütüphane yüklüyorduk gerek yok artık.

Button, A, Image Button(HTML5)

File Picker

Table

Mega Menü (Full CSS olarak hazırlanmış sistemler mevcut)bknz: http://jsfiddle.net/fredthewebchap/maasz/

Async GET-POST bu işlerin tamamını ve sayfa geçişleri ile ilgili işi AngularJS üstlenecek. Sayfada bir şey gösterilecek veya gösterilmeyecekse bunlara Angularjs karar verecek.

Icon için resim kullanımı yapılmayacak font-awesome kullanımına devam edilecek.

Grafik gösterimleri için d3 library içerisinden gerekli kütüphaneler kullanılacak diğerleri kullanılmadan önce bilgi verilecek.


Tüm bu özelliklerin detaylı kullanım bilgileri SamplesController planlaması ile belirlenecek. Developer için gerekli tüm özellikler burada test edilecek.


Sayfa Planlaması ve Yönetimi

Yönetim Paneli içerisinde sayfa planlamaları için bir doküman hazırlanacak. Genel Mimari ile ilgili temel bilgilerde dahil tüm sayfaların dokümantasyonu değiştirilmeden geliştirilmesi yasaklanacak. 


Sayfa geliştirmesine başlanmadan önce çizimler ve tasarımsal geliştirmeler tamamlanacak. Her sayfa yerleşim ve fonksiyonları Ekip onayından geçirilecek. İcon kullanımlarına özen gösterilecek.


Sayfa hazırlandıktan ve dokümantasyonu yazılıp gerekli resimleri dokümana eklendikten sonra Sayfaların detay bilgilerinin bulunduğu excel içerisine eklenecek.


Sayfa Başlığı – Sayfa Url – Hangi Rollerin girebileceği – Sayfanın Local Açılma Hızı – Sayfanın Live Açılma Hızı – Yapılma Tarihi – Sorumlu Personel 


Formatında doldurulduktan sonra sayfa tamamlanmış olacak.


Burada hazırlamış olduğumuz birinci dokümantasyon bölümü her sayfanın görünür bir bölümünde (?) butonu şeklinde bir erişimle müşteriye açılacak. Müşterinin sayfa ile ilgili detaylı bilgileri alması buradan sağlanacak. 


Bu kısım otomatize olacak eklenen her dokümantasyon otomatik olarak sayfa ile bağlanacak. View/Home/Indexcshtml – Documentation/Home/Index.html şeklinde bir mimari basitçe çözer.


Documantation bilgileri düzenleme panel olabilir file düzenlemelerini basitçe yapabilmemiz için.