PHPとMySQLを使った会員登録システムの作り方

会員登録システムの作り方

今回は、PHPとMySQLを使った簡単な会員登録システムの作り方を見ていきます。

内容を理解するために、PHPとSQLの基礎知識があることを前提としています。

そもそも基礎知識が怪しいという方は、先に基礎学習を済ませてきてください。

何から手を付けたらいいのかわからない、という方は【入門用】Udemy PHPのおすすめコースを参考にしてみてください。

1 会員登録システムの作り方
2 会員登録システムの完成形
3 会員登録システムの構成
4 会員登録システムの実装
5 おわりに

会員登録システムの完成形

まずは、今回作成する会員登録システムの完成形から確認しておきましょう。

どのようなものが出来上がるのかを確認しておいた方が、モチベーションが維持しやすいですよね。

今回作成するプログラムはこんな感じに仕上がります。

では、さっそく本題へ移りましょう。

会員登録システムの構成

ここでは、会員登録システムが、どのような構成になっているのかを確認します。

今回作成するプログラムは、データベースと、PHPで記述されたプログラムの２つから出来ています。

では、それぞれの役割を見てみましょう。

データベース

データベースは、『登録した会員情報を保存しておく』という役割があります。

本来は、複数のテーブルを使用して様々な情報を保存するのですが、今回は最低限の情報だけを保存するので、１つのテーブルだけを使用します。

今回、データベースに保存する情報は以下の４つです。

データベースで保存しておく情報

ユーザーID
ユーザー名
メールアドレス
パスワード

PHPファイル

今回、必要となるPHPファイルは、全部で４つあります。

必要なPHPファイル

dbconnect.php
entry.php
check.php
thank.php

それぞれの役割を説明しますね。

dbconnect.php

このファイルでは、PHPからデータベースに接続するための処理を行います。

すべてのファイルで、データベースとの接続処理を記述することは無駄が多いので、１つのファイルにまとめておこう、という発想です。

entry.php

このファイルでは、登録フォールを作成し、会員情報を実際に入力してもらう画面を作ります。

上で見たサンプルのトップページです。

check.php

このファイルでは、entry.phpで入力してもらった情報の再確認を行います。

要するに、「メールアドレスとか本当にこれでいいの？」って確認するやつです。

thank.php

このファイルでは、登録が完了した旨を伝え、ログインページへと促します。

※本記事では、ログインページまでは作成しません。

ディレクトリ構成図はこのようになります。

join_system/

┣ entry.php

┣ check.php

┣ thank.php

┣ dbconnect.php

┣ css/

┣ style.css

全体の流れ

会員登録の流れは、以下の図のようになります。

ここには書いてませんが、途中でエラー処理なども行います。

ザックリとイメージできればOKです。

次の章で、いよいよ実装コードを見ていきます。

会員登録システムの実装

この章では、最初にデータベースを実装し、次にPHPファイルの作成へと移ります。

データベース

今回使用するデータベースの名前は、 mydb とします。

また、テーブル名は、 members とします。

構造はこんな感じです。

上の画像通りにデータベースの設定を行います。

IDはオートインクリメントの設定をしています。

データ型は、IDのみint型で、残りはテキスト型のものを選んでおけばOKです。

上の画像では、可変長文字型（varchar）に設定しています。

これはただ単に、字数に制限を付けているだけです。

これでデータベースの設定は完了です。

PHPファイル

サンプル画像が何枚かありますが、CSSを適当にコピペしてもらえれば、同じデザインになります。

CSSファイルは下の方に用意してあります。

dbconnect.php

まずは、PHPからデータベースに接続するためのファイルを作成します。

データベースとの接続用ファイルを、 dbconnect.php という名前で作成しましょう。

<?php
try {
    $db = new PDO('mysql:dbname=mydb;host=127.0.0.1;charset=utf8mb4', 'root', '12345');
}   catch (PDOException $e) {
    echo "データベース接続エラー　：".$e->getMessage();
}
?>

<?php

try {

$db = new PDO('mysql:dbname=mydb;host=127.0.0.1;charset=utf8mb4', 'root', '12345');

} catch (PDOException $e) {

echo "データベース接続エラー　：".$e->getMessage();

}

