2021/12/15 よりサイトリニューアルしました

PHPとMySQLでECサイトをフルスクラッチ開発!⑫ECサイトのログイン画面作成

ログイン

前回、ECサイトの会員登録画面を作成しました。↓

  

今回は、ECサイトのログインページを作成します。

ログイン表

星マークが作成済のページになります。今回は雲マークのページを作成します。

前回同様、PHPファイルはhtdocsディレクトリ内にあるmenber_loginディレクトリに作成していきます。

 

ログイン情報入力画面

menber_login.html

menber_loginディレクトリ配下にmenber_login.phpを作成します。

このページはログイン情報の入力画面になります。

会員登録した「mail」「password」を入力すれば、ログインできる仕組みにしていますので、ここではformタグでmailアドレスとpasswordの入力欄を設置します。

最下部に会員登録のURLも貼っておきます。

なお、phpは使用していないので、拡張子はhtmlになっています。

ログイン入力画面

ログイン情報チェック画面

menber_login_check.php

menber_loginディレクトリ配下にmenber_login_check.phpを作成します。

このページは入力した内容が適正か判断するページになります。emailは正規表現がありますね。

全て問題なければ次ページに値をpostしますが、今回はその判定に「フラグ判定」を利用しています。

至って簡単な仕組みですが、初めに変数にtrueを格納しておきます。今回は$okflagですね。

あとは、各チェック項目で「偽」の場合はフラグ変数に「false」を格納します。

つまり、1つでも入力にNGがあればフラグがfalseとなるので、こういった複数のチェックを全てクリアしないと次のステップへ移行できない場合に便利です。

入力に問題が無ければ、下記mailアドレスでログインしますか?と表示させます。

ログインチェック

ログイン実行画面

menber_login_done.php

menber_loginディレクトリにmenber_login_done.phpを作成します。

このページでは、ログイン認証を実行しています。データベースを参照し、入力された内容が会員登録されている情報と一致するかどうかをチェック、会員登録されていれば、ログイン成功の証明として、$_SESSIONにログインの値を格納します。

初めに、値をpostで受け取っていますが、passwordはその後md5で暗号化させています。これはデータベースに保存されている値がmd5で暗号化されているからですね。

データベース接続後のSQL文で、会員情報を保持しているmenberテーブルから「email」と「password」両方が一致するレコードのnameカラムを選択しています。

fetchで選択した値を取り出し、続くif文で値が「空」でないかを確認しています。空であれば存在しない(mailとpassが一致する条件がない)事になるので、入力が間違っていることになります。

値が入っていれば、ログイン成功とみなせますので、session_startさせた後ログインの証明として$_SESSION[menber_login]に「1」を格納させます。ついでに名前とcodeもそれぞれ専用のSESSION変数に格納しておきます。

これで、ログイン必須のページも閲覧できるようになります。

ログイン成功

トップ画面に戻ると、画面上部にログイン状態が表示されています。

ログイン状態

ログアウト画面

menber_logout.php

最後に、ログアウトのページを作成します。スタッフ、商品管理ページのログアウトと同じですね。

$_SESSION = array(); は、sessionの値を全て消去しています。

if文の記述がややこしいですが、簡単に言えば「cookieの消去」になります。

cookieはブラウザ側に保存されるsession的な情報になるので、これも消去しています。

session_destroy(); でsessionが完全に解除されるので、ここまでがワンセットになります。

htmlは、ログアウトした旨を伝え、ECサイトトップページへ誘導しています。

ログアウト

トップ画面へ戻れば、ログイン情報が消えていると思います。

次回はいよいよECサイトのメインです!

商品をカートに入れる、数量変更やキャンセル、カートの中身を見るページを作成しようと思います!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です