スマートフォン用サイズでBMI測定のページを作成しましょう。
PHPを使用して入力フォームに身長と体重を入力してもらい、BMIを算出する仕組みを作成します。
BMIは次の式で求められます。
BMI=体重/身長^2
入力フォームはinput type=”text”で作成します。
今回は簡易な入力チェックでOKとしますのでrequired属性を使用することで面倒な入力チェックを作成せずに必須入力の仕組みができます。
またPHPでも!empty()を使用することで未入力の切り分けを行います。
BMIチェックサンプル
HTML、PHP参考コード
<?php
if(!empty($_POST['weight']) && !empty($_POST['height'])){
$weight=floatval($_POST['weight']);
$height=floatval($_POST['height']);
$bmi=$weight/pow($height/100,2);
$per=floor($bmi/22*100);
echo "<h1 onClick='history.back()'>BMIチェック</h1>";
echo "<div id='wrapper'><p>あなたのBMIは{$bmi}です。</p>";
echo "<p>気になる肥満度は{$per}です。</p>";
if ($bmi < 18.5) {
echo 'あなたは、やせ過ぎです<img src="dog2.png" alt="yase dog"/> ';
} else if ($bmi > 25) {
echo ' あなたは、太り過ぎです<img src="dog3.png" alt="debu dog"/> ';
} else {
echo 'あなたは、標準です <img src="dog1.png" alt="dog"/>';
}
}else{
$self=$_SERVER["SCRIPT_NAME"];?>
<h1>BMIチェック</h1>
<div id="wrapper">
<p>BMIとは、身長からみた体重の割合を示す体格指数です。身長と体重を入力してボタンをクリックしてください。</p>
<?php
echo '<section id="form"><form action='.$self.' method="POST">';
echo '<p>体重<input type="text" name="weight" required></p>';
echo '<p>身長<input type="text" name="height" required></p>';
echo '<input type=submit value="click">';
echo '</form></section>';
}
?>
</div>
<div id="footer">
<small>STUDIO.M</small>
</div>
CSSはサンプルページのhead内に記述していますので参考にしてください。
スマートフォン用ですからviewportの記述をいれます。
<meta name="viewport" content="width=device-width">
