PHP+MySQLで家計簿システム開発#5【収支データを画面に出力】

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

今回はrecordsテーブルに格納している収支データを画面に出力していきます。
前回の記事はこちら↓

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

一部の画像や動画に異なるUIがありますが、CSS修正の有無によるものでプログラム部分には影響はありません。前回はDBに登録しているカテゴリーや選択項目を画面と連携させました。今回は画面からカテゴリーや選択項目を編集できる遷移先...

今回は「SQLの発行」と「呼び出しデータをテーブルに出力」の2本柱で進めていきます。

SQLの発行
データを出力
スマホ画面のデータ出力
最後に

SQLの発行

まず収支データを登録しているrecordsテーブルのデータの入り方をおさらいします。

赤枠で囲ったカラムを出力します。
赤枠左から3カラム分とmemoカラムはそのまま呼び出して出力すればOKですが、それ以外のカラムは数値になっているので、文字列の値を出力できるようにする必要があります。

このrecordsに記録されている数値は、該当するテーブルのidと連動しています。
なのでSQLを発行するときに、それぞれのテーブルを見に行って文字列を取得するようにします。

そのSQLというのが以下になります。

<tr class="p-table__head">
  <th>収支日</th>
  <th>タイトル</th>
  <th>収入</th>
  <th>支出</th>
  <th>支出詳細</th>
  <th>操作</th>
</tr>

<!--以下を追加-->
<?php
$sql = 'SELECT records.id, records.date, records.title, records.amount, 
spending_category.name, income_category.name, records.type, 
payment_method.name, creditcard.name, qr.name, records.memo, records.input_time
FROM records 
LEFT JOIN spending_category ON records.spending_category = spending_category.id
LEFT JOIN income_category ON records.income_category = income_category.id
LEFT JOIN payment_method ON records.payment_method = payment_method.id
LEFT JOIN creditcard ON records.credit = creditcard.id
LEFT JOIN qr ON records.qr = qr.id
ORDER BY date DESC, input_time DESC';

まずはSELECTで取得するカラムを指定しています。基本形は「〇〇.△△」で〇〇にテーブル名を、△△にカラム名を記述します。
今回はrecordsテーブルからそのまま取得するデータはrecords.カラム名、他のテーブルを参照するデータは該当テーブル名.nameと記述します。

そしてLEFT JOINで該当カラムの数値とidが連携しているテーブルをつなげて参照します。
基本形は「LEFT JOIN 参照するテーブル名 ON records.カラム名 = 参照するテーブル名.id」です。

最後にデータの日付が近いものを先頭に並べるよう「date DESC」で指示をし、データの日付が同じ場合は入力した日付が遅いデータを先頭に並べるよう「input_time DESC」で指示をしています。

実際にどんなデータが返ってくるのかを見たい場合は、phpMyAdminのrecordsテーブルを開き、SQLタブで実行すると連結されたデータを見ることができます。

続いてこれまで通りSQLの実行と得られた値を変数に格納しループを始めます。
サンプルとして入れていた<tr>〜</tr>はコメントアウトか削除してください。

$stmt = $db->prepare($sql);
$success = $stmt->execute();

$stmt->bind_result(
  $id,
  $date,
  $title,
  $amount,
  $spending_category,
  $income_category,
  $type,
  $paymentmethod,
  $credit,
  $qr,
  $memo,
  $input_time
);

while ($stmt->fetch()) : ?>

  <tr class="p-table__item item1">
    <td> 2022/06/11 </td>
    <td> サンプル1 <span> (食費) <i class="fa-regular fa-message" onclick=""></i> </span> </td>
    <td></td>
    <td> ¥3,000 <span> (クレジット) </span> </td>
    <td>カードB </td>
    <td>
      <form action="./record-edit.php" method="POST">
        <input type="hidden" name="record_id" value="1">
        <input type="submit" class='c-button c-button--bg-green edit fas' id="" value="">
      </form>
      <a class='c-button c-button--bg-red delete' id="" href='' onclick="">
        <i class="fa-regular fa-trash-can"></i>
      </a>
    </td>
  </tr>

<?php endwhile;?> <!--←追記忘れず！-->


