PHP+MySQLで家計簿システム開発#23【カレンダー指定日のデータ登録を簡単に】

前回は、カレンダー上部と収支一覧に設置している、月選択部分を検索ボタンなしでも同様の処理ができるようにしました。

↓前回の記事はこちら

前回はスマホ表示時の切り替えタブを実装しました。 ↓前回の記事はこちら今回はカレンダーやデータ検索のinputが変更されたら、検索を押さなくても処理が実行されるように修正します。カレンダーの月選択部分の修正まずはカレンダー上部の月選択...

今回は全カレンダーセルをクリックできるようにする＆そこから「追加ボタン」押下でその日のデータを追加できるようにします。

カレンダーセルからその日のデータを追加
最後に

カレンダーセルからその日のデータを追加

現在はデータが登録されている日付セルしかクリックできませんが、この仕様をデータが登録されていない日付セルもクリックできるように変更し、データがない場合は「データがありません」と表示するようにします。

全カレンダーセルをクリックできるようにする

まずはカレンダーの要素を繰り返しで生成しているプログラムの、セルの内容を生成しているプログラムを修正します。（447行目付近）

//どちらも存在しないとき(修正前)
$cel_content = '';

//どちらも存在しないとき(修正後)
$cel_content = $cel_link . $close_a;

データが存在しない日付セルには「”」で何も出力しないプログラムを記述していましたが、この記述をaタグだけ出力するプログラムに変更しました。

上記を修正するとデータが存在しない日付セルもクリックで詳細モーダルを出すことができるようになります。

続けてデータがないときは「データがありません」と出力するようにします。
データの件数を取得する記述を追記します。

sql_check($stmt, $db);

//追記ここから(105行目付近)
$stmt->store_result();
$count = $stmt->num_rows();
//追記ここまで

$stmt->bind_result($id, $date, $title, $amount, $spending_cat, $income_cat, $type, $payment_method, $credit, $qr, $memo);

データの件数を取得したので、条件分岐でデータがあるときはこれまで通りの出力、ないときはデータがありませんと出力するようにします。

if ($count > 0) : //追記
  while ($stmt->fetch()) :
?>

    <div class="p-detail-box__content">
     :
    省略
     :
    </div>
  <?php endwhile; ?>

<!--以下追記-->
<?php else : ?>
  <div class="p-detail-box__content nodata">
    <p>データなし</p>
  </div>
<?php endif; ?>

CSSはすでに設定済みなので割愛します。上記を実装するとデータがありませんと表示されるようになります。

詳細モーダルに「追加」ボタンを設置

詳細モーダルの右上に追加ボタンを設置します。まずはHTMLを修正します。

<div class="p-detail-box">

 <!--追記ここから-->
  <form action="" method="POST">
    <input type="hidden" name="specific_register_date" value="">
    <input type="submit" name="specific_register" value="追加" id="detailModalAdd" class="c-button c-button--bg-blue add" onclick="">
  </form>

詳細モーダルの日付タイトルのすぐ上にformタグで囲った追加ボタンを追加しました。
CSSはすでに設定済みです。

追加したい日付値をPOSTで送信し、データ入力の日付部分に入れるという処理をこれから実装します。
まずはdetailパラメータの値を隠し要素にセットしたいので、タイトル部分に記述しているdetailパラメータ処理を追加ボタンフォームの上に移動させます。

<!--移動プログラム-->
<?php
$param_date = $_GET['detail'];
$title_date = date('Y年n月j日', strtotime($param_date));
?>
<!--ここまで-->

<form action="" method="POST" class="p-form--calendar-modal">
  <input type="hidden" name="specific_register_date" value="">
  <input type="submit" name="specific_register" value="追加" id="detailModalAdd" class="c-button c-button--bg-blue add" onclick="">
</form>

<!--タイトル出力-->
<p class="p-detail-box__title">
  <?php echo $title_date; ?>
</p>

そして隠しinputのvalueに日付をセットします。

<input type="hidden" name="specific_register_date" value="<?php echo $param_date; ?>">

続いてindex.php冒頭のヘッダーファイル読み込み記述の上に、追加ボタンからのPOST送信があったときの処理を記述します。

if (isset($_POST['specific_register']) && $_POST['specific_register'] === '追加') :
  $specific_register_date = filter_input(INPUT_POST, 'specific_register_date', FILTER_SANITIZE_SPECIAL_CHARS);
  $r_date = $specific_register_date;
endif;

カレンダー詳細モーダルの追加ボタンが押下され、POST送信が行われたらという条件を置きます。
if文内の処理は、まずセットされたデータを受け取り、その値を$r_date変数に入れています。

この$r_date変数は、収支データを入力途中で他の画面へ遷移した際に、セッションで入力途中のデータを保存するときに使用している変数です。

以上まで実装すると追加ボタンを押すと、データ入力の日付に表示していた詳細データの日が出力されます。

まだ追加を押してもモーダルが消えないので修正します。
追加が押されたら、detailパラメータを削除するJavaScriptの関数を作成し、追加ボタンのonclick属性にセットします。

const onClickDetailModalAdd = () => {
  const url = new URL(window.location.href);
  url.searchParams.delete("detail");
  history.pushState("", "", url);
  location.reload();
};

<input type="submit" name="specific_register" value="追加" id="detailModalAdd" class="c-button c-button--bg-blue add" onclick="onClickDetailModalAdd();">

以上で追加ボタンを押すとモーダルが消え、データ入力の日付に該当の値が出力されるようになりました。

スマホ時は入力タブへ戻す

スマホでは要素をタブで分けているので、カレンダーの詳細モーダルから追加ボタンを押しても、カレンダーが表示されます。
入力タブへ移動すると、日付が指定された値に変わっているのですが、分かりづらいのでスマホ時は入力タブへ戻す処理を追加します。

現在どのタブを見ているかはcookieに保存しているので、追加ボタンが押されたら、このcookieを削除することで最初の入力タブへ戻すことができます。
先ほど作成した「onClickDetailModalAdd」に以下を追記します。

const onClickDetailModalAdd = () => {

  //追加
  if (navigator.cookieEnabled) { //追加ボタンが押されたときにcookieが有効であれば
    document.cookie = "num=;max-age=0"; //numキーで登録している値を空にする
  }
  //ここまで

  const url = new URL(window.location.href);
  url.searchParams.delete("detail");
  history.pushState("", "", url);
  location.reload();
};

上記のif文を追記することで、スマホ表示時には追加ボタン押下で入力タブへ戻すことができます。