今回からは実際に開発した家計簿を使っていただき、頂いたレビュー部分を修正したり機能を付け足していきます。
↓前回の記事はこちら
今回の修正は以下の4点です。
・負の金額を登録禁止にする
・同じ文字列の選択項目を登録禁止にする
・エクセル出力表の金額部分の修正
・トップに戻るボタンを追加
それでは順番に修正していきます。
負の金額を登録禁止にする
現状金額を入力するinputはマイナス符号を入力し登録することができます。
このままだと合計金額の計算が正しく動かないので、マイナス符号を登録できないように修正します。
以下を「record-crate.php」内のPOST送信されたデータを受け取るプログラムの下に追記します。
//20行目付近に追記
if ($amount < 0) :
$_SESSION['r_date'] = $date;
$_SESSION['r_title'] = $title;
$_SESSION['r_amount'] = $amount;
$_SESSION['r_type'] = $type;
$_SESSION['r_spendingCat'] = $spending_category;
$_SESSION['r_paymentMethod'] = $payment_method;
header('location: ./index.php?dataOperation=numberError');
exit();
endif;まず渡ってきたデータの金額が0未満だったらという条件をおいたあと、セッションにそれぞれのデータを一度格納します。これは最後にホーム画面に戻ったときに、入力したデータがリセットされてしまうのを防ぐためです。
セッションにデータを格納したあとに、ホーム画面へパラメータ付きで返します。
続いてホーム画面にパラメータ付きで返したときのエラーメッセージを記述していきます。
既にindex.phpに作成しているエラーメッセージの条件を修正します。
<!--末尾に条件 $_GET['dataOperation'] === 'numberError' をオペランド||で追記-->
<?php if ($_GET['dataOperation'] && ($_GET['dataOperation'] === 'delete' || $_GET['dataOperation'] === 'update' || $_GET['dataOperation'] === 'error' || $_GET['dataOperation'] === 'numberError')) : ?>
<section class="p-section p-section__full-screen" id="doneOperateBox">
<!--条件 $_GET['dataOperation'] === 'numberError' をオペランド||で追記-->
<div class="p-message-box <?php echo ($_GET['dataOperation'] === 'error' || $_GET['dataOperation'] === 'numberError') ? 'line-red' : 'line-blue'; ?>">
<p id="doneText">
<?php
if ($_GET['dataOperation'] === 'error') :
echo '正しく処理されませんでした';
elseif ($_GET['dataOperation'] === 'delete') :
echo '削除しました';
elseif ($_GET['dataOperation'] === 'update') :
echo '更新しました';
//以下を追加
elseif ($_GET['dataOperation'] === 'numberError') :
echo '負の金額は入力できません';
//追加ここまで
endif;
?>
</p>
<!--演算子条件部分に $_GET['dataOperation'] === 'numberError をオペランド||で追記-->
<button class="c-button <?php echo ($_GET['dataOperation'] === 'error' || $_GET['dataOperation'] === 'numberError') ? 'c-button--bg-darkred' : 'c-button--bg-blue'; ?>" onclick="onClickOkButton('');">OK</button>以上で負の金額を入力して登録ボタンを押下すると「負の金額は入力できません」というエラーメッセージが表示され登録処理も走らなくなりました。
同じ文字列の選択項目を登録禁止にする
現在カテゴリーやクレジットカードなどの選択項目は同じ文字列でも登録することができます。
これを同じ文字列の選択項目は登録できない、また同じ文字列に更新できないように変更します。
以下を「item-add.php」「item-update.php」ファイル内、送信データを受け取り変数に格納するプログラムの下に追記します。
$table_name = $table_list[$editItem];
//重複チェック処理 ここから追加
$sql = "SELECT COUNT(*) FROM {$table_name} WHERE name=? AND user_id=?";
$stmt = $db->prepare($sql);
$stmt->bind_param('si', $name, $user_id);
sql_check($stmt, $db);
$stmt->bind_result($count);
$stmt->fetch();
if ($count > 0) :
header('location: ./item-edit.php?editItem=' . $editItem . '&dataOperation=duplicate');
exit();
endif;
$stmt->close();プログラムの内容としては、COUNT構文で文字列が一致するデータを抽出します。
そしてfetchでデータを取り出し、1件以上データがあれば「item-edit.php(選択項目編集画面)」にパラメータ付きで返しプログラムを終了するという内容です。
続いて「item-edit.php」にパラメータで返されたときのメッセージ処理を追加します。
まずはメッセージモーダルを出す条件に「$_GET[‘dataOperation’] === ‘duplicate’」を追加します。
<!--33行目付近-->
<?php if ($_GET['dataOperation'] && ($_GET['dataOperation'] === 'delete' || $_GET['dataOperation'] === 'update' || $_GET['dataOperation'] === 'error' || $_GET['dataOperation'] === 'duplicate')) : ?>続いてメッセージボックス色を決めるクラス名を出す三項演算子に「$_GET[‘dataOperation’] === ‘duplicate’」を追加します。
<!--35行目付近-->
<div class="p-message-box <?php echo ($_GET['dataOperation'] === 'error' || $_GET['dataOperation'] === 'duplicate') ? 'line-red' : 'line-blue'; ?>">そしてその下のメッセージ本文を出力するif文に以下を付け加えます。
elseif ($_GET['dataOperation'] === 'duplicate') :
echo '既に登録済みです';
//追加ここまで
endif;最後にボタンの色を決めるクラス名の三項演算子に「$_GET[‘dataOperation’] === ‘duplicate’」を追加します。
<!--49行目付近-->
<button class="c-button <?php echo ($_GET['dataOperation'] === 'error' || $_GET['dataOperation'] === 'duplicate') ? 'c-button--bg-darkred' : 'c-button--bg-blue'; ?>" onclick="onClickOkButton('?editItem=<?php echo $editItem + 1; ?>');">OK</button>以上ですでに登録している文字列と同じ項目を登録しようとすると、エラーメッセージが表示され登録できないようになりました。
エクセル出力表の金額部分の修正
現在エクセルに出力する表の金額部分が「¥1,000」のように頭文字に「¥」を入れていますが、記号を含めてしまうとエクセル上で「文字列」と認識されデータ計算できなかったため、この部分の出力処理を変更します。
<!--収入金額部分 449行目付近-->
<?php echo $type === 1 ? '¥' . number_format(h($amount)) : ''; ?> <!--書き換え前-->
<?php echo $type === 1 ? $amount : ''; ?><!--書き換え後-->
<!--支出金額部分 452行目付近-->
<?php echo $type === 0 ? '¥' . number_format(h($amount)) : ''; ?> <!--書き換え前-->
<?php echo $type === 0 ? $amount : ''; ?><!--書き換え後-->「¥」を取り、出力も文字列にならないようそのまま出力する形に変更しました。
画面上では確認できませんが、エクセル出力ボタンでダウンロードしたファイルを確認すると、金額列が「¥」を除いた数値のみになっています。
トップに戻るボタン
特にスマホでデータ量が多くなった際、トップにスクロールして戻るのが大変なので、画面右下にトップに戻るボタンを追加します。
まずは以下を</footer>の下に追記します。CSSはすでに設定してあるので割愛します。
<div class="p-back-top" id="page_top">
<a href="#page-top"></a>
</div>続いてクリックでトップに戻る動きをjQueryで実装します。以下をindex.phpの<script>内に追記します。
//トップへ戻るボタン
$(function() {
let appear = false;
const pagetop = $('#page_top');
$(window).scroll(function() {
if ($(this).scrollTop() > 300) { //1000pxスクロールしたら
if (appear == false) {
appear = true;
pagetop.stop().animate({
'bottom': '3.6rem' //下から3.6remの位置に
}, 300); //0.3秒かけて現れる
}
} else {
if (appear) {
appear = false;
pagetop.stop().animate({
'bottom': '-5rem' //下から-5remの位置に
}, 300); //0.3秒かけて隠れる
}
}
});
pagetop.click(function() {
$('body, html').animate({
scrollTop: 0
}, 500); //0.5秒かけてトップへ戻る
return false;
});
});トップへ戻るボタンのjQueryやJavaScriptプログラムは検索するといろんな記事が出てくるので、そちらを参考に実装しました。
最後に
今回はレビュー後の修正第1弾として、4項目を修正しました。
次回も引き続きレビュー後修正を行っていきます。
最後までお読みいただきありがとうございました。
コメント