Bu uygulamamızda geometriye ait şu sorunun cevabını bulmaya çalışacağız. Paralelkenarın alanını ve çevresini bulacağız. Bu işlemi gerçekleştirirken tasarım olarak bootstrap 5 kütüphanesini, kod olarak javascript dilini kullanacağız. Editör olarak Visual Studio 2022 programından yararlanacağız.
Neler öğreneceğiz.
Web sayfasına ait temel tanımlamaları
Ham web sayfası tasarımını
Web sayfasına bootstrap 5 kütüphanesini yüklemeyi
Bootstrap 5 tasarımı oluşturmayı
Bootstrap 5 form elemanlarını kullanmayı
Javascript kodlarını eklemeyi
Etiketlerle beraber javascript kodlarını kullanmayı
Javascript kodlarıyla kullanıcıdan değer almayı
Javascript kodlarıyla hesaplama işlemlerini yapmayı
Javascript kodlarıyla sonucu kullanıcıya göstermeyi
Hadi bakalım, kolları sıvayalım uygulamayı yapmaya başlayalım.
Adım 1:
Visual Studio programı çalıştırılır. Bunun için devenv.exe komutunu kullanabilirsiniz.
Adım 2:
Ekrana gelen pencerede Create a new Project komutunu çalıştıralım.
Adım 3:
Bu pencerede proje için gerekli olan templates seçeneklerini belirleyelim. Dil olarak c#, platform olarak Windows, ortam olarak Web seçimlerini yapalım. Daha sonra Windows form App(.Net Framework) şablonunu seçelim. Next düğmesine basalım.
Adım 4:
Bu pencerede projenin adını belirleyelim. GeometriParalelkenar ismini verelim. Daha sonra tüm bilgisayarlarda bulunabilecek .Net Framework versiyonunu tercih edelim. Biz burada 4.5 versiyonunu tercih ettik. Creat Project diyerek Projemizi Oluşturalım. Yeni gelen pencerede Empty seçelim. Sertifika olmadığı için Https işlemini iptal edelim. Create diyerek işlemi tamamlayalım.
Adım 5:
Solution Explorer panelinde proje isminin üzerine gelelim. Farenin sağ tuşuna basalım. Add komutunu seçelim. Buradan New Item diyelim. Ekrana gelen şablonlardan Html Page seçeneğini seçelim ve web sayfasının ismini alanvecevre.html olarak belirleyelim ve Add diyerek web sayfasını ekleyelim.
Adım 6:
Web sayfasına ait temel tanımlamaları yapalım. Dilini Türkçe yapalım. Tüm cihazlarda çalışsmasını sağlayalım. Sayfanın başlığını belirleyelim. Css ve javascript işlemleri için gerekli blok tanımlamalarını yapalım.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Paralelkenarın Alanı ve Çevresi</title>
<style>
/*Css tanımlamaları*/
</style>
<script>
//Javascript tanımlamaları
</script>
</head>
<body>
</body>
</html>
Adım 7:
Web sayfasına tablo içini temel tanımlamaları yapalım. Ancak burada thead ve tfoot blokları kullanılmayacağı için bunları tanımlamayacağız.
<table>
<caption>
</caption>
<tbody>
</tbody>
</table>
Adım 8:
Tablonun başlığını belirleyelim.
<caption>
Paralelkenarın Alanını ve Çevresini Bulma
</caption>
Adım 9:
Tablomuzda 3 tane değer girişi, bir tane işlem yapmak için button, 1 tane de sonucun görüntüleneceği ekran olacağı için 5 satır 2 sütun tanımlayalım.
<tbody>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
Adım 10:
Giriş işlemleri için öncelikle sabit değerleri belirleyelim. Bunları <label> etiketiyle gerçekleştireceğiz.
<tr>
<td>
<label>A kenarı :</label>
</td>
<td></td>
</tr>
<tr>
<td>
<label>B kenarı :</label>
</td>
<td></td>
</tr>
<tr>
<td>
<label>Yükseklik :</label>
</td>
<td></td>
</tr>
Adım 11:
Kullanıcıdan değer gismesini sağlamak için <input> etiketinin type özelliğini text olarak belirleyelim. Ayrıca etiketlerin id değerlerini tanımlayalım.
<tr>
<td>
<label>A kenarı :</label>
</td>
<td>
<input id="txtA" type="text" />
</td>
</tr>
<tr>
<td>
<label>B kenarı :</label>
</td>
<td>
<input id="txtB" type="text" />
</td>
</tr>
<tr>
<td>
<label>Yükseklik :</label>
</td>
<td>
<input id="txtH" type="text" />
</td>
</tr>
Adım 12:
Hesaplama işlemini gerçekleştirmek için <input> etiketinin type özelliğini button olarak belirleyelim. Value değerini Hesapla olarak belirleyelim. Id değerini ise btnHesapla olarak tanımlayalım. Bu arada satırda yer alan iki sütunu tek sütun gibi göstermek için colspan özelliğini kullanalım.
<tr>
<td colspan="2">
<input id="btnHesapla" type="button" value="Hesapla" />
</td>
</tr>
Adım 13:
İşlemlerin sonucunu görüntülemek için <label> etiketini tanımlayalım. Id özelliğini belirleyelim. Bu arada satırda yer alan iki sütunu tek sütun gibi göstermek için colspan özelliğini kullanalım.
<tr>
<td colspan="2">
<label id="lblSonuc"></label>
</td>
</tr>
Adım 14:
Web sayfasının ham halini tanımladık. Artık kodlama işlemine geçebiliriz. Öncelikle javascript ile işlemlerin yapıldığı bir metod tanımlayalım.
<script>
//Javascript tanımlamaları
function bul() {
}
</script>
Adım 15:
Şimdi tanımladığımız bu metodu web sayfasında yer alan btnHesapla etiketiyle çağıralım. Bu işlemi gerçekleştirmek için onclick() özelliği kullanılacaktır.
<tr>
<td colspan="2">
<input id="btnHesapla" type="button" value="Hesapla" onclick="bul()"/>
</td>
</tr>
Adım 16:
Paralelkenarın alanını ve çevresini bulmak için gerekli işlem basamaklarını tanımlayalım. Öncelikle değişkenleri tanımlamamız gerekir.
function bul() {
// Değişkenleri tanımla
var a = 0;
var b = 0;
var h = 0;
var alan = 0;
var cevre = 0;
}
Adım 17:
Şimdi kullanıcının metin kutularına girdiği değerleri tanımladığımız değişkenlere aktaralım. Metin kutularına girilen tüm değerler tırnak içinde yani alfasayısal olduğu için sayısala dönüştürelim.
// Değerleri gir
a = parseInt(document.getElementById("txtA").value);
b = parseInt(document.getElementById("txtB").value);
h = parseInt(document.getElementById("txtH").value);
Adım 18:
Paralelkenarın alanını ve çevresini bulmak için gerekli matematiksel formülleri belirleyelim.
// İşlemi yap
alan = a * h;
cevre = 2 * (a + b);
Adım 19:
İşlemlerin sonucunu görüntülemek için lblSonuc etiketini kullanacağız. Hadi şimdi bunu yapalım.
// Sonucu görüntüle
document.getElementById("lblSonuc").innerHTML = "Alanı : " + alan + "<br>Çevresi : " + cevre;
Adım 20:
Web sayfasını çalıştıralım. Sırasıyla 10, 8 ve 6 değerlerini girelim. Paralelkenarın alanını 60, çevresini 36 olarak bulmamız gerekir. Web sayfasının ham haliyle birlikte javascript kodları da yazıldığına göre Bootstrap kütüphanesini kullanıp sayfamızı güzelleştirebiliriz. Öncelikle kütüphaneyi projeye ekleyelim. Bunun için Solution Explorer panelinde proje isminin üzerindeyken farenin sağ tuşuna basalım. Ekrana gelen içerik menüsünden Manage Nuget Package komut grubunu seçelim. Burada Browse sekmesine tıklayalım. Search metin kutusuna bootstrap yazalım. Listelenen kütüphanelerden Bootstrap 5.x olanı projeye dahil edelim.
Adım 21:
Projemize dahil ettiğimiz bootstrap kütüphanelerini şimdi de web sayfasına ekleyelim. Aşağıdaki satırları web sayfasına eklemezseniz kütüphaneye ait css tanımlamalarını kullanamazsınız. Tanımlamaları head etiketi arasında yapalım.
<link href="Content/bootstrap.min.css" rel="stylesheet" />
Adım 22:
Uygulamayı çalıştırdığımızda bootstrap kütüphanesinin table etiketine varsayılan olarak etkisini görebilirsiniz. Ancak tablonun başlığının altta yer aldığına dikkat edin. Öncelikle tablomuzun başlığını düzenleyelim.
<caption class="p-3 text-bg-primary text-center caption-top">
Paralelkenarın Alanını ve Çevresini Bulma
</caption>
Adım 23:
Tablomuza ait class tanımlamalarını yapalım. Tablo tasarımını dark olarak belirleyelim.
<table class="table table-dark">
Adım 24:
Projeyi çalıştırdığımızda tablonun genişliğinin ekranın genişliği kadar büyüdüğünü görürsünüz. Buda tablo tasarımını bozmaktadır. Tablonun genişliğini 400px olarak belirleyelim.
table {
max-width: 400px;
}
Adım 25:
Tablomuzu ortalamak için gerekli class tanımlamasını table etiketine ekleyelim.
<table class="table table-dark m-auto">
Adım 26:
Tablomuza ait diğer kodlarımızı yazalım ve uygulamayı bitirelim.
<table class="table table-dark m-auto">
<caption class="p-3 text-bg-primary text-center caption-top">
Paralelkenarın Alanını ve Çevresini Bulma
</caption>
<tbody>
<tr>
<td>
<label for="txtA">A kenarı :</label>
</td>
<td>
<input id="txtA" type="number" min="1" class="form-control" placeholder="A kenarı"/>
</td>
</tr>
<tr>
<td>
<label for="txtB">B kenarı :</label>
</td>
<td>
<input id="txtB" type="number" min="1" class="form-control" placeholder="B kenarı"/>
</td>
</tr>
<tr>
<td>
<label class="col-form-label-lg" for="txtH">Yükseklik :</label>
</td>
<td>
<input id="txtH" type="number" min="1" class="form-control input-group-lg" placeholder="Yükseklik"/>
</td>
</tr>
<tr>
<td colspan="2">
<input id="btnHesapla" class="btn btn-lg btn-success" type="button" value="Hesapla" onclick="bul()" />
</td>
</tr>
<tr>
<td colspan="2">
<label class="text-bg-primary" id="lblSonuc"></label>
</td>
</tr>
</tbody>
</table>