Web sayfalarında tekrar eden işlemlerin kontrolü değişik yöntemlerle gerçekleştirilir. Bunların içerisinde en yaygın olarak kullanılan yöntem sayaç yöntemidir. Tekrar eden işlemin sayısını kontrol etmek için global bir değişken kullanılır. Bu uygulamada 10 sayının girişi yapılacaktır.
Şimdi işlemleri sırayla yapmaya çalışalım.
Visual Studio 2022 programını açalım.
Yeni bir boş Core Mvc projesi oluşturalım. İsmini DizilerTerm 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>Dizi İşlemleri</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.
@using DizilerTerm
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
Index dosyasının tamamını silelim ve aşağıdaki gibi düzenleyelim.
@{
ViewData["Title"] = "Üçe Bölünenler";
}
_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 layout 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"] - Diziler</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 charset="utf-8" />
<meta name="viewport" content="width=device-width; scale=1.0" />
<title>@ViewData["Title"] - Diziler</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. Peki jquery ya da javascript komutlarının view tarafında çalıştırılabilmesi için ne yapacağız. Bunun için _Sablon dosyasının altına aşağıdaki kodu eklememiz gerekir.
@await RenderSectionAsync("Scripts", required: false)
Şimdi Index sayfasının başlığını belirleyelim.
@{
ViewData["Title"] = "Dizi İşlemleri";
}
<div class="jumbotron text-center">
<h3>
Bölme İşlemi Uygulaması
</h3>
<p>
Girilen 10 sayıdan üçe bölünen en küçük sayıyı bulma işlemi
</p>
</div>
Projeyi kaydedip çalıştıralım. Web sayfasının hatasız bir şekilde ekrana geldiğini görürsünüz. Web sayfasının içerik bölümü eklenir.
<div class="container">
<div class="col-sm-6" style="margin: auto">
</div>
</div>
Öncelikle bir sayının girilmesi için gerekli tasarım yapılır.
|
Bölünebilme Kuralları
|
|
Bir Sayı Giriniz
|
|
|
|
|
|
|
Girilen Sayılar
|
|
Tasarıma ait table nesnesi ve gerekli etiketler eklenir.
<table class="table table-bordered" style="width: 100%">
<caption class="text-center alert-info" style="caption-side: top">
Bölünebilme Kuralları
</caption>
<tbody>
<tr>
<td>
<label for="isim">
Bir Sayı Giriniz:
</label>
<input type="text" class="form-control" id="txtA"
autofocus />
</td>
</tr>
<tr>
<td class="text-center">
<button id="btnHesapla" type="button"
class="btn btn-info" onclick="hesapla();">
Hesapla
</button>
</td>
</tr>
<tr>
<td>
<label id="sonuc">
</label>
</td>
</tr>
</tbody>
</table>
View tarafında jquery kodlarını yazmak için aşağıdaki kod bloğunu sayfanın altında tanımlamamız gerekir.
@section Scripts {
}
Öncelikle girilen bir sayının görüntülenmesi için btnHesapla butonuna ait onclick="hesapla();" satırı tanımlanır. Daha sonra hesapla() fonksiyonu index dosyasında alt tarafa yazılır.
<script>
var a = 0;
function hesapla() {
a = parseInt($("#txtA").val());
$("#sonuc").html(a);
$("#txtA").focus();
};
</script>
Şimdi sıra geldi 10 sayının girilmesi için gerekli işlemlerin yapılmasına. Öncelikle <label for="isim">Bir Sayı Giriniz:</label> satırında yer alan "Bir Sayı Giriniz" mesajı yerine "1. sayıyı giriniz :", "2. sayıyı giriniz :", "3. sayıyı giriniz :",... mesajı nasıl tanımlanır. O işlemi yapmaya çalışalım. Label etiketine bir ID değeri verelim. ID olarak "mesaj" verilebilir.
<label for="isim" id="mesaj">
</label>
Web sayfası ilk çalıştırıldığında "1. sayıyı giriniz :" mesajı yer almalıdır. Bunun için global olarak $s değişkeni tanımlayalım ve ilk değerini 1 olarak verelim. Gerekli kodları $() fonksiyonu arasına yazalım. Kodlar aşağıdaki gibi olacaktır.
var s = 1;
$(function () {
$("#mesaj").html(s + ". sayıyı giriniz :");
});
Sayaç değerinin 10 oluncaya kadar birer birer arttırılması gerekir. Ancak 11 olduğunda işlemin durması gerekir. Bu işlemi gerçekleştirmek için hesapla() fonksiyonuna aşağıdaki kodları yazmalıyız.
if (s >= 10) {
} else {
s++;
$("#mesaj").html(s + ". sayıyı giriniz :");
}
Sayaç 10 olduktan sonra hala butona basıyoruz. Butona basma işlemini engelleyelim ve programdan çıkalım. if() satırını aşağıdaki gibi düzenleyiniz.
if (s >= 10) {
$("#btnHesapla").attr("disabled", "disabled");
return;
} else {
s++;
$("#mesaj").html(s + ". sayıyı giriniz :");
}
Sayaç işlemimiz tamamlandığına göre bizden istenen işlemi yapmaya başlayabiliriz. Girilen sayıların üçe bölünüp bölünmediğini kontrol etmemiz isteniyor bizden. Bununla beraber üçe bölünen sayılardan en küçüğünü bulmamız isteniyor. Bir sayının üçe bölünebilmesi için kalanın sıfır olması gerekir. Sayının üçe bölünmesi için (a % 3 == 0) şart cümlesinin if cümlesiyle beraber yazılması gerekir.
Öncelikle bölünebilen sayıların tutulacağı bir dizi değişken tanımlanmalıdır. İsmini bolunen olarak verelim. Bolunen sayıların sıra numarasını belirlemek için sira isminde bir değişken tanımlayalım. İlk değerini 0 olarak vermeliyiz. Değişken tanımlamaları aşağıdaki gibi olacaktır.
var bolunen = [];
var sira = 0;
Şart cümlesi ve değişkenler tanımlandıktan sonra hesapla() fonksiyonunda işlemin yapılacağı yer belirlenmelidir. Girilen sayının sayısının kontrolünün yapıldığı if() cümleciğinden sonra yapılması gereken if() cümleciği tanımlanmalıdır.
Girilen sayı üçe bölünebiliyorsa, bolunen dizisine sira numarasıyla birlikte aktarılmalı ve sira değişkeni bir attırılmalıdır. if() cümleciği aşağıdaki gibi olmalıdır.
if (a % 3 == 0) {
bolunen[sira] = a;
sira++;
}
Girilen bu değerlerin görüntülenmesi için aşağıdaki satırları kullanabilirsiniz.
var sonuc = "Üçe bölünen sayılar:<br>";
sonuc += bolunen.join(", ");
sonuc += "<br>En küçük olanı:<br>";
sonuc += Math.min(...bolunen);
$("#sonuc").html(sonuc);
$("#txtA").val("");
$("#txtA").focus();
Girilen sayılardan onuncusu üçe bölündüğü zaman bolunen değişmemektedir. Bu sorunu çözmek için sayaç kontrolü cümlesi aşağıdaki gibi olmalıdır.
if (s >= 10) {
if (a % 3 == 0) {
bolunen[sira] = a;
}
sonuc = "Üçe bölünen sayılar:<br>";
sonuc += bolunen.join(", ");
sonuc += "<br>En küçük olanı:<br>";
sonuc += Math.min(...bolunen);
$("#sonuc").html(sonuc);
$("#btnHesapla").attr("disabled", "disabled");
return;
} else {
s++;
$("#mesaj").html(s + ". sayıyı giriniz :");
}
Projeyi kaydedip çalıştıralım. İşlemlerin doğru bir şekilde gerçekleştiğini görürsünüz.