Neredeyse tüm platformlarda hesap makinesi bir şekilde kullanılmaktadır. Bu uygulamamızda hesap makinesinin tasarımını web sayfasında table nesnesini kullanarak gerçekleştireceğiz. Tasarım ekranımız aşağıdaki gibi olacaktır.
Tasarım ekranını inceleyelim. Burada butonlar yan yana ve alt alta sıralanmışlar. Butonların genişliklerini ve yüksekliklerini belirlememiz gerekiyor. Sil butonuyla birlikte 1 ile 9 arasındaki rakamları ve +, -, x ve / işlemleri için kullanılan butonları aynı boyutta yapabiliriz. Genişlik için 60px, yükseklik için 60px yapalım. Sonucun görüntülendiği ve içinde 0 yazan kutunun yüksekliği 60px olacaktır. Genişliği ise 60 + 60 + 60 = 180px olacaktır. = butonunun genişliği 60px, yüksekliği ise 60 + 60 + 60 + 60 = 240px olacaktır. Peki 0 sayısının olduğu butonun genişlik ve yükseklikliği ne olacaktır. Yüksekliği 60px, genişliği ise 60 + 60 + 60 = 180px olacaktır.
Hesap makinesi için kullanılan butonların genişlik ve yüksekliklerini ayarladık. Bu butonların yer alacağı tablonun genişliği ve yüksekliği ne olacak, onuda hesaplayalım. Tablonun genişliği 60 + 60 + 60 + 60 = 240px, yüksekliği ise 60 + 60 + 60 + 60 + 60 + 60 = 360px olacaktır. Nasıl, bayağı kafa yorduk değil mi? Mantığı anladık herhalde.
Hesaplama işlemi bittiğine göre projenin tasarımını yapmaya geçebiliriz.
Visual Studio 2022 programını çalıştıralım.
Create a new project diyerek yeni proje oluşturalım.
Dil olarak c#, platform olarak Windows, ortam olarak Web seçelim. Ekrana gelen şablonlardan Asp.NET Web Application(.Net Framwork) seçelim. Next diyerek devam edelim.
Proje ismini CalculaterWeb olarak belirleyelim. .Net FrameWork 4.7.2 olarak seçelim. Create diyerek projeyi oluşturalım.
Projede herhangi bir dosyanın yer almasını istemediğimiz için Empty seçelim. Bu arada Configure for HTTPS onay kutusundaki onayı kaldıralım. Tekrar Create diyerek projemizi oluşturalım.
Proje isminin üzerine gelelim. Farenin sağ tuşuna basalım. Ekrana gelen içerik menüsünden Add komutunu seçelim. New item komutunu çalıştıralım. Ekrana gelen dosya türlerinden HTML Page seçelim. Dosya ismini index.html olarak belirleyelim. Add diyerek dosyayı projeye dahil edelim. Öncelikle projeyi bu haliyle çalıştıralım. Ben çalıştırmak için klavyeden F5 tuşuna bastım. Bunu yaparak projenin hatasız bir şekilde oluşturulup oluşturulmadığını kontrol etmiş oluyorum.
Öncelikle web sayfasının head etiketi arasında yer alması gereken satırları oluşturalım. Web sayfamız 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>Hesap Makinesi</title>
</head>
Web sayfasına bir adet table etiketi ekleyelim. Bu etiketin sadece caption ve tbody parametreleri işimize yarayacaktır.
<table>
<caption></caption>
<tbody></tbody>
</table>
Tasarım kısmında hesapladığımız değerlere göre tablonun genişliğini ve yüksekliğini belirleyelim. Ayrıca tablonun kenarlarında çizgilerin gösterilmesi için border özelliğini 1 yapalım.
<table width="240px" height="360px" border="1">
<caption></caption>
<tbody></tbody>
</table>
Tablonun başlığını "Hesap Makinesi" olarak belirleyelim ve h3 etiketi içine alalım.
<table width="240px" height="360px" border="1">
<caption>
<h3>Hesap Makinesi</h3>
</caption>
<tbody></tbody>
</table>
Tasarım kısmında ilk satıra baktığımızda Sil butonu ve işlemlerin sonuçlandığı bölüm yer almaktadır. Halbuki tablomuzun 4 sütundan oluşması gerekir. Dikkat ederseniz sonuç bölümü 3 sütunu kaplamaktadır. tbody bölümüne gelelim. Önce bir satır oluşturalım. Daha sonra iki sütun ekleyelim. Üç sütunu tek sütun gibi göstermek için colspan özelliğinden yararlanalım.
<tbody>
<tr>
<td>Sil</td>
<td colspan="3">=</td>
</tr>
</tbody>
Projeyi kaydedip çalıştıralım. Şu an için tablomuzda bir satır 2 sütun olduğu için tablonun tamamını kaplamış tek satır iki sütun görürsünüz. İçindeki yazıların ise sola dayalı olarak görürsünüz. Halbuki tasarım kısmında Sil yazısı ortalanmış şekilde görülmekte, 0 rakamı ise sağa dayalı olarak görülmektedir. Ayrıca yazının büyüklükleri küçük görülmektedir. Şimdi bu işlemleri gerçekleştirelim. Bunun için style etiketine ait özelliklerden yararlanacağız.
<tbody>
<tr>
<td style="text-align:center; font-size:16px">
Sil
</td>
<td colspan="3" style="text-align:end;
font-size:16px">
0
</td>
</tr>
</tbody>
Şimdi ikinci satıra gelelim. Burada 7, 8, 9 butonları aynı boyutta ve aynı satırda olmasına rağmen = butonu bu satırla birlikte 4 satırı kaplamaktadır. Tek sütunun birden fazla satırı kapladığı bir hücre oluşturmak için rowspan özelliği kullanılmaktadır. Bu arada içindeki değerlerin ortalanmasını, ve boyutlarını da ayarlayalım. Hadi şimdi bu işlemleri yapalım.
<tr>
<td style="text-align:center; font-size:16px">
7
</td>
<td style="text-align:center; font-size:16px">
8
</td>
<td style="text-align:center; font-size:16px">
9
</td>
<td rowspan="4" style="text-align:center;
font-size:16px">
=
</td>
</tr>
Projeyi kaydedip çalıştıralım. İki satır ve 4 sütunlu bir tablo ekranda görüntülenmektedir. Dikkat ettiyseniz tabloya satır ve sütun ekledikçe kapladıkları alanda küçülmektedir. Şimdi üçüncü satırı oluşturalım. Burada 4, 5, 6 rakamları ve = işleminin devamı yer almaktadır. Bundan dolayı sütun devam ettiği için burada yeni bir sütun oluşturulmaz. Hadi şimdi bunu yapalım.
<tr>
<td style="text-align:center; font-size:16px">
4
</td>
<td style="text-align:center; font-size:16px">
5
</td>
<td style="text-align:center; font-size:16px">
6
</td>
</tr>
Sıra geldi dördüncü satıra. Burada 1, 2 ve 3 sayıları yer almaktadır. Ayrıca = işlemi sütun olarak devam etmektedir. Vakit kaybetmeden kodları tanımlayalım.
<tr>
<td style="text-align:center; font-size:16px">
1
</td>
<td style="text-align:center; font-size:16px">
2
</td>
<td style="text-align:center; font-size:16px">
3
</td>
</tr>
Beşinci satıra dikkat edelim. Burada sadece 0 rakamı yer almaktadır. = işlemi ise sütun olarak devam etmektedir. Bu durumda bu satırda sadece bir sütun tanımlanmalıdır. Hadi yapalım.
<tr>
<td colspan="3" style="text-align:center;
font-size:16px">
0
</td>
</tr>
Geldik son satıra. Bu satırda ise işlemlerin yapıldığı butonlar yer almaktadır. Bunların hepsini ayrı ayrı sütunlarda tanımlamamz gerekir. Kodlar aşağıdaki gibi olacaktır.
<tr>
<td style="text-align:center; font-size:16px">
+
</td>
<td style="text-align:center; font-size:16px">
-
</td>
<td style="text-align:center; font-size:16px">
x
</td>
<td style="text-align:center; font-size:16px">
/
</td>
</tr>
Projeyi kaydedip çalıştıralım. Tüm işlemlerin tasarım kısmında olduğu gibi listelendiğini görürsünüz. Ancak hücrelerin boyutları bizim istediğimiz gibi olmadı. Bir hücrenin genişliğinin tablonun genişliğine oranını belirlememiz gerekiyor. Aynı işlemi yükseklik içinde yapmalıyız. Şimdi o işlemi gerçekleştirelim.
<td style="text-align:center; font-size:20px";
width="25%"; height="16%">
Sil
</td>
Projeyi kaydedip çalıştıralım. Nihayet tasarım işlemini bitirdik. Projeyi çalıştırdığınızda aşağıdaki gibi bir ekran sizi karşılayacaktır.
