|
Yaşa, boya ve cinsiyete göre ideal kiloyu hesaplamak için genellikle vücut kitle indeksi (VKİ) formülü ve bazı özel formüller kullanılır. Ancak, ideal kilo hesaplaması kişisel bir kavramdır ve sadece matematiksel bir hesaplamaya dayalı olmamalıdır. Yine de, genel bir hesaplama için şu yöntemler kullanılabilir:
VKİ, kişinin boyu ve kilosuna göre vücut durumunu değerlendirmek için yaygın olarak kullanılır. VKİ formülü şu şekildedir:
VKİ değeri, vücut yağ oranını belirlemek için genel bir rehberdir. VKİ değerlerine göre kategoriler şu şekildedir:
-
18.4 ve aşağı: Çok zayıf
-
18.5 - 24.9: Normal kilolu
-
25 - 29.9: Fazla kilolu
-
30 ve üzeri: Obez
Ideal kiloyu hesaplamak için cinsiyete göre şu formülleri kullanabilirsiniz. Kadınlar ve erkekler arasında vücut yapısı farkları olduğu için, bazı kaynaklar cinsiyete dayalı ideal kilo hesaplamaları yapar. İşte basit bir formül:
Erkekler için İdeal Kilo:
Burada, boy santimetre cinsinden alınmalıdır.
Kadınlar için İdeal Kilo:
Yukarıda verilen bilgilere göre web sayfasını tasarlama işlemine geçelim.
Visual Studio programını açalım.
İsmi SaglikliYasam olan boş bir klasik Asp.Net projesi oluşturalım.
Projeye idealkilo.html isminde bir web sayfası ekleyelim. Web sayfasının temel tasarımını aşağıdaki gibi yapalım.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>İdeal Kilo Hesaplama</title>
</head>
<body>
</body>
</html>
Öncelikle işlem yapacağımız basit bir tablo tasarımı yapalım. Tabloya ait bilgiler aşağıdaki gibi olsun.
Öğrenci Bilgileri
|
Adı Soyadı |
Boy (cm) |
Kilo (kg) |
İdeal Kilo (kg) |
|
Ahmet Yılmaz |
170 |
65 |
70 |
|
Ayşe Demir |
160 |
50 |
55 |
|
Mehmet Akdeniz |
180 |
75 |
75 |
|
Ortalamalar |
170 |
63.33 |
66.67 |
Şimdi tablodaki bilgiler table etiketiyle web sayfasında tasarlayalım.
<table border="1" cellpadding="10" cellspacing="0">
<caption>Öğrenci Bilgileri</caption>
<thead>
<tr>
<th>Adı Soyadı</th>
<th>Boy (cm)</th>
<th>Kilo (kg)</th>
<th>İdeal Kilo (kg)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ahmet Yılmaz</td>
<td>170</td>
<td>65</td>
<td>70</td>
</tr>
<tr>
<td>Ayşe Demir</td>
<td>160</td>
<td>50</td>
<td>55</td>
</tr>
<tr>
<td>Mehmet Akdeniz</td>
<td>180</td>
<td>75</td>
<td>75</td>
</tr>
</tbody>
<tfoot>
<tr>
<td><strong>Ortalamalar</strong></td>
<td><strong>170</strong></td>
<td><strong>63.33</strong></td>
<td><strong>66.67</strong></td>
</tr>
</tfoot>
</table>
Projeyi kaydedip çalıştıralım. Tablonun sade bir şekilde web sayfasında listelendiğini görürsünüz. Web sayfasına BootStrap kütüphanesini dahil edelim.
<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>
Tablomuzu buna göre yeniden tasarlayalım.
<table class="table table-bordered table-hover caption-top">
<caption class="text-center text-white bg-primary fw-bold">
<h3>Öğrenci Boy ve Kilo Bilgileri</h3></caption>
<thead class="table-dark">
<tr>
<th>Adı Soyadı</th>
<th>Boy (cm)</th>
<th>Kilo (kg)</th>
<th>İdeal Kilo (kg)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ahmet Yılmaz</td>
<td>170</td>
<td>65</td>
<td>70</td>
</tr>
<tr>
<td>Ayşe Demir</td>
<td>160</td>
<td>50</td>
<td>55</td>
</tr>
<tr>
<td>Mehmet Akdeniz</td>
<td>180</td>
<td>75</td>
<td>75</td>
</tr>
</tbody>
<tfoot class="table-dark">
<tr>
<td><strong>Ortalamalar</strong></td>
<td><strong>170</strong></td>
<td><strong>63.33</strong></td>
<td><strong>66.67</strong></td>
</tr>
</tfoot>
</table>
Veriler sabit olarak verilseydi tablo tasarımımız böyle olabilirdi. Ancak her gelen öğrenciyi tabloya ekleme işlemi, verilerde düzenleme ya da silme işlemlerinde sürekli tablo üzerinde işlem yapmamız gerekecekti. Bundan dolayı tabloda yer alan bilgileri dinamik olarak ekleyip çıkarmak istiyoruz. İdeal kilonun düzgün bir şekilde yukarıda verilen formüllere göre hesaplanmasını istiyoruz. Şimdi bu işlemleri yapalım. Tablomuza ait gerekli boşlukları ayarlayalım. Formülde gerekli olan alanları tabloya ekleyelim. Tablonun dinamik sahasını belirleyelim. Sayfanın son hali aşağıdaki gibi olacaktır.
<div class="container mt-3">
<table class="table table-bordered table-hover caption-top">
<caption class="text-center text-white bg-primary fw-bold">
<h3>Öğrenci Boy ve Kilo Bilgileri</h3></caption>
<thead class="table-dark">
<tr>
<th>Adı Soyadı</th>
<th>Boy (cm)</th>
<th>Kilo (kg)</th>
<th>İdeal Kilo (kg)</th>
<th>Durumu</th>
<th>İşlemler</th>
</tr>
</thead>
<tbody>
<!--Dinamik içerik buraya gelecek-->
</tbody>
<tfoot class="table-dark">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
</tfoot>
</table>
</div>
Tabloda kayıt ekleme, düzenleme ve silme işlemleri için icon kullanacağımız için bootstrapa ait icon dosyasını web sayfasına ekleyelim.
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/
bootstrap-icons.css" rel="stylesheet">
Kayıt ekleme için İşlemler sütununa gerekli olan butonu ekleyelim.
<th>İşlemler <button class="btn btn-success btn-sm" id="btn-ekle"
title="Yeni Öğrenci Ekle"><i class="bi bi-plus-circle"></i></button></th>
Kayıt ekleme, düzenleme, silme işlemlerini Modal Popup kullanarak gerçekleştireceğiz. Öncelikle ekleme işlemini gerçekleştiren modal popup tasarımını yapalım.
<!-- Ekleme Modal -->
<div class="modal fade" id="ogrenciEkleModal" tabindex="-1"
aria-labelledby="ogrenciEkleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ogrenciEkleModalLabel">
Yeni Öğrenci Ekle</h5>
<button type="button" class="btn-close"
data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form id="ogrenciForm">
<div class="mb-3">
<label for="adSoyad" class="form-label">
Adı Soyadı</label>
<input type="text" class="form-control"
id="adSoyad" required>
</div>
<div class="mb-3">
<label for="boy" class="form-label">
Boy (cm)</label>
<input type="number" class="form-control"
id="boy" required>
</div>
<div class="mb-3">
<label for="kilo" class="form-label">
Kilo (kg)</label>
<input type="number" class="form-control"
id="kilo" required>
</div>
<div class="mb-3">
<label for="cinsiyet" class="form-label">
Cinsiyet</label>
<select class="form-select" id="cinsiyet"
required>
<option value="Erkek">Erkek</option>
<option value="Kadın">Kadın</option>
</select>
</div>
<button type="submit" class="btn btn-primary">
Ekle</button>
</form>
</div>
</div>
</div>
</div>
Düzenleme işlemi için gerekli olan modal popup tasarımını yapalım.
<!-- Düzenleme Modal -->
<div class="modal fade" id="ogrenciDuzenleModal" tabindex="-1"
aria-labelledby="ogrenciDuzenleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ogrenciDuzenleModalLabel">
Öğrenci Düzenle</h5>
<button type="button" class="btn-close"
data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form id="ogrenciDuzenleForm">
<div class="mb-3">
<label for="duzenleAdSoyad" class="form-label">
Adı Soyadı</label>
<input type="text" class="form-control"
id="duzenleAdSoyad" required>
</div>
<div class="mb-3">
<label for="duzenleBoy" class="form-label">
Boy (cm)</label>
<input type="number" class="form-control"
id="duzenleBoy" required>
</div>
<div class="mb-3">
<label for="duzenleKilo" class="form-label">
Kilo (kg)</label>
<input type="number" class="form-control"
id="duzenleKilo" required>
</div>
<div class="mb-3">
<label for="duzenleCinsiyet" class="form-label">
Cinsiyet</label>
<select class="form-select" id="duzenleCinsiyet"
required>
<option value="Erkek">Erkek</option>
<option value="Kadın">Kadın</option>
</select>
</div>
<button type="submit" class="btn btn-primary">
Güncelle</button>
</form>
</div>
</div>
</div>
</div>
Sıra geldi silme işlemi için gerekli olan tasarıma.
<!-- Silme Modal -->
<div class="modal fade" id="silmeModal" tabindex="-1"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Kayıt Silme</h5>
<button type="button" class="btn-close"
data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Bu kaydı silmek istediğinize emin misiniz?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-bs-dismiss="modal">İptal</button>
<button type="button" class="btn btn-danger"
id="btn-sil-onayla">Sil</button>
</div>
</div>
</div>
</div>
Kodlarımızı yazalım.
<script>
let silinecekSatir = null;
let duzenlenecekSatir = null;
$(document).ready(function () {
$("tfoot").hide(); // Başlangıçta tfoot gizlenir.
function hesaplaOrtalama() {
let toplamBoy = 0, toplamKilo = 0, satirSayisi = 0;
$("table tbody tr").each(function () {
toplamBoy += parseFloat($(this).find("td:eq(1)").text());
toplamKilo += parseFloat($(this).find("td:eq(2)").text());
satirSayisi++;
});
if (satirSayisi > 0) {
$("#boyOrt").text((toplamBoy / satirSayisi).toFixed(2));
$("#kiloOrt").text((toplamKilo / satirSayisi).toFixed(2));
$("tfoot").show(); // Kayıt varsa tfoot gösterilir.
} else {
$("tfoot").hide(); // Kayıt yoksa tfoot gizlenir.
$("#ogrenciEkleModal").modal("show");
// Kayıt yoksa modal açılır.
}
}
// Modal açma işlemi
$("#btn-ekle").click(function () {
$("#ogrenciEkleModal").modal("show");
});
// Form submit işlemi
$("#ogrenciForm").submit(function (e) {
e.preventDefault();
let adSoyad = $("#adSoyad").val();
let boy = parseFloat($("#boy").val());
let kilo = parseFloat($("#kilo").val());
let cinsiyet = $("#cinsiyet").val();
let idealKilo = cinsiyet === "Erkek" ?
50 + 2.3 * ((boy / 2.54) - 60) : 45.5 + 2.3 * ((boy / 2.54) - 60);
idealKilo = idealKilo.toFixed(1);
let vki = (kilo / ((boy / 100) ** 2)).toFixed(1);
let durum = vki < 18.5 ? "Zayıf" : vki < 24.9 ?
"Normal" : vki < 29.9 ? "Kilolu" : "Obez";
$("table tbody").append(`
<tr>
<td>${adSoyad}</td>
<td>${boy}</td>
<td>${kilo}</td>
<td>${idealKilo}</td>
<td>${durum}</td>
<td style="display: none;">
${cinsiyet}</td>
<td>
<button class=
"btn btn-warning btn-sm btn-duzenle" title="Düzenle">
<i class="bi bi-pencil"></i></button>
<button class=
"btn btn-danger btn-sm btn-sil" title="Sil">
<i class="bi bi-trash"></i></button>
<button class=
"btn btn-success btn-sm btn-ekle" title="Yeni Öğrenci Ekle"><
i class="bi bi-plus-circle"></i></button>
</td>
</tr>
`);
hesaplaOrtalama();
$("#ogrenciForm")[0].reset();
$("#ogrenciEkleModal").modal("hide");
});
// Düzenleme işlemi için modal
$(document).on("click", ".btn-duzenle", function () {
duzenlenecekSatir = $(this).closest("tr");
let adSoyad = duzenlenecekSatir.find("td:eq(0)").text();
let boy = duzenlenecekSatir.find("td:eq(1)").text();
let kilo = duzenlenecekSatir.find("td:eq(2)").text();
let cinsiyet = duzenlenecekSatir.find("td:eq(5)").text();
$("#duzenleAdSoyad").val(adSoyad);
$("#duzenleBoy").val(boy);
$("#duzenleKilo").val(kilo);
$("#duzenleCinsiyet").val(cinsiyet);
$("#ogrenciDuzenleModal").modal("show");
});
// Düzenleme form submit işlemi
$("#ogrenciDuzenleForm").submit(function (e) {
e.preventDefault();
let adSoyad = $("#duzenleAdSoyad").val();
let boy = parseFloat($("#duzenleBoy").val());
let kilo = parseFloat($("#duzenleKilo").val());
let cinsiyet = $("#duzenleCinsiyet").val();
let idealKilo = cinsiyet === "Erkek" ?
50 + 2.3 * ((boy / 2.54) - 60) : 45.5 + 2.3 * ((boy / 2.54) - 60);
idealKilo = idealKilo.toFixed(1);
let vki = (kilo / ((boy / 100) ** 2)).toFixed(1);
let durum = vki < 18.5 ? "Zayıf" : vki < 24.9 ?
"Normal" : vki < 29.9 ? "Kilolu" : "Obez";
duzenlenecekSatir.find("td:eq(0)").text(adSoyad);
duzenlenecekSatir.find("td:eq(1)").text(boy);
duzenlenecekSatir.find("td:eq(2)").text(kilo);
duzenlenecekSatir.find("td:eq(3)").text(idealKilo);
duzenlenecekSatir.find("td:eq(4)").text(durum);
duzenlenecekSatir.find("td:eq(5)").text(cinsiyet);
hesaplaOrtalama();
$("#ogrenciDuzenleModal").modal("hide");
});
// Silme işlemi için modal
$(document).on("click", ".btn-sil", function () {
silinecekSatir = $(this).closest("tr");
$("#silmeModal").modal("show");
});
$("#btn-sil-onayla").click(function () {
if (silinecekSatir) {
silinecekSatir.remove();
hesaplaOrtalama();
$("#silmeModal").modal("hide");
}
});
// Yeni öğrenci ekleme butonuna tıklama işlemi
$(document).on("click", ".btn-ekle", function () {
$("#ogrenciEkleModal").modal("show");
});
// Sayfa yüklendiğinde tablo boşsa ekleme modalını aç
if ($("table tbody tr").length === 0) {
$("#ogrenciEkleModal").modal("show");
}
});
</script>
Projeyi kaydedip çalıştıralım. Uygulamanın çalıştığını görürsünüz.
|