新規登録画面

新規登録画面作成


ユーザーの新規登録はsignUp.phpというファイルで管理します。
まず見た目は以下のhtmlを使用してください。

 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
    <h1>新規登録</h1>
    <form method="POST" action="">
        user:<br>
        <input type="text" name="name" id="name">
        <br>
        password:<br>
        <input type="password" name="password" id="password"><br>
        <input type="submit" value="submit" id="signUp" name="signUp">
    </form>
</body>
</html>


ここでは名前とパスワードを入力すると
「登録が完了しました。」と文字で出る画面を作成しましょう。


phpの処理で行うことは以下の内容になります。

  • フォームで入力されたデータを受け取る
  • 送られたデータをデータベースに保存する
    →その際にパスワードはハッシュ化を行う
    →使用するデータベースは以下のカリキュラムで作成した「YIGroupBlog」の「users」を使用
  • 上記の処理の中でエラーが発生した場合に「データベースエラー」と表示させる

まず一つひとつ見ていきましょう。

フォームで入力されたデータを受け取る


データの送受信はPOSTかGETを使います。前の章でも行っているので分かると思います。
わからなくなった場合は復習しましょう。
フォームに入力した内容を取得する

送られたデータをデータベースに保存する


データベースに保存する場合はPDOを使いますね。
PDO実装

ここまでをsignUp.phpに記述した場合のソースコードを下記に載せます。
(虫食い状態にしてあるので、0から作るのは難しいという方はヒントありでやってみてください。)

ヒント(新規登録画面)

パスワードのハッシュ化


またここで初めて「ハッシュ化」という言葉が出てきました。
ハッシュ化 とは、パスワード等の元データを一定の計算手順でハッシュ値と呼ばれる ランダムな文字列(擬似乱数)に置き換える ことです。
つまり、入力したパスワードを他の人が見てもわからないような数値にして保存することでセキュリティーを強くすることが出来る訳なんですね。
もし、データベースを攻撃された場合にわかりやすいパスワードだと盗まれてしまいますからね。

ちなみによく暗号化するといった表現もしますが、暗号化ではなくあくまでも元のデータをランダムな文字列に変換させるというのがハッシュ化の役目になります。

例)
「aaa」をハッシュ化する
↓
$2y$10$FJw9

パスワードの値をデータベースに保存する場合はハッシュ化した方が良いと覚えておいてください。

具体的にハッシュ化を行う場合は password_hash()関数 を使用します。

$hash = password_hash($password, PASSWORD_DEFAULT)

ここで「 PASSWORD_DEFAULT 」も初めて見るかと思います。
これはもともとphpで定義されている定数です。
ハッシュ化する場合はハッシュ化の方式を指定しないといけないので
PASSWORD_BCRYPTPASSWORD_DEFAULTを使用してください。
定義済み定数

パスワードをハッシュ化することは分かったけど、どうしたら良いの?


人によってやり方は異なるかもしれませんが、今回は、

  • $passwordpassword_hashで変換した値を格納する変数を用意する($password_hashとします。)
  • $password_hashをバインドします。

という方針でいった方が良いかと思います。
例えば、下記のような感じです。

$password = $_POST["password"];
$password_hash = password_hash($password, PASSWORD_DEFAULT);

// :passwordにバインドする場合は、$password_hashを使用する
$stmt->bindValue(':password', $password_hash);

実際に使ってみると


ここではフォームに入力されたデータがデータベースに保存されていればOKです。
ちなみにパスワードは「naoki」と入れたのですが、訳がわからない文字に変換されていますね。

submitボタンが押されたときだけ登録処理をしたい!


もちろん、submitボタンが押され、POSTでデータを受け取った場合のみ処理を実行したいのですが、どのように判定すれば良いでしょうか?
いくつか方法はあるのですが、本項では以下のようにsubmitボタンに値を持たせる方法を使っています。

<input type="submit" value="submit" id="signUp" name="signUp">

submitボタンを押した場合、nameで設定した名前で、value値を送信することができます。
「この値があれば、submitボタンがおされている。なければsubmitボタンは押されていない」と考えることができます。

このときよく使うメソッドとして、issetがあります。(イズセットと読みます。)
これはいろいろな使い方がありますが、 その変数が存在するかどうか 条件分岐で使用したりします。
例えば、ヒント(新規登録画面)内であれば以下の文ですね。

// POSTで送られたデータがあった場合
if (isset($_POST["signUp"])) {

    // 処理

}

これで、「$_POST["signUp"]という変数が存在するのであれば」という意味になります。
(ヒント内では簡潔に「POSTで送られたデータがあった場合」としています。)

issetはかなり汎用的なメソッドなので、これから様々な場面で出くわすと思います。
そのたびにぜひ使って覚えましょう!

isset

カテゴリー

アーカイブ

Close Bitnami banner
Bitnami