Asp.Net Core ve MVC Pattern Kullanarak BookApp Projesi (Part 1 )

Merhaba arkadaşlar, bu yazımda Asp.Net Core ve MVC pattern ile bir projenin nasıl yazıldığını anlatmaya başlayacağım.

Asp.Net Core

MVC (Model View Controller) bir web programlama mimarisidir. Temel mantık, uygulamayı ayrı katmanlara ayırıp her katmanın kendine özgü görevlerini yerine getirmesidir. Böylece uygulama büyüdüğünde karmaşa olmuyor.

Uygulamanın en önemli görevini Controller katmanı yapmaktadır. Gelen istekleri karşılar ve ilgili yerlere yönlendirir. Veri tabanı ile doğrudan ilişkilidir. Veri tabanındaki bilgilerin paketlendiği kısım Model katmanıdır. Uygulama içinde veri taşır. View katmanı ise içi doldurulan modeli html bilgisine dönüştürür.

Bu projede derleyici olarak Visual Studio Code kullanacağım. dotnet’i bilgisayara indirip kurduktan sonra cmd ekranından versiyonun kontrol ediyorum. Bunun için;

dotnet --version

yazmam yeterli. Ben 5.0 versiyonunu kullandım. Github üzerinde ChooseBookApp isimli bir repository oluşturup bunu bilgisayarıma clone’ladım. Ardından oluşan klasörü VSCode ile açtım ve terminale

dotnet new mvc 

komutunu yazarak bir proje oluşturdum. Otomatik bir web sitesi oluştu, bu adımları takip ettikten sonra

dotnet watch run 

komutunu çalıştırıp localhost:5000 adresine giderseniz görebilirsiniz.

Visual Studio Code kullanırken gerekli bazı uzantılar var. Benim indirdiğim uzantılar aşağıdaki gibi, hemen yüklenmedikleri için biraz beklemek gerekli. Output ekranında Done yazması gerekli:

Extensions

Bu yapının oluşmasını sağlayan Controllers/HomeController.cs sayfasıdır. Sayfayı incelersek 3 adet IActionResult görürüz: Index, Privacy ve Error. Sitede 2 ayrı sayfa vardır ve dolayısıyla ActionResult’lar bu sayfaları gösterir. Index üzerinden incelemeye devam edersek, IActionResult, Index isimli View’ın içindeki Home klasörü içinden Index.cshtml sayfasının çalışmasını sağlar.

Web sitelerinde header, head ve footer kısmı statik, body kısmı dinamiktir. Statik olan kısım Shared içinde _Layout.cshtml sayfasında tutulur ve hiç değişmez.

Site içinde dolaşılabilmesi için _Layout.cshtml sayfasından link verilmesi gerekiyor. Yani, sitede home sayfasından Privacy yazısına tıklandığında

https://localhost:5001/privacy

adresine yönlendirilmesi lazım. cshtml sayfasında Home yazılı a etiketine href=”/”, Privacy yazılı olana ise href=”/privacy” yazarak bunu sağladım. Fakat siteye dönünce yine de bu linkin çalışmadığı görülmektedir. Çünkü çalışması için controller içinde de bazı değişiklikler olmalıdır. Bunun için HomeController’a gidip Privacy IActionResult bileşeni üzerine

[Route("/privacy")]

yazman gerekli. Siteye gidildiğinde Privacy’ye tıklarsak bu url’in çalıştığını görebiliriz. Daha sonra kullanacağımız bir yönlendirmedir.

Bunların ardından, bazı paketler indirmemiz gerekli. Paketlerin kontrolünü sağlamak için terminale

npm init --yes

yazıp package.json dosyası oluşturdum. Sonra ise

npm install bootstrap

ile bootstrap’in son versiyonunu yükledim. Böylece node_modules klasörü de oluştu.

Controller olarak sadece HomeController vardı, ben bir de BookController isimli bir class oluşturdum. Bu class’in isminin yanına :Controller yazdım,

alt + .

ile gerekli kütüphaneyi de eklemiş oldum. Daha sonra

ASP.NET Core Snippets

extension’ını indirdim, böylece controller içinde

mvc-core-action

yazarak yeni IResultAction’lar oluşturdum. Index, Create, Details, ve List isimlerini verdim. BookController, adminin ya da onaylı kullanıcının kullanacağı işlemler, HomeController ise normal kullanıcıların işlemleri olarak tasarladım.

HomeController içine Contact isimli bir IActionResult ekledim, ardından Views/Home/Contact cshtml dosyasını oluşturarak içine h1 etiketiyle Home/Contact yazdım, böylece hangi sayfada olduğumuzu bilebiliriz.

Ana sayfada Contact yazısı oluşturmak için aşağıdaki kodu _Layout içinde Privacy’nin altına ekledim:

<li class="nav-item">
<a class="nav-link text-dark" href="/contact">Contact</a>
</li>

HomeController’a tekrar giderek linkin çalışması için

[Route("/contact")]

ekledim.

Views içinde Book klasörü oluşturdum. Bunun içine Details, Index, List.cshtml dosyalarını yazıp içlerini Book/List şeklinde doldurdum.

Klasör yapısında wwwroot isimli bir klasör görünmektedir. Bu dosyanın içeriğinin dışarıya açılması için Startup.cs’de Configure içine

app.UseStaticFiles();

yazmamız gereklidir.

Daha sonra

using Microsoft.Extensions.FileProviders;
using System.IO;

ekledim ve Configure içinde UseStaticFiles altına aşağıdaki kodu yazarak node_modules dosyasını dışarıya açtım.

Verilerin tutulması amacıyla Model oluşturmak gerekli. Bunun iç in Models klasörüne yeni C# class oluşturdum ve Book ismi verdim. Daha sonra aşağıdaki bilgileri class içine ekledim:

public int Id { get; set; }
public string Name { get; set; }
public string Author { get; set; }
public string Description { get; set; }
public int Pages { get; set; }
public string ImageUrl { get; set; }

Ben bu model üzerinden çalışacağım, isterseniz kendi verilerinizi ekleyip çıkarabilirsiniz.

Models içine Repository class’ı oluşturarak bunu static tanımladım, böylece örneği oluşturulamaz oldu. Uygulamaya özel tek bir repository olduğunu gösterdi.

private static List<Book> _books = null;

ile bir nesne oluşturup null’a eşitledim. static Repository içinde nesneyi çağırdım ve yeni kitapları bilgileriyle verdim.

Books

Eklenen kitapları döndüren, yeni kitap ekleyen ve id’sine göre kitapları getiren 3 fonksiyon yazdım.

Diğer yazımda projeye devam edeceğim, okuduğunuz için teşekkürler.

Projenin github linki:

https://github.com/serapbaysal/ChooseBookApp