PHPとMySQLでECサイトをフルスクラッチ開発！⑪ECサイトの会員登録画面作成

前回、ECサイト公開ページのトップ画面を作成しました。↓

PHPとMySQLでECサイトをフルスクラッチ開発！⑩ECサイトのトップ画面作成

https://denkenmusic.com/phpとmysqlでecサイトをフルスクラッチ開発！⑩ecサイト

前回、商品管理ページの作成が終わりました。↓　今回より、いよいよ公開するＥＣサイトの作成に入ります。はじめに、これから作成するECサイトの完成形を載せておきます。↓サイトは下記URLから飛べますので、是非ログインして架空の商品を購入したり、色々試してみて下さい。これからまとめる内容を覚えれば、これらの事が可能になります。フルスクラッチECサイトへそれではまず、これから作成する公開サイトの構図から説明いたします。　公開サイトの構図全体像おおまかに分けると、4つのブロックから成り立ちます。１つは、「商品閲...

今回は、ECサイトの会員登録ページを作成します。

星マークが作成済のページになります。今回は雲マークのページを作成します。

このECサイトでは、会員登録者がログインすれば、商品を購入できるようにしています。

したがって、カートに入れる以降のページには会員登録、およびログイン済でなければ進めないようにします。

それではまず、会員情報を登録するテーブルをデータベースに作成します。

1 テーブルの作成
2 会員情報入力画面
- 2.1 menber_login_db.php
3 会員情報入力チェック画面
- 3.1 menber_login_db_check.php
4 会員情報データベース登録画面
- 4.1 menber_login_db_done.php

テーブルの作成

shopのデータベース配下に、会員情報管理のテーブルを作成します。テーブル名は「menber」とします。

カラムは6とし、下図のように「code」「name」「email」「address」「tel」「password」のカラム名、データ型、AI(AUTO_INCREMENT)を設定します。

カラム名	データ型	その他
code	int	AI
name	varchar 値30	–
email	varchar 値50	–
address	varchar 値50	–
tel	varchar 値20	–
password	varchar 値32	–

上から順に、会員番号、名前、email、住所、電話番号、パスワード、となります。

ECサイト利用者にはこれを登録してもらい、この情報を元にログインする仕組みを作成していきます。

phpファイルについては、htdocsディレクトリ内にmenber_loginディレクトリを作成し、その配下に会員登録ページの menber_login_db.php menber_login_db_check.php menber_login_db_done.php の3ファイルを作成していきます。

会員情報入力画面

menber_login_db.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>会員情報入力画面</title>
<link rel="stylesheet" href="../style.css">
</head>
    
<body>
    
新規会員登録画面<br><br>

お名前<br>
<form action="menber_login_db_check.php" method="post">
<input type="text" name="name">
<br>
email<br>
<input type="text" name="email">
<br>
住所<br>
<input type="text" name="address">
<br>
tel<br>
<input type="text" name="tel">
<br>
パスワード<br>
<input type="password" name="pass">
<br>
パスワード再入力<br>
<input type="password" name="pass2">
<br><br>
<input type="button" onclick="history.back()" value="戻る">
<input type="submit" value="OK">
<br><br>
   
</form>
<br><br>
    
</body>
</html>

<!DOCTYPE html>

<head>

<title>会員情報入力画面</title>

</head>

<body>

新規会員登録画面<br><br>

お名前<br>

<br>

email<br>

<br>

住所<br>

<br>

tel<br>

<br>

パスワード<br>

<br>

パスワード再入力<br>

</form>

</body>

</html>

menber_loginディレクトリ配下にmenber_login_db.phpを作成します。

このページは会員情報の入力画面になります。

至ってシンプルで、formタグで入力した内容をpostするだけですね。もはや今更なにもいう事はありません。

会員情報入力チェック画面

menber_login_db_check.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>会員情報入力チェック</title>
<link rel="stylesheet" href="../style.css">
</head>
    
<body>

<?php

require_once("../common/common.php");

$post = sanitize($_POST);
    
$name = $post["name"];
$address = $post["address"];
$tel = $post["tel"];
$email = $post["email"];
$pass = $post["pass"];
$pass2 = $post["pass2"];
$okflag = true;
    
