フルスタックエンジニアのノウハウ
2021.02.13    2022.01.06

【開発実況シリーズ】Web日報登録システムを作る #13 管理者:社員別月別リスト

【開発実況シリーズ】Web日報登録システムを作る #13 管理者:社員別月別リスト

この記事の動画版はこちら

チャンネル登録お願いします!


今回は、開発実況シリーズ「Web日報登録システム」の第13回ということで、前回の続きを進めていきたいと思います。


前回は・・・


前回は、こちらの管理者側「社員一覧画面」の機能実装を行いました。



前回の記事はこちら

関連記事

【開発実況シリーズ】Web日報登録システムを作る #12 管理者:社員一覧機能開発編


今回は、社員名をクリックした後に表示される、社員別の「月別リスト画面」の実装を行っていきましょう!




今回のタスク


今回も、最初に作業内容をまとめておきましょう。


月別リスト画面の基本的な処理は、社員側で作ったものがそのまま使えると思いますので、まずは、社員側のプログラムをコピーしてきて細かい調整を行います。


次に、社員側ではログインしている社員のデータを表示する形になっていましたが、管理者側では、前の画面でパラメーターで指定された社員のデータを表示出来るように改造します。


そして、編集機能についても正しく動くように調整します。


また、UI設計時には考慮出来ていませんでしたが、画面を実際に触ってみると、この画面から前の画面(社員一覧)に戻れた方が便利だと思ったので、戻るボタンも追加しようと思います。


ざっとこんな所ですね。


【タスク】

◆社員側プログラムのコピー&調整
◆パラメーターで指定された社員のデータを表示
◆編集機能の調整
◆戻るボタンの追加


それでは、上から順番に作業を行っていきましょう!



社員側プログラムのコピー&調整


今回のPHPファイルは、adminの「user_result.php」ですね。

まずは、社員側の月別リストのソースをコピーして貼り付けます。


背景色を管理者用に変更して


requireのパスも変更します。



ログインチェックも管理者用に変更しましょう。



これで、ベース部分はOKです。



パラメーターで指定された社員のデータを表示


次に、現在はログインしている社員のデータを表示している部分を、パラメーターで指定された社員のデータを表示出来るように調整していきます。


まずは、パラメーターを受け取って



ユーザーIDの指定値を、パラメーターの値に差し替えます。



これで、パラメーターで指定されたユーザーのデータが取得されるようになりました。


パラメーターが正しく指定されない場合はエラーが発生しますが、エラー処理は、ひと通り機能が出来た後で実装していくことにします。


社員側で実装していた、打刻モーダルの自動表示機能は、管理者側では必要無いため、自動表示のための処理は削除します。


社員一覧で社員名をクリックすると、その社員のデータが表示されるようになりました。




編集機能の調整


次は、編集機能の調整を行っていきます。


編集機能も、社員側で実装したものがそのまま使えるので、登録するユーザーIDだけ、パラメーターで受け取ったIDに差し替えればOKです。




実際にテストを行ってみましょう。


社員ID=1のユーザーの月別リストを表示し、業務データを更新すると



正しく更新が反映されます。


次に、社員ID=2のユーザーの業務データも更新してみます。


正しく反映されていますね。




戻るボタンの追加


最後に、戻るボタンを設置しましょう。


この部分に右寄せで配置します。



戻り先は「/admin/user_list.php」になりますね。



これでOKです。


戻るボタンが表示されクリックすると、社員一覧に戻れるようになりました。




次回予告


今回は、社員別の月別リスト画面の実装を行いました。


これで、管理者側の機能も一通り実装完了ですね。


社員側/管理者側共に予定していた機能の実装は全て完了しましたので、


次回からはエラー処理セキュリティ対策や、細かい調整などを行いながらプログラムの品質をさらに高めていきたいと思います。


おすすめ記事