masimaro blog

menu

home > WEBアプリ開発:ECサイト > PHPとMySQLでECサイトをフルスクラッチ開発⑪ECサイトの会員登録画面作成

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


ECサイト
2021-07-21


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

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

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

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

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

テーブルの作成

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

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

カラム名データ型その他
codeintAI
namevarchar 値30-
emailvarchar 値50-
addressvarchar 値50-
telvarchar 値20-
passwordvarchar 値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>

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>

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

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

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

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

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

emailの正規表現↓

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

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

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

telの正規表現↓

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

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

全て入力に問題がなければ、登録しますか?とコメントを表示させて、登録を押せば入力した値が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>

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回目の会員登録の際のエラー回避ですね。

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

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

コメントを残す

お名前

コメント



コメント一覧

コメントはまだありません
MENU