if(empty($name) === true) {
    print "お名前を入力してください。<br>";
    $okflag = false;
}
if(empty($email) === true) {
    print "emailを入力してください。<br>";
    $okflag = false;
}
if(preg_match("/\A[\w\-\.]+\@[\w\-\.]+\.([a-z]+)\z/", $email) === 0) {
    print "正しいemailを入力してください。<br>";
    $okflag = false;
}
if(empty($address) === true) {
    print "住所を入力してください。<br>";
    $okflag = false;
}
if(empty($tel) === true) {
    print "電話番号を入力してください。<br>";
    $okflag = false;
}
if(preg_match("/\A\d{2,5}-?\d{2,5}-?\d{4,5}\z/", $tel) === 0) {
    print "正しい電話番号を入力してください。<br>";
    $okflag = false;
}
if(empty($pass) === true) {
    print "パスワードを入力してください。<br>";
    $okflag = false;
}
if($pass != $pass2) {
    print "パスワードが異なります<br>";
    $okflag = false;
}
if($okflag === false) {
    print "<form><br>";
    print "<input type='button' onclick='history.back()' value='戻る'>";
} else {
    print "下記内容で登録しますか？<br><br>";
    print $name."<br><br>";
    print $email."<br><br>";
    print $address."<br><br>";
    print $tel."<br><br>";
    print "<form action='menber_login_db_done.php' method='post'>";
    print "<input type='hidden' name='name' value='".$name."'>";
    print "<input type='hidden' name='email' value='".$email."'>";
    print "<input type='hidden' name='address' value='".$address."'>";
    print "<input type='hidden' name='tel' value='".$tel."'>";
    print "<input type='hidden' name='pass' value='".$pass."'>";
    print "<input type='button' onclick='history.back()' value='戻る'>";
    print "<input type='submit' value='登録'>";
}
?>
<br><br>
    
</body>
</html>

<!DOCTYPE html>

<head>

<title>会員情報入力チェック</title>

</head>

<body>

<?php

require_once("../common/common.php");

$post = sanitize($_POST);

$name = $post["name"];

$address = $post["address"];

$tel = $post["tel"];

$email = $post["email"];

$pass = $post["pass"];

$pass2 = $post["pass2"];

$okflag = true;

if(empty($name) === true) {

print "お名前を入力してください。<br>";

$okflag = false;

}

if(empty($email) === true) {

print "emailを入力してください。<br>";

$okflag = false;

}

if(preg_match("/\A[\w\-\.]+\@[\w\-\.]+\.([a-z]+)\z/", $email) === 0) {

print "正しいemailを入力してください。<br>";

$okflag = false;

}

if(empty($address) === true) {

print "住所を入力してください。<br>";

$okflag = false;

}

if(empty($tel) === true) {

print "電話番号を入力してください。<br>";

$okflag = false;

}

if(preg_match("/\A\d{2,5}-?\d{2,5}-?\d{4,5}\z/", $tel) === 0) {

print "正しい電話番号を入力してください。<br>";

$okflag = false;

}

if(empty($pass) === true) {

print "パスワードを入力してください。<br>";

$okflag = false;

}

if($pass != $pass2) {

print "パスワードが異なります<br>";

$okflag = false;

}

if($okflag === false) {

print "<form><br>";

print "<input type='button' onclick='history.back()' value='戻る'>";

} else {

print "下記内容で登録しますか？<br><br>";

print $name."<br><br>";

print $email."<br><br>";

print $address."<br><br>";

print $tel."<br><br>";

print "<form action='menber_login_db_done.php' method='post'>";

print "<input type='hidden' name='name' value='".$name."'>";

print "<input type='hidden' name='email' value='".$email."'>";

print "<input type='hidden' name='address' value='".$address."'>";

print "<input type='hidden' name='tel' value='".$tel."'>";

print "<input type='hidden' name='pass' value='".$pass."'>";

print "<input type='button' onclick='history.back()' value='戻る'>";

print "<input type='submit' value='登録'>";

}

</body>

</html>

menber_loginディレクトリ配下にmenber_login_db_check.phpを作成します。

このページは入力した内容が適正か判断するページになります。全て問題なければ次ページに値をpostします。

過去にあった入力チェック画面とほぼ同じすが、新たな正規表現がありますね。emailとtelの部分です。

emailならば＠がないとか、telならば桁数がおかしいとか、全角はNGとかその辺りを全てチェックしてくれます。

記述の意味については深堀しませんが、とりあえずこういった記述になります。

emailの正規表現↓

