PHPで会員登録にチャレンジ!【6.ログイン画面を作ろう】

PHP

前回、会員登録が出来ました。

今回は、ログイン・ログアウト画面です。

ログイン画面

ファイル名: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(会員登録画面)とほぼ同じ
なので、特に説明する必要はないと思います。

参 考 記 事 紹 介
PHPで会員登録にチャレンジ!【1.登録画面】

ログインチェック

では、ログインのチェックを行います。

ファイル名: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」を実行してみてください。

前回使用した、ユーザー名パスワード
覚えていますか。

覚えていなかった場合、前回の復習として
ユーザー名、メールアドレス、パスワードを入力して
(当然メモしておいて)新規登録してください。

記 事 紹 介
PHPで会員登録にチャレンジ!【5.入力データをデータベースに登録】

ログイン画面が表示されますので、
ユーザー名パスワードを入力し、
[ログイン]をクリックしてください。

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

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

終わりましたら、XAMPPのコントロールパネルで
[Apache]列の[Stop]をクリックし
[Apache]を終了させてください。

これで、ログイン・ログアウトができました。

まさかこれで終わったと思っていませんか?

例えログインしても、ほかのページに移動すると
会員登録データが消えわからなくなります。

なので、ログイン中にそのデータも一緒に
移動させなければいけません。

普通に変数ここでは $username にユーザー名を
入れておいても、ページ移動すると消えます。

ですから、ページを移動しても消えない変数
保存しておく必要があります。

次回はその変数を使ってログイン情報を
保持する方法を紹介します。

コメント

タイトルとURLをコピーしました