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 Asp.NET projesi oluşturma
Projeye yeni bir webform sayfası ekleme
Web sayfasına kütüphaneleri dahil etme
Tasarım için gerekli olan etiketleri web sayfasına ekleme
Projeyi çalıştırma
c# 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.aspx isminde bir web sayfası ekleyiniz. Web sayfasının temel ayarlamalarını yapınız. Web sayfası aşağıdaki gibi olacaktır.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="kasa.aspx.cs"
Inherits="KasaIslemleri.kasa" %>
<!DOCTYPE html>
<html lang="tr">
<head runat="server">
<meta charset="utf-8" />
<title>Ödeme Taksit Hesaplama</title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</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 d-flex justify-content-center mt-5">
</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>
<asp:TextBox ID="txtFiyat" runat="server" CssClass="form-control"
placeholder="Tutar giriniz"></asp:TextBox>
</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">
<asp:RadioButton ID="radioButton1" runat="server"
GroupName="paymentOption" CssClass="form-check-input" />
<label class="form-check-label" for="radioButton1">Tek Çekim</label>
</div>
<div class="form-check">
<asp:RadioButton ID="radioButton2" runat="server"
GroupName="paymentOption" CssClass="form-check-input" />
<label class="form-check-label" for="radioButton2">
İki Taksit (%3 ek fiyat)</label>
</div>
<div class="form-check">
<asp:RadioButton ID="radioButton3" runat="server"
GroupName="paymentOption" CssClass="form-check-input" />
<label class="form-check-label" for="radioButton3">
Üç Taksit (%5 ek fiyat)</label>
</div>
<div class="form-check">
<asp:RadioButton ID="radioButton4" runat="server"
GroupName="paymentOption" CssClass="form-check-input" />
<label class="form-check-label" for="radioButton4">
Dört Taksit (%7 ek fiyat)</label>
</div>
<div class="form-check">
<asp:RadioButton ID="radioButton5" runat="server"
GroupName="paymentOption" CssClass="form-check-input" />
<label class="form-check-label" for="radioButton5">
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="mt-4">
<asp:Button ID="btnCalculate" runat="server" Text="Ödeme Yap"
CssClass="btn btn-primary w-100" />
</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 Page_Load() olayını kullanacağız. Projeyi çalıştırıp sonucu görelim.
protected void Page_Load(object sender, EventArgs e)
{
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.
protected void btnCalculate_Click(object sender, EventArgs e)
{
double totalAmount = 0;
totalAmount=double.Parse(txtFiyat.Text);
}
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.
int taksitSayisi;
if (radioButton1.Checked)
taksitSayisi = 1;
if (radioButton2.Checked)
taksitSayisi = 2;
if (radioButton3.Checked)
taksitSayisi = 3;
if (radioButton4.Checked)
taksitSayisi = 4;
if (radioButton5.Checked)
taksitSayisi = 5;
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.
int taksitSayisi = 0;
double tutar = 0;
if (radioButton1.Checked)
{
taksitSayisi = 1;
}
if (radioButton2.Checked)
{
taksitSayisi = 2;
fiyat = fiyat * 1.03;
}
if (radioButton3.Checked)
{
taksitSayisi = 3;
fiyat = fiyat * 1.05;
}
if (radioButton4.Checked)
{
taksitSayisi = 4;
fiyat = fiyat * 1.07;
}
if (radioButton5.Checked)
{
taksitSayisi = 5;
fiyat = fiyat * 1.09;
}
tutar = fiyat / taksitSayisi;
Adım 19: Şimdi de taksit tarihlerini ve ödeme raporunu oluşturalım. Bunun için web sayfasına repInstallments isminde bir repeater ekleyelim. Başlığını "Ödeme Raporu" olarak belirleyelim.
<div class="mt-4">
<h3>Ödeme Raporu:</h3>
<asp:Repeater ID="repInstallments" runat="server">
<ItemTemplate>
<div class="mb-2">
<strong><%# Eval("tarih") %>:</strong>
<%# Eval("taksit") %>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
Adım 20: Taksit sayısına göre ödeme tarihlerini ve tutarlarını görüntüleyelim. Bunun için Installment isminde bir sınıf oluşturalım.
public class Odeme
{
public string tarih { get; set; }
public string taksit { get; set; }
}
Adım 20: Taksit sayısına göre ödeme tarihlerini ve tutarlarını oluşturduğumuz sınıfa ekleyelim. Taksit tarihi hafta sonuna geldiyse bu tarihleri hafta içine almaya çalışalım. Oluşturulan sınıfı repeater nesnesine ekleyelim. Projeyi çalıştırıp sonucu görelim.
List<Odeme> detay = new List<Odeme>();
for (int i = 1; i <= taksitSayisi; i++)
{
DateTime bulunanTarih = DateTime.Now.AddMonths(i);
if (bulunanTarih.DayOfWeek == DayOfWeek.Saturday)
bulunanTarih = bulunanTarih.AddDays(2);
else if (bulunanTarih.DayOfWeek == DayOfWeek.Sunday)
bulunanTarih = bulunanTarih.AddDays(1);
detay.Add(new Odeme
{
tarih = bulunanTarih.ToLongDateString(),
taksit = tutar.ToString("C2")
});
}
repInstallments.DataSource = detay;
repInstallments.DataBind();
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...