MVC Design Pattern ve Asp.NET MVC FrameWork

MVC Nedir ?

MVC yazılım mühendisliğinde kullanılan bir design pattern’dir.Açılımı, M(Model), V(View), ve Controller(Kontrol Edici) şeklindedir.Amacı , modüler şekilde yazılım geliştirmeyi sağlamaktır. Kullanıcıya yüklü miktarda verinin sunulduğu karmaşık uygulamalarda veri ve gösterimin soyutlanması esasına dayanır.Kullanıcıyı ilgilendiren veriler, controller katmanından geçerek, sunum katmanında kullanıcıya ulaşır.Controller katmanında, veriler işlenir, bazı yanları gizlenir özetle kullanıcıya gösterilmek üzere hazırlanır.

Günümüzde MVC dendiğinde akla ilk gelen Asp.Net MVC’dir ancak Asp.NET MVC bir design pattern değildir Microsoft tarafından geliştirilen bir framework’tür.Daha hızlı, yönetilebilir ve yenilenebilir yazılım geliştirmeyi amaçlar.Bu framework içinde MVC’yi tekrar açıklamak istersek:

MODEL: verinin ve iş mantığının şeklini temsil eder. Uygulamanın verilerini tutar. Model nesneleri, model durumunu bir veritabanından alır ve depolar.

VIEW: Gösterilmek istenen verileri, kullanıcıya model kullanarak gösterir ve aynı zamanda verinin değişimine olanak sağlar.

CONTROLLER: Kullanıcı istekleri için diğer bileşenler arasındaki etkileşimi sağlar.Genellikle, kullanıcı, uygun URL isteğini view ile iletir ve bu istek o view’den sorumlu controller tarafından ele alınır.Controller, uygun bir view model ile etkileşime geçer ve model’den aldığı veriyi yanıt olarak verir.

mvc-architecture

MVC Mimarisi Yapısı Genel Gösterim

Asp.Net MVC framework kullanarak, e-ticaret temalı projemize başlayalım.İlk yapmamız gereken Visual Studio’nun herhangi bir sürümü üzerinde Web temalı proje açmak.Ben Visual studio2015 Community sürümünü kullanıyor olacağım. Bunun için sırasıyla şu adımları uygulayalaım

  • Visual studio start ekranı-> Yeni Proje Aç
  • New project ekranında, Installed sekmesi->Other Project Types->Blank Solution (Şekil 1)
  • Blank Solution üzerine sağ tıklayıp add->new project->installed->web->Asp.NET Web Application seçilir ve şekilde anlatıldığı gibi isimlendirme yapılır.(Şekil 2 ve Şekil 3)

Ekran Alıntısı23.PNG

Şekil 1

Ekran Alıntısı7.PNG

Şekil 2

ekran-alintisiŞekil 3

İlk 3 adımın yapılmasının ardından solution explorer’da framework için gereken klasörler ve dosyalar şekilde 4’teki gibi bize sunulur.Şimdi bu klasör ve dosyaların bize hazır olarak sunulmasındaki amaçları açıklayalım.

ekran-alintisi5

Şekil 4

App_Data:Projemizde kullanacağımız veri dosyalarını barındırır.Bu veri dosyalarına örnek verecek olursak, xml, mdf, LocalDB dosyalarını söyleyebiliriz.

App_Start:Her yazılımın bir yaşam döngüsü vardır ve geliştirecek olduğumuz yazılım projesi çalışmaya başladığı anda çalışmasını istediğimiz kodlar yani daha derli toplu haliyle sınıflar bu klasörde bulunur.Örnek olarak AuthConfig.cs, BundleConfig.cs, FilterConfig.cs, RouteConfig.cs  gibi yapılandırma dosyalarını söyleyebiliriz.

Controller: Controller klasörü, controller için sınıf dosyalarını içerir. MVC, controller dosyla isimlerinin controller kelimesi ile sonlanmasını gerektirir.

Models:Model klasörüde isminden anlaşılacağı gibi model sınıflarını içerir.Bu sınıflar, geliştirecek olduğumuz yazılım için gereken veriyi barındırır, işler ve kullanıcıya iletir.

Views: Uygulama için gereken html dosyalarını içerir. Tipik olarak view dosyası, html ve C # veya VB.NET kodunu yazdığınız bir .cshtml dosyasıdır.Views klasörü, her controlleriçin ayrı bir klasör içerir. Örneğin, HomeController tarafından işlenecek olan tüm .cshtml dosyaları Views> Home klasöründe bulunur.Views klasörü altındaki shared klasörü, farklı controller’lar arasında paylaşılacak olan tüm view’leri içerir örneğin layout dosyları.

Global.asax:Global.asax, Application_BeginRequest, application_start, application_error, session_start, session_end gibi uygulama düzeyindeki olaylara yanıt olarak kod yazmamızı sağlar.

Packages.config:Packages.config dosyası, uygulamaya hangi paketleri ve sürümleri yüklediğinizi takip etmek için NuGet tarafından yönetilir.

Web.config:Web.config dosyası, uygulamamızın ayarlarını içerir.Örnek verecek olursak bir veritabanı bağlantısı sağladığımızda, kullanılacak olan veritabanına dair iletişim bilgileri, kısıtlamalar ya da izinler burada bulunur.

Genel bilgilerimizi verdikten sonra, projemiz için ilk gerçel adımı atalım ve Views klasörü altına Shared isimli bir klasör açalım ve bu klasör içerisine şekile 5’te gösterildiği gibi bir tane MVC5 layout Page dosyasını _Root ismiyle ekleriz ekleyelim.

adsiz1

Şekil 5

            Layout’ı sayfamıza ekledikten sonra Razor deyişinden ve ve Layout terimlerinden bahsedelim.Razor bir görüntüleme motorudur ve MVC 3 ile işleve girmiştir.Server tarafında çalışacak olan kodlarımın ayrımını @ karakteri ile yapmamıza olanak sağlar.Server ve client side kodların ayrımını yaptığımız içinse yazılımımız hız kazanır.Peki, tek satır değilde beş on satır kodu serve tarafında çalıştırmak istesek ne yapacaktık, o zamanda yardıma {} yani süslü parantezler koşar, @{} belirteciyle,kodlarımızı süslü parantezler arasına yazarız.Razor view engine bize html içerisine, ihtiyaç duyduğumuzda server side kod yazmamıza olanak verir.Razor view dosyaları .cshtml ya da vbhtml uzantılıdır.

Oluşturduğumuz _root.cshtml dosyasının genel görünümü  şekil 6’daki gibi olur.

ekran-alintisi78

Şekil 6

            Oluşan layout sayfası html kodlarından ve razor bildirimlerinden oluşuyor.buradaki @ViewBag ve @ RenderBody kod’larının ne ifade ettiklerini açıklayalım.ViewBagController’dan  view’e geçici verileri (modelde bulunmayan) aktarmak istediğinizde kullanılır.

Gelelim @RenderBody komutuna, contentViewHolder ile hemen hemen aynı işi yapar diyebiliriz.layoutPage olarak seçilen sayfaya view yükler.

Elementlerimizi, HTML5 ile geliştiriyoruz , dosyamızaki meta etiketi, sayfamızın responsive olmasını sağlamak için kullanılır.

Sıra geldi projemizin temel anlamda veritabanı bağlantısını sağlamaya.Bunun için veritabanı tasarımını yapmaya başlicaz.MSSQL management studio ortamında cilcommercev1 isimli bir veritabanı oluştururuz ve bunun ardından veritabanına sırasıyla, ihtiyaç duyduğumuz sayfaları ekleyeceğiz çünkü MVC yapısına uygun olarak projemizi modül modül geliştireceğiz.

Projemize başlangıç olarak Category tablosunu ekleriz.bu tabloda, ürünlerin kategorileri ağaç şeklinde bulunmaktadır.Bu ağaç gösterimi şekil 7’de görebilirsiniz.Tabloyu oluşturmak için kullanılan script kodlarını paylaşalım.

CREATE TABLE [dbo].[Category](

[id] [int] IDENTITY(1,1) NOT NULL,

[ParentId] [int] NULL,

[Name] [nvarchar](60) NULL,

[PictureId] [int] NULL CONSTRAINT [DF_Category_PictureId]  DEFAULT ((0)),

[DisplayOrder] [int] NULL CONSTRAINT [DF_Category_DisplayOrder]  DEFAULT ((1000)),

[isActive] [bit] NULL CONSTRAINT [DF_Category_isActive]  DEFAULT ((1)),

CONSTRAINT [PK_Category] PRIMARY KEY CLUSTERED

(   [id] ASC )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]) ON [PRIMARY]

 

 

ekran-alintisi9

Şekil 7

 

İlk dersimizde genel anlamda MVC nedir, Asp.NET MVC Framework nedir sorularının cevabı verildi.Asp.Net FrameWork ile bir proje visual studio ortamında nasıl oluşturulurun cevabını verdik.Projemiz için gereken ilk sayfayı ekledik ve sayfamız üzerinde gelen genel geçer bildirimlerin neler olduğundan ve tanımlarından, layout ve razor kavramından bahsettik.Projemizin Category sayfasının veritabanı kısmını oluşturmaya başladık.

 

Bir sonraki derste görüşmek üzere…

 

Hazırlayan: Nisanur bulut

 

 

Kaynakça :

http://www.tutorialsteacher.com/mvc/asp.net-mvc-tutorials

https://en.wikipedia.org/wiki/ASP.NET_MVC