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. Hatta bu reklamı bir hatırlayacak olursak şöyle bir reklamdı;



Yukarıdaki reklamdan esinlenerek sağlık sitesi olan kişiler olur ya böylesi bir hesaplamanın sitesinde yer almasını ister. İşte bu isteği yerine getirecek olan ders tam olacak burada!

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 </form> 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; 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.

Not: Derslerin videolu olarak devam etmemesinde ki tek neden mikrofonum olmadığı içindir. Mikrofonu da gelen bağışlardan toplanan para ile alacağımdan dolayı bu bilgilendirmeyi dikkate alıp üç beş kuruş bağış yapmakta fayda var ;)

Bağış için paypal link;
EK DOSYA YOK
DEMOYU GÖRÜNTÜLE (73)
- 09.10.2013 / 21:36:26 3

Sosyal Medya Paylaşım Alanı

Bunlarda İlginizi Çekebilir

Genel Makaleler

SQL Injection Açıklarından Kurtulma Yolları

Kategori: Genel Makaleler | 25.07.2014
3:46 Css Dersleri
3:08 Seo(.htaccess)

.htaccess ile ip Banlama

Kategori: Seo(.htaccess) | 03.05.2013
Php Dersleri

Php Switch Case Yapısının Kullanımı

Kategori: Php Dersleri | 30.09.2013
2:55 Php Dersleri

Rastgele Sayı Üretme | Rand | Komutunun Kullanımı

Kategori: Php Dersleri | 02.05.2013

Yorum Listesi (1) # YorumYap

  • emre (08.12.2016 - 17:05:09)
    merhaba hocam, yeni öğreniyorum, rica etsen yapmış olduğunuz kodların dosyasını verir misiniz, ben yaptım bir türlü sonuç bölümüne aktaramıyorum.

Hadi Sende Yorum Yap!

Yorum Gönderilmiştir. Onaylandıktan Sonra Mesajınız Yayınlanacaktır.