PHP+MySQLで家計簿システム開発#4【カテゴリーや選択項目の編集画面】

一部の画像や動画に異なるUIがありますが、CSS修正の有無によるものでプログラム部分には影響はありません。

前回はDBに登録しているカテゴリーや選択項目を画面と連携させました。
今回は画面からカテゴリーや選択項目を編集できる遷移先のページを作っていきます。
前回の記事はこちら↓

一部の画像や動画に異なるUIがありますが、CSS修正の有無によるものでプログラム部分には影響はありません。前回は登録ボタンを押したらデータがDBに記録できるように実装しました。今回は、カテゴリーや選択項目をDBと連携します。前回の記事はこ...

今回は「パラメータの設定」「DBと連携する」の2ステップで進めていきます。

パラメータの設定
DBと連携する
関連パーツのPHP化
1. サブタイトル
2. 操作禁止項目から編集削除ボタンを消す
最後に

パラメータの設定

現状ホーム画面、選択項目の右端に設置している「編集」ボタンから編集画面（item-edit.php）に遷移することはできますが、今のままだと全て同じページに飛んでしまいます。

パラメータをつけることで、1つのファイルのページでも画面の内容を編集したいカテゴリーや選択項目を表示することができます。

今回渡したいのはテーブル名です。このテーブル名をどう渡すかというと、

<!--支出カテゴリーの編集ボタンの場合-->
<a class="addbutton addbutton--category" href="./item-edit.php?editItem=0">編集</a>

上記のhref属性の？の後ろに「editItem=0(以降連番)」を記述することで遷移先のページに情報渡すことができます。
そのままテーブル名を渡すほうが手間はかからないのですが、テーブル名がユーザーから確認できる状態になる＆悪意のある文字列がURLに直接入力されバグの可能性につながるため、今回は番号にしています。
また今回のパラメータは1つですが、2つ以上つけたい場合は&をつけて追加することで設定できます。

それではきちんとパラメータが渡されたか確認するため、以下のようにindex.phpの入力部分にある編集ボタンのhref属性の末尾にパラメータを設定します。（class属性は割愛しています）

※「<a class=”c-button c-button–bg-gray”」でファイル内文字列検索を行うと見つけやすいです。

<a href="./item-edit.php?editItem=0">編集</a> <!--支出カテゴリーの編集ボタン-->
<a href="./item-edit.php?editItem=1">編集</a> <!--収入カテゴリーの編集ボタン-->
<a href="./item-edit.php?editItem=2">編集</a> <!--支払い方法の編集ボタン-->
<a href="./item-edit.php?editItem=3">編集</a> <!--クレジットカードの編集ボタン-->
<a href="./item-edit.php?editItem=4">編集</a> <!--スマホ決済の編集ボタン-->

設定したあと画面から編集ボタンをクリックし、URLをみると「省略/item-edit.php?editItem=1」などそれぞれパラメータが渡っているのが確認できます。

では次に受け取ったパラメータをプログラム内で使えるように変数に格納します。
以下の記述をitem-edit.phpファイル冒頭に記述します。

<?php
if (isset($_GET['editItem']) && $_GET['editItem'] >= 0 && $_GET['editItem'] <= 5) :
  $editItem = $_GET['editItem'];
else :
  header('location: ./index.php');
  exit();
endif;
echo $editItem;
?>

まず条件文に、editItemパラメータがセットされているかつ、その数値が0以上5未満であると置きます。条件に当てはまらないときはheader関数でホーム画面に遷移させその時点で処理を終了します。

今回は受け取ったパラメータを$editItemに格納しました。echoしているので正常に受け取れていれば画面から編集ボタンで遷移した際、画面左上に値が表示されます。

DBと連携する

パラメータを渡すことができたのでこれを使ってDBと連携していきます。
まずはitem-edit.phpをDBに接続するため、index.phpでも記述したファイルの読み込みを冒頭に追記します。

require_once('./dbconnect.php');
include_once('./functions.php');

ここからは前回index.phpのカテゴリーや選択項目をDBと連携させたときとほぼ同様のプログラムです。

SQLの発行と実行

<?php
$table_list = ['spending_category', 'income_category', 'payment_method', 'creditcard', 'qr'];
$table_name = $table_list[$editItem];
if (in_array($table_name, $table_list) !== false) :
  $stmt = $db->prepare("SELECT id, name FROM {$table_name}");

//以下は削除
<tr class="p-table__item">
  <td>食費</td>
  <td>
    <button class='c-button c-button--bg-green edit'><i class="fa-solid fa-pen"></i></button>
    <a class='c-button c-button--bg-red delete' id="" href=''><i class="fa-regular fa-trash-can"></i></a>
  </td>
</tr>

<tr class="p-table__item">
  <td>日用品費</td>
  <td>
    <button class='c-button c-button--bg-green edit'><i class="fa-solid fa-pen"></i></button>
    <a class='c-button c-button--bg-red delete' id="" href=''><i class="fa-regular fa-trash-can"></i></a>
  </td>
</tr>

<tr class="p-table__item">
  <td>交通費</td>
  <td>
    <button class='c-button c-button--bg-green edit'><i class="fa-solid fa-pen"></i></button>
    <a class='c-button c-button--bg-red delete' id="" href=''><i class="fa-regular fa-trash-can"></i></a>
  </td>