<!--以下は削除-->
<tr class="p-table__item item2">
    <td>
      <input type="hidden" name="record_id" value="2">
      2022/06/11
    </td>
    <td class="">
      サンプル2 <span> (給料) <i class="fa-regular fa-message" onclick=""></i> </span>
    </td>
    <td> ¥200,000 </td>
    <td><span></span> </td>
    <td></td>
    <td>
      <form action="./record-edit.php" method="POST">
        <input type="hidden" name="record_id" value="2">
        <input type="submit" class='c-button c-button--bg-green edit fas' id="" value="">
      </form>
      <a class='c-button c-button--bg-red delete' id="" href='' onclick="">
        <i class="fa-regular fa-trash-can"></i>
      </a>
    </td>
  </tr>

それでは取り出したデータを出力していきます。

データを出力

出力テーブルの左カラムから順番に実装していきます。

trタグのclassにデータidを出力

現在trタグのclassにitem1とデータidを入れています。この「１」がrecordsのidと連携するようにします。

<!--書き換え前-->
<tr class="p-table__item item1">

<!--書き換え後-->
<tr class="p-table__item item<?php echo h($id); ?>">

日付を出力

<!--書き換え前-->
<td>2022-05-02</td>

<!--書き換え後-->
<td><?php echo date('Y/m/d', strtotime($date)); ?></td>

date関数を使って「ー」区切りを「/」区切りにするよう変換して出力しています。

date関数は第1引数にフォーマットを指定し、第2引数に指定したフォーマットに変換したいタイムスタンプを指定します。第2引数は省略することができ、省略した場合は現在の時刻が自動的に入れられます。
ここまでを指定すると収支日カラムだけDBと連携します。（データの数はDBに登録しているデータ数によって異なります）

タイトル・カテゴリー出力

続いてタイトルとカテゴリーを出力します。カテゴリーについてはデータが支出か収入かで呼び出す変数が異なるのでif文を使って条件分岐を行います。

<!--書き換え前-->
<td>
  サンプル1
  <span> (食費) <i class="fa-regular fa-message" onclick=""></i> </span>
</td>

<!--書き換え後-->
<td>
  <?php echo h($title); ?>
  <span>
    <?php
    if ($type === 0 && $spending_category !== null) {
      echo '(' . h($spending_category) . ')';
    } else if ($type === 1 && $income_category !== null) {
      echo '(' . h($income_category) . ')';
    } else {
      echo "(不明)";
    }
    ?> 
　　<i class="fa-regular fa-message" onclick=""></i> </span>
</td>

タイトルはそのままechoします。
カテゴリーの出力は$typeに格納されている数値を使って、支出か収入かを判断しカテゴリーがnullではないときにそれぞれのカテゴリーを出力するよう指示しています。

ここまで実装すると以下のようにタイトルカラムも連携しました。

収入金額の出力

収入金額と支出金額も$typeの値を使って出力します。

<!--書き換え前-->
<td></td>

<!--書き換え後-->
<td>
  <?php echo $type === 1 ? '¥' . number_format(h($amount)) : ''; ?>
</td>

$type === 1 という条件（収入データかどうか）を評価し、trueであれば ‘¥’ . number_format($amount)を返し、falseであれば ‘ ‘ (空)を返す演算子です。

number_format($amount)で３桁ごと「,」で区切るようフォーマット指定しています。

支出金額と支払い方法の出力

続いて支出カラムを出力します。金額については収入カラム同様に三項演算子を使って出力します。

<!--書き換え前-->
<td> ¥3,000 <span> (クレジット) </span> </td>

<!--書き換え後-->
<td>
  <?php echo $type === 0 ? '¥' . number_format($amount) : ''; ?>
  <span>
    <?php
    if ($type === 0 && $paymentmethod !== null) {
      echo '(' . h($paymentmethod) . ')';
    } else if ($type === 1) {
      echo "";
    } else {
      echo "(不明)";
    }
    ?>
  </span>
</td>

支出or収入の数値が入っている$typeを使って、支出データ＆支払い方法が記録されている場合は支払い方法を出力します。
収入データのときは空文字を出力し、どの条件にも当てはまらない場合は（不明）を出力するよう記述しています。

ここまで実装すると、支出収入カラムがDBと連携します。

支出詳細の出力

続いて支払い方法が「クレジットカード」「スマホ決済」だったとき、その項目を支出詳細カラムに出力します。

<!--書き換え前-->
<td>カードB </td>

