ログイン画面、phpによるログイン処理の作成

More than 1 year has passed since last update.

正月の空き時間でphpの勉強がてらログイン処理をhtmlとphpで書いてみたのでその忘備録として投稿。
まだ途中でお恥ずかしい状態です。汗

目次

1、ログイン画面の作成
2、入力値を受け取り正誤判定
3、cookieを用いて設定時間内、自動ログイン

1、ログイン画面の作成

まず先に完成画面とphpコードです。

スクリーンショット 2015-12-30 16.06.43.png

loginlhtml
<html>
    <head>
        <title>ログイン</title>
    </head>
    <body>
        <form action="session1.php" method = "post">  //(1)
            ユーザーネーム<input type ="text" name="username" value = ""><br />   //(2)
            パスワード<input type = "text" name="pass" value = ""><br />
            <input type="submit" name ="login" value = "ログイン">   //(3)
        </form>
    </body>
</html>

解説

画面は「ユーザー名」と「パスワード」を入力して「ログインボタン」をクリックしてログインする単純なものを作成します。

(1)formタグについて
画面を作成するためにformタグを用います。formタグの中にユーザー入力のためのコントロールを作成して、formタグのaction属性で指定したファイルにユーザの入力データを飛ばすことができます。method属性は後で説明します。
<form action="session1.php" method="post">

(2)入力テキストボックス
formタグの中にテキスト入力のためのテキストボックスを設置します。
inputタグのtype属性で"text"を指定するとテキストボックスになります。
ユーザーネーム<input type="text" name="username" value =""><br />

(3)情報送信ボタン
formタグの中の入力コントロールに入力された情報を送信するためのボタンを設置します。
inputタグのtype属性で"submit"を指定すると入力値送信ボタンになります。
ボタンが押されると、formタグのaction属性で指定しているphpファイルに情報を送信します。
<input type= "submit" name="login" value = ""><br />

2、入力値を受け取り正誤判定

session1.php
<?php
session_start();
$_SESSION["loginname"] = $_POST["username"];
$_SESSION["pass"] = $_POST["pass"];

if($_SESSION["loginname"] != "komuro" || $_SESSION["pass"] != "pass"){
    ?>
    ログインに失敗しました。<br />
    <a href="login.html">セッション生成ページ</a>
    <?php
    exit;
}
if(isset($_POST["username"])) setcookie("username", $_POST["username"], time()+120);
?>
会員専用画面です。<br />
ログイン認証に成功しました。現在ログインしている状態です。<br />
<a href="cookie.php">マイページへ</a>
会員専用画面です。<br />
ログイン認証に成功しました。現在ログインしている状態です。<br />
<a href="cookie.php">マイページへ</a>

解説

ここではまず
(1)セッションを開始
(2)ユーザー入力データを$_SESSION配列に格納
(3)ユーザー入力データを正誤判定して会員ページを表示またはログイン画面表示

_POST["username"]変数は前ページでユーザーが入力した名前です。
phpで定義されているスーバーグローバル変数というものです。

前ページでformタグの中に2つのテキストボックスを設置してname属性を"username""pass"に設定していますが、_POSTの連想配列に入力データが入ります。

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.