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 proje oluşturma
Projeye yeni bir web sayfası ekleme
Web sayfasına kütüphaneleri dahil etme
Tarım için gerekli olan etiketleri web sayfasına ekleme
Projeyi çalıştırma
Javascript kodlarını yazma ve ç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 Windows, ortam olarak Web seçiniz. Ekrana gelen şablonlardan Asp.Net Web Application(.Net Framework) seçiniz.
Adım 4: Proje ismini KasaIslemleri olarak belirleyiniz. FrameWork olarak 4.8 tercih ediniz. Projenizi yayınlayacağınız sunucudaki versiyonu dikkate alarak bu tercihi yapınız. Böylece projeniz yayınlandığında hatasız olarak çalıştırılacaktır.. Create diyerek işlemi tamamlayınız.
Adım 5: Empty şablonunu seçtikten sonra sertifika işlemi için kullanılan Configure for HTTPS onay kutusunu kaldırıp Create diyerek işlemi tamamlayınız.
Adım 6: Projeye ismi kasa.html isminde bir web sayfası ekleyiniz. Web sayfasının temel ayarlamalarını yapınız. Web sayfası 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>
<style>
/*Css İşlemleri*/
</style>
<script>
//Kod İşlemleri
</script>
</head>
<body>
</body>
</html>
Adım 7: 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 8: Ş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 9: 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 10: Forma ait başlığı belirleyelim.
<div class="p-3 bg-primary text-white rounded mb-4">
<h2>Kasa</h2>
</div>
Adım 11: Toplam tutarın girilmesi için web sayfasna bir adet label ve bir adet sayısal değer girişi yapılabilen input text ekleyelim.
<div class="mb-3">
<label for="txtFiyat" class="form-label">Toplam Tutar</label>
<input type="number" class="form-control" id="txtFiyat"
placeholder="Toplam tutarı girin" required />
</div>
Adım 12: Ödeme şekillerinin tek bir pencerede yer alması için bir adet groupbox ekleyelim. Başlığı "Ödeme Şekli" yazalım. Projeyi çalıştırıp sonucu görelim.
<div class="mb-3">
<label class="form-label">Ödeme Şekli</label>
<div class="border p-3 rounded">
</div>
</div>
Adım 13: Ödeme şeklinin kullanıcı tarafından seçilebilmesi GroupBox içine 5 tane RadioButton ekleyelim. Projeyi çalıştırıp sonucu görelim.
<div class="form-check">
<input class="form-check-input" type="radio" name="paymentMethod"
id="tekCekim" value="1" checked />
<label class="form-check-label" for="tekCekim">Tek Çekim</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="paymentMethod"
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="paymentMethod"
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="paymentMethod"
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="paymentMethod"
id="besTaksit" value="5" />
<label class="form-check-label" for="besTaksit">
Beş Taksit (%9 ek fiyat)</label>
</div>
Adım 14: Web sayfasına bir adet Button ekleyelim. Projeyi çalıştırıp sonucu görelim. Aşağıdaki gibi bir form ekranı oluşacaktır.
<div class="d-grid">
<button id="btnOdeme" class="btn btn-primary">Ödeme Yap</button>
</div>
Adım 15: Web sayfasının tasarım kısmı tamamlandı. Şimdi kodlama işlemine geçebiliriz. Öncelikle program çalıştığında imlecin txtFiyat kutusuna konumlanmasını sağlayalım. Bu işlemi gerçekleştirmek için $() olayını kullanacağız. Projeyi çalıştırıp sonucu görelim.
$("#txtFiyat").focus();
Adım 16: Şimdi butonun Click olayını oluşturalım. Öncelikle kullanıcının ne kadar tutar yazdığını bulalım. Toplam tutar ondalıklı olacağı için float tipinde bir değişken tanımlamalıyız. Değişkenin adını fiyat olarak verelim. Projeyi çalıştırıp sonucu görelim.
$("#btnOdeme").click(function () {
var fiyat = parseFloat($("#txtFiyat").val());
});
Adım 17: Şimdi de kullanıcının hangi Radyo butona tıkladığını bulalım. Bunun için Radyo butonun checked özelliğinden yararlanacağız. Elde ettiğimiz değeri sayısal bir değişkene aktaralım. Değişkenin adını taksitSayisi olarak belirleyelim. Projeyi çalıştırıp sonucu görelim.
var taksitSayisi = 0;
var paymentMethod = parseInt($("input[
name='paymentMethod']:checked").val());
switch (paymentMethod) {
case 1:
taksitSayisi = 1;
break;
case 2:
taksitSayisi = 2;
break;
case 3:
taksitSayisi = 3;
break;
case 4:
taksitSayisi = 4;
break;
case 5:
taksitSayisi = 5;
break;
};
Adım 18: Taksit sayısına göre ödenecek tutarı bulmaya çalışalım. Bunun için tutar isminde bir değişken tanımlayalım. Girilen miktarı taksit tutarına bölelim. Projeyi çalıştırıp sonucu görelim.
var taksitSayisi = 0;
var tutar = 0;
// ödeme şekline göre taksit sayısını belirle
var paymentMethod = parseInt($("input[
name='paymentMethod']:checked").val());
switch (paymentMethod) {
case 1:
taksitSayisi = 1;
break;
case 2:
taksitSayisi = 2;
fiyat = fiyat * 1.03;
break;
case 3:
taksitSayisi = 3;
fiyat = fiyat * 1.05;
break;
case 4:
taksitSayisi = 4;
fiyat = fiyat * 1.07;
break;
case 5:
taksitSayisi = 5;
fiyat = fiyat * 1.09;
break;
}
tutar = fiyat / taksitSayisi;
Adım 19: Şimdi de taksit tarihlerini ve ödeme raporunu oluşturalım. Bunun için web sayfasına paymentDetails isminde bir kutu ekleyelim. Başlığını "Ödeme Detayları" olarak belirleyelim.
<div id="paymentDetails" class="mt-4" style="display: none;">
<h4>Ödeme Detayları</h4>
<ul id="paymentList" class="list-group">
<!-- Ödeme detayları burada listelenecek -->
</ul>
</div>
Adım 20: Taksit sayısına göre ödeme tarihlerini ve tutarlarını görüntüleyelim. Taksit tarihi hafta sonuna geldiyse bu tarihleri hafta içine almaya çalışalım. Projeyi çalıştırıp sonucu görelim.
$("#paymentDetails").show();
$("#paymentList").html("");
for (let i = 1; i <= taksitSayisi; i++) {
let taksitTarihi = new Date();
taksitTarihi.setMonth(taksitTarihi.getMonth() + i);
switch (taksitTarihi.getDay()) {
case 6:
taksitTarihi.setDate(taksitTarihi.getDate() + 2);
break;
case 0:
taksitTarihi.setDate(taksitTarihi.getDate() + 1);
break;
}
$("#paymentList").append(`<li class="list-group-item">
${taksitTarihi.toLocaleDateString()} - ${tutar.toFixed(2)} ₺</li>`);
}
$("#txtFiyat").val("");
$("#txtFiyat").focus();
Makaleyi beğenmeyi ve paylaşmayı unutmayalım. Emeğe saygı gösterelim. Sorularınızı ve yapmamıızı istediğiniz problemleri bize yazabilirsiniz. İyi çalışmalar....