このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

記事詳細

2013.03.30

PHP 会員制サイトの制作方法

どもです。

今回は気分を変えて会員制のサイト制作方法を。

と言っても基礎的な部分となりますが。

ゴリゴリ書いているエンジニアさんならあれですが、やっぱ書いていないと忘れるのが人間だったりもするので、思い出すのも含めて書いていきます。

では、まず制作のフローから。

制作フロー

まず行いたいのは、

ユーザーのメールアドレス登録

仮 id発行 メール送信

本登録ページ表示

ユーザーid、名前、パスワード、登録メールアドレス入力

本登録完了

ログインページで登録内容入力

会員制のページ表示

という流れを行いたいかと思います。

では早速。データベース、テーブルの作成を行なっていきましょう。

mysqlに関してはこちらの記事を参照よろしくお願い致します。

http://www.webcyou.com/?cat=35

開発環境はUnixとなります。MacとMAMPを使用しております。

データベース、テーブル作成

mysqlに管理者権限でログインします。

[code]mysql -u root -p[/code]

create databaseでデータベースの作成を行います。

今回は「member_test」で進めていこうと思います。

[code]create database member_test;[/code]

show databasesで作成したデータベースの確認。

[code]show databases;[/code]

作成した「member_test」を使うコマンド use member_testを入力。

[code]use member_test;[/code]

「show tables」で現在あるテーブルを表示させてみます。

[code]show tables;[/code]

もちろん存在しないので、以下のようなメッセージが表示するかと思います。

Empty 何もねーよ。と言うております。

[code]Empty set (0.00 sec)[/code]

では、テーブルを作成しましょう。

userid:ユーザーID

password:パスワード

name:ユーザーの名前

email:ユーザーのメールアドレス

を用意します。 varchar(255)で作成。

[code]create table members( userid varchar(255), password varchar(255), name varchar(255), email varchar(255));[/code]

リターン!すると、Okサインが表示するかと思います。

[code]Query OK, 0 rows affected (0.05 sec)[/code]

カラムに関する情報を確認しましょうー。

show columnsで確認することが出来ます。

[code]show columns from members;[/code]

確認できたところで、仮id番号用のカラムが足りない事に気づいたので追加を行います。

追加する際は、「ALTER TABLE 表1 ADD (列1,列2...)」で追加することが出来ます。

今回は以下の様に追加。

[code]alter table members add pre_userid int;[/code]

 

また、カラムの定義等を変更する際は、「ALTER TABLE 表1 CHANGE  変更前の列1変更後の列1 その他の定義..」

で変更を行うことが可能です。

試しにPRIMARY KEYの追加と、NOT NULLと、AUTO_INCREMENTの追加を行なってみます。

[code]alter table members change pre_userid pre_userid int not null primary key auto_increment;[/code]

追加されたのが確認出来るかと思います。

[code]alter table members change pre_userid pre_userid int;[/code]

また、変更してみます。先ほど追加した分を省いてみると、

となるのが確認出来ました。今回は特にPRIMARY KEYの設定も行なわないので削除します。

削除する際は、「DROP PRIMARY KEY」で削除することが出来ます。

[code]alter table members drop primary key;[/code]

DROP PRIMARY KEY」を削除出来たのが確認出来ました。

よし、終了ー。と思いましたが、今回、pre_useridは数字と文字列の乱数文字列にしますので、

VARCHAR(255)で設定し直します。

[code]alter table members change pre_userid pre_userid varchar(255);[/code]

データベースは一旦これで完了。

続いてファイルの準備を行いましょう。

準備するファイル

db.php :データベースの接続設定

email_form.php:email登録用テンプレート

email_regist.php:ユーザの仮登録と登録ページURLの送信用ファイル

regist_form.php:仮登録のチェックと会員登録フォームファイル

regist_confirm.php:会員登録内容確認画面ファイル

user_regist.php:会員登録と登録内容送信ファイル

index.php:ユーザー登録処理コントロールページ

を作成していきます。では、早速データベースの接続を行います。

こちらの記事と同様ですが、改めて書いていきます。

MySQL データベースと接続する際に記述する 基本PHP

db.php :データベースの接続設定

[php]
/*データベースの接続設定*/
$server = "localhost";
$user = "root";
$password = "root";
$dbname = "member_test";