<!--書き換え後-->
<td>
  <?php echo $paymentmethod === "クレジット" ? h($credit) : '' ?>
  <?php echo $paymentmethod === "スマホ決済" ? h($qr) : '' ?>
</td>

金額の出力と同様に三項演算子で条件式を評価し値を返すよう記述しました。

このとき、recordsに登録されている数値がそれぞれの項目を保存しているテーブル(spending_categoryやincome_category、creditcard、qrなど)のidに存在していない場合は、正しく出力されません。

recordsのcreditに「1」が入っているのに出力されない…となったら、creditcardテーブルにidが「1」のデータがあるか確認しましょう。

メモアイコンの出力

現在タイトルカラムに表示しているメモのアイコンを、メモがあるデータのみ出力するようにします。
trタグのclassにメモがある場合には「hasmemo」を出力し、hasmemoを持つtrタグのiタグだけ表示するようにします。

<!--書き換え前-->
<tr class="p-table__item item<?php echo h($id); ?>">

<!--書き換え後-->
<tr class="p-table__item item<?php echo h($id); ?> <?php echo $memo !== '' ? 'hasmemo' : ''; ?>">

現在入っているデータに全てメモを入れているとわかりにくいので、メモなしのデータを登録するか、すでに登録しているデータのmemoを削除するなどして見やすくします。

収支データループ出力部分コード

<?php
$sql = 'SELECT records.id, records.date, records.title, records.amount, spending_category.name, income_category.name, records.type, payment_method.name, creditcard.name, qr.name, records.memo, records.input_time
FROM records 
LEFT JOIN spending_category ON records.spending_category = spending_category.id
LEFT JOIN income_category ON records.income_category = income_category.id
LEFT JOIN payment_method ON records.payment_method = payment_method.id
LEFT JOIN creditcard ON records.credit = creditcard.id
LEFT JOIN qr ON records.qr = qr.id
ORDER BY date DESC, input_time DESC';

$stmt = $db->prepare($sql);
$success = $stmt->execute();

$stmt->bind_result(
  $id,
  $date,
  $title,
  $amount,
  $spending_category,
  $income_category,
  $type,
  $paymentmethod,
  $credit,
  $qr,
  $memo,
  $input_time
);

while ($stmt->fetch()) : ?>

  <tr class="p-table__item item<?php echo h($id); ?> <?php echo $memo !== '' ? 'hasmemo' : ''; ?>">
    <td><?php echo date('Y/m/d', strtotime($date)); ?></td>
    <td>
      <?php echo h($title); ?>
      <span>
        <?php
        if ($type === 0 && $spending_category !== null) {
          echo '(' . h($spending_category) . ')';
        } else if ($type === 1 && $income_category !== null) {
          echo '(' . h($income_category) . ')';
        } else {
          echo "(不明)";
        }
        ?>
        <i class="fa-regular fa-message" onclick=""></i> </span>
    </td>
    <td>
      <?php echo $type === 1 ? '¥' . number_format(h($amount)) : ''; ?>
    </td>
    <td>
      <?php echo $type === 0 ? '¥' . number_format($amount) : ''; ?>
      <span>
        <?php
        if ($type === 0 && $paymentmethod !== null) {
          echo '(' . h($paymentmethod) . ')';
        } else if ($type === 1) {
          echo "";
        } else {
          echo "(不明)";
        }
        ?>
      </span>
    </td>
    <td>
      <?php echo $paymentmethod === "クレジット" ? h($credit) : '' ?>
      <?php echo $paymentmethod === "スマホ決済" ? h($qr) : '' ?>
    </td>
    <td>
      <form action="./record-edit.php" method="POST">
        <input type="hidden" name="record_id" value="1">
        <input type="submit" class='c-button c-button--bg-green edit fas' id="" value="">
      </form>
      <a class='c-button c-button--bg-red delete' id="" href='' onclick="">
        <i class="fa-regular fa-trash-can"></i>
      </a>
    </td>
  </tr>

<?php endwhile; ?>

スマホ画面のデータ出力

今回はスマホの場合は、tableタグではなくdivタグで表示するようにしています。
レスポンシブの要素もデータベースと連携するようにします。

タグの種類が異なるだけで、出力方法は基本PCと同じです。

SQLの発行と実行

