一部の画像や動画に異なるUIがありますが、CSS修正の有無によるものでプログラム部分には影響はありません。
前回は登録ボタンを押したらデータがDBに記録できるように実装しました。
今回は、カテゴリーや選択項目をDBと連携します。
前回の記事はこちら↓
今回は「カテゴリーや選択項目をDBに挿入」と「DBデータと画面を連携」の2つに分けて進めていきます。
カテゴリーや選択項目をDBに挿入
データベースに既存のデータがあらかじめないと画面と連動したときにわかりにくいので、以下のデータをphpMyAdminで直接入力しました。
DBデータと画面を連携
DBと連携するステップは①SQLを発行＆実行②SQL実行で得られた値を変数に格納③while構文で出力の3ステップです。
支出収入カテゴリー、クレジットカード、スマホ決済の出力
この4つはほぼ同じプログラムで作れるため一気に進めていきます。
①SQLを発行＆実行
プログラムは、<option value=”0″>選択してください</option> の直下に記述します。
<!--支出カテゴリー部分-->
<option value="0">選択してください</option>
<!--以下を追加-->
<?php
$stmt_spendingcat = $db->prepare('SELECT * FROM spending_category');
sql_check($stmt_spendingcat, $db);
//以下は削除
<option value="1">食費</option>
<option value="2">日用品費</option>
<option value="3">交通費</option><!--収入カテゴリー部分-->
<option value="0">選択してください</option>
<!--以下を追加-->
<?php
$stmt_incomecat = $db->prepare('SELECT * FROM income_category');
sql_check($stmt_incomecat, $db);
//以下は削除
<option value="1">給料</option>
<option value="2">お小遣い</option><!--クレジット部分-->
<option value="0">選択してください</option>
<!--以下を追加-->
<?php
$stmt_credit = $db->prepare('SELECT * FROM creditcard');
sql_check($stmt_credit, $db);
//以下は削除
<option value="1">カードA</option>
<option value="2">カードB</option><!--スマホ決済部分-->
<option value="0">選択してください</option>
<!--以下を追加-->
<?php
$stmt_qr = $db->prepare('SELECT * FROM qr');
sql_check($stmt_qr, $db);
//以下は削除
<option value="1">PayPay</option>
<option value="2">d払い</option>
<option value="3">LINE Pay</option>SQLはSELECTの後ろに全カラム取得を表す「*」を、FROMの後ろにテーブル名を記述します。
そしてsql_check($stmt_〇〇, $db);で実行することができます。
②SQL実行で得られた値を変数に格納
上記まででSQLが実行されるので、SQL実行チェック関数を呼び出します。そのためにファイル冒頭で「functions.php」を読み込んでおきます。
include_once('./functions.php');ファイルの読み込みを記述したら、以下を先程のPHPのプログラムの下に続けて記述します。
sql_check($stmt_〇〇, $db); //〇〇にはそれぞれの値「spendingcat」「incomecat」「credit」「qr」を記述
$stmt_〇〇->bind_result($id, $name); //４つともに同じ・〇〇には上記同様それぞれの値を記述カッコ内の順番はデータベースのカラム左からの順番です。今回の場合はidカラム→$id、nameカラム→$nameとしています。
③while構文で出力
得られたデータを1つ1つ処理してoptionタグを生成します。
以下の記述を先程のPHPのプログラムの下に続けて記述します。こちらも支出カテゴリーと収入カテゴリー同じ内容でOKです。
while ($stmt_〇〇->fetch()) : //〇〇にはこれまで同様それぞれの値を記述
?>
<option value="<?php echo h($id); ?>"><?php echo h($name); ?></option>
<?php endwhile; ?>$stmt→fetch()でDBに記録されているデータを1つ1つ取り出すことができます。
そしてwhile構文内でoptionタグを生成しています。valueには、echo h($id) としてid番号が挿入され、選択文字列はnameが出力されます。
ここで h($〜〜) の関数を作成していきます。取り出したデータを出力する際の安全性を高めるためにhtmlspecialcharsというのがあり、通常は<?php echo htmlspecialchars($〜〜); ?>と記述するのですが、長すぎるので関数にして短くしています。
functions.phpに以下を記述します。
//htmlspecialchars短縮関数
function h($value) {
return htmlspecialchars($value);
}ブラウザに戻って、支出収入カテゴリーが問題なくDBと同じ項目になっていれば連携成功です。
<!--支出カテゴリー-->
<p class="long-name">支出カテゴリー</p>
<select name="spending_category" id="spendingCategory">
<option value="0">選択してください</option>
<?php
$stmt_spendingcat = $db->prepare('SELECT * FROM spending_category');
sql_check($stmt_spendingcat, $db);
$stmt_spendingcat->bind_result($id, $name);
while ($stmt_spendingcat->fetch()) :
?>
<option value="<?php echo h($id); ?>"><?php echo h($name); ?></option>
<?php endwhile; ?>
</select>
<!--支出カテゴリー-->
<!--収入カテゴリー-->
<p class="long-name">収入カテゴリー</p>
<select name="income_category" id="incomeCategory">
<option value="0">選択してください</option>
<?php
$stmt_incomecat = $db->prepare('SELECT * FROM income_category');
sql_check($stmt_incomecat, $db);
$stmt_incomecat->bind_result($id, $name);
while ($stmt_incomecat->fetch()) :
?>
<option value="<?php echo h($id); ?>"><?php echo h($name); ?></option>
<?php endwhile; ?>
</select>
<!--収入カテゴリー-->
<!--クレジットカード-->
<p class="long-name">クレジットカード</p>
<div class="p-form__item-box">
<select name="credit">
<option value="0">選択しない</option>
<?php
$stmt_credit = $db->prepare('SELECT * FROM creditcard');
sql_check($stmt_credit, $db);
$stmt_credit->bind_result($id, $name);
while ($stmt_credit->fetch()) :
?>
<option value="<?php echo h($id); ?>"><?php echo h($name); ?></option>
<?php endwhile; ?>
</select>
<!--クレジットカード-->
<!--スマホ決済-->
<p class="long-name">スマホ決済種類</p>
<div class="p-form__item-box">
<select name="qr">
<option value="0">選択しない</option>
<?php
$stmt_qr = $db->prepare('SELECT * FROM qr');
sql_check($stmt_qr, $db);
$stmt_qr->bind_result($id, $name);
while ($stmt_qr->fetch()) :
?>
<option value="<?php echo h($id); ?>"><?php echo h($name); ?></option>
<?php endwhile; ?>
</select>
<!--スマホ決済-->支払い方法の出力
payment_methodテーブルは、JavaScriptでイベントを仕込んでいるため、他の４つの選択項目のように実装してしまうとカード選択やスマホ決済選択ができなくなってしまいます。
なので少しイレギュラーな実装をします。
①SQLを発行・実行
<option value="0">選択してください</option>
<!--以下を追加-->
<?php
$fixedPaymentMethod = ['現金', 'クレジット', 'スマホ決済'];
$fixedPaymentMethod_id = ['', 'radioCredit', 'radioQr'];
for ($i = 0; $i < 3; $i++) : ?>
<option value="<?php echo $i + 1; ?>" id="<?php echo $fixedPaymentMethod_id[$i]; ?>">
<?php echo $fixedPaymentMethod[$i]; ?>
</option>
<?php endfor; ?>
<?php
$stmt_paymethod = $db->prepare('SELECT * FROM payment_method WHERE id>3');
sql_check($stmt_paymethod, $db);
//以下は消すかコメントアウトする
<option value="1">現金</option>
<option value="2" id="radioCredit">クレジット</option>
<option value="3" id="radioQr">スマホ決済</option>
<option value="4">交通系IC</option>これまでと違うのは、「現金〜スマホ決済をwhile文で出力しない」、「SQLにWHERE句でidが3より大きいデータ取得の指定を追加する」の2点です。
まずは「現金〜スマホ決済」の配列とid値の配列を生成し、for文で3つの項目を出力します。
endfor以降はSQLに「WHERE id>3」を加えるだけでほかはこれまで同様です。
ループ文に組み込んで、nameが「クレジット」「スマホ決済」だったらidを入れるというプログラムも書くことはできますが、複雑になってしまうので今回は外に出した実装で進めます。
②SQL実行で得られた値を変数に格納
$stmt_paymethod->bind_result($id, $name);この部分はカテゴリーのときと変わりません。
③while構文で出力
while ($stmt_paymethod->fetch()) :
?>
<option value="<?php echo h($id); ?>"><?php echo h($name); ?></option>
<?php endwhile; ?>この部分もカテゴリーのときと変わりません。
<p class="long-name">支払い方法</p>
<select name="payment_method" id="paymentMethod" onchange="hasChildSelect('2', creditSelectBox, qrChecked);hasChildSelect('3', qrSelectBox, creditChecked);">
<option value="0">選択してください</option>
<?php
$fixedPaymentMethod = ['現金', 'クレジット', 'スマホ決済'];
$fixedPaymentMethod_id = ['', 'radioCredit', 'radioQr'];
for ($i = 0; $i < 3; $i++) : ?>
<option value="<?php echo $i; ?>" id="<?php echo $fixedPaymentMethod_id[$i]; ?>" ; ?><?php echo $fixedPaymentMethod[$i]; ?></option>
<?php endfor; ?>
<?php
$stmt_paymethod = $db->prepare('SELECT * FROM payment_method WHERE id>3');
sql_check($stmt_paymethod, $db);
$stmt_paymethod->bind_result($id, $name);
while ($stmt_paymethod->fetch()) : ?>
<option value="<?php echo h($id); ?>"><?php echo h($name); ?></option>
<?php endwhile; ?>
</select>以上でカテゴリーや選択項目のDB連携は完了です。
最後に
今回はDBに記録されているカテゴリーや選択項目を画面と連携させました。
次回は今回連携させたカテゴリーや選択項目の編集画面を実装していきます。
最後までお読みいただきありがとうございました。
コメント