☰
KAKEblog Written by kake

[簡単]プログラミングBMI計算の作り方（PHP）

Web プログラミング

[簡単]プログラミングBMI計算の作り方（PHP）

こんにちは。kakeです。

先日にこのようなBMIを測定するアプリを作りました。とても簡単な内容なので、すぐに作れます。

このようなものです。

https://ksproduct.xyz/bmi/

それでは、解説していきます。

BMI測定の仕様

仕様はとても簡単です。

  • 身長と体重を入力する→BMIが測定される
  • コメント出力させる

たったのこれだけなのですぐに作れますね。

今回はCSSについては省きます。

今回使用する言語

HTML,(CSS),PHP,jQueryの４つを使っています。

機能の部分をPHPで作り、jQueryで一箇所だけ動きをつけました。

BMI測定の作り方

それでは作り方について解説していきます。

まず、用意するファイルは今回は4つです。

用意するファイル4つ

  • index.php
  • result.php
  • script.js
  • stylesheet.css

index.phpはメイン画面です。つまり、身長と体重を記入する部分です。

result.phpはBMIの値を出力する画面です。つまり結果の画面ですね。

script.jsはコメントを出すときに動きをつけるために作りました。他にも機能を加えて、さらに動きをつける場合はここに記述していきましょう。

stylesheet.cssではスタイルの記述をしていきましょう。今回は解説の対象外とします。

記入画面の作りこみ

まずは、index.phpの記述からしていきましょう。

formで身長と体重を選択してPOSTで送ってあげましょう。以下のように記述すればオッケーです。

<h1>BMI測定システム</h1>
 <form　action="" method="post">
   <p>身長を選択してください</p>
   <select name="height">
     <?php for($i=130;$i<200;$i++): ?>
     <option value="<?php echo $i; ?>"><?php echo $i; ?></option>
     <?php endfor; ?>
   </select>
   <p>体重を選択してください</p>
   <select name="weight">
　　　<?php for($j=30;$j<200;$j++): ?>
     <option value="<?php echo $j; ?>"><?php echo $j; ?></option>
     <?php endfor; ?>
   </select>
   <br>
   <br>
   <input type="submit" value="BMIの結果をみる">
</form>

上のように表示されていればオッケーです。

optionタグの中身はPHPで記述してあげましょう。forを使いループさせます。

formではactionは空にして、index.phpにpostで返してあげましょう。

結果画面の作りこみ

さて次に結果画面を作っていきます。

result.phpに記述していきます。

<h1>BMI測定結果</h1>
<p>BMI値：<?php echo $bmi; ?></p>

<!-- コメント部分 -->
<div class="comment">
 <p>コメント</p>
 <?php if($bmi>25): ?>
  <p><?php echo $comments[2]; ?>
 <?php endif; ?>
 <?php if($bmi<18.5): ?>
  <p><?php echo $comments[0]; ?>
 <?php endif; ?>
 <?php if(18.5<=$bmi && $bmi<=25): ?>
  <p><?php echo $comments[1]; ?>
 <?php endif; ?>
</div>

こんな感じです。

&&は「かつ」という意味です。

$bmiと$commentsについてはあとで解説していきます。

formの結果を受け取る

さてindex.phpに戻り、postされた結果を受け取り、session(セッション)として保存しつつ、result.phpに移動します。

index.phpの先頭で記述していきましょう。

<?php 
session_start();

if(!empty($_POST)){
  $_SESSION = $_POST;
  header('Location: result.php');
  exit();
 }
?>

これでresult.phpに移動します。

result.phpに移動したら、BMIの計算をしていきます。

result.phpの先頭で記述していきます。

<?php
session_start();
$bmi = number_format(($_SESSION['weight']/($_SESSION['height']*$_SESSION['height']))*10000 , 2);

$comments = array('コメント1','コメント2','コメント3');

?>

$bmiにはBMIの計算結果を代入します。また、小数点二桁まで表示するために、number_formatを利用しました。

この時$_SESSIONに値が保存されているので、nameを指定して計算していきます。

※session_start();を忘れないようにしましょう。

そして$commentsにはコメントをいれておきました。

これで機能面についてはできました。

jQueryでコメントを表示する(おまけ)

せっかくなので動きをつけてあげましょう。

result.phpのコメントの部分を非表示にしておき、ボタンが押されたら表示されるように、しましょう。

  • コメント部分をCSSで非表示にしておく
  • 「コメントを見る」ボタンが押されたら、jQueryで表示させる
    ※ボタンを作ってください。

この流れで作りましょう。

jQueryは以下のようにscript.jsに記述します。

$(function(){
  $('.btn').click(function(){
  $('.comment').fadeIn();  
  });
});

ざっとこんな感じです。

クリックファンクションを使って、表示させてあげればいいですね。

まとめ

以上かなりはしょりながら簡単に解説しましたが、BMIを測定するアプリの作り方でした。

基礎的なPHPの使い方にもなるので、これくらいはサクッと作れるといいですね。

何かミスなどあればぜひコメントください。僕も学びになります。

それではまた。

>  >  [簡単]プログラミングBMI計算の作り方（PHP）