関連記事
【開発実況シリーズ】Web日報登録システムを作る「#5 UI作成編」
2020.12.13
2021.03.14
【開発実況シリーズ】Web日報登録システムを作る「#6 ログイン機能開発編」
この記事の動画版はこちら（画像クリックでYoutubeに飛びます）
チャンネル登録お願いします！
今回は、開発実況シリーズ「Web日報登録システム」の第6回ということで、前回の続きを進めていきたいと思います。
Todoリスト確認
まずは、Todoリストを確認しておきましょう。
前回は、UIの作成が完了しました。
画面設計フェーズで行った、各画面の設計に沿って、Bootstrapを活用しながら実際の画面をHTMLとCSSで作成していきました。
今回からは、機能開発フェーズということで、各画面に実際の機能をPHPでプログラミングしていきます。
まずは、社員側のログイン機能から実装していきましょう！
プログラミングする処理の流れ
プログラミングする処理の流れとしては
手順①
ログイン画面で「ログイン」ボタンが押された時に、入力された社員番号とパスワードを取得します。
手順②
社員番号とパスワードがどちらもちゃんと入力されているかチェックします。
ちなみに、このユーザーが入力したデータをチェックすることを「バリデーションチェック」といいます。
手順③
入力された社員番号とパスワードをデータベースに照合します。
両方とも正しく入力されていれば、該当社員のデータが取得出来るはずです。
手順④
該当社員のデータがデータベースから正しく取得出来たら、ログイン成功として、ログイン情報をセッションに保存します。
もし、データが正しく取得出来なければ、ログイン失敗として、画面にエラーを表示します。
手順⑤
ログインに成功した場合は、ログイン後のHOME画面である「月別リスト画面」へ遷移します。
これを、順番にPHPでコーディングしていきます。
なお、ログインの仕組みや基本的な考え方については、別の動画でもご説明していますので、併せて学習してみてください。
ではまず、login.phpにPHPブロックを追加します。
ここに処理を書いていきます。
画面への初回アクセス時と、ログインボタンが押されたPOST処理時で処理を分けておきます。
実装する処理手順を、こうやって最初にコメントで書いておくと、プログラミングしていく際に迷わないで進められるのでおすすめです。
入力値を取得する
では、まず入力値を取得します。
HTMLのフォームを変更していきます。
アクションを未指定にすることで、自分自身のPHPファイルを呼び出すようにして、methodはPOSTに指定します。
各項目のname値を設定します。
社員番号については、バリデーションエラーが起こった際も入力値が保持されるように、valueも設定しておきます。
これでOKです。
次に、PHP側の受け取り処理を書いていきます。
$_POST変数から受け取って
ちなみに、PHP側の変数名やHTMLのname属性値は、DBのカラム名と完全一致させておくと、何のデータを扱っているのか一目瞭然な上、スペルミスがあった際も発見しやすいのでおすすめです。
ちゃんと受け取れているか確認してみましょう。
入力した内容がちゃんと受け取れていますね。
入力値をチェックする
では、次に、受け取ったデータが正しく入っているかチェックします。
項目が未入力だった場合は、エラーを表示します。
HTML側にもエラー表示の判定処理を追加します。
ちなみに、今書いているような各種処理は、僕の講座で学ぶと自分で1から書けるようになります。
こんな感じで、未入力だとこのようにエラーが表示されるようになりました。
エラーが無かった場合は、次の処理に進みます。
データベースに照合する
次は、データベースへの照合を行います。
データベース設計で作った「user」テーブルに社員データは保存されていますので、このテーブルに照合を行います。
現在はデータが空なので、テストデータを入れておきましょう。
最終的にはパスワードは暗号化して保存する形になりますが、そういった細かいセキュリティ対策などは、基本機能をざっと実装した後で実装していきます。
DBコネクションを張って、userテーブルへのSELECT文を書きます。
社員番号とパスワードで条件を付けて、データを抽出します。
ここで書いているような、PHPからデータベースへのアクセス方法とSELECT文の書き方については、別の記事で詳しく説明しています。
正しくデータが取得出来るか確認してみましょう。
正しく取得出来ているようです。
では、次の処理に進みます。
セッションに保存＆HOME画面へ遷移
取得したユーザー情報をセッションに保存します。
そして、最後にHOME画面へ遷移させて終了です。
これで一通り実装出来ましたので、デバッグ文を削除して、動作確認してみましょう。
情報を未入力の場合はエラーが表示され、社員番号とパスワードの組み合わせが間違っている場合もエラー。
正しい情報が入力された場合は、ログインされてHOME画面が表示されます。
OKですね。
ログイン状態をチェックする
なお、今の状態だと、ログイン済みの状態でもlogin.phpにアクセスするとログイン画面が表示されてしまうため、login.phpの冒頭でログイン状態をチェックし、ログイン済みの場合はHOME画面へ遷移させるようにしましょう。
これで、ログインしている状態でlogin.phpにアクセスすると、ログイン画面ではなく、HOME画面が表示されるようになりました。
ログアウト機能を作る
動作確認用にログアウト機能も実装しておきます。
logout.phpを作成し、セッションの内容をクリアして、ログイン画面へ遷移。
これで良いですね。
ログアウトにアクセスすると、ログアウトされて、ログイン画面が表示されます。
これで、ログイン／ログアウト機能の実装は完了です。
先ほども言いましたが、セキュリティの対策やパスワードの暗号化などは、一通り機能が出来た後で実装していきます。
まずはざっくり基本機能を作り、動きを確認しながら、さらに細かい部分をブラッシュアップしていくイメージですね。
このようにして、どんどん品質を高めていきます。
次回予告
ということで、今回は社員側の「ログイン機能」を実装しました。
次回は、ログイン後のHOME画面である、社員側の「月別リスト」をプログラミングしていきましょう！
徳田 啓（トクタ ケイ）
Webプログラマー暦20年。自分で使うツールは、基本的に1人でゼロから自作。オールマイティなプログラミングの知識とスキルを学べる「フルスタックエンジニア マスター講座」を開講中。生徒さん1人1人に合わせてしっかりサポートしていきます！
プログラミングの実践的なノウハウを発信中！
ぜひフォローしておいてください。
ぜひフォローしておいてください。
