関連記事
【開発実況シリーズ】Web日報登録システムを作る #10 編集機能開発編
2021.01.31
2021.04.23
【開発実況シリーズ】Web日報登録システムを作る #11 管理者：ログイン機能開発編
この記事の動画版はこちら（画像クリックでYoutubeに飛びます）
チャンネル登録お願いします！
今回は、開発実況シリーズ「Web日報登録システム」の第11回ということで、前回の続きを進めていきたいと思います。
前回は…
前回までで、社員側の機能が一通り実装完了しました。
今回からは、管理者側の機能開発に取りかかっていきます。
まずは、管理者専用のログイン画面を作っていきましょう！
今回のタスク
今回も、最初に作業内容を簡単にまとめておきましょう。
管理者側のログイン画面はこちらですね。
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のユーザーでログインしてみます。
管理者の場合のみ、正常にログイン出来ました。
ログイン後は、正しく社員一覧画面に遷移していますね。
これで、管理者ログイン機能の実装は完了です。
次回予告
ということで、これで今回のタスクは完了です。
今回は、管理者のログイン機能を実装しました。
次回は、管理者の「社員一覧画面」の実装に取りかかっていきましょう！
徳田 啓（トクタ ケイ）
Webプログラマー暦20年。自分で使うツールは、基本的に1人でゼロから自作。オールマイティなプログラミングの知識とスキルを学べる「フルスタックエンジニア マスター講座」を開講中。生徒さん1人1人に合わせてしっかりサポートしていきます！
プログラミングの実践的なノウハウを発信中！
ぜひフォローしておいてください。
ぜひフォローしておいてください。
