関連記事
【開発実況シリーズ】Web日報登録システムを作る #08 月変更プルダウン機能開発編
2021.01.20
2021.03.25
【開発実況シリーズ】Web日報登録システムを作る #09 打刻画面機能開発編
この記事の動画版はこちら（画像クリックでYoutubeに飛びます）
チャンネル登録お願いします！
今回は、開発実況シリーズ「Web日報登録システム」の第9回ということで、前回の続きを進めていきたいと思います。
前回は…
前回は「月別リスト」の画面で、この年月変更プルダウンを変更すると、選んだ月の業務データが下の表に読み込まれる、といった部分を作りました。
これで、登録されているデータを表示する部分はOKですね。
今回は、こちらの「打刻画面」から、実際に業務データを登録する部分の開発に取りかかっていきましょう！
今回のタスク
最初に、作業内容を簡単にまとめておきましょう。
まず、現在は下部のボタンを押すとモーダルが表示されるようになっていますが、月別リストの画面表示時に当日の打刻がまだ完了していない場合は、モーダルを自動表示させるようにします。
そして、この部分には当日の日付を表示。
打刻ボタンが押された場合に、それぞれの入力ボックスに現在の時刻を自動入力。
休憩時間には「1:00」をデフォルト表示させておきましょう。
そして、登録ボタンが押されたら、入力内容をデータベースに保存してモーダルを閉じます。
おおまかな実装はざっとこんな感じですね。
バリデーションやエラー処理については、一通り機能が実装出来てから調整していこうと思います。
実際の開発でも、こうやって各画面ごとに実装すべきタスクを細かく洗い出して、それをプロジェクト管理ツールや、GitHubのIssueなどに登録して、チーム内で手分けして作業を進めていきます。
今回のプロジェクトは僕1人しかいないので、1人でがんばって進めます！（笑）
それでは、上から順番に実装していきます。
モーダルの自動表示
まず、確認用のモーダル表示ボタンは削除して、画面表示時に自動表示させるように、JavaScriptを書きます。
こんな感じですね。
画面をリロードすると、モーダルが自動表示されるようになりました。
当日の日付を自動表示
次は、現在は固定表記のモーダルの日付部分に、当日の日付を表示させます。
リスト表示の時に作った共通ファンクションを再利用して、頭に月の表示を付け加えてあげればOKですね。
今日の日付が表示されるようになりました。
打刻ボタンの実装
次は、打刻ボタンを実装していきます。
今はまだボタンにすらなっていないので、まずはこれらを<button>タグに変更して
idも付けておきます。
これで、とりあえず押せるようになりました。
押した場合の処理を、JavaScriptで書いていきます。
ボタンが押された場合の処理を定義して、ボタンが押されたら現在の時刻を取得し、1桁の場合は2桁にゼロ埋めされるようにします。
これを、出勤の入力ボックスに自動入力させればOKですね。
打刻ボタンを押すと、出勤の入力ボックスに自動入力されました。
退勤にも同じ処理をコピーします。
休憩時間のデフォルト表示
次は、休憩時間のデフォルト表示です。
最終的には、データベースに登録済みのデータを、各入力ボックスに表示する形になるので
各入力ボックスにPHPの変数を関連付けておきましょう。
そして、休憩時間にはデフォルト値を設定します。
こんな感じですね。
データベースに登録
では最後に、データベースへの登録処理を書いていきます。
データをPHPに送るために<form>タグを設置して、登録ボタンが押されたらサブミットするようにします。
PHP側では、POSTリクエストを処理するようにして、まず、入力内容をPOSTパラメーターから取得
データベースに対象日のデータがあるかどうかチェックします。
対象日のデータがあれば、UPDATEを実行
対象日のデータがなければ、INSERTを実行します。
こんな感じですね。
登録出来るかどうか確認してみます。
現在、データベースには今日の日付のデータは無い状態です。
画面から登録してみると
今日の日付のデータが登録されました。
INSERTが実行された訳ですね。
画面の入力ボックスの内容が空になってしまっているので、登録したデータが補完されるようにします。
登録したデータが補完されています。
さらに退勤時間も打刻して、業務内容も入力してみます。
登録すると、退勤時間と業務内容も登録されました。
今回は、UPDATEが実行された訳ですね。
これで登録処理はOKです。
ただ、今の状態だと登録後もモーダルが自動表示されてしまうため、出勤と退勤が両方登録済みならモーダルは表示させないようにしましょう。
これで良いですね。
これで、今回の予定タスクは完了です。
次回予告
今回は打刻画面からの業務内容登録を実装しました。
次回は、こちらの「編集」ボタンをクリックすることで、対象日の業務データを修正出来るようにしてみましょう。
徳田 啓（トクタ ケイ）
Webプログラマー暦20年。自分で使うツールは、基本的に1人でゼロから自作。オールマイティなプログラミングの知識とスキルを学べる「フルスタックエンジニア マスター講座」を開講中。生徒さん1人1人に合わせてしっかりサポートしていきます！
プログラミングの実践的なノウハウを発信中！
ぜひフォローしておいてください。
ぜひフォローしておいてください。
