フルスタックエンジニアのノウハウ
2021.01.31    2021.04.23

【開発実況シリーズ】Web日報登録システムを作る #11 管理者:ログイン機能開発編

【開発実況シリーズ】Web日報登録システムを作る #11 管理者:ログイン機能開発編

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

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


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



前回は…


前回までで、社員側の機能が一通り実装完了しました。


関連記事

【開発実況シリーズ】Web日報登録システムを作る #10 編集機能開発編


今回からは、管理者側の機能開発に取りかかっていきます。


まずは、管理者専用のログイン画面を作っていきましょう!



今回のタスク


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


管理者側のログイン画面はこちらですね。




UI設計時に、管理者専用のログイン画面を用意しています。


社員側と同じように「社員番号」と「パスワード」を入力してログインする形になっています。


通常、Webアプリを作る際は、管理者のユーザー情報は一般ユーザーとは別に管理することが多いですが、今回は社内の業務日報管理システムということなので、おそらく管理者も社員の一人であると想定されます。


そのため、管理者情報もuserテーブルで一緒に管理するようにして、そのユーザーが一般社員なのか管理者なのかを判別出来るように、userテーブルに権限カラムを追加します。


そうすれば、管理権限を持つ社員は自分の社員IDとパスワードで、管理者機能にもログインすることが出来るので便利ですね。


それ以外の基本的なログインの処理は、社員側で作ったものがほぼ流用出来ると思いますので、コピーしてきて、細かい部分を調整します。


最後に、ログインが完了したら次の画面である「社員一覧」に遷移するようにして完成です。



ざっとこんな感じですね。


それでは、順番に実装していきましょう!



userテーブルに判別用カラム追加


まずは、phpMyAdminでuserテーブルにカラムを追加していきます。



権限を設定するカラムなので、カラム名は「auth_type」にしましょう。


ここに何も設定されていなければ「一般社員」、

1という値が登録されていたら「管理者」と判断することにします。




これで良いですね。


ログイン処理の実装と調整


次は、ログイン処理を実装していきます。


管理者の画面は、adminフォルダ以下に設置されています。


社員側のログイン処理を全てコピーして、貼り付けます。



背景色を管理者用に変更します。




管理者はフォルダ階層が異なるので、requireのパスも調整し

ログインチェックは一旦コメント化しておきます。




実際のログイン処理の部分は、社員IDとパスワードに加えて、先ほど追加した権限(auth_type)のチェックも行います。




これで、社員IDとパスワードが一致し、なおかつ「auth_type」が1のユーザーしかログイン出来なくなりました。


管理者のログインチェックは、auth_typeの状態もチェックするように改良します。




社員一覧画面へ遷移


ログイン完了後は、社員一覧画面へ遷移するようにします。




では、実際にテストしてみましょう。


userテーブルに、テスト用の管理者ユーザーを追加しておきます。


社員ID「1」のユーザーは「一般社員」

社員ID「2」のユーザーは「管理者」という状態になっています。




まずは、1のユーザーでログインを試してみます。




1のユーザーは一般社員なので、ログインは拒否されます。




では次に、2のユーザーでログインしてみます。


管理者の場合のみ、正常にログイン出来ました。

ログイン後は、正しく社員一覧画面に遷移していますね。




これで、管理者ログイン機能の実装は完了です。



次回予告


ということで、これで今回のタスクは完了です。


今回は、管理者のログイン機能を実装しました。


次回は、管理者の「社員一覧画面」の実装に取りかかっていきましょう!



おすすめ記事