関連記事
【開発実況シリーズ】Web日報登録システムを作る #09 打刻画面機能開発編
2021.01.24
2021.04.12
【開発実況シリーズ】Web日報登録システムを作る #10 編集機能開発編
この記事の動画版はこちら（画像クリックでYoutubeに飛びます）
チャンネル登録お願いします！
今回は、開発実況シリーズ「Web日報登録システム」の第10回ということで、前回の続きを進めていきたいと思います。
前回は…
前回は、こちらの打刻画面（モーダル）から、当日の出勤／退勤／休憩時間／業務内容を登録出来る機能を作りました。
また、当日の打刻データがまだ記録されていない場合は、ログイン後にモーダルを自動表示し、すでに打刻済みの場合はモーダルを表示しない、といった表示制御も実装しました。
今回は、こちらの月別リスト画面でそれぞれの日の「編集ボタン」をクリックすると、登録済みのデータを修正出来る機能を作っていきましょう！
今回のタスク
今回も、最初に作業内容を簡単にまとめておきましょう。
まずは、この編集ボタンを押すとモーダルが表示されるようにします。
モーダルの各項目には、対象日の登録済みデータがあらかじめ表示されるようにします。
もし、業務データが未登録の日だった場合は、各項目も空欄で表示します。
そして、モーダルの各項目を入力し、登録ボタンを押すと、対象日のデータとしてデータベースに登録または更新されるようにします。
登録完了後、モーダルを閉じて、一覧表には更新済みのデータが表示されるようにします。
それでは、順番に実装していきましょう！
編集ボタンクリックでモーダルを表示
まずは、このアイコンを<button>タグで囲んでボタン化します。
これで押せるようになりましたね。
ボタンの幅が大きすぎるので、調整します。
次に、このボタンが押されたら、打刻モーダルが表示されるようにします。
どの日のボタンが押されたのかが分かるように、日付データも渡すようにしておきます。
編集ボタンを押すと、とりあえずモーダルが表示されるようになりました。
モーダルに対象日のデータを表示
次は、モーダルが表示された際のイベントで、対象日のデータを表示させる部分を書いていきます。
まずは、先ほど入れておいた日付データを取得して
クリックしたボタンの日付が、ちゃんと取得出来ていますね。
対象行の各データを取得し、モーダルの各入力ボックスに代入していきます。
日付表示部分も調整します。
OKですね。
確認してみます。
クリックした日の日付、出勤時間、退勤時間、休憩時間、業務内容が表示されています。
業務データがまだ登録されていない日の場合は、空欄で表示されます。
登録処理の実装
では、最後に登録処理を実装していきます。
登録処理自体は前回作っているので、それを微調整するだけで済みそうです。
前回作った登録処理は、「今日」のデータを固定で登録するようになっているので、「指定した日」のデータを登録出来るように調整していきます。
まずは、対象日をPOST送信出来るように、hiddenタグでパラメーターを設置します。
hiddenタグの詳細については、こちらの動画もご覧ください。
POST処理で、hiddenタグの対象日を取得し、「今日」ではなく、その「対象日」をターゲットにするように変更します。
なお、ここではプログラムの細かい書き方までは説明していませんが、講座の方ではこういった作り方を1から順番に説明していますので、もし自分でも作れるようになりたいという方は、是非講座の方もチェックしてみてください。
これでOKですね。
それでは、登録テストをしてみましょう！
編集ボタンを押すと、その日のデータがモーダルで読み込まれ
内容を変更して「登録」ボタンを押すと
その内容で更新されるようになりました。
業務データが未登録の日も
後から登録することが出来るようになりました。
現在の仕様では、過去のデータや、未来のデータも自由に登録出来るようになっていますが、この辺りはクライアントの要望に応じて、過去や未来のデータは編集出来なくしたり、管理者のみが変更出来るようにしたりなど、自由に調整することが出来ます。
次回予告
ということで、これで今回のタスクは完了です。
今回は、登録済みの業務データを修正する機能を実装しました。
これで、社員側の機能は一通り実装完了になります。
エラー処理など細かな部分は、全ての機能が組みあがってから、チェックしつつ品質を上げていく予定ですので
次回は、管理者側の機能実装に取りかかっていきましょう！
徳田 啓（トクタ ケイ）
Webプログラマー暦20年。自分で使うツールは、基本的に1人でゼロから自作。オールマイティなプログラミングの知識とスキルを学べる「フルスタックエンジニア マスター講座」を開講中。生徒さん1人1人に合わせてしっかりサポートしていきます！
プログラミングの実践的なノウハウを発信中！
ぜひフォローしておいてください。
ぜひフォローしておいてください。
