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

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

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

 

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

 

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

 

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

 

 

 

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

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

 

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

 

 

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

 

 

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

 

スポンサーリンク

 

会員登録システムの構成

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

 

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

 

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

 

 

データベース

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

 

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

 

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

 

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

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

 

 

PHPファイル

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

 

 必要なPHPファイル

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

 

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

 

 

dbconnect.php

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

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

 

 

entry.php

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

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

 

 

check.php

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

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

 

 

thank.php

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

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

 

 

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

 

 

 

全体の流れ

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

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

 

 

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

 

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

 

 

会員登録システムの実装

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

 

データベース

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

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

 

構造はこんな感じです。

 

 

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

 

 

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

 

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

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

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

 

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

 

 

PHPファイル

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

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

 

dbconnect.php

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

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

 

 

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

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

 

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

 

 

entry.php

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

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

 

 

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

 

 

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

 

こちらが該当部分です。

 

 

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

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

 

 

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

 

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

 

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

 

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

 

 

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

 

 

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

 

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

 

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

 

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

 

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

 

 

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

 

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

 

 

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

 

 

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

 

 

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

 

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

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

 

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

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

 

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

 

 

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

 

 

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

 

 

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

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

 

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

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

 

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

 

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

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

 

check.php

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

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

 

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

 

 

 

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

 

 

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

こちらです。

 

 

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

 

 

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

 

 

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

 

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

 

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

 

 

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

 

 

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

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

 

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

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

 

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

 

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

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

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

 

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

 

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

 

 

thank.php

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

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

 

 

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

 

スポンサーリンク

 

CSSファイル

style.css

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

 

 

おわりに

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

 

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

 

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

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

 

では,今回はここまでとします.

お疲れさまでした。

 

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