/*データベースに接続*/
$conn = mysql_connect($server, $user, $password);
mysql_select_db($dbname);
[/php]

db.phpに上記を記述。今回、MAMPを使い開発しているので$serverはlocalhost、$user、$passwordは共にデフォルトのroot、$dbnameは先ほど用意した「member_test」のデータベースに接続します。

それぞれの接続設定を入力し、mysql_connect();でMySQLに接続、mysql_select_db();でMySQLの選択を行います。

email_form.php:email登録用テンプレート

続いて用意するのは、email登録用のテンプレートemail_form.phpを用意致します。

[code]
<form action="index.php" method="post"><input type="hidden" name="mode" value="email_regist" />
<table><caption>メールアドレス登録フォーム</caption>
<tr>
<td class="item">E-mail:</td>
<td><input type="text" name="email" size="40" /></td>
</tr>
</table>
<div><input type="submit" name="submit" value="送信" /></div>
</form>
[/code]

イメージはこのような感じとなります。

ユーザーが一番最初に仮IDを発行するためにメールアドレスのみを登録できる、メールアドレス登録用のフォームを用意致します。

email_regist.php:ユーザの仮登録と登録ページURLの送信用ファイルで使用するので、input type="hidden"のvalueにはemail_registの値を入れておきます。

また、modeによる切り替えを行いますので、input type="hidden"のnameは modeform の actionはindex.phpに設定します。

email_regist.php:ユーザの仮登録と登録ページURLの送信用ファイル

続いて、ユーザーの仮登録の為、ユーザーにメールアドレスを入力してもらった後の処理を行うファイルの作成を行います。

[php]<?php
/* フォームからメールアドレスを取得 */
$email = $_POST["email"];

/* エラーメッセージ配列 */
$error = array();

/* データベースに接続 */
require_once("db.php");

