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

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

PHPとMySQLでECサイトをフルスクラッチ開発！⑪ECサイトの会員登録画面作成

https://denkenmusic.com/phpとmysqlでecサイトをフルスクラッチ開発！⑪ecサイト

前回、ECサイト公開ページのトップ画面を作成しました。↓　今回は、ECサイトの会員登録ページを作成します。星マークが作成済のページになります。今回は雲マークのページを作成します。このECサイトでは、会員登録者がログインすれば、商品を購入できるようにしています。したがって、カートに入れる以降のページには会員登録、およびログイン済でなければ進めないようにします。それではまず、会員情報を登録するテーブルをデータベースに作成します。テーブルの作成shopのデータベース配下に、会員情報管理のテーブルを作成します。...

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

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

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

1 ログイン情報入力画面
- 1.1 menber_login.html
2 ログイン情報チェック画面
- 2.1 menber_login_check.php
3 ログイン実行画面
- 3.1 menber_login_done.php
4 ログアウト画面
- 4.1 menber_logout.php

ログイン情報入力画面

menber_login.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ログイン入力</title>
<link rel="stylesheet" href="../style.css">
</head>
    
<body>

会員情報を入力してください。
<br><br>
mailアドレス<br>
<form action="menber_login_check.php" method="post">
<input type="text" name="email">
<br>
パスワード<br>
<input type="password" name="pass">
<br>
パスワード再入力<br>
<input type="password" name="pass2">
<br><br>
<input type="button" onclick="history.back()" value="戻る">
<input type="submit" value="OK">
<br><br>
会員情報が未登録の方はこちらから登録をお願いします。<br>
<a href="./menber_login_db.php">会員登録画面へ</a>
    
</form>
<br><br>

</body>
</html>

<!DOCTYPE html>

<head>

<title>ログイン入力</title>

</head>

<body>

会員情報を入力してください。

mailアドレス<br>

<br>

パスワード<br>

<br>

パスワード再入力<br>

会員情報が未登録の方はこちらから登録をお願いします。<br>

<a href="./menber_login_db.php">会員登録画面へ</a>

</form>

</body>

</html>

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

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

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

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

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

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

menber_login_check.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ログインチェック</title>
<link rel="stylesheet" href="../style.css">
</head>
    
<body>
    
<?php

require_once("../common/common.php");

$post = sanitize($_POST);

$email = $post["email"];
$pass = $post["pass"];
$pass2 = $post["pass2"];
$okflag = true;

if(empty($email) === true) {
    print "emailを入力してください。<br>";
    $okflag = false;
}
if(preg_match("/\A[\w\-\.]+\@[\w\-\.]+\.([a-z]+)\z/", $email) === 0) {
    print "正しいemailを入力してください。<br>";
    $okflag = false;
}
if(empty($pass) === true) {
    print "パスワードを入力してください。<br>";
    $okflag = false;
}
if($pass != $pass2) {
    print "パスワードが異なります<br>";
    $okflag = false;
}
if($okflag === false) {
    print "<form><br>";
    print "<input type='button' onclick='history.back()' value='戻る'>";
} else {
    print "下記mailアドレスでログインしますか？<br><br>";
    print $email."<br><br>";
    print "<form action='menber_login_done.php' method='post'>";
    print "<input type='hidden' name='email' value='".$email."'>";
    print "<input type='hidden' name='pass' value='".$pass."'>";
    print "<input type='button' onclick='history.back()' value='戻る'>";
    print "<input type='submit' value='ログイン'>";
}
?>
    <br><br>

</body>
</html>

<!DOCTYPE html>

<head>

<title>ログインチェック</title>

</head>

<body>

<?php

require_once("../common/common.php");

$post = sanitize($_POST);

$email = $post["email"];

$pass = $post["pass"];

$pass2 = $post["pass2"];

$okflag = true;

if(empty($email) === true) {

print "emailを入力してください。<br>";

$okflag = false;

}

if(preg_match("/\A[\w\-\.]+\@[\w\-\.]+\.([a-z]+)\z/", $email) === 0) {

print "正しいemailを入力してください。<br>";

$okflag = false;

}

