前回は2回に分けてですが、選択項目別の金額推移グラフページを実装しました。
今回はデータ入力部分をより使いやすくするための修正を行います。
よく使うタイトルを表示
タイトルの下に、ユーザーごとよく使っているタイトルを抽出し表示します。
そしてそのタイトルをクリックすると、タイトルを入力しなくてもタイトル欄にクリックしたタイトルが入るという機能を実装します。
まずはよく使うタイトルの要素を追加します。
以下をタイトル入力要素の下に追記します。
<div class="p-form__flex-input">
<p>タイトル</p>
<input type="text" name="title" id="title" maxlength="15" value="<?php echo $r_title; ?>" required>
</div>
<!--以下追加-->
<div class="p-form__flex-input p-form__often-use-title">
<p>よく使う<br>タイトル</p>
<ul class="u-flex-box">
<li onclick="">タイトル1</li>
<li onclick="">タイトル2</li>
<li onclick="">タイトル3</li>
<li onclick="">タイトル4</li>
<li onclick="">タイトル5</li>
</ul>
</div>スタイリングはすでに指定しているので、以下のようなよく使うタイトル要素が追加されます。
「タイトル1」から「タイトル5」を実際にユーザーが使っている回数の多いタイトルになるように実装します。
以下をよく使うタイトル要素の上に追記します。
<?php
$sql = 'SELECT COUNT(title), title FROM records WHERE user_id =? GROUP BY title ORDER BY COUNT(title) DESC, input_time DESC LIMIT 5';
$stmt = $db->prepare($sql);
$stmt->bind_param('i', $user_id);
$stmt->execute();
$stmt->store_result();
$count = $stmt->num_rows();
$stmt->bind_result($count, $title);
?>
<!--↑ここまで-->
<div class="p-form__flex-input p-form__often-use-title">そしてよく使うタイトル要素自体を、SQLの抽出データ数が1以上だったときのみ表示するようにします。
<?php if ($count > 0) : ?> <!--追記-->
<div class="p-form__flex-input p-form__often-use-title">
<p>よく使う<br>タイトル</p>
<ul class="u-flex-box">
<li onclick="">タイトル1</li>
<li onclick="">タイトル2</li>
<li onclick="">タイトル3</li>
<li onclick="">タイトル4</li>
<li onclick="">タイトル5</li>
</ul>
</div>
<?php endif; ?> <!--追記-->それでは<li>がSQLで抽出したデータのものになるように実装します。
<!--書き換え前-->
<ul class="u-flex-box">
<li onclick="">タイトル1</li>
<li onclick="">タイトル2</li>
<li onclick="">タイトル3</li>
<li onclick="">タイトル4</li>
<li onclick="">タイトル5</li>
</ul>
<!--書き換え後-->
<ul class="u-flex-box">
<?php while ($stmt->fetch()) : ?>
<li onclick=""><?php echo h($title); ?></li>
<?php endwhile; ?>
</ul>上記のように書き換えると、よく使うタイトルがユーザーが登録したデータの中で使われたタイトルから多い順に5つ表示されます。
※登録されているタイトルが5未満の場合は、よく使うタイトルも5つ未満になります。
続いて、よく使うタイトルをクリックすると、上のタイトル部分に入力されるという処理を実装します。
この実装はJavaScriptの関数を作成し、各<li>のonclick属性にセットする処理で実装します。
まずはJavaScriptの関数を作成します。
const onChangeTitle = (titleValue) => {
const title = document.getElementById('title');
title.value = titleValue;
}titleValueという引数を各<li>の文字列になるようにonclick属性に指定します。
<!--onclick属性セット-->
<li onclick="onChangeTitle('<?php echo h($title); ?>')"><?php echo h($title); ?></li>onclick属性をセットすると、よく使うタイトルを押した時に自動でタイトルに入力されるようになります。
以上でよく使うタイトル機能の実装は完了です。
日付に「＜」「＞」を追加
続いて、日付部分にカレンダーやデータ一覧の月選択部分のような「＜」「＞」ボタンをつけます。
まずはボタン要素を追記します。
※以下の修正をindex.phpだけでなくrecord-edit.phpの同箇所にも行ってください。
<!--書き換え前-->
<div class="p-form__flex-input">
<p>日付</p>
<label for="date"><input type="date" name="date" id="date" value="<?php echo (isset($r_date) ? $r_date : date("Y-m-d")); ?>" required></label>
</div>
<!--書き換え後-->
<div class="p-form__flex-input">
<p>日付</p>
<div class="p-form--input-record__dateinput u-flex-box"> <!--追加-->
<span onclick="">＜</span> <!--追加-->
<!--labelタグ削除-->
<input type="date" name="date" id="date" value="<?php echo (isset($r_date) ? $r_date : date("Y-m-d")); ?>" required>
<!--labelタグ削除-->
<span onclick="">＞</span> <!--追加-->
</div>
</div>CSSは設定しているので以下のように「＜」「＞」ボタンが表示されます。
ボタンの実装に移る前に少しスタイリングを修正します。
> div {
//省略
input[type="text"],
input[type="date"],
input[type="number"],
select {
width: 21rem;
padding: 0.3rem;
border: solid 0.1rem #333;
border-radius: 0.3rem;
color: #333;
background-color: #fff;
// text-align: left; 削除
}
// ↓↓追加↓↓
input[type="text"],
select {
text-align: left;
}
input[type="date"] {
text-align: center;
}
input[type="number"]{
text-align: right;
}
// ↑↑追加↑↑
//以下省略
}文字列の揃え位置を調整しました。style.scssを保存すると以下のように、日付は真ん中揃え、金額は右端揃え、その他は左端揃えになります。
スタイリングの調整ができたので「＜」「＞」ボタンで日付を操作できるようにします。
カレンダーやデータ一覧の箇所ではPHPで処理しましたが、ここではデータを探してくる必要がないのでJavaScriptの関数を作成し、onclick属性にセットする形の処理にします。
まずは関数を作成します。
const onChangeInputDate = (change) => {
//日付inputを取得
const inputDate = document.getElementById("date");
//日付inputにセットされているvalueを取得し日付オブジェクト生成
const baseDate = new Date(inputDate.value);
if (change === "past") { //引数がpast(＜ ボタン)なら
//日付inputにセットされている日付オブジェクトを1日過去にする
baseDate.setDate(baseDate.getDate() - 1);
} else if (change === "future") { //引数がfuture(＞ ボタン)なら
//日付inputにセットされている日付オブジェクトを1日未来にする
baseDate.setDate(baseDate.getDate() + 1);
}
//if文で計算された日付で再度日付オブジェクトを生成
const changeDate = new Date(baseDate);
let month, date; //日付inputを書き換える月と日の変数定義
if (changeDate.getMonth().toString().length === 1) {
//計算された日付の月部分が一桁（1〜9月）の場合
//月部分の頭に「0」を入れる
month = "0" + (changeDate.getMonth() + 1);
} else { //それ以外(10月〜12月)
//計算された日付の月部分をそのまま代入
month = changeDate.getMonth() + 1;
}
if (changeDate.getDate().toString().length === 1) {
//計算された日付の日部分が一桁（1〜9日）の場合
//日部分の頭に「0」を入れる
date = "0" + changeDate.getDate();
} else { //それ以外(10日〜31日)
//計算された日付の日部分をそのまま代入
date = changeDate.getDate();
}
//書き換える日付を文字列連結で生成
const changeDateValue = changeDate.getFullYear() + "-" + month + "-" + date;
//日付inputのvalueに上記で生成した日付を挿入し書き換え
inputDate.value = changeDateValue;
};日付inputにセットされているvalueから日付オブジェクトを生成し、それを操作することで前日や明日に変えることはできますが、一桁の月や日には頭文字に「0」がつけらないためエラーが起きてしまいます。
なので「YYYY-mm-dd」形式になるようにif文で桁数を判断し、一桁の場合には頭文字に「0」を入れる処理を加え文字列連結でvalueを書き換えています。
関数が完成したので上記を「＜」「＞」にセットします。
※以下の修正もrecord-edit.phpの同箇所に行ってください。
<span onclick="onChangeInputDate('past');">＜</span> <!--onclick属性セット-->
<input type="date" name="date" id="date" value="<?php echo (isset($r_date) ? $r_date : date("Y-m-d")); ?>" required>
<span onclick="onChangeInputDate('future');">＞</span> <!--onclick属性セット-->以上で日付部分の修正は完了です。
「編集」を「編集 追加」に
最後に選択項目の「編集」という文字が、追加はできるの？とわかりにくいため、「編集 追加」という文字に変えて追加もできることが明確にわかるようにします。
<!--支出カテゴリー編集ボタン-->
<a class="c-button c-button--bg-gray" href="./item-edit.php?editItem=0" onclick="onClickCatEdit('spendingcatEdit');">編集 追加</a>
<!--収入カテゴリー編集ボタン-->
<a class="c-button c-button--bg-gray" href="./item-edit.php?editItem=1">編集 追加</a>
<!--支払い方法編集ボタン-->
<a class="c-button c-button--bg-gray" href="./item-edit.php?editItem=2" onclick="onClickCatEdit('paymentmethodEdit');">編集 追加</a>
<!--クレジットカード編集ボタン-->
<a class="c-button c-button--bg-gray" href="./item-edit.php?editItem=3" onclick="onClickCatEdit('creditEdit');">編集 追加</a>
<!--スマホ決済編集ボタン-->
<a class="c-button c-button--bg-gray" href="./item-edit.php?editItem=4" onclick="onClickCatEdit('qrEdit');">編集 追加</a>文字列が長くなったのでスタイルが崩れてしました。改行が起こらないようにスタイリングを修正します。
.p-section {
//省略
//支出データ入力セクション
&__records-input {
min-width: 45rem; //43remから45remに変更
// max-width: 45rem; 削除
width: 50%;
//以下省略.p-form{
//省略
//ホームデータ入力フォームレイアウト
&--input-record {
//省略
//ボタン周り追加スタイリング
.c-button--bg-gray {
font-size: 1.4rem;
// margin-left: 0.5rem; 削除
padding: 0.8rem 0.5rem; //padding: 0.6rem 0.3remから変更
border-radius: 0.3rem;
// letter-spacing: 0.5rem; 削除
// text-indent: 0.5rem; 削除
//以下省略以上のスタイリング修正を行うと、「編集 追加」が改行なく表示できます。
以上で「編集」を「編集 追加」にする修正は完了です。
最後に
今回はデータ入力部分をより使いやすくするための修正を行いました。
次回はログイン画面と新規ユーザー登録画面で入力チェックをリアルタイムで行う処理の追加を行います。
最後までお読みいただきありがとうございました。
コメント