関連記事
【開発実況シリーズ】Web日報登録システムを作る「#7 月別リスト機能開発編」
2021.01.10
2021.03.14
【開発実況シリーズ】Web日報登録システムを作る #08 月変更プルダウン機能開発編
この記事の動画版はこちら（画像クリックでYoutubeに飛びます）
チャンネル登録お願いします！
今回は、開発実況シリーズ「Web日報登録システム」の第8回ということで、前回の続きを進めていきたいと思います。
前回は…
前回は、この「月別リスト」の画面に、当月の1日から末日までの日付リストを表示し、データベースのworkテーブルに対象日のデータが登録されている日は、出勤時間、退勤時間、休憩時間、コメントのデータを取得し、見やすいように整形して一覧表示するところまで作りました。
今回は、こちらの年月変更プルダウンで対象年月を変更すると、当月だけでなく指定した年月のリストに切り替えられる機能を作っていきましょう！
前回のバグ修正
今回の開発作業に入る前に、前回作成した部分に一部バグがありましたので、まずはそこから直していきたいと思います。
バグは、この部分ですね。
日付の数字は正しく表示されているんですが、曜日が全て同一になってしまっています。
前回、共通関数として作成した処理の…この部分ですね。
ここが「今日の曜日」を固定で取得するようになっているので、ここを「引数で指定された日付の曜日」を取得するように変更すればOKですね。
正常に表示されるようになりました。
ちなみに、もしこの処理をソースコードの色々な場所に書いていたとしたら、今回の修正もその全ての箇所を1つ1つ直していかなければなりませんでしたが、幸い共通関数化していたので、修正はこの1箇所だけで済みました。
これが、いつも言っている「処理を関数化するメリット」ですね。
プルダウンリストの選択肢を作成
さて、バグが直ったので今回の開発に取りかかっていきましょう。
プルダウンはすでに設置されていますが、中身が今月の日付しか無いので、まずはここを追加していきます。
選択肢があまり多くても選択しづらくなってしまうので、当月を最新とした過去12ヵ月分を選択出来るようにしましょう。
こういった部分は、実際にはクライアントと確認しながら仕様を決めていく必要があります。
例えば、その会社の事業年度の年月を選択出来るようにするといったケースもありますね。
プルダウンの中身は、月が変わる度に手動で更新する訳にはいかないので、プログラムで表示範囲を自動計算させて、ループで<option>タグを描画するようにします。
ちなみに、今僕が書いているような処理は、講座で学習すると自分で1から書けるようになりますので、もし興味があれば是非概要欄のほうからご参加ください！
実際の検索に指定するvalue値も設定しておきます。
これでOKですね。
確認してみましょう。
プルダウンリストに選択肢が追加されました。
当月を最新として、12ヵ月分が選択可能になっています。
これなら月が変わった場合も、プルダウンの中身は自動的に切り替わってくれます。
選択された年月の月別リストを表示
では、次はプルダウンを変更したタイミングで、下の一覧表の内容を切り替える部分を作っていきましょう。
プルダウンを変更したタイミングで処理を行うには「onchange」イベントを使います。
プルダウンが変更されたタイミングでformをサブミットさせるようにします。
プルダウンを変更すると、フォームがサブミットされ、GETパラメーターに選択した年月が付与されました。
次は、このGETパラメーターをPHP側で受け取って、パラメーターが指定されていた場合はその年月のデータを、パラメーターが指定されていなかった場合は、これまで通り当月のデータを表示するように改造します。
これでOKですね。
動作確認してみましょう。
プルダウンを変更すると、その月のデータが表示されるようになりました。
別の月のデータも手動登録して確認してみます。
対象日にちゃんと表示されていますね。
これで、今回の開発タスクは完了です。
次回予告
ということで、今回は月別リストの「年月表示プルダウン」を実装しました。
次回は、いよいよメイン機能である、打刻画面の開発を行っていきましょう！
徳田 啓（トクタ ケイ）
Webプログラマー暦20年。自分で使うツールは、基本的に1人でゼロから自作。オールマイティなプログラミングの知識とスキルを学べる「フルスタックエンジニア マスター講座」を開講中。生徒さん1人1人に合わせてしっかりサポートしていきます！
プログラミングの実践的なノウハウを発信中！
ぜひフォローしておいてください。
ぜひフォローしておいてください。