</tr>

まず$table_listで編集項目を保存しているテーブルを配列にしています。
そして$table_nameでどのテーブルを使うのかという情報を$table_list[$editItem]で決めて格納しています。

SQL実行で得た値を変数に格納

sql_check($stmt, $db);
$stmt->bind_result($id, $name);
while ($stmt->fetch()) :
?>

上記コードを先程追記したSQLの発行プログラムの下に追加します。

while構文で出力

    <tr class="p-table__item">
      <td><?php echo h($name); ?></td>
      <td>
        <button class='c-button c-button--bg-green edit'><i class="fa-solid fa-pen"></i></button>
        <a class='c-button c-button--bg-red delete' id="" href=''><i class="fa-regular fa-trash-can"></i></a>
      </td>
    </tr>
<?php
  endwhile;
else :
  header('Location: ./index.php');
endif;
?>

上記を記述すると、該当するデータベースと連携したデータが出力されます。

以上でDBと連携ができました。
またURLのパラメータを存在しない番号（５または６以上など）を入れたり、パラメータなしで開こうとすると、正しく表示されません。
正しくないURLでの遷移が試みられた際の対策として、header(‘Location: ./index.php’)で強制的にホームページへ戻るよう処理をしています。

最後に編集ページ下に設置している、他の選択項目に遷移できるリンクも修正します。

<!--現状-->
<a class="c-button c-button--bg-lightblue" href="./item-edit.php">支出カテゴリー</a>
<a class="c-button c-button--bg-lightblue" href="./item-edit.php">収入カテゴリー</a>
<a class="c-button c-button--bg-lightblue" href="./item-edit.php">支払い方法</a>
<a class="c-button c-button--bg-lightblue" href="./item-edit.php">クレジットカード</a>
<a class="c-button c-button--bg-lightblue" href="./item-edit.php">スマホ決済</a>

<!--以下に書き換え-->
<?php
$item_name = ['支出カテゴリー', '収入カテゴリー', '支払い方法', 'クレジットカード', 'スマホ決済'];
for ($i = 0; $i < count($item_name); $i++) : ?>
  <a class="c-button c-button--bg-lightblue" href="./item-edit.php?editItem=<?php echo $i; ?>"><?php echo $item_name[$i]; ?></a>
<?php endfor; ?>

以前実装した配列を生成し、for文で出力するという処理に変更しました。
これで編集画面から他の選択項目の編集画面へ遷移することができるようになります。

関連パーツのPHP化

テーブルに出力するデータを連携することはできました。
ここからはサブタイトルや編集禁止項目、カテゴリーの追加要素などページによって表示を変えたいところの処理を行っていきます。

サブタイトル

ヘッダー下の【支出カテゴリー編集】となっている箇所をページによって該当の文字列を出力できるようにします。
まずは以下を冒頭の、パラメータを受け取り変数に格納した処理の下に記述します。

if (isset($_GET['editItem']) && $_GET['editItem'] >= 0 && $_GET['editItem'] < 5) :
  $editItem = $_GET['editItem'];
else :
  header('location: ./index.php');
  exit();
endif;

//=========
//以下を追記
//=========
if ($editItem === '0') :
  $subTitle = "支出カテゴリー";
elseif ($editItem === '1') :
  $subTitle = "収入カテゴリー";
elseif ($editItem === '2') :
  $subTitle = "支払い方法";
elseif ($editItem === '3') :
  $subTitle = "クレジットカード";
elseif ($editItem === '4') :
  $subTitle = "スマホ決済";
endif;

$editItemに入っている値に応じてサブタイトルの文字列を変数に格納します。
そしてh2タグ内とtitleタグ内にechoします。

<!--head内-->
<title>家計簿アプリ｜<?php echo $subTitle . '編集'; ?></title>

<!--/headerタグ下-->
<main class="l-main">
 <h2 class="c-text c-text__subtitle"><?php echo '【' . $subTitle . '編集】'; ?></h2>

これで、どの編集画面なのかひと目で分かるようになりました。

操作禁止項目から編集削除ボタンを消す

現在はすべての項目が編集削除できますが、支払い方法の「クレジットカード」と「スマホ決済」は操作されると不具合を起こしてしまうので操作できないようにします。

<!--現状(90行目付近)-->
<td>
  <button class='c-button c-button--bg-green edit'><i class="fa-solid fa-pen"></i></button>
  <a class='c-button c-button--bg-red delete' id="" href=''><i class="fa-regular fa-trash-can"></i></a>
</td>

<!--以下に修正-->
<td>
  <?php if ($table_name === 'payment_method' && $id <= 3) : ?>
    操作不可
  <?php else : ?>
    <button class='c-button c-button--bg-green edit'><i class="fa-solid fa-pen"></i></button>
    <a class='c-button c-button--bg-red delete' id="" href=''><i class="fa-regular fa-trash-can"></i></a>
  <?php endif; ?>
</td>

編集と削除ボタンを出力していた部分に条件分岐を追加しました。
$table_name === ‘payment_method’かつ$idが3以下のデータの場合は「操作不可」を出力するようにしています。