トップメニューの静的画面ができました。続いて認証に移りたいのですが、認証プログラムの前に認証するスタッフのデータを作成する必要がありますので、先にスタッフ編集を作成します。
登録済スタッフ一覧
メニューの「マスタ編集 / スタッフ」をクリックして表示される画面です。ここでは登録済みスタッフ情報の一覧を表示し、新たにスタッフ追加したり、登録済みスタッフの情報を編集したり、StaffCardイメージ画像を表示する画面への遷移を設けます。このスタッフ一覧、実に機能が盛りだくさんで、業務系アプリで使われる機能の主なものをかなり含んできます。一覧を表示することはもとより、DBのデータを表示用に変換、ソート機能、ページネーション、行データの編集などなどです。
業務系アプリで最も使われる機能の一つが一覧で、メニューよって違う要素は表示項目とSQLだけと言っても過言ではありません。この一覧を過不足なく作れるようになれば、業務アプリの半分は作れる力がついたと言っても過言ではありません。業務アプリに限らずコンピュータアプリケーションの役割は結局のところデータの登録と参照です。参照には一覧、明細、グラフくらいしかありませんし、登録処理では、入力チェックとデータの生合成を保つように登録することくらいです。権限による入力制御などは枝葉の機能です。データの生合成を保つには多分にデータベースの機能に頼ることになりますし、データの設計が重要になってきますので、プログラミング的にはさほど難しいことにはなりません。
それではスタッフ一覧の機能を画面イメージを見ながら解説していきます。
初期ソート順を登録日の降順とします。
項目名をクリックで、その項目の昇順で一覧を更新します。同じ項目を連続でクリックした場合、昇順、降順を切り替えます。
モーダルウィンドウとは？
スタッフの新規追加登録
- 新しいスタッフIDの生成
- 情報をDBに登録
- スタッフカード画像の生成
すべての処理に成功したら、新しいスタッフIDとスタッフカード画像のパスを返します。それらを受け取ったら画面を以下のように変更します。
追加登録成功画面
新しいIDを空白だった箇所に表示します。
ボタンを図のように変更します。
スタッフカードボタンをクリックで、スタッフカード画像を別窓で表示します。
OKボタンをクリックで、親画面であるスタッフ一覧を更新します。するとその一覧上に今登録したスタッフ情報が表示されます
スタッフ情報の編集
編集モーダルウィンドウが表示される際、選択したスタッフの情報をフォームに当てはめます。
クリックで、JavascriptのConfirm機能を使って再発行を確認します。
- スタッフ情報の更新
- スタッフカード画像の作り替え
更新成功画面
ボタンを「OK」に変えます。「OK」ボタンをクリックで、親画面のスタッフ一覧を更新し、このモーダルウィンドウを閉じます。
パスワード再発行確認画面
- パスワードを初期化します。
- 対象のスタッフの登録メールアドレスにパスワード変更URLを送信します。あとはパスワードの初期登録と同じフローを行ってもらいます。
パスワード再発行成功画面
パスワード再発行処理、メール送信が成功した場合、Javascriptのアラート機能を使って送信成功のメッセージを表示します。「OK」ボタンをクリックで、アラートを閉じ、スタッフ編集モーダルウィンドウも閉じます。
以上がスタッフ一覧とそれに付随する機能があらましです。
次回はこれらの静的HTMLを複数回に分けて作成・解説します。