/* メールアドレス入力チェック */
if($email == "") { //未入力の場合、エラーを返す
//エラー配列に値を代入
array_push($error, "メールアドレスを入力してください。"); //エラー配列に値を代入
} else {
//仮ユーザーIDの生成
$pre_user_id = uniqid(rand(100,999));

//SQL文を発行
$query = "insert into members(pre_userid,email) values('$pre_user_id','$email')";
$result = mysql_query($query);

/* データベース登録チェック */
if($result == false) {
array_push($error, "データベースに登録できませんでした。"); //エラー配列に値を代入
} else {

/* 取得したメールアドレス宛にメールを送信 */
mb_language("japanese");
mb_internal_encoding("utf-8");

$to = $email;
$subject = "会員登録URL送信メール";
$message = "以下のURLより会員登録してください。\n".
"http://localhost:8888/member_test/regist/index.php?pre_userid=$pre_user_id";
$header = "From:test@test.com";

if(!mb_send_mail($to, $subject, $message, $header)) { //メール送信に失敗したら
array_push($error,"メールが送信できませんでした。
<a href='http://localhost:8888/member_test/regist/index.php?pre_userid=$pre_user_id'>遷移先</a>"); //エラー配列に値を代入
}
}
}

/*エラーがあるかないかによって表示の振り分け($error配列の確認)*/
if(count($error) > 0) { //エラーがあった場合
/*エラー内容表示*/
foreach($error as $value) {
?>
<table>
<caption>メールアドレス登録エラー</caption>
<tr>
<td class="item">Error:</td>
<td><?php print $value; ?></td>
</tr>
</table>
<?php
} //foreach文の終了
} else { //エラーがなかった場合
?>
<table>
<caption>メール送信成功しました。</caption>
<tr>
<td class="item">送信先メールアドレス:</td>
<td><?php print $email ?></td>
</tr>
</table>
<?php
}
?>[/php]

それでは解説を。

[code]$email = $_POST["email"];[/code]

まず、ユーザーが入力されたメールアドレスを $email = $_POST["email"]; で受け取ります。

[code]$error = array();[/code]

エラーメッセージ配列用として、 $error = array(); を用意。

[code]require_once("db.php");[/code]

データベースに接続の為、require_once();で接続。続いてメールアドレス入力チェック。

[code]if($email == "") { 
array_push($error, "メールアドレスを入力してください。");
}[/code]

メールアドレスが空だった場合  if($email == "") エラー配列にエラーメッセージを代入します。

入力されていたら、仮ユーザーIDの登録の処理へと移っていきます。

仮ユーザーIDの発行処理

まず、仮ユーザーidの変数を$pre_user_idとして、仮ユーザーIDの発行を行います。

PHPのuniqid関数でユニークIDを生成します。uniqid関数は$prefix(接頭辞)なしで利用すると,13文字の文字列が生成されます。uniqid関数はマイクロ秒単位で変化するユニークIDなので,同じマイクロ秒であれば同じIDが生成されてしまいます。

それを避けるため、rand関数を使い乱数を発生させます。

第一引数に100、第二引数に999に設定することで100~999の乱数を生成することができます。

[code]$pre_user_id = uniqid(rand(100,999));[/code]

続いてテーブルにデータを入れるためのSQL文を発行します。

[code]$query = "insert into members(pre_userid, email) values('$pre_user_id','$email')";
$result = mysql_query($query);[/code]

$queryにSQL文を代入します。insert into members(pre_userid, email) で用意したmembersのテーブルのpre_useridとemailのカラムに代入。代入する値はpostで受け取った、$pre_user_idと$emailとなるため、valuesはこのようになります。 values('$pre_user_id','$email')

[code]$result = mysql_query($query);[/code]

MySQL クエリを送信出来るようにmysql_query関数を使い先程のSQL文を代入。それらを変数 $resultに代入します。それらをデータベースに登録されたかどうかの処理を if($result == false) で判定します。登録されなかった場合、array_push($error, "データベースに登録できませんでした。");でエラー配列 $errorに代入します。

メール送信

データベースに登録されたらメールの配信の処理を行います。

[code]mb_language("japanese"); //言語の設定
mb_internal_encoding("utf-8"); //内部エンコーディングの設定

$to = $email;
$subject = "会員登録URL送信メール";
$message = "以下のURLより会員登録してください。\n".
"http://localhost:8888/member_test/regist/index.php?pre_userid=$pre_user_id";
$header = "From:test@test.com";
[/code]

今回はMAMPを使い、ローカルの環境で作成していますので、それぞれ環境にあった設定を行って下さい。 mb_language("japanese"); で日本語の設定、mb_internal_encoding("utf-8"); で文字化けしないように内部エンコーディングの設定。今回はutf-8で作成しております。

$to に送信先のアドレスを代入します。先ほどpostで受け取った $emailとなります。

$subject = "会員登録URL送信メール"; はメールの件名となる部分になります。

$message = "以下のURLより会員登録してください。\n"."http://localhost:8888/member_test/regist/index.php?pre_userid=$pre_user_id"; はメールの文となる部分です。

urlに関しては実際の環境によって設定してください。

?pre_userid=$pre_user_id はurlにパラメータを付与しております。

GETで受け取ることができますのでこれによってmodeの切り替えを行います。

$pre_user_idの値は先ほどuniqid関数で生成したユニークIDの値となります。

$header = "From:test@test.com"; はメールの差し出し人となる部分です。

これらを mb_send_mail関数でメール配信します。mb_send_mail(送信先, 件名, メッセージ内容, ヘッダー(差し出し人)) となっております。配信と同時に配信エラーチェックを行うため、if(!mb_send_mail($to, $subject, $message, $header)) {としています。

上手くいくと以下の様に配信されるかと思います。

最初はメールが配信されただけで感動していたもんです。うんうん。

配信されなかったときの処理として、例の如く、array_push($error,"メールが送信できませんでした。〜(省略)〜"); で$errorでエラーを格納、その後のview部分として if(count($error) > 0) { でエラーをカウントし、 foreach($error as $value) { でエラーの数だけループさせております。

エラーがある場合は print $value;でエラーを表示。

ない場合は、送信成功のメッセージと print $email で送信先メールアドレスを表示しております。

とここまでが、email_regist.phpとなります。

全部書こうと思っておりましたが、結構長くなりそうなので何回かに分けて書いていこうと思います。

今回は以上となります。

続きは以下になります。

PHP 会員制サイトの制作方法 その2

  • RSSを登録する

  • follow us in feedly

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、港区六本木で活動中。

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。