前回、会員登録が出来ました。
今回は、ログイン・ログアウト画面です。
ログイン画面
ファイル名:mlogin.html
<記述例>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>登録会員ログイン画面</title>
</head>
<body>
<main>
<section>
<form method="post" style="background: honeydew; margin:10px; padding:10px; border:6px solid teal;box-shadow: 10px 10px 6px -6px darkslategray; display: inline-block;" action="mlogin_check.php">
<h3>登録会員ログイン</h3>
ユーザー名:<input type="text" name="username" style="margin:6px;"><br>
パスワード:<input type="password" name="password" style="margin:6px;"><br>
<input type="submit" value="ログイン" style="margin:10px 0 10px 60%;">
</form>
</section>
</main>
</body>
</html>
<表示例>

register.html(会員登録画面)とほぼ同じ
なので、特に説明する必要はないと思います。
ログインチェック

では、ログインのチェックを行います。
ファイル名:mlogin_check.php
<記述例>
<?php
$username = $_POST['username'];
$password = $_POST['password'];
$username = htmlspecialchars($username);
$password = htmlspecialchars($password);
$password=md5($password);
try
{
$dsn='mysql:dbname=register;host=localhost';
$user='root';
$dbpassword='';
$dbh=new PDO($dsn,$user,$dbpassword);
$dbh->query('SET NAMES utf8');
$sql='SELECT name FROM member WHERE name=? AND pass=?';
$stmt=$dbh->prepare($sql);
$data[]=$username;
$data[]=$password;
$stmt->execute($data);
$dbh=null;
$rec=$stmt->fetch(PDO::FETCH_ASSOC);
if($rec==false)
{
print 'ログインできません。<br>';
print 'ユーザー名かパスワードが間違っています。<br>';
print '<a href="mlogin.html"> 戻る </a>';
}
else
{
header('Location:top.php');
}
}
catch(Exception $e)
{
print ' ただいま障害により大変ご迷惑をおかけしております。';
exit();
}
?>
3~7行目までは、送信データを受け取りサニタイズ
しています。
10行目からはデータベース接続です。
19行目のSQLではSELECT文を使用しています。
ここでは、nameと$usernameが一致し、
かつ passと$password が一致したものを選択しています。
27行目のSELECT文で選択したデータを
1行分 $rec 変数に代入ですね、
以前説明しましたが、覚えていますか。
29行目if文で、その代入した $rec が空データなら
ログインできない旨の表示をします。
37行目では、header を使って、
目的のURL(ページ)へ移動させます。
例:header(‘Location:移動先URL’);
ログアウト画面
ファイル名:mlogout.php
<記述例>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>登録会員ログアウト</title>
</head>
<body>
<main>
<section>
ログアウトしました。<br><br>
<a href="top.php">トップページへ</a>
</section>
</main>
</body>
</html>
特に解説いりませんので、
トップページ:top.php にいきましょう。
トップページ
ファイル名:top.php
<記述例>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>トップメニュー</title>
</head>
<body>
<main>
<section style="background: ivory; margin:10px; padding:10px; border:6px solid wheat;box-shadow: 10px 10px 6px -6px gray; display: inline-block;">
<h3>トップメニュー</h3>
<ul style="line-height: 200%; margin:10px 20px 16px 0;">
<li><a href="register.html">会員登録</a></li>
<li><a href="mlogin.html">ログイン</a></li>
<li><a href="mlogout.php">ログアウト</a></li>
</ul>
</section>
</main>
</body>
</html>
<表示例>

ログインログアウトの確認
それでは、ログインとログアウトの動きを
XAMPPを使って見てみたいと思います。
「mlogin.html」と「mlogin_check.php」と
「mlogout.php」と「top.php」とを
UTF-8ファイルとして保存します。
ドキュメントルート(DocumentRoot)以下のフォルダに
4つのファイルをコピーします。
XAMPPのコントロールパネルを起動し、
[Apache]列の[Start]をクリックし[Apache]
を起動させてください。
それでは、「mlogin.html」を実行してみてください。
前回使用した、ユーザー名とパスワードを
覚えていますか。
覚えていなかった場合、前回の復習として
ユーザー名、メールアドレス、パスワードを入力して
(当然メモしておいて)新規登録してください。
ログイン画面が表示されますので、
ユーザー名、パスワードを入力し、
[ログイン]をクリックしてください。

ユーザー名かパスワードが間違っていたら
エラー表示されます。

ログインされるとトップページが
表示されます。

終わりましたら、XAMPPのコントロールパネルで
[Apache]列の[Stop]をクリックし
[Apache]を終了させてください。
これで、ログイン・ログアウトができました。
まさかこれで終わったと思っていませんか?
例えログインしても、ほかのページに移動すると
会員登録データが消えわからなくなります。
なので、ログイン中にそのデータも一緒に
移動させなければいけません。
普通に変数ここでは $username にユーザー名を
入れておいても、ページ移動すると消えます。
ですから、ページを移動しても消えない変数に
保存しておく必要があります。
次回はその変数を使ってログイン情報を
保持する方法を紹介します。
コメント