まずはPCと同じSQLを発行しwhileでループを始めます。

<?php
$sql = "SELECT records.id, records.date, records.title, records.amount, 
  spending_category.name, income_category.name, records.type, payment_method.name,
  creditcard.name, qr.name, records.memo, records.input_time
  FROM records 
  LEFT JOIN spending_category ON records.spending_category = spending_category.id
  LEFT JOIN income_category ON records.income_category = income_category.id
  LEFT JOIN payment_method ON records.payment_method = payment_method.id
  LEFT JOIN creditcard ON records.credit = creditcard.id
  LEFT JOIN qr ON records.qr = qr.id
  ORDER BY date DESC, input_time DESC";
$stmt = $db->prepare($sql);
if (!$stmt) :
  die($db->error);
endif;
$success = $stmt->execute();
if (!$success) {
  die($db->error);
}

$stmt->bind_result(
  $id,
  $date,
  $title,
  $amount,
  $spending_category,
  $income_category,
  $type,
  $paymentmethod,
  $credit,
  $qr,
  $memo,
  $input_time
);

while ($stmt->fetch()) : ?>

divタグのclassにデータidを出力

<!--書き換え前-->
<div class="p-sp-date-box item1">

<!--書き換え後-->
<div class="p-sp-date-box item<?php echo h($id); ?>">

タイトルとカテゴリーの出力

<!--書き換え前-->
<p> aaaaaa
  <span> (不明) <i class="fa-regular fa-message" onclick=""></i> </span>
</p>

<!--書き換え後-->
<p> <?php echo h($title); ?>
  <span>
    <?php
    if ($type === 0 && $spending_category !== null) {
      echo '(' . h($spending_category) . ')';
    } else if ($type === 1 && $income_category !== null) {
      echo '(' . h($income_category) . ')';
    } else {
      echo "(不明)";
    }
    ?>
    <i class="fa-regular fa-message" onclick=""></i> </span>
</p>

金額の出力

スマホの画面では、金額の出力場所が支出も収入も同じ要素です。
テキストの色を変えることで、支出なのか収入化を区別するようにしています。

<!--書き換え前-->
<p class="text-red"> -¥30,000 </p>

<!--書き換え後-->
<p class="<?php echo $type === 0 ? 'text-red' : 'text-blue' ?>">
  <?php echo h($type) === "0" ? '-¥' . number_format($amount) : ''; ?>
  <?php echo h($type) === "1" ? '+¥' . number_format($amount) : ''; ?>
</p>

まず、pタグのclassに$typeによって「text-red」「text-blue」を出力するように記述しています。このクラス名によってCSS側でテキストの色を変えることができるようにしています。

同じく金額も$typeが0か1によって、符号を変えるよう三項演算子で記述しています。

日付と支払い方法の出力

最後に日付と、支出データのみ支払い方法を出力するように記述します。

<!--書き換え前-->
<div class="p-sp-date-box__detail">
  <p>2022/06/11</p>
  <p> (不明) </p>
</div>

<!--書き換え後-->
<div class="p-sp-date-box__detail">
  <p><?php echo date('Y/m/d', strtotime($date)); ?></p>
  <p>
    <?php
    //支払い方法の出力
    if ($type === 0 && $paymentmethod !== null) {
      echo h($paymentmethod);
    } else if ($type === 1) {
      echo "";
    } else {
      echo "(不明)";
    }
    //クレジット、スマホ決済の詳細出力
    if ($paymentmethod === "クレジット") {
      if ($credit !== null) {
        echo '(' . h($credit) . ')';
      } else {
        echo "(不明)";
      }
    } else if ($paymentmethod === "スマホ決済") {
      if ($qr !== null) {
        echo '(' . h($qr) . ')';
      } else {
        echo "(不明)";
      }
    }
    ?>
  </p>
</div>

日付の出力方法はPCと同じです。
支出データのときの支払い方法やクレジットやスマホ決済の種類の出力は、それぞれif文で条件にあったときのみ出力するようにしています。

メモアイコンの出力

PC同様にメモがあるデータだけアイコンが出力されるようにします。

<!--書き換え前-->
<div class="u-flex-box p-sp-date-box__overview">

<!--書き換え後-->
<div class="u-flex-box p-sp-date-box__overview <?php echo $memo !== '' ? 'hasmemo' : ''; ?>">