if(empty($pass) === true) {

print "パスワードを入力してください。<br>";

$okflag = false;

}

if($pass != $pass2) {

print "パスワードが異なります<br>";

$okflag = false;

}

if($okflag === false) {

print "<form><br>";

print "<input type='button' onclick='history.back()' value='戻る'>";

} else {

print "下記mailアドレスでログインしますか？<br><br>";

print $email."<br><br>";

print "<form action='menber_login_done.php' method='post'>";

print "<input type='hidden' name='email' value='".$email."'>";

print "<input type='hidden' name='pass' value='".$pass."'>";

print "<input type='button' onclick='history.back()' value='戻る'>";

print "<input type='submit' value='ログイン'>";

}

</body>

</html>

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

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

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

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

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

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

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

ログイン実行画面

menber_login_done.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ログイン実行</title>
<link rel="stylesheet" href="../style.css">
</head>
    
<body>

<?php
    try{

require_once("../common/common.php");

$post = sanitize($_POST);

$email = $post["email"];
$pass = $post["pass"];
        
$pass = md5($pass);
        
$dsn = "mysql:host=localhost;dbname=shop;charset=utf8";
$user = "root";
$password = "";
$dbh = new PDO($dsn, $user, $password);
$dbh -> setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        
$sql = "SELECT code, name FROM menber WHERE email=? AND password=?";
$stmt = $dbh -> prepare($sql);
$data[] = $email;
$data[] = $pass;
$stmt -> execute($data);
        
$dbh = null;
        
$rec = $stmt -> fetch(PDO::FETCH_ASSOC);
        
if(empty($rec["name"]) === true) {
    print "ログイン情報が間違っています。<br>";
    print "<a href='menber_login.html'>戻る</a>";
    exit();
} 
session_start();
$_SESSION["menber_login"] = 1;
$_SESSION["menber_name"] = $rec["name"];
$_SESSION["menber_code"] = $rec["code"];
print "ログイン成功<br><br>";
print "<a href='../shop/shop_list.php'>トップへ戻る</a>";
        
}
catch(Exception $e) {
   print "只今障害が発生しております。";
   print "a href='menber_login.php'>ログインページへ戻る</a>";
   exit();
}
?>
    <br><br>

</body>
</html>

<!DOCTYPE html>

<head>

<title>ログイン実行</title>

</head>

<body>

<?php

try{

require_once("../common/common.php");

$post = sanitize($_POST);

$email = $post["email"];

$pass = $post["pass"];

$pass = md5($pass);

$dsn = "mysql:host=localhost;dbname=shop;charset=utf8";

$user = "root";

$password = "";

$dbh = new PDO($dsn, $user, $password);

$dbh -> setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

$sql = "SELECT code, name FROM menber WHERE email=? AND password=?";

$stmt = $dbh -> prepare($sql);

$data[] = $email;

$data[] = $pass;

$stmt -> execute($data);

$dbh = null;

$rec = $stmt -> fetch(PDO::FETCH_ASSOC);

if(empty($rec["name"]) === true) {

print "ログイン情報が間違っています。<br>";

print "<a href='menber_login.html'>戻る</a>";

exit();

}

session_start();

$_SESSION["menber_login"] = 1;

$_SESSION["menber_name"] = $rec["name"];

$_SESSION["menber_code"] = $rec["code"];

print "ログイン成功<br><br>";

print "<a href='../shop/shop_list.php'>トップへ戻る</a>";

}

catch(Exception $e) {

print "只今障害が発生しております。";

print "a href='menber_login.php'>ログインページへ戻る</a>";

exit();

}

</body>

</html>

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]に「１」を格納させます。ついでに名前とcodeもそれぞれ専用のSESSION変数に格納しておきます。

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

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

ログアウト画面

menber_logout.php

<?php
session_start();
$_SESSION = array();
if(isset($_Cookie[session_name()]) === true) {
    setcookie(session_name(), "", time()-42000, "/");
}
session_destroy();
?>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ログアウト</title>
<link rel="stylesheet" href="../style.css">
</head>
    
<body>

ログアウトしました。
    
<br><br>
<a href="../shop/shop_list.php">TOPへ</a>
<br><br>

</body>
</html>