PHPで計算フォームを作成、対比の比較計算機を作成する
カテゴリ：WEB制作
タグ：
ウェブ上で計算する場合はよくJavaScriptを使用しますが、今回はPHPで計算フォームを作成してみました。
対比計算をするためのフォームです。
フォームのデータをポストして処理させるといった一連の流れのイメージの参考になるかと思います。
コード紹介
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
</head>
<body>
<div class="inner">
<?php
function calculate_ratio($base_num, $org) {
if ($base_num == 0 || $org == 0) {
return "0では計算できません";
}
$ratio = $org / $base_num;
$ratio = round($ratio, 2);
return "1:" . $ratio;
}
$result = "";
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$base_num = isset($_POST['base_num']) ? floatval($_POST['base_num']) : 0;
$org = isset($_POST['org']) ? floatval($_POST['org']) : 0;
$result = calculate_ratio($base_num, $org);
}
?>
<form method="POST" action="">
<label for="base_num">基準値</label>
<input type="number" step="0.01" id="base_num" name="base_num" placeholder="例: 0.7" required>
<label for="org">比較対象</label>
<input type="number" step="0.01" id="org" name="org" placeholder="例: 1.2" required>
<button type="submit" class="search_btn">計算</button>
</form>
<dl>
<dt>結果：</dt>
<dd><?php echo !empty($result) ? htmlspecialchars($result) : "計算結果がここに表示されます"; ?></dd>
</dl>
<style>
form{
text-align: center
}
.inner{
max-width: 800px;
margin: 40px auto 0;
padding: 30px 30px 10px;
background: #f8f8f8
}
label{
font-size: 14px;
font-weight: bold;
margin-left: 20px;
margin-right: 10px;
}
input{
padding: 10px;
font-size: 16px;
width: 90px;
}
.search_btn{
margin-top: 20px;
display: block;
width: 100%;
padding: 20px;
font-size: 16px;
font-weight: bold;
background: #0044AA;
color: #FFF;
border: none;
}
dl{
display: flex;
flex-wrap: wrap;
}
dl dt{
font-weight: bold;
width: 70px;
text-align: left;
margin: 0;
}
dl dd{
font-weight: bold;
width: calc( 100% - 90px );
text-align: left;
margin: 0 0 0 20px;
}
</style>
</div>
</body>
</html>
コードの解説
CSSは割愛します。
PHP
フォームの入力値を受け取って処理する比較計算の関数を作成します。
function calculate_ratio($base_num, $org) {}
中の処理はまず、入力値が有効かどうかをチェックします。0の場合はエラーの文字列を返します。
if ($base_num == 0 || $org == 0) {
return "0では計算できません";
}
比率を1に基準として計算します。
$ratio = $org / $base_num;
出てきた数値を第二位で四捨五入します。
$ratio = round($ratio, 2);
結果を1対○の形式で返します。
return "1:" . $ratio;
フォームが送信された場合の処理を書きます。
結果を返す際の変数を宣言しておきます。
$result = "";
データがポストされたら実行します。
if ($_SERVER["REQUEST_METHOD"] == "POST") {}
以下は三項演算子を使って変数に数値を挿入しています。
三項演算子は(条件式)?(真式):(偽式)となります。
issetで値が入力されているかどうかをチェック、値があれば？(はてなマーク)の右を処理します。
数値があればその数値が、なければ0が挿入されます。
$base_num = isset($_POST['base_num']) ? floatval($_POST['base_num']) : 0; $org = isset($_POST['org']) ? floatval($_POST['org']) : 0;
以下で作成した関数に入力値を渡して処理を回しています。
$result = calculate_ratio($base_num, $org);
HTMLを解説
それぞれ入力フォームに数値を引き取るためのname属性を付与しています。
<form method="POST" action="">
<label for="base_num">基準値</label>
<input type="number" step="0.01" id="base_num" name="base_num" placeholder="例: 0.7" required>
<label for="org">比較対象</label>
<input type="number" step="0.01" id="org" name="org" placeholder="例: 1.2" required>
<button type="submit" class="search_btn">計算</button>
</form>
以下で結果を表示させています。
<dl>
<dt>結果：</dt>
<dd><?php echo !empty($result) ? htmlspecialchars($result) : "計算結果がここに表示されます"; ?></dd>
</dl>
まとめ
以上、『PHPで計算フォームを作成、対比の比較計算機を作成する』でした。
ぜひ、参考にしてください。