'root' と '12345' と書かれたところは、phpMyAdminのユーザー名とパスワードを入力します。

ここは、ご自身のアカウントに合わせて設定してください。

あとは、各ファイルで dbconnect.php を取り込むだけで、データベースに接続することができるようになります。

entry.php

このファイルでは、入力フォームを実装します。

イメージはこんな感じです。

では、このページのコードを見ていきます。

<?php 
require("./dbconnect.php");
session_start();

if (!empty($_POST)) {
    /* 入力情報の不備を検知 */
    if ($_POST['email'] === "") {
        $error['email'] = "blank";
    }
    if ($_POST['password'] === "") {
        $error['password'] = "blank";
    }
    
    /* メールアドレスの重複を検知 */
    if (!isset($error)) {
        $member = $db->prepare('SELECT COUNT(*) as cnt FROM members WHERE email=?');
        $member->execute(array(
            $_POST['email']
        ));
        $record = $member->fetch();
        if ($record['cnt'] > 0) {
            $error['email'] = 'duplicate';
        }
    }

    /* エラーがなければ次のページへ */
    if (!isset($error)) {
        $_SESSION['join'] = $_POST;   // フォームの内容をセッションで保存
        header('Location: check.php');   // check.phpへ移動
        exit();
    }
}
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
    <title>アカウント作成</title>
    <link href="https://unpkg.com/sanitize.css" rel="stylesheet"/>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="content">
        <form action="" method="POST">
            <h1>アカウント作成</h1>
            <p>当サービスをご利用するために、次のフォームに必要事項をご記入ください。</p>
            <br>

            <div class="control">
                <label for="name">ユーザー名</label>
                <input id="name" type="text" name="name">
            </div>

            <div class="control">
                <label for="email">メールアドレス<span class="required">必須</span></label>
                <input id="email" type="email" name="email">
                <?php if (!empty($error["email"]) && $error['email'] === 'blank'): ?>
                    <p class="error">＊メールアドレスを入力してください</p>
                <?php elseif (!empty($error["email"]) && $error['email'] === 'duplicate'): ?>
                    <p class="error">＊このメールアドレスはすでに登録済みです</p>
                <?php endif ?>
            </div>

            <div class="control">
                <label for="password">パスワード<span class="required">必須</span></label>
                <input id="password" type="password" name="password">
                <?php if (!empty($error["password"]) && $error['password'] === 'blank'): ?>
                    <p class="error">＊パスワードを入力してください</p>
                <?php endif ?>
            </div>

            <div class="control">
                <button type="submit" class="btn">確認する</button>
            </div>
        </form>
    </div>
</body>
</html>

<?php

require("./dbconnect.php");

session_start();

if (!empty($_POST)) {

/* 入力情報の不備を検知 */

if ($_POST['email'] === "") {

$error['email'] = "blank";

}

if ($_POST['password'] === "") {

$error['password'] = "blank";

}

/* メールアドレスの重複を検知 */

if (!isset($error)) {

$member = $db->prepare('SELECT COUNT(*) as cnt FROM members WHERE email=?');

$member->execute(array(

$_POST['email']

));

$record = $member->fetch();

if ($record['cnt'] > 0) {

$error['email'] = 'duplicate';

}

/* エラーがなければ次のページへ */

if (!isset($error)) {

$_SESSION['join'] = $_POST; // フォームの内容をセッションで保存

header('Location: check.php'); // check.phpへ移動

exit();

}

<!DOCTYPE html>

<html>

<head>

<title>アカウント作成</title>

</head>

<body>

<h1>アカウント作成</h1>

<p>当サービスをご利用するために、次のフォームに必要事項をご記入ください。</p>

<br>

<label for="name">ユーザー名</label>

</div>

<label for="email">メールアドレス<span class="required">必須</span></label>

<?php if (!empty($error["email"]) && $error['email'] === 'blank'): ?>

<p class="error">＊メールアドレスを入力してください</p>

<?php elseif (!empty($error["email"]) && $error['email'] === 'duplicate'): ?>

<p class="error">＊このメールアドレスはすでに登録済みです</p>

<?php endif ?>

</div>

<label for="password">パスワード<span class="required">必須</span></label>

<?php if (!empty($error["password"]) && $error['password'] === 'blank'): ?>

<p class="error">＊パスワードを入力してください</p>

<?php endif ?>

</div>

</div>

</form>

</div>

</body>

</html>

まずは、PHP部分から見ていきましょう。

こちらが該当部分です。

<?php 
require("./dbconnect.php");
session_start();

if (!empty($_POST)) {
    /* 入力情報の不備を検知 */
    if ($_POST['email'] === "") {
        $error['email'] = "blank";
    }
    if ($_POST['password'] === "") {
        $error['password'] = "blank";
    }
    
    /* メールアドレスの重複を検知 */
    if (!isset($error)) {
        $member = $db->prepare('SELECT COUNT(*) as cnt FROM members WHERE email=?');
        $member->execute(array(
            $_POST['email']
        ));
        $record = $member->fetch();
        if ($record['cnt'] > 0) {
            $error['email'] = 'duplicate';
        }
    }

    /* エラーがなければ次のページへ */
    if (!isset($error)) {
        $_SESSION['join'] = $_POST;   // フォームの内容をセッションで保存
        header('Location: check.php');   // check.phpへ移動
        exit();
    }
}
?>

<?php

require("./dbconnect.php");

session_start();

if (!empty($_POST)) {

/* 入力情報の不備を検知 */

if ($_POST['email'] === "") {

$error['email'] = "blank";

}

if ($_POST['password'] === "") {

$error['password'] = "blank";

}

/* メールアドレスの重複を検知 */

if (!isset($error)) {

$member = $db->prepare('SELECT COUNT(*) as cnt FROM members WHERE email=?');

$member->execute(array(

$_POST['email']

));

$record = $member->fetch();

if ($record['cnt'] > 0) {

$error['email'] = 'duplicate';

}

/* エラーがなければ次のページへ */

if (!isset($error)) {

$_SESSION['join'] = $_POST; // フォームの内容をセッションで保存

header('Location: check.php'); // check.phpへ移動

exit();

}

まず、２行目の require("./dbconnect.php"); で dbconnect.php を読み込み、データベースと接続しています。

また、今回はセッションも使用するため、3行目の session_start(); で、それを明示しています。

次は、5行目から始まるif文です。

ここでは、条件を !empty($_POST)とすることで、 $_POST の値が存在する場合にifの中に入るようになっています。

$_POST は、 form が送信されたときに値が入るので、最初にこのページにアクセスする際は何も入っていません。

つまり、『最初にアクセスしたときはif文には入らず、フォームが送信されたらif文に入る』ということになります。

次に、7~12行目のif文を見てみます。

    if ($_POST['email'] === "") {
        $error['email'] = "blank";
    }
    if ($_POST['password'] === "") {
        $error['password'] = "blank";
    }

if ($_POST['email'] === "") {

$error['email'] = "blank";

}

if ($_POST['password'] === "") {

$error['password'] = "blank";

}

この部分では、入力必須の項目が、ちゃんと入力されているかを確認しています。

form タグ内にある、 input タグの value 属性の値を調べて、それが空っぽであれば、 $error['email'] = "blank"; などとすることで、エラーが発生したことがわかるようにしておきます。

"blank" の部分は何でもいいのですが、今回は空っぽだったことがわかるように、この文字列に設定しています。

HTML部分で、この $error の値を見て、エラーメッセージを出力するかどうかを判定します。

68~70行目がその一例です。

                <?php if ($error['password'] === 'blank'): ?>
                    <p class="error">＊パスワードを入力してください</p>
                <?php endif ?>

<?php if ($error['password'] === 'blank'): ?>

<p class="error">＊パスワードを入力してください</p>

<?php endif ?>

それぞれの input タグの下の方に、 $error の値を確認するためのif文がありますね。

実際のエラーメッセージはこのようになります。

このようにして、会員情報をしっかり入力しているかどうかを判定しています。

では、次に、15~24行目のif文を見ます。

    if (!isset($error)) {
        $member = $db->prepare('SELECT COUNT(*) as cnt FROM members WHERE email=?');
        $member->execute(array(
            $_POST['email']
        ));
        $record = $member->fetch();
        if ($record['cnt'] > 0) {
            $error['email'] = 'duplicate';
        }
    }

if (!isset($error)) {

$member = $db->prepare('SELECT COUNT(*) as cnt FROM members WHERE email=?');

$member->execute(array(

$_POST['email']

));

$record = $member->fetch();

if ($record['cnt'] > 0) {

$error['email'] = 'duplicate';

}

この部分では、メールアドレスの重複を確認しています。

以前にも登録したメールアドレスで、もう一度アカウントを作られたら厄介ですよね。

ということで、フォームで入力してもらったメールアドレスを使って、SQLを発行しています．

具体的には、データベースのemailカラムから、フォームで入力したメールアドレスと一致するレコードの数を取得してきます。

もし、以前にも登録したことのあるメールアドレスであれば、取得したレコード数は１以上なるはずです。

なので、以下のようにして判定を行います。

        if ($record['cnt'] > 0) {
            $error['email'] = 'duplicate';
        }

if ($record['cnt'] > 0) {

$error['email'] = 'duplicate';

}

これにより、空欄チェックと同様に、エラーの発生を認識することができます。

では、27~31行目にある、最後のif文を見ていきます。

    if (!isset($error)) {
        $_SESSION['join'] = $_POST;   // フォームの内容をセッションで保存
        header('Location: check.php');   // check.phpへ移動
        exit();
    }

if (!isset($error)) {

$_SESSION['join'] = $_POST; // フォームの内容をセッションで保存

header('Location: check.php'); // check.phpへ移動

exit();

}

この部分では、エラーが無かった場合に、確認画面へ移動するようにします。

エラーは、さきほど見てきた空欄やメールアドレスの重複などです。

$_SESSION['join'] = $_POST; とすることで、一時的にセッションにフォームの入力情報を保存しておきます。

これによって、確認ページへフォームの入力情報を受け渡すことができます。

セッションに値を保存したら、 check.php に移動します。

パスワードが見え隠れする機能を追加したいのであれば、以下の記事を参考にしてみてください。

>>【jQuery】パスワードを表示する機能の実装

check.php

こちらのファイルでは、 entry.php で入力した値を受け取り、ユーザーに確認してもらいます。

確認後、OKだった場合はデータベースへ登録し、修正する場合はフォーム画面に戻ります。

イメージはこんな感じです。

実際のコードはこちらです。

<?php
require("./dbconnect.php");
session_start();

/* 会員登録の手続き以外のアクセスを飛ばす */
if (!isset($_SESSION['join'])) {
    header('Location: entry.php');
    exit();
}

if (!empty($_POST['check'])) {
    // パスワードを暗号化
    $hash = password_hash($_SESSION['join']['password'], PASSWORD_BCRYPT);

    // 入力情報をデータベースに登録
    $statement = $db->prepare("INSERT INTO members SET name=?, email=?, password=?");
    $statement->execute(array(
        $_SESSION['join']['name'],
        $_SESSION['join']['email'],
        $hash
    ));

    unset($_SESSION['join']);   // セッションを破棄
    header('Location: thank.php');   // thank.phpへ移動
    exit();
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
    <title>確認画面</title>
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
    <link href="https://unpkg.com/sanitize.css" rel="stylesheet"/>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="content">
        <form action="" method="POST">
            <input type="hidden" name="check" value="checked">
            <h1>入力情報の確認</h1>
            <p>ご入力情報に変更が必要な場合、下のボタンを押し、変更を行ってください。</p>
            <p>登録情報はあとから変更することもできます。</p>
            <?php if (!empty($error) && $error === "error"): ?>
                <p class="error">＊会員登録に失敗しました。</p>
            <?php endif ?>
            <hr>

            <div class="control">
                <p>ニックネーム</p>
                <p><span class="fas fa-angle-double-right"></span> <span class="check-info"><?php echo htmlspecialchars($_SESSION['join']['name'], ENT_QUOTES); ?></span></p>
            </div>

            <div class="control">
                <p>メールアドレス</p>
                <p><span class="fas fa-angle-double-right"></span> <span class="check-info"><?php echo htmlspecialchars($_SESSION['join']['email'], ENT_QUOTES); ?></span></p>
            </div>
            
            <br>
            <a href="entry.php" class="back-btn">変更する</a>
            <button type="submit" class="btn next-btn">登録する</button>
            <div class="clear"></div>
        </form>
    </div>
</body>
</html>

<?php

require("./dbconnect.php");

session_start();

/* 会員登録の手続き以外のアクセスを飛ばす */

if (!isset($_SESSION['join'])) {

header('Location: entry.php');

exit();

}

if (!empty($_POST['check'])) {

// パスワードを暗号化

$hash = password_hash($_SESSION['join']['password'], PASSWORD_BCRYPT);

// 入力情報をデータベースに登録

$statement = $db->prepare("INSERT INTO members SET name=?, email=?, password=?");

$statement->execute(array(

$_SESSION['join']['name'],

$_SESSION['join']['email'],

$hash

));

unset($_SESSION['join']); // セッションを破棄

header('Location: thank.php'); // thank.phpへ移動

exit();

}

<!DOCTYPE html>

<head>

</head>

<body>

<h1>入力情報の確認</h1>

<p>ご入力情報に変更が必要な場合、下のボタンを押し、変更を行ってください。</p>

<p>登録情報はあとから変更することもできます。</p>

<?php if (!empty($error) && $error === "error"): ?>

<p class="error">＊会員登録に失敗しました。</p>

<?php endif ?>

<hr>

<p>ニックネーム</p>

</div>

<p>メールアドレス</p>

</div>

<br>

</form>

</div>

</body>

</html>

ここでも、頭の方にあるPHPタグを見ていきます。

こちらです。

<?php
require("./dbconnect.php");
session_start();

/* 会員登録の手続き以外のアクセスを飛ばす */
if (!isset($_SESSION['join'])) {
    header('Location: entry.php');
    exit();
}

if (!empty($_POST['check'])) {
    // パスワードを暗号化
    $hash = password_hash($_SESSION['join']['password'], PASSWORD_BCRYPT);

    // 入力情報をデータベースに登録
    $statement = $db->prepare("INSERT INTO members SET name=?, email=?, password=?");
    $statement->execute(array(
        $_SESSION['join']['name'],
        $_SESSION['join']['email'],
        $hash
    ));

    unset($_SESSION['join']);   // セッションを破棄
    header('Location: thank.php');   // thank.phpへ移動
    exit();
}
?>

<?php

require("./dbconnect.php");

session_start();

/* 会員登録の手続き以外のアクセスを飛ばす */

if (!isset($_SESSION['join'])) {

header('Location: entry.php');

exit();

}

if (!empty($_POST['check'])) {

// パスワードを暗号化

$hash = password_hash($_SESSION['join']['password'], PASSWORD_BCRYPT);

// 入力情報をデータベースに登録

$statement = $db->prepare("INSERT INTO members SET name=?, email=?, password=?");

$statement->execute(array(

$_SESSION['join']['name'],

$_SESSION['join']['email'],

$hash

));

unset($_SESSION['join']); // セッションを破棄

header('Location: thank.php'); // thank.phpへ移動

exit();

}

こちらのファイルでも、最初の方で、データベースへの接続とセッションの有効化をしています。

では、最初のif文から解説します。

/* 会員登録の手続き以外のアクセスを飛ばす */
if (!isset($_SESSION['join'])) {
    header('Location: entry.php');
    exit();
}

/* 会員登録の手続き以外のアクセスを飛ばす */

if (!isset($_SESSION['join'])) {

header('Location: entry.php');

exit();

}

この部分では、セッションの値を確認しています。

どこからでも確認画面にアクセスされると困るので、 entry.php から遷移してきた印として、セッションの中身を確認します。

セッションが空の場合は、 entry.php に送り返します。

次のif文を見てみましょう。

if (!empty($_POST['check'])) {
    // パスワードを暗号化
    $hash = password_hash($_SESSION['join']['password'], PASSWORD_BCRYPT);
 
    // 入力情報をデータベースに登録
    $statement = $db->prepare("INSERT INTO members SET name=?, email=?, password=?");
    $statement->execute(array(
        $_SESSION['join']['name'],
        $_SESSION['join']['email'],
        $hash
    ));
 
    unset($_SESSION['join']);   // セッションを破棄
    header('Location: thank.php');   // thank.phpへ移動
    exit();
}

if (!empty($_POST['check'])) {

// パスワードを暗号化

$hash = password_hash($_SESSION['join']['password'], PASSWORD_BCRYPT);

// 入力情報をデータベースに登録

$statement = $db->prepare("INSERT INTO members SET name=?, email=?, password=?");

$statement->execute(array(

$_SESSION['join']['name'],

$_SESSION['join']['email'],

$hash

));

unset($_SESSION['join']); // セッションを破棄

header('Location: thank.php'); // thank.phpへ移動

exit();

}

entry.php と同様に、最初にページを読み込んだ時に、if文の中に入らないようにしています。

つまり、『登録する』をクリックしたときにif文に入ります。

本来、 check.php は何も入力することが無いので、常に $_POST は空っぽになってしまします。

これを防ぐために、 form タグの中に type="hidden" の input タグが１つ入っています。

こうすることで、ボタンをクリックしたかどうかを判別できるわけですね。

『登録する』ボタンをクリックしたときに、if文に入る。

つまり、入力内容を確認してOKだったということですね。

なので、このif文の中では、実際にデータベースに会員情報を保存するSQLを発行しています。

SQLを発行した後は、セッションの中身を削除して終了です。

ここまで出来たら、 header を使って thank.php に移動します。

thank.php

このファイルでは、会員登録が完了したという旨を伝え、ユーザーをログインページへと誘導します。

特に難しいことは行っていないため、こちらの説明は割愛します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
    <title>会員登録完了</title>
    <link href="https://unpkg.com/sanitize.css" rel="stylesheet"/>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="content">
        <h1>会員登録が完了しました。</h1>
        <p>下のボタンよりログインページに移動してください。</p>
        <br><br>
        <a href="login.php"><button class="btn">ログインページに移動する</button></a>
    </div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>会員登録完了</title>

</head>

<body>

<h1>会員登録が完了しました。</h1>

<p>下のボタンよりログインページに移動してください。</p>

<a href="login.php"><button class="btn">ログインページに移動する</button></a>

</div>

</body>

</html>

これで会員登録システムは完成です。

CSSファイル

style.css

クリックすると表示されます（このファイルはコピペしてください）

* {
    box-sizing: border-box;
}

button, input[type="submit"] {
    outline: none;
}

.clear {
    clear: both;
}

hr {
    margin-top: 45px;
    margin-bottom: 45px;
    border: 1px solid rgba(128, 128, 128, 0.673);
}

body {
    color: #2b546a;
    background-color: #fafafa;
    font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体";
}

h1 {
    font-size: 24px;
    margin: 0;
}

.content {
    position: relative;
    margin: 10px auto;
    background-color: #fff;
    border: 1px solid #d1d1d1;
    max-width: 600px;
    padding: 30px;
    border-radius: 5px;
}

input {
    border: none;
    border-bottom: 1px solid #d1d1d1;
    font-size: 1.2em;
    width: 100%;
    padding: 8px;
}

.btn {
    width: 100%;
    background-color: rgba(32, 152, 243, 0.9);
    border: none;
    color: #fff;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 5px 2px rgba(0, 0, 0, .4);
    cursor: pointer;
}

.btn:hover {
    background-color: rgba(32, 152, 243, 1.0);
}

.btn:active {
    position: relative;
    top: 5px;
    box-shadow: none;
}

.next-btn {
    float: right;
    width: 48%;
}

.back-btn {
    width: 48%;
    text-decoration: none;
    text-align: center;
    background-color: rgba(27, 177, 112, 0.8);
    border-radius: 5px;
    box-shadow: 0 5px 2px rgba(0, 0, 0, .4);
    padding: 15px;
    cursor: pointer;
    display: block;
    color: #fff;
    cursor: pointer;
    float: left;
    font-size: 14px;
}

.back-btn:hover {
    background-color: rgba(27, 177, 112, 1.0);
}

.back-btn:active {
    position: relative;
    top: 5px;
    box-shadow: none;
}

.control {
    margin-bottom: 3em;
}

label {
    display: block;
    margin-bottom: .5em;
}

.required {
    margin-left: .3em;
    color: #f33;
    font-size: .9em;
    padding: 3px;
    background-color: #fee;
    font-weight: bold;
}

.error {
    color: #d60e0e;
    font-size: 60%;
}

.check-info {
    color: #2b546a;
    font-weight: bold;
}

@media (max-width: 600px) {
    h1 {
        font-size: 18px;
    }

    p {
        font-size: .8em;
    }

    .login-btn {
        padding: 4px 3px 4px 8px;;
        top: 28px;
        line-height: 21px;
    }

    .login-btn:active {
        top: 30px;
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

* {

box-sizing: border-box;

}

button, input[type="submit"] {

outline: none;

}

.clear {

clear: both;

}

hr {

margin-top: 45px;

margin-bottom: 45px;

border: 1px solid rgba(128, 128, 128, 0.673);

}

body {

color: #2b546a;

background-color: #fafafa;

font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体";

}

h1 {

font-size: 24px;

margin: 0;

}

.content {

position: relative;

margin: 10px auto;

background-color: #fff;

border: 1px solid #d1d1d1;

max-width: 600px;

padding: 30px;

border-radius: 5px;

}

input {

border: none;

border-bottom: 1px solid #d1d1d1;

font-size: 1.2em;

width: 100%;

padding: 8px;

}

.btn {

width: 100%;

background-color: rgba(32, 152, 243, 0.9);

border: none;

color: #fff;

padding: 15px;

border-radius: 5px;

box-shadow: 0 5px 2px rgba(0, 0, 0, .4);

cursor: pointer;

}

.btn:hover {

background-color: rgba(32, 152, 243, 1.0);

}

.btn:active {

position: relative;

top: 5px;

box-shadow: none;

}

.next-btn {

float: right;

width: 48%;

}

.back-btn {

width: 48%;

text-decoration: none;

text-align: center;

background-color: rgba(27, 177, 112, 0.8);

border-radius: 5px;

box-shadow: 0 5px 2px rgba(0, 0, 0, .4);

padding: 15px;

cursor: pointer;

display: block;

color: #fff;

cursor: pointer;

float: left;

font-size: 14px;

}

.back-btn:hover {

background-color: rgba(27, 177, 112, 1.0);

}

.back-btn:active {

position: relative;

top: 5px;

box-shadow: none;

}

.control {

margin-bottom: 3em;

}

label {

display: block;

margin-bottom: .5em;

}

.required {

margin-left: .3em;

color: #f33;

font-size: .9em;

padding: 3px;

background-color: #fee;

font-weight: bold;

}

.error {

color: #d60e0e;

font-size: 60%;

}

.check-info {

color: #2b546a;

font-weight: bold;

}

@media (max-width: 600px) {

h1 {

font-size: 18px;

}

p {

font-size: .8em;

}

.login-btn {

padding: 4px 3px 4px 8px;;

top: 28px;

line-height: 21px;

}

.login-btn:active {

top: 30px;

}

おわりに

HTMLのコーディングがあるため、コードが長くなってしまいましたが、会員登録にかかわるコードはそこまで多くはなかったと思います。

今回は、単純なプログラムでしたが、基本的な構成さえわかってしまえば、あとは自分でアレンジできるので色々試してみてください。

メールアドレスやパスワードのアイコンを追加すると、かなりそれっぽくなりますよ。

アイコンの入れ方は【超簡単】 Font Awesomeの使い方を参考にしてみてください。

では，今回はここまでとします．

お疲れさまでした。

>> PHP, HTML ドラッグアンドドロップの実装

コメント（2件）

横山より:

2020-10-22 17:57

こちらの記事を参考に作成してみたのですが、「entry.php」の「htmlspecialchars」と「$error」配列の各値を確認している部分にてそれぞれの変数が定義されていないのに処理を実行しようとして、エラーが表示されます。
管理人様は同様にエラーは表示されませんでしたでしょうか？

■対象1

・エラー
Notice: Undefined index: name in ～

■対象2

＊メールアドレスを入力してください

＊このメールアドレスはすでに登録済みです

・エラー
Notice: Undefined variable: error in ～

返信
- tomo より:
  
  2020-10-23 11:49
  
  コメントありがとうございます。
  
  すいません、Noticeを非表示にしていたため確認不足でした。
  Noticeは警告なので問題は無いのですが、あまりよろしくないので、一部変更いたしました。
  
  変更１．entry.php内に記述されたhtmlspecialcharsは不要なので削除
  変更２．entry.php、check.php内にある、$errorを判定するif文の条件式を変更
  
  返信