#40-42 Form Handling & Arithmetic with PHP―if(){}の使い方
今日はOOを入力したらXXをアウトプットするという仕組みを作る練習をします。そのために使うのはhtmlの<form>とphpのif(isset( ))です。さっそく練習問題に入りましょう。
練習問題１―ボタン編
ボタンを押すと、そのボタンに表示されている文字が出力される仕組みを作ります。
まず<form>を使ってボタンを作ります。ボタンを作るにはinput typeをsubmitにします。表示内容はvalue=""に入力します。ボタンには統一したnameを付けます。
<form action="#" method="post">
<input type="submit" value="Monday" name="submit_button">
<input type="submit" value="Tuesday" name="submit_button">
<input type="submit" value="Wednesday" name="submit_button">
<input type="submit" value="Thursday" name="submit_button">
<input type="submit" value="Friday" name="submit_button">
</form>
①ボタンが押されたら、②そのボタンに書いてある値を表示したいので
<?php
if(isset($_POST['submit_button'])){ //①。 [' ']内にはinput nameを入力
$day_post = $_POST['submit_button']; //表示したい値を格納するvariable
echo "$day_post"; //②アウトプットを表示
}
?>
練習問題2―四則演算編
次に、練習2のようなアウトプットを作ります。2種類のフォームに数字を入力しCalculateボタンを押すと、その四則演算が出力されるフォームです。
まず、表示範囲を決めるために<div class="container"></div>を作ります。以下のコードは全てこのdivの中に書いていきます。
次にタイトルを<h1>tagに入れます。
<h1>Arithmetic Calculator</h1>
続いて、<form>tagで数字の入力欄を作ります。
入力欄の左に"Enter first number:とありますが、その大きさは<label>tagで作ったclassにconrol-label col-sm-2とすることで指定できます。
入力欄の大きさは、サイズを指定するための<div>を作り、(-> <div class="col-sm-10"></div>)その中に数値を入力するための<input>を書くことで指定できます。colの合計値は12なので、ここではラベルの文字をcol-2、入力欄をcol-10で指定します。
2番目の数値入力欄も同様。
最後に入力した数値を計算するためのCalculateボタンを作ります。
ボタンは、数値の入力欄のすぐ下にくるようにしたいので、左側に空欄を作らなければいけません。そのために使うのが、col-sm-offset-2です。
次に、PHPのコードです。
//数値が入力されてCalculateボタンが押されたら計算結果を表示させたいので、
<?php
if(isset($_POST['submit_button'])){
$number1_post = $POST['number1_input'];
$number2_post = $POST['number2_input'];
// 四則演算結果を格納するvariableを和・差・積・商の分を作ります。
$sum = $number1_post + $number2_post;
$difference = $number1_post - $number2_post;
$product = $number1_post * $number2_post;
$quotient = $number1_post / $number2_post;
// 表示させたいアウトプットのコードは以下。
echo '<div class= "panel panel-default">' ;
//デザイン性をもたせるためにbootstrapのpanelを使用
echo '<div class="panel-heading">Results</div>';
echo '<div class= "panel-body"> ';
echo "<p>The sum of $number1_post and $number2_post is: $sum</p>";
echo "<p>The difference of $number1_post and $number2_post is: $difference</p>";
echo "<p>The product of $number1_post and $number2_post is: $product</p>";
echo "<p>The quotient of $number1_post and $number2_post is: $quotient</p>";
echo '</div></div></div>';
}
?>
練習問題3―functionを使う
練習問題2まではシンプルに四則演算をしていましたが、functionを使うコードを紹介します。
入力欄はhtmlの<form>を使って以下のように書きます。
次に、phpです。
<?php
if(isset($_POST['btn_submit'])){ //ここまでは先ほどと同様。
//functionを使う場合、Input, Process, Outputの順にコードを書きます。
// INPUT
$num1 = $_POST['num1'];
$num2 = $_POST['num2'];
// PROCESS
$sum = calculate_sum($num1, $num2);
$diff = calculate_diff($num1, $num2);
$prod = calculate_prod($num1, $num2);
$quot = calculate_quot($num1, $num2);
//OUTPUT
echo "<p>The sum of $num1 and $num2 is $sum</p>";
echo "<p>The difference of $num1 and $num2 is $diff</p>";
echo "<p>The product of $num1 and $num2 is $prod</p>";
echo "<p>The quotient of $num1 and $num2 is $quot</p>";
}
// 次にfunctionを使ってデータの処理方法を指定します。
function calculate_sum($num1, $num2){
return ($num1 + $num2);
}
function calculate_diff($num1, $num2){
return ($num1 - $num2);
}
function calculate_prod($num1, $num2){
return ($num1 * $num2);
}
function calculate_quot($num1, $num2){
return ($num1 / $num2);
}
?>
functionで指定したデータ（ここではcalculate_sumやcalculate_diff）はその定義のまま、後のコードで繰り返して使うことができます。この性質は#44の練習問題でも使うので、効果的な使い方の事例を1つずつでも覚えていくとよいなと思いました。
今日はここまで！
今回も読んでいただき、ありがとうございました。😊
Kredoについて詳しく知りたい方はぜひこちらもご覧ください。😊
この記事が気に入ったらサポートをしてみませんか？