preg_match(“/\A[\w-.]+\@[\w-.]+.([a-z]+)\z/”, $email）

これの返り値が0なら、問題なしとなります。１ならば、どこかおかしい入力となっている事になります。

※バックスラッシュは「￥」でも構いません。

telの正規表現↓

preg_match(“/\A\d{2,5}-?\d{2,5}-?\d{4,5}\z/”, $tel)

これも返り値が0なら、問題なしとなります。１ならば、どこかおかしい入力となっている事になります。

全て入力に問題がなければ、登録しますか？とコメントを表示させて、登録を押せば入力した値がpostされます。

会員情報データベース登録画面

menber_login_db_done.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>会員登録完了</title>
<link rel="stylesheet" href="../style.css">
</head>
    
<body>

<?php
    try{

require_once("../common/common.php");

$post = sanitize($_POST);

$name = $post["name"];
$address = $post["address"];
$tel = $post["tel"];
$email = $post["email"];
$pass = $post["pass"];
        
$pass = md5($pass);
        
$dsn = "mysql:host=localhost;dbname=shop;charset=utf8";
$user = "root";
$password = "";
$dbh = new PDO($dsn, $user, $password);
$dbh -> setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        
$sql = "SELECT email FROM menber WHERE1";
$stmt = $dbh -> prepare($sql);
$stmt -> execute();
        
while(true) {
    $rec = $stmt -> fetch(PDO::FETCH_ASSOC);
    if(empty($rec) === true) {
        break;
    }
    $mail[] = $rec["email"];
}

if(empty($mail) === true) {
    $mail[] = "a";
}
        
if(in_array($email, $mail) === true) {
    print "すでに使われているmailアドレスです。<br><br>";
    print "<a href='menber_login_db.php'>トップへ戻る</a>";
    $dbh = null;
} else {   
$sql = "INSERT INTO menber(name, email, address, tel, password) VALUES(?,?,?,?,?)";
$stmt = $dbh -> prepare($sql);
$data[] = $name;
$data[] = $email;
$data[] = $address;
$data[] = $tel;
$data[] = $pass;
$stmt -> execute($data);
        
$dbh = null;
        
 
print "登録完了しました。<br><br>";
print "<a href='../shop/shop_list.php'>トップへ戻る</a>";
}
}
catch(Exception $e) {
   print "只今障害が発生しております。";
   print "a href='menber_login.php'>ログインページへ戻る</a>";
   exit();
}
?>
<br><br>
    
</body>
</html>

<!DOCTYPE html>

<head>

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

</head>

<body>

<?php

try{

require_once("../common/common.php");

$post = sanitize($_POST);

$name = $post["name"];

$address = $post["address"];

$tel = $post["tel"];

$email = $post["email"];

$pass = $post["pass"];

$pass = md5($pass);

$dsn = "mysql:host=localhost;dbname=shop;charset=utf8";

$user = "root";

$password = "";

$dbh = new PDO($dsn, $user, $password);

$dbh -> setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

$sql = "SELECT email FROM menber WHERE1";

$stmt = $dbh -> prepare($sql);

$stmt -> execute();

while(true) {

$rec = $stmt -> fetch(PDO::FETCH_ASSOC);

if(empty($rec) === true) {

break;

}

$mail[] = $rec["email"];

}

if(empty($mail) === true) {

$mail[] = "a";

}

if(in_array($email, $mail) === true) {

print "すでに使われているmailアドレスです。<br><br>";

print "<a href='menber_login_db.php'>トップへ戻る</a>";

$dbh = null;

} else {

$sql = "INSERT INTO menber(name, email, address, tel, password) VALUES(?,?,?,?,?)";

$stmt = $dbh -> prepare($sql);

$data[] = $name;

$data[] = $email;

$data[] = $address;

$data[] = $tel;

$data[] = $pass;

$stmt -> execute($data);

$dbh = null;

print "登録完了しました。<br><br>";

print "<a href='../shop/shop_list.php'>トップへ戻る</a>";

}

catch(Exception $e) {

print "只今障害が発生しております。";

print "a href='menber_login.php'>ログインページへ戻る</a>";

exit();

}

</body>

</html>

menber_loginディレクトリにmenber_login_db_done.phpを作成します。

このページでは、まずemailすでにデータベースに登録されていないかを確認しています。emailが登録されていなければ、会員情報として入力された内容をデータベースに登録しています。

emailがすでに使用されているかの確認は、「ログイン認証に利用する」からです。重複しては困りますよね、したがって唯一無二のものにしたいので、今回はemailを重複させないような仕組みを導入します。

データベースに接続後、menberテーブルのmailカラムの情報をすべて$mailに格納していきます。

後はその$mailの中に、in_array($email, $mail)　で、すでに利用されているemailかどうかを確認しています。返り値がtrueなら有りなので、登録不可として会員登録初期画面へ誘導しています。

ちなみに、途中でmailカラムから取り出した値が空なのかどうかを確認していて、空の場合は仮の値として「a」を代入していますが、これは入力されたemailと比較する際に何故か空だとエラーが発生するためです。（他に方法がありそうですがとりあえずこうしています。）

つまり1回目の会員登録の際のエラー回避ですね。

それでは会員登録を実行してみて、データベースにちゃんと反映されているか確認してみましょう。

次回はログイン画面の作成に入ります。

テーブルの作成

会員情報入力画面

menber_login_db.php

会員情報入力チェック画面

menber_login_db_check.php

会員情報データベース登録画面

menber_login_db_done.php

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル