|
Alış verişlerde müşterilerin en çok istediği özellik taksit ve taksit sayısının çokluğudur. Bu uygulamamızda girilen fiyatın belirtilen taksitlere ayrılması işlemini göreceğiz. Bu uygulama ile neler öğreneceğiz.
Yeni bir boş Core web projesi oluşturma
Projeyi MVC haline dönüştürme
Controllers ekleme
Views ekleme
Models oluşturma
Nesnelerin özelliklerini belirleme
Web sayfasında Razor kod yazma
Projeyi çalıştırma
Karar kontrol deyimini kullanma
Şimdi uygulamayı yapmaya başlayalım.
Adım 1: Öncelikle web sayfasının tasarımını gerçekleştirmeliyiz. Bunun için paint programını kullanabiliriz.
Adım 2: Visual Studio programını açınız. Bunun için devenv komutunu kullanabilirsiniz.
Adım 3: Create a new project diyerek yeni bir proje oluşturunuz. Dil olarak c#, platform olarak All platforms, ortam olarak Web seçiniz. Ekrana gelen şablonlardan Asp.Net Core Empty seçiniz.
Adım 4: Proje ismini KasaIslemleriCoreMvc olarak belirleyiniz. FrameWork olarak 8.0 kalabilir. Configure for Https onay kutusu işaretini kaldırınız. Create diyerek işlemi tamamlayınız. Böylece boş bir Core projesi oluşturmuş olduk. Şimdi projeyi çalıştıralım. Web sayfasında "Hello World" mesajını görürsünüz. Projede herhangi bir web sayfası olmamasına rağmen bu mesaj nereden geldi. Eğer bu mesajı tarayıcıda görebiliyorsanız projenin hatasız bir şekilde oluştuğunu söyleyebiliriz.
Adım 5: Sıra geldi projede MVC platformlarını kurma işlemini yapmaya. Öncelikle program.cs isimli dosyada projenin Mvc projesi olduğunu belirtelim.
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddControllersWithViews();
var app = builder.Build();
app.UseDefaultFiles();
app.UseStaticFiles();
app.MapControllerRoute(
name: "default",
pattern: "{Controller=Home}/{Action=Index}"
);
app.Run();
Adım 6: Daha sonra projeye M harfini temsil eden Models, V harfini temsil eden Views, C harfini temsil eden Controllers klasörlerini ekleyelim. Web sayfalarında kullanılacak css, resim, animasyon gibi işlemlerin saklanacağı wwwroot klasörünü de eklemeyi unutmayalım.
Adım 7: Controllers klasörü içine HomeController isminde bir controller dosyası ekleyelim. Dosyamızın içeriği aşağıdaki gibi olacaktır.
using Microsoft.AspNetCore.Mvc;
namespace KasaIslemleriCoreMvc.Comtrollers
{
public class HomeController : Controller
{
public IActionResult Index()
{
return View();
}
}
}
Adım 5: Projeyi kaydedip çalıştıralım. Controller dosyasının çağırdığı View dosyası bulunamadığı için proje hata verecektir. Şimdi View dosyasını oluşturalım. Bunun için IActionResult metodu içinde farenin sağ tuşuna basalım. Ekrana gelen içerik menüsünden Add View diyelim. Buradan Razor View Empty seçelim. Add diyelim. Dosya ismi olarak Index.cshtml verilecektir. Değiştirmeden Add diyelim. Web sayfasını düzenleyelim. Sayfa aşağıdaki gibi olacaktır.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tahsilat İşlemleri</title>
</head>
<body>
</body>
</html>
Adım 6: Web sayfasına Bootstrap ve jquery kütüphanelerini dahil edip gerekli olan linkleri web sayfasının head etiketi arasına ekleyelim. Sayfanın yapısı aşağıdaki gibi olacaktır.
<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>
Adım 7: Şimdi tasarıma uygun nesneleri yerleştirelim. Öncelikle formun yatay olarak hizalanmasını, üstten belli bir boşluk bırakarak oluşturulmasını sağlayalım.
<div class="container">
<div class="row justify-content-center mt-5">
</div>
</div>
Adım 8: Formun genişliğini kullanılan cihazların genişliğine göre ayarlayalım.
<div class="col-lg-6 col-md-9 col-sm-12">
</div>
Adım 9: Forma ait başlığı belirleyelim.
<div class="p-3 bg-primary text-white rounded mb-4">
<h2>Kasa</h2>
</div>
Adım 10: Web sayfasından bilgileri post metpduyla sunucuya aktaracak form etiketini tanımlayalım.
<form method="post" action="@Url.Action("OdemeYap", "Home")">
</form>
Adım 11: Kullanıcının toplam tutarı girmesi için gerekli olan metin kutusunu tanımlayalım.
<div class="mb-3">
<label for="txtFiyat" class="form-label">Toplam Tutar</label>
<input type="number" class="form-control" id="txtFiyat" name="Fiyat"
placeholder="Toplam tutarı girin" required autofocus />
</div>
Adım 12: Kullanıcının seçeceği ödeme şeklini belirlemek için gerekli olan olan radiobuttonları tanımlayalım.
<div class="mb-3">
<label class="form-label">Ödeme Şekli</label>
<div class="border p-3 rounded">
<div class="form-check">
<input class="form-check-input" type="radio"
name="TaksitSayisi" id="tekCekim" value="1" />
<label class="form-check-label" for="tekCekim">
Tek Çekim</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio"
name="TaksitSayisi" id="ikiTaksit" value="2" />
<label class="form-check-label" for="ikiTaksit">
İki Taksit (%3 ek fiyat)</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio"
name="TaksitSayisi" id="ucTaksit" value="3" />
<label class="form-check-label" for="ucTaksit">
Üç Taksit (%5 ek fiyat)</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio"
name="TaksitSayisi" id="dortTaksit" value="4" />
<label class="form-check-label" for="dortTaksit">
Dört Taksit (%7 ek fiyat)</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio"
name="TaksitSayisi" id="besTaksit" value="5" />
<label class="form-check-label" for="besTaksit">
Beş Taksit (%9 ek fiyat)</label>
</div>
</div>
</div>
Adım 13: Bilgilerin sunucuya gönderilmesi için gerekli olan butonu tanımlayalım.
<div class="d-grid">
<button type="submit" class="btn btn-primary">Ödeme Yap</button>
</div>
Adım 14: Projeyi çalıştırıp sonucu görelim. Aşağıdaki gibi bir form ekranı oluşacaktır.
Adım 15: Öncelikle kullanıcıdan alınan verileri işleyip tekrar kullanıcıya göndermek amacıyla Model yapısını oluşturalım. Models klasörü altında Odemeler isminde modelimizi oluşturalım. Model yapısı aşağıdaki gibi olacaktır.
namespace KasaIslemleriCoreMvc.Models
{
public class Odemeler
{
public decimal Fiyat { get; set; }
public int TaksitSayisi { get; set; }
public decimal Tutar { get; set; }
public List<OdemeDetay> OdemeDetaylar { get; set; }
}
public class OdemeDetay
{
public DateTime TaksitTarihi { get; set; }
public decimal Tutar { get; set; }
}
}
Adım 16: Bu model yapısına göre Controller dosyasını düzenleyelim.
using KasaIslemleriCoreMvc.Models;
using Microsoft.AspNetCore.Mvc;
namespace KasaIslemleriCoreMvc.Controllers
{
public class HomeController : Controller
{
public IActionResult Index()
{
var model = new Odemeler
{
OdemeDetaylar = new List<OdemeDetay>()
};
return View(model);
}
[HttpPost]
public IActionResult OdemeYap(Odemeler model)
{
decimal fiyat = model.Fiyat;
int taksitSayisi = model.TaksitSayisi;
decimal oran = 0;
// Ödeme seçeneğine göre oran belirleme
switch (taksitSayisi)
{
case 1:
oran = 1;
break;
case 2:
oran = 1.03m;
break;
case 3:
oran = 1.05m;
break;
case 4:
oran = 1.07m;
break;
case 5:
oran = 1.09m;
break;
default:
oran = 1;
break;
}
fiyat *= oran;
model.Tutar = fiyat / taksitSayisi;
// PaymentDetails'i null değil, boş bir liste olarak başlatıyoruz
model.OdemeDetaylar = new List<OdemeDetay>();
// Ödeme detaylarını oluşturma
for (int i = 1; i <= taksitSayisi; i++)
{
DateTime taksitTarihi = DateTime.Now.AddMonths(i);
// Haftasonu ise tarihi hafta içine alıyoruz
if (taksitTarihi.DayOfWeek == DayOfWeek.Saturday)
{
taksitTarihi = taksitTarihi.AddDays(2);
}
else if (taksitTarihi.DayOfWeek == DayOfWeek.Sunday)
{
taksitTarihi = taksitTarihi.AddDays(1);
}
model.OdemeDetaylar.Add(new OdemeDetay
{
TaksitTarihi = taksitTarihi,
Tutar = model.Tutar
});
}
return View("Index", model);
}
}
}
Adım 17: Kullanıcının verileri görebilmesi için View tarafında gerekli düzenlemeleri yapalım.
@if (Model.OdemeDetaylar != null && Model.OdemeDetaylar.Count > 0)
{
<div id="paymentDetails" class="mt-4">
<h4>Ödeme Detayları</h4>
<ul id="paymentList" class="list-group">
@foreach (var detail in Model.OdemeDetaylar)
{
<li class="list-group-item">
@detail.TaksitTarihi.ToString("dd.MM.yyyy dddd") -
@detail.Tutar.ToString("F2") ₺
</li>
}
</ul>
</div>
}
Adım 18: Projeyi kaydedip çalıştıralım. Uygulamanın aynı sayfada sonuçları listelediğini görürsünüz. Şimdi ödeme detaylarının başka bir sayfada görüntülenmesi işlemini yapalım. Bunun için View tarafında Odemeler isminde bir dosya oluşturalım. Index dosyasında yer alan listeleme işlemlerini silelim. Odemeler dosyasında bu işlemleri gerçekleştireceğiz. Odemeler dosyasının içeriği aşağıdaki gibi olacaktır.
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@model KasaIslemleriCoreMvc.Models.Odemeler
<!DOCTYPE html>
<html lang="tr">
<head>
<meta name="viewport" content="width=device-width" />
<title>Ödeme Detayları</title>
<link href="~/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-lg-6 col-md-9 col-sm-12">
<h3>Taksit Detayları</h3>
<!-- Sadece taksit detaylarını listele -->
@if (Model.OdemeDetaylar != null &&
Model.OdemeDetaylar.Count > 0)
{
<div id="paymentDetails" class="mt-4">
<h4>Ödeme Detayları</h4>
<ul id="paymentList" class="list-group">
@foreach (var detail in Model.OdemeDetaylar)
{
<li class="list-group-item">
@detail.TaksitTarihi.ToString
("dd.MM.yyyy dddd") - @detail.Tutar.ToString("F2") ₺
</li>
}
</ul>
</div>
}
<!-- Ana Sayfaya Dön butonu -->
<div class="d-grid mt-4">
<a href="@Url.Action("Index", "Home")"
class="btn btn-secondary">Ana Sayfaya Dön</a>
</div>
</div>
</div>
</div>
</body>
</html>
Adım 18: Controllers dosyasında aşağıdaki satırı düzenleyelim.
return View("Odemeler", model);
Projeyi kaydedip çalıştıralım. Taksit listesi başka bir sayfada listelenir. Konu ile ilgili sormak istediklerinizi bize sorabilirsiniz. İyi çalışmalar.
|