كيفاش تصاوب تطبيق كيحسب مؤشر كتلة الجسم بإستخدام JSON

imadbelasri Javascript
JS

فهاد الدرس غادي نقومو بالبرمجة ديال واحد لAPI بسيط كيمكن من حساب كتلة الجسم من بعد ما كيستقبل الوزن ديال المستخدم بالإضافة للطول ديالو من بعد كيعرض النتيجة بالإضافة لواحد الرسالة كتضمن واش المستخدم كيعاني من سمنة أو العكس التطبيق بسيط للمبتدئين.


نظرة سريعة بالفيديو


- الملفات الأساسية

غادي تمشي لwamp و منبعد تمشي للمجلد www وتزيد مجلد جديد تسميه bmi_calculator من بعد غادي تزيد فيه 3 ديال المجلدات css و js و includes منبعد غادي تقوم بتحميل bootstrap وغادي تزيد الملف bootstrap.min.css ف css وتزيد ملف تسميه script.js ف js من بعد غادي تزيد ملف تسميه header.php فincludes الملف header.php الكود ديالو هو :

                                                    
                                                        <html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>BMI Calculateur</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"></a>
    </div>
</nav>
                                                    
                                                

- الملف script.php

فهاد الملف كنقوم باسترجاع القيم لي دخل المستخدم من بعد كنتحقق يلا كانت القيم عبارة عن أعداد مكنتش كنعرض رسالة خطأ كانت كانجمعها فJavascript object من بعد كنحولها لString منبعد كنرسلها للملف لي غادي يقوم بحساب كتلة جسم المستخدم وغادي يرسل النتيجة لي غادي يتم عرضها فالملف الرئيسي الكود ديال script.js هو :

                                                        
                                                             function calculateBmi(){
    var height = document.getElementById('height').value;
    var weight = document.getElementById('weight').value;
    if(height%1>=0 && weight%1>=0){
        var url = "http://localhost/Json_Full_Course/BMI_calculator/calculate-bmi.php";
        var xmlHttp = new XMLHttpRequest();
        var jsObject = {ht:height,wt:weight};
        var data = JSON.stringify(jsObject);
        //alert(data);
        xmlHttp.open('POST',url,true);
        xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlHttp.send("input="+data);
        xmlHttp.onreadystatechange = function(){
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
                var output = xmlHttp.responseText;
                var jsOutput = JSON.parse(output);
                document.getElementById("result").innerHTML = "<h4 class='text-primary'>مؤشر كتلة الجسم ديالك <span class='lead label label-default'>"+(jsOutput.bmi).toFixed(2) +"</h4>"+"<h3 id='message'>"+jsOutput.message+"</h3>";
            }
        }
    }else{
        alert("الأرقام لي دخلتي ماشي صحيحة");
    }
}
                                                        
                                                    

- الملف calculate-bmi.php

فالمجلد ديال المشروع كنزيد ملف كنسميه calculate-bmi.php هاد الملف هو لي غادي يقوم باستقبال القيم لي ترسلتلو من script.js من بعد كيقوم بالحساب ديال كتلة الجسم لي هي متعارف عليها bmi = poids/taille*taille منبعد كنتحققو من النتيجة لي عطانا ولي عليها كان نعرضو رسالة للمستخدم و منبعد كنرسلو النتيجة على شكل JSON الكود ديال الملف هو :

                                                        
                                                            <?php
$input = $_REQUEST['input'];
$data = json_decode($input);
$weight = $data->wt;
$height = $data->ht;
$bmi = $weight/($height*$height);
$message = "";
if($bmi < 18.5){
    $message = "<span class='lead label label-danger'>نقص في الوزن</span>";
}else if($bmi >= 18.5 && $bmi <= 24.9){
    $message = "<span class='lead label label-success'>وزن طبيعي</span>";
}else if($bmi > 24.9 && $bmi <= 29.9){
    $message = "<span class='lead label label-warning'>وزن زائد</span>";
}else{
    $message = "<span class='lead label label-danger'>أنت تعاني من سمنة مفرطة</span>";
}
$output = array("bmi"=>$bmi,"message"=>$message);
echo json_encode($output);
                                                        
                                                    

- الملف index.php

هادا الملف الرئيسي لي غادي يمكن المستخدم من إدخال الوزن والطول ديالو وإرسالهم لAPI ومن بعد عرض النتيجة الكود ديالو هو :

                                                        
                                                            <?php include('includes/header.php');?>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
              <div class="panel panel-default">
                <h2 class="text-primary text-center">حاسبة مؤشر كتلة الجسم</h2>
                <div class="row">
                    <div class="col-md-8 col-md-offset-2">
                        <form class="form-vertical">
                            <div class="form-group">
                                <input type="text" class="form-control" id="weight" placeholder="وزن الجسم بكغ">
                            </div>
                            <div class="form-group">
                                <input type="text" class="form-control" id="height" placeholder="الطول بالمتر">
                            </div>
                            <div class="form-group">
                                <input type="button" id="send" class="btn btn-success" value="أحسب" onclick="calculateBmi();"> 
                            </div>
                        </form>
                    </div>
                </div>
              </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6 col-md-offset-1">
                <div id="result"></div>
            </div>
        </div>
    </div>
</body>
</html>
                                                        
                                                    

- الملف main.css

غادي نزيد ملف فالمجلد css غادي نسميه main.css لي غادي يكون فيه واحد الكود css لي غدي يضيف بعض التغييرات على الصفحة الرئيسية ديالنا الكود ديالو هو :

                                                        
                                                            form,h2{
    padding:10px;
}
#message{
    margin: 10px;
}