.Net Core Mvc İle İlk Uygulamamızı Geliştirme

Herkese merhaba.. Bugün .Net Core’un ne olduğundan, Mvc yapısından ve .Net Core Mvc ile basit bir uygulamanın geliştirilmesinden bahsedeceğim. Giriş yazısını fazla uzatmadan yazıma başlamak istiyorum.

.Net Core Nedir ?

.Net Core en kısa tanımıyla 27 Haziran 2016 tarihinde Microsoft tarafından piyasaya sürülen açık kaynak kodlu framework’tür. .Net Core öncesinde .Net Framework ile geliştirilen uygulamaları Windows işletim sistemi dışarısında yazmak ve çalıştırmak mümkün değildi. Fakat Microsoft .Net Core ile birlikte bu sorunu ortadan kaldırdı. Cross Platform olması sayesinde şimdi .Net Core ile geliştirilen uygulamaları Linux veya MacOs gibi diğer işletim sistemlerinde geliştirebiliyor veya çalıştırabiliyoruz.

Fakat .Net Core’un tek değişen özelliği Cross Platform olması değildi. Önceleri performans sorunları nedeniyle çoğu kez geliştiricilerin eleştirilere maruz kalan .Net Framework’e göre inanılmaz bir performans iyileştirmesi yaşanmıştı.

Ayrıca .Net Core yeni bir proje oluşturma, proje çalıştırma gibi işlemleri komut ekranı aracılığıyla yapmamızı sağlayan Command Line Tools özelliğini de getirdi.

Biraz önce bahsettiğim Cross Platform olmasıyla beraber önceleri Visual Studio’ya olan bağımlılığımız artık ortadan kalktı. Visual Studio Code gibi oldukça esnek olan bir geliştirme ortamında artık projeleri geliştirebiliyoruz.

Sizde .Net Core ile web, masaüstü, servis veya kütüphane uygulamalarınızı geliştirebilirsiniz.

Mvc Yapısı Nedir ?

Model View Controller (MVC) uygulama geliştirmede kullanılan mimari bir desendir. 1979 yılından bu yana yazılım dünyasında yer almaktadır. Mvc kelimesi ilk duyulduğu zaman akla hemen Microsoft gelse de Mvc mimarisi birçok farklı programlama dilinde ve framework’de kullanılmaktadır.

Model veri ile ilgili dosyaların, sınıfların bulunduğu katmandır.

View kullanıcının gördüğü arayüzü içeren katmandır. Bir web uygulamasında html,css buna örnek verilebilir.

Controller ise kullanıcının isteğine göre model ve view arası etkileşim kullanan yapıdır.

Genel olarak bir örnek vermek gerekirse bir okulu düşünebiliriz. Bu okulun öğrencilerini listeleyen bir uygulama geliştirdiğimizi düşünelim. Öncelikle model klasörü altında ogrenciler adında bir sınıf oluştururuz. Burada öğrenci adı, soyadı, sınıfı, yaşı gibi alanlar bulunur. Controller tarafındaki kodumuzda ise listele fonksiyonumuz bulunmaktadır. Veritabanından öğrencilere çekmek ve bir listeye atıp bunu view tarafına göndermek burada controllerin işidir. Son olarak view tarafında ise gelen bilgiyi bir döngüye alırız ve listeyi kullanıcıya gösteririz.

Mvc yapısı yazılımda işleri kolaylaştırması ve kargaşayı önlemesi bakımından günümüzde oldukça fazla kullanan bir yapıdır.

.Net Core İlk Uygulamamız

Buraya kadar işin teorik boyutuyla ilgilendik. Gelin şimdi de küçük bir uygulama oluşturalım. Senaryomuz bir üst bölümde de bahsettiğimiz okul olsun. Okulun internet sitesi iki parçadan oluşacak. İlk kısım tanıtım sayfası olacak anasayfa, ikinci kısım ise öğrencilerin listelendiği sayfa.

Ben geliştirme ortamı olarak Visual Studio’yu değil Visual Studio Code’u tercih edeceğim. Bunun için FirstApp adında boş bir klasör oluşturup Visual Studio Code’da bunu açtım. Üstteki Terminal sekmesinden New Terminal seçeneğine tıklayarak komut ekranını açalım.

dotnet new –h komutu bize hangi projeleri hangi komutlarla oluşturacağımız konusunda yardımcı olan bir komut. Bu komutu çalıştırdığımız zaman seçeneklerimizi görüyoruz. Biz bir mvc projesi oluşturacak olmamıza rağmen burada empty seçeneğini seçeceğiz. Böyle yapmamın nedeni ilk projemiz olduğu için adım adım ilerlemek olaylara tam bir şekilde hakim olmak.

Şimdi boş bir core projesi oluşturmak için dotnet new web komutunu çalıştıralım ve uygulamanın oluşturulmasını bekleyelim.

Proje oluşturulduktan sonra Startup.cs dosyasını açarak aşağıdaki şekilde kodları değiştirelim.

Öncelikle Configure Services metodu içerisine services.AddMvc() ekleyerek mvc projesi olduğunu bildirdik. Ardından app.UseStaticFiles() ile wwwroot klasörü altındaki css, js, resim gibi statik dosyaları kullanacağımızı (Bu aşamada kullanmasak bile projelerimizin büyük bölümünde kullandığımız için) bildirdik. En altta ise app.UseStatusCodePages() ile karşılaştığımız hataların hata kodlarını dönmesi gerektiğini projeye bildirdik.

Buradaki en önemli bölüm ise app.UseMvc() bölümü. Buradaki Controller=Anasayfa yazan kısım default olarak projenin Anasayfa adlı Controller’den başlayacağı action ise o Controller’de action ismini bildiriyor. Son kısımda ise id? İle ise ek olarak id parametresi alabilir ama almasada program çalışır anlamında kullanılmaktadır.

Şimdi projemiz içerisinde Controllers,Model Ve Views klasörleri oluşturalım. Controllers içerisine AnasayfaController adında bir sınıf oluşturalım. Sondaki Controller bize Anasayfa’nın bir Controller olduğu anlatmaktadır. Oluşturulan Controller için Views içerisine Anasayfa adında bir klasör ve içerisine Index.cshtml ile Listele.cshtml oluşturalım. Son olarak Models içerisine Ogrenciler.cs adında bir sınıf oluşturalım. Son olarak dosya klasör yapısı aşağıdaki gibi olacak.

Şimdi Models İçerisindeki Ogrenciler’i açalım. Öğrencilerin numarası, adı, soyadı ve sınıfı alanlarını burada tanımlıyoruz. Şu aşamada herhangi bir veritabanı kullanmayacağız. Fakat veritabanı kullanacak olsaydık yazacağımız sınıf yine aynı olacaktı. Özellikle Entity Framework gibi ORM araçları kullanırsak veritabanındaki tabloları bizim için sınıfa dönüştüren yapılarda mevcut. Biz bu uygulamada basit bir sınıf oluşturalım. En altta ise içerisine 4 farklı parametre alan constructor oluşturup parametre olarak sayısal numara ve sınıf, yazısal ifade olaraksa ad ve soyad alanları oluşturalım. Son olarak constructor içerisine alınan parametreleri yukarıda oluşturduğumuz verilere eşitleyelim. Görüntümüz son olarak aşağıdaki gibi olacak.

Şimdi AnasayfaController’e gelerek buradaki işlemlerimizi halledelim. Öncelikle oluşturacak olduğumuz iki sayfa için iki IActionResult oluşturalım. Birincisi anasayfanın default sayfası Index, ikincisi ise öğrencilerin listelendiği Listele.

Action Result’ların üzerlerinde özellikle belirtmediğimiz sürece get olarak değerlendirilirler. Eğer butona tıkladığımız an veritabanına ekleme işlemi gerçekleştirecek post metodu yazdıysak action result üzerine [HttpPost] eklememiz gerekir.

Index() Action Result’da herhangi veri göndermediğimiz için sadece içerisinde return View() kodu bulunmaktadır.

Listele() Action Result’da ise öncelikle beş farklı öğrenci oluşturalım. Ardından tipi öğrenciler olan boş bir liste oluşturup bu öğrencileri bu listeye ekleyelim. Bu listenin View tarafına gönderilmesi için return View() içerisine listeyi yollayalım. Controller tarafında kodlar aşağıdaki gibi olacak.

Burada veritabanı kullanmadığımız için liste oluşturduk. Eğer veritabanı kullanılıyor olsaydı aynı şekilde veriler veritabanından çekilecek ve return View() içerisinde View tarafına gönderilecekti.

Artık sıra View tarafını oluşturmakta. Daha önce View içerisindeki Anasayfa içerisindeki Index.cshtml sayfasına kodları yazalım. Bunun için oldukça fazla kullanılan Bootstrap’ı kullanalım. Aşağıdaki adreste bulunan başlangıç tasarımı kopyalayalım ve Index.cshtml içerisine yapıştıralım. Bu sayfayı basit olarak ben düzenledim. Dinamik olarak controller tarafından veri gelmediği için sadece burası tanıtım amaçlı statik bir sayfa olarak duracak.

Şimdi Listele.cshtml sayfasına geçelim. Bootstrap başlangıç tasarımını yine kopyalayalım. Burada projenin büyümesiyle kod karmaşasının önüne geçmek için layout kavramını kullanabilirdik. Fakat şu aşamada giriş uygulaması geliştirdiğimiz için gerek görmedim.

Controller’den gelen veriyi View tarafında yakalamak için modeli View’de ki sayfamıza eklememiz gerekli. Bu yüzden Listele.cshtml dosyasının en üstüne @model IEnumerable<FirstApp.Models.Ogrenciler> kodunu ekleyelim. Veri liste şeklinde geldiği için IEnumerable tipinde yazdık. Eğer ekranda liste olarak değilde tek bir veri görüntüleyecek olsaydık(Örnek olarak bir ürünün detay sayfası gibi) ienumerable yazmamıza gerek yoktu.

Body içerisine foreach ile bir döngü oluşturarak gelen veriyi ekrana yazdıralım. Burada daha güzel bir görüntü elde etmek için Bootstrap’ın Card componentini kullandım. Sonuç olarak bütün kod aşağıdaki gibi olacak.

Yazacağımız kodları tamamladık artık projemiz çalıştırılmaya hazır. Projeyi çalıştırmak için terminale gelerek dotnet run yazarak projeyi ayağa kaldıralım. localhost:5000 portunda projemiz çalışıyor olacak.

Son olarak ekran görüntüleri sitemizin aşağıdaki gibi olacak.

Özet Olarak

Bu yazıda .Net Core nedir, .Net Core ile gelen yenilikler, Mvc yapısı ve .Net Core Mvc ile basit bir uygulama geliştirmekten bahsettik.

Uygulamada ise Controller tarafında ögrenciler listesi oluşturup bunu view tarafına gönderip listeledik.

Yaptığımız uygulama küçük bir uygulama olsa da temel kavramları içeren güzel bir uygulama oldu.

Sonraki yazılarda görüşmek üzere kendinize iyi bakın…