Php ile Beden Kitle İndeksini Hesaplamak

Bir uygulama daha yapayım derken aklıma bir aralar televizyonlarda yer alan kamu spotu geldi. Bu kamu spotunda beden kitle indeksinin nasıl hesaplanacağını ve sonuçta çıkan değerin ne anlama geldiğini söylemekteydi.

Bu dersi jQuery ile hazırlama gereğinde bulundum. Biraz değişiklik olsun diye böyle bir şey yaptım. Önceki derslerde yer alan birkaç özelliği de kullanarak sitede yer alan hiçbir dersin gereksiz olmadığını göstermeye çalıştım.

Şimdi işlemlere geçecek olursak; ilk olarak index.php oluşturalım ve bunun içine bir form alanı oluşturalım. Bu arada reklama da bir göz atmakta fayda var.

<div id="Genel">
<form id="Form" onsubmit="return false">
         <span>Boyunuz <strong>(Örneğin: 180)</strong></span>
            <input type="text" name="boy" />
        <span>Kilonuz <strong>(Örneğin: 80)</strong></span>
            <input type="text" name="kilo" />
       <button type="submit">Vücut Kitle Hesapla</button>
     </form>
</div>

Yukarıda bir form alanı oluşturdum. Bu alana yazılan verileri jQuery ile işlem yaptıracağım için bazı değerleri yazmadım. Şimdi bu alana ait css düzenlemelerini de yaparak şekil verdirelim.

body,head,html,form,span,input,button{padding:0;margin:0;background:transparent;border:none}
:focus{outline:none}
#Genel{width:208px;margin:30px auto;font:14px/21px Arial;height:100%;background-color:#eee;padding:5px}
#Form span{display:block;color:#666}
#Form input{display:block;width:196px;padding:5px;border:1px solid #ddd;background-color:#fff}
#Form span strong{font-size: 9px;color:#888}
button{border:1px solid #ddd;font-weight:bold;color:#444;background:#ccc;padding:5px 10px;margin-top:5px;width:208px;cursor:pointer}

Bazı sıfırlamalar ve düzenlemeler sonucunda hazırlamış olduğumuz form alanı şuan için iş görür bir hal almış oluyor. Şimdi bir de değerleri girdiğimizde gelecek olan sonuçları yazdıracağımız alanı oluşturup css düzenlemesini yapalım.

<div id="Sonuc"></div>

#Sonuc{background-color:#eee;padding:5px;height:65px;display:none}
#Sonuc div{font-size:50px; color:#333;text-align:center;margin-top:15px}
#Sonuc span{display:block;text-align:center;margin-top:12px;font-size:16px}

Html kodumuz olan #Sonuc değerini HTML etiketinden hemen sonra yazalım. Yani Genel divin içinde olsun. Css kodlarını da diğer css kodlarına yazarsak buda tamamlanmış olacak.

Şimdi jQuery kodlarımıza geçebiliriz artık. İlk önce burada yer alan inputlara sayı değerinden başka bir şey yazılmasını istemediğim için script tagları arasına şunları yazıyoruz;

$("input").keyup(function(){
     if (this.value.match(/[^0-9]/g)){
          this.value = this.value.replace(/[^0-9]/g,'');
     }
});

Bu kod ile artık form alanları içinde yer alan inputlar sadece sayısal değerlere izin verecektir. Bununla ilgili daha fazla bilgi almak istiyorsanız o zaman; jQuery ile Sadece Rakam, Harf veya Özel Karaktere İzin Vermek dersini inceleyebilirsiniz.

Şimdi bu küçük düzenlemeden sonra artık ajax methodu ile bilgileri göndererek işlemi yaptıralım. Gönderme işlemini yakalamak için button değerine tıklandığında işlemlerimizi yakalıyoruz.

$("button").click(function(){
 // Bu alanda verileri yollama işlemi yapılacaktır.
}

Evet, yukarıdaki gibi kodu yazdıktan sonra şimdi bunun içini dolduralım. Şimdi bizim sonuç değerimiz gizli durumda. Yani işlem bittiğinde bize gösterecek. Biz bu işlemi tekrarladığımızda gizlemeyecektir ondan dolayı ilk önce sonuç değerini bir gizleyelim;

$("#Sonuc").hide();

Sonuc divini görünmez bir hala getirdikten sonra şimdi bir sorgu yapalım. Bu sorgumuz boy değerini yanlış yazanlar için. Boy değeri 3 haneli olduğundan boy değerinin geldiği inputun içindeki veriyi sayalım ve işlemi yaptıralım.

var BoySay   = $('#Form input:eq(0)').val().length;

Böylece boy değerinden gelen inputun içindekileri saymış olduk. Şimdi içine yazılan değer eğer 3 basamaklı değil ise hata ver diyelim.

if(BoySay != 3){
     alert("Boy değerinde bir sorun var");
}else{
   // Buraya işlemler gelecektir.
}

Böyle de yapınca artık ortada bir hata oluşmasına mani olmuş olduk. Şimdi artık veriyi yollayalım ve gelen cevabımızı alalım.

var bilgiler = $("#Form").serialize();
$.ajax({
   type:"post",url:"ajax.php",data:bilgiler,
   success:function(sonuc){
     if(sonuc=="Bos"){
        alert("Boş Alan Bırakmayınız")
     }else{
        $("#Sonuc").show();
        $("#Sonuc").html(sonuc);
     }
   }
});
 
return false

Evet! Artık girmiş olduğumuz sağlıklı veriler ajax.php sayfasına gönderilecektir. Bu gönderme sonucunda gelen değerler #Sonuc divine html methodu ile yazdırılacaktır. Hemen ajax.php oluşturalım ve bilgileri çekmeye başlayalım.

$Boy = $_POST["boy"];
$Kilo     = $_POST["kilo"];
if($Boy == "" || $Kilo == ""){
echo "Bos";
}else{
  // Buraya hesaplama kodları gelecektir.
}

Artık bitirmek için çok yaklaştık. Yukarıdaki sorgu alanın da oluşturduktan sonra artık reklamda yer alan hesaplamayı yapabiliriz. Hesaplamanın nasıl olduğunu anlamak için reklamı izlemek daha mantıklı olacaktır. Şimdi bu hesaplamaya göre php kodumuzu yazalım.

$Boy      = $Boy /100;
$BoyHesapla    = $Boy * $Boy;
$Hesapla  = round($Kilo / $BoyHesapla);
 
echo "<div>".$Hesapla."</div>";
if($Hesapla < "18.5"){
     echo "<span>Zayıf</span>";
}else if($Hesapla > "18.5" and $Hesapla < "24.9"){
     echo "<span>Normal</span>";
}else if($Hesapla > "24.9" and $Hesapla < "29.9"){
     echo "<span>Hafif Şişman</span>";
}else if($Hesapla > "29.9" and $Hesapla < "34.9"){
     echo "<span>Orta Şişman I</span>";
}else if($Hesapla > "34.9" and $Hesapla < "39.9"){
     echo "<span>Ağır Şişman II</span>";
}else if($Hesapla > "39.9"){
     echo "<span>Ağır Şişman III</span>";
}

Yukarıdaki gibi sağlık durumlarına ait bilgileri de girdikten sonra artık uygulamamız çalışır durumda olacaktır. Bu örneğin nasıl çalıştığını görmek için demoyu görüntüleyebilirsiniz.