Yeni bir boş Core projesi oluşturalım. İsmini PersonelWeb olarak belirleyelim.
Temel ayarların yapıldığı program.cs dosyasını düzenleyelim.
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddMvc();
var app = builder.Build();
app.UseDefaultFiles();
app.UseStaticFiles();
app.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}"
);
app.Run();
Projeyi çalıştıralım. Controller bulunamadığı için hata verecektir. Öncelikle MVC projesi için gerekli olan klasörleri oluşturalım. Projemizi çalıştıralım. Controllers panelinde dosya olmadığı için hata verecektir.
Şimdi Controllers klasörü içine HomeController dosyasını oluşturalım. Aşağıdaki gibi bir action metodu oluşturulacaktır. Bu metod Index() isimli view dosyasını döndürecektir.
public IActionResult Index()
{
return View();
}
Break point atalım. Projeyi çalıştıralım. Index() isimli metod çalıştırılacak ancak bu dosya Views klasöründe olmadığı için hata verecektir. Şimdi Views klasörü altında Home klasörünü, bunun altında Index dosyasını oluşturalım. Bu işlemi gerçekleştirmek için şu yolu takip edelim. HomeController sayfasında Index() metodunun içindeyken farenin sağ tuşuna basalım. Ekrana gelen içerik menüsünden Add View komutunu çalıştıralım. Çıkan form sayfasında Razor View seçeneğini seçelim ve Add butonuna basalım. Gelen ekranda Use a layout page onay kutusunu kaldıralım. Add diyerek işlemi tamamlayalım. Bu yöntemi kullanarak Views klasöründe hem Home isminde bir klasör oluşturacağız hem de view sayfası html kodlarının tamamını gösterir şekilde ekrana gelecektir.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Personel Bilgileri</title>
</head>
<body>
</body>
</html>
Burada Layout kısmına dikkat ediniz. Biz Use a layout page onay kutusunu iptal ettiğimiz için null döndü. Ancak projemizde bir tasarım sayfası olacak ve bu sayfayı burada tanımlayacağız. Neyse biz projeyi çalıştıralım. Proje hatasız bir şekilde çalıştırılır. Projede bootstrap ve jquery kütüphanelerini yüklemek için wwwroot klasörünü ekleyelim. Projeye bootstrap eklemek için proje isminin üzerinde farenin sağ tuşuna basalım. Ekrana gelen içerik menüsünden Add diyelim. Burada yer alan komutlardan Client-Side Library komutunu çalıştıralım. Ekrana gelen form sayfasında library kutusuna bootstrap yazalım. Install diyerek kurulum işlemini tamamlayalım. Aynı komutu kullanarak projeye jquery kütüphanesini de ekleyelim. Index view dosyasına bootstrap ve jquery kütüphanelerini dahil edelim.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Personel Bilgileri</title>
<link href="~/lib/bootstrap/css/bootstrap.min.css"
rel="stylesheet" />
<script src="~/lib/jquery/jquery.min.js"></script>
<script src="~/lib/bootstrap/js/bootstrap.min.js">
</script>
</head>
<body>
</body>
</html>
Projeyi çalıştıralım. Kütüphanelerin projeye hatasız bir şekilde eklendiğinden emin olalım. Öncelikle personele ait gerekli bilgilerin tutulacağı Models tasarımını yapalım. Amacımız oluşturduğumuz modele ait tüm özellikleri hem view hem de controller tarafında kullanabilmek. Şimdi Models klasörü altına Personel isminde bir class oluşturalım. Dosyanın içeriği aşağıdaki gibi olacaktır.
public class Personel
{
[Key]
public int PersonelNo { get; set; }
public string? Ad { get; set; }
public string? Soyad { get; set; }
public string? Adres { get; set; }
public decimal Maas { get; set; }
public string? Resim { get; set; }
}
Burada [Key] bildirisi PersonelNo isimli değişkenin birincil ve benzersiz bir anahtar olduğunu belirtmek için kullanılmaktadır. Eğer değişken ismi olarak Id kullansaydık bu bildiriyi kullanmamıza gerek kalmazdı. Bu arada decimal veri tipi ise float gibi ondalıklı sayıları kullanmamızı ifade eder. Maaş bilgisi için en uygun veri tipi decimal olduğu için bunu kullandık. Şimdi bu kalıbı dikkate alarak sanal veri tabanına ait bilgileri girelim. Genellikle bu işlemlerin yapılabilmesi için projeye Data isminde bir klasör eklenir ve bu klasör altında işlemler gerçekleştirilir. Bizde öyle yapalım. Projeye Data isminde bir klasör ekleyelim. Bu klasör içine SanalVeriTabani isminde bir class dosyası ekleyelim. Dosyanın içeriği aşağıdaki gibi olacaktır.
public class SanalVeritabani
{
public List<Personel> Personeller = new List<Personel>(){
new Personel{PersonelNo=50, Ad="Ahmet",
Soyad="ÇOKÇALIŞIR", Adres="Adana",
Maas=14000, Resim="ahmet.jpg"},
new Personel {PersonelNo = 100, Ad = "Ayşe",
Soyad = "İŞYAPAR", Adres="Adana",
Maas=12000,Resim = "ayse.jpg"},
new Personel {PersonelNo = 1006, Ad = "Mehmet",
Soyad = "HİÇDURMAZ", Adres="Adana",
Maas=14000,Resim = "mehmet.jpg"},
};
}
Burada personele ait resimler olacak. Personele ait resimleri wwwroot klasörü altında img/personel klasöründe saklayalım. Bunun için wwwroot altında img, onun altına personel klasörünü ekleyelim. Personele ait resimleri buraya kopyalayalım. Personele ait sanal bilgileri Index dosyasında göstermek için öncelikle sanal veri tabanını projeye dahil etmeniz gerekir. Bunun için program.cs dosyasını şöyle düzenlemelisiniz.
using PersonelWeb.Data;
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddMvc();
builder.Services.AddSingleton<SanalVeritabani>();
var app = builder.Build();
app.UseDefaultFiles();
app.UseStaticFiles();
app.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}"
);
app.Run();
Sanal veri tabanını projeye ekledik. Projede hangi web sayfasında bu bilgileri kullanacaksanız ilgili web sayfasına da sanal veri tabanını eklemeniz gerekir. Biz HomeController tarafında Index dosyasını çağırmıştık. Öncelikle controller tarafında veri tabanını çağırmamız gerekir. Controller sayfasını aşağıdaki gibi düzenleyelim.
private readonly SanalVeritabani _context;
public HomeController(SanalVeritabani context)
{
_context = context;
}
public IActionResult Index()
{
return View(model: _context.Personeller);
}
Artık personele ait bilgileri Index dosyasında göstereviliriz.
@model List<PersonelWeb.Models.Personel>
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Personel Bilgileri</title>
<link href="~/lib/bootstrap/css/bootstrap.min.css"
rel="stylesheet" />
<script src="~/lib/jquery/jquery.min.js"></script>
<script src="~/lib/bootstrap/js/bootstrap.min.js">
</script>
</head>
<body>
<h1>Personel Listesi</h1>
<table class="table table-striped">
<thead>
<tr>
<th>Personel No</th>
<th>Ad</th>
<th>Soyad</th>
<th>Maaş</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>@item.PersonelNo</td>
<td>@item.Ad</td>
<td>@item.Soyad</td>
<td>@item.Maas</td>
</tr>
}
</tbody>
</table>
</body>
</html>
Projeyi kaydedip çalıştıralım. Personele ait bilgilerin web sayfasında listelendiğini görürsünüz. Projede kullanılan tasarım dosyalarını buradan indirebilirsiniz.