İster klasik ister modern yapıda web projesi oluşturun tüm web proelerinde başlangıçta bir anasayfa yer almalıdır. Bu uygulamada web programlama ve grafik canlandırma derslerine ait uygulamaların yer aldığı bir web projesine ait anasayfayı oluşturacağız. Bu işlemleri gerçekleştirirken Core Mvc kullanarak ağaç yapısından yararlanacağız.
Visual Studio 2022 programını açalım.
Yeni bir boş Core projesi oluşturalım. İsmini TemrinlerWeb olarak belirleyelim.
Temel ayarların yapıldığı program.cs dosyasını düzenleyelim.
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddControllerWithViews();
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>Uygulama Örnekleri</title>
</head>
<body>
</body>
</html>
Projeyi kaydedip çalıştıralım. Web sayfasının hatasız bir şekilde çalıştığına emin olalım. 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. Bütün web sayfalarında sabit olan yerleri ve sürekli tekrar eden kütüphaneleri ve modelleri saklayacağımız dosyaları oluşturalım.
Core mvc projelerinde her defasında tekrar eden yapıları bir sayfada tutup istenildiğinde çağırmanız yeterli olacaktır. Hadi şimdi bunu gerçekleştirelim. Tüm web sayfalarında kullanılacak bilgilerin ve yapıların saklandığı dosyayı belirtmek için view klasöründe _ViewStart isminde bir razor page sayfası oluşturmanız gerekir. Burada masterpage dediğimiz ana şablonun ismi belirtilir. Dosyamızı oluşturalım ve içeriğini yazalım.
@{
Layout = "_Sablon";
}
Projede kullanılacak model ve yardımcı elemanların her web sayfası eklendiğinde eklenmemesi için view klasöründe _ViewImports razor page dosyası oluşturulması gerekir. Şimdi bu dosyayı ekleyelim ve gerekli tanımlamaları yapalım.
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
Index dosyasının tamamını silelim ve aşağıdaki gibi düzenleyelim.
@{
ViewData["Title"] = "Ana Sayfa";
}
_Sablon ana sayfasının oluşturulması için view klasörü altında Shared klasörü oluşturalım. Bu klasör altına _Sablon razor page sayfasını oluşturalım. Sayfanın tasarımını aşağıdaki gibi yapalım.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; scale=1.0" />
<title>@ViewData["Title"] - Uygulama Örnekleri</title>
</head>
<body>
<div>
@RenderBody()
</div>
</body>
</html>
Projeyi kaydedip çalıştıralım. Proje başlığına dikkat edin. Ana Sayfa kelimesi Index sayfasından gelmektedir. 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. _Sablon view dosyasına bootstrap ve jquery kütüphanelerini dahil edelim.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewData["Title"] - Uygulama Örnekleri</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>
<div>
@RenderBody()
</div>
</body>
</html>
Projeyi çalıştıralım. Kütüphanelerin projeye hatasız bir şekilde eklendiğinden emin olalım. Gördüğünüz gibi bootstrap ve jquery kütüphanelerini burada tanımlıyoruz. ViewData ile başlığı burada görüntülüyoruz. Burada en önemli komut @RenderBody komutudur. Bu _Sablon sayfasını kullanan diğer web sayfalarının içerikleri bu komut sayesinde görüntülenmektedir. Şimdi Index sayfasını aşağıdaki gibi düzenleyelim.
_Sablon sayfasında bir header bölümü oluşturalım. "Web Programlama Uygulamaları" başlığı oluşturalım. Arka plan rengi siyah, metin rengi beyaz, ekranın ortasında olmasını sağlayalım. Padding değerini 3 yaparak 4 taraftan boşluklar verelim.
<header class="bg-dark text-white p-3">
<h1 class="text-center">Web Programlama ve Grafik Canlandırma Uygulamaları</h1>
</header>
_Sablon sayfasında içerik işlemleri için article bölümünü oluşturalım. Sol tarafta menüler sağ tarafta ise bu menüleri referans alacak web sayfaları görüntülenecektir.
<article class="container mt-4">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-9">
@RenderBody()
</div>
</div>
</article>
Sol tarafta acordion yapıda menü oluşturacağız. Menü başlığını Temrinler olarak verelim.
<nav class="nav flex-column bg-light p-3" style="height: 100vh;">
<h5>Temrinler</h5>
<div class="accordion" id="treeAccordion">
</div>
</nav>
Şimdi Web Programlama ve Grafik Canlandırma ile ilgili uygulama başlıklarını yazalım. Biz şimdilik 3 uygulama için işlem yapacağız.
<div class="accordion-item">
<h2 class="accordion-header" id="headingWeb">
<button class="accordion-button" type="button"
data-bs-toggle="collapse" data-bs-target="#collapseWeb"
aria-expanded="true" aria-controls="collapseWeb">
Web Programlama
</button>
</h2>
<div id="collapseWeb" class="accordion-collapse collapse show"
aria-labelledby="headingWeb" data-bs-parent="#treeAccordion">
<div class="accordion-body">
<ul class="list-group">
<li class="list-group-item">Uygulama1</li>
<li class="list-group-item">Uygulama2</li>
<li class="list-group-item">Uygulama3</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingWeb">
<button class="accordion-button" type="button"
data-bs-toggle="collapse" data-bs-target="#collapseGrafik"
aria-expanded="true" aria-controls="collapseGrafik">
Grafik Canlandırma
</button>
</h2>
<div id="collapseGrafik" class="accordion-collapse collapse"
aria-labelledby="headingGrafik" data-bs-parent="#treeAccordion">
<div class="accordion-body">
<ul class="list-group">
<li class="list-group-item">Uygulama1</li>
<li class="list-group-item">Uygulama2</li>
<li class="list-group-item">Uygulama3</li>
</ul>
</div>
</div>
</div>
Uygulamayı çalıştıralım. Sol tarafta menüleri görebiliriz. _Sablon sayfasında footer bölümünü yapalım.
<footer class="bg-dark text-white text-center p-3 mt-4">
<p>© 2025 Tüm Hakları Saklıdır.</p>
</footer>
_Sablon tarafında gerekli işlemleri gerçekleştirdik. Sıra geldi bu sayfayı referans alan Index sayfasını düzenlemeye.
@{
ViewData["Title"] = "Ana Sayfa";
}
<div class="container mt-5">
<h2 class="text-center mb-4">Web Ve Grafik Uygulamaları</h2>
<div class="row">
<div class="col-md-6">
<div class="card mb-4">
<div class="card-body">
<h3 class="card-title">Web Programlama</h3>
<p class="card-text">
web programlama, internet üzerinden etkileşimi uyugulamaları ve web siteleri geliştirmek için kullanılan bir süreçtir.
HTML,CSS,JAVASCRİPT gibi dillerle birlikte
ASP.NET gibi framework dinamik içerikler olusturmayı ve kullanıcıllara etkileşim bullunmayı saglar.
</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card mb-4">
<div class="card-body">
<h3 class="card-title">Grafik Canlandırma</h3>
<p class="card-text">
Grafik canlandırma, verilerin görsel olarak
sunulmasını ve anlaşılmasını kolaylaştıran bir tekniktir.
Çeşitli grafik ve görselleştirme araçları
kullanılarak, veriler etkileyici ve anlaşılır biçimde temsil edilir.
Bu alan, özellikle veri analitiği ve sunumları
için önemlidir.
</p>
</div>
</div>
</div>
</div>
</div>
Uygulamayı çalıştıralım. Web sayfasının düzgün bir şekilde çalıştığından emin olalım.