開発実況「Web日報登録システム」(Vol.3)

この記事は約 2 分 で読むことができます。

開発実況シリーズは、毎回テーマアプリを決めて、
アプリを実際に作っていきながら、その過程をブログでご紹介していく企画です。

今回作成するアプリは「Web日報登録システム」です。

それでは、進めていきましょう!

前回までは

開発の流れ(TODO)を確認しておきましょう。

[開発の流れ]
 1.画面設計 【←いまここ】
 2.データベース設計
 3.プロジェクト基礎環境構築
 4.画面フロー作成
 5.機能開発
 6.本番サーバーデプロイ
 7.テスト&仮運用

前回、社員側の画面設計をツールを使用して行いました。

>前回の記事はこちら

今回は画面設計の後半戦である「管理者側」の画面設計を行っていきましょう。

画面設計(管理者側)

管理者側で必要な機能は以下のものになります。

[管理者側]
・ログイン
・社員を選択して、月別一覧表示

今回の管理者側機能は、社員側の画面がほぼ使い回し出来るため
ツールを起動して、前回作成した社員側の画面をコピーし
細かな部分の修正や削除を行っていきます。

今回新規に書いたのは「社員選択」画面だけです。

今回は、かなりスピーディに終わりました。
このような設計にしておくと、設計時も開発時にも工数削減が出来ますね。

完成!

管理者側の画面はこんな感じです。

今回は、管理者は1名という想定なのでパスワードのみでログイン出来るようにしています。

社員を選択することで、その社員のタイムカードが確認でき、
必要に応じて修正も出来ます。

管理者機能については、例えば社員の勤怠の承認を行ったり、
基準時間を超過して働いている社員のアラートを出すなど
より便利にするための機能はいくつもありますが、
今回はシンプルなアプリということで、まずはこれで作っていきます。

機能拡張はいつでも行うことが出来ますので。

次回予告

これで、画面設計が完了しました。

次回からは「2.データベース設計」を行っていきます!

これまでの作業時間

STEP1:10min
STEP2:30min
STEP3(今回):10min

合計:50min

開発実況「Web日報登録システム」(Vol.3)
この記事はあなたのお役に立てましたか?

この記事があなたのお役に立てましたら、
いいね!クリックをお願いします!

あなたも楽しくプログラミングを学んでみませんか?

コメントを残す