いちから掲示板作成講座、2回目になります。
今回はPHPとHTMLを使った会員登録フォームの作り方について。
今回は、こんな会員登録フォームを作る方法を解説します。
実際のフォームは、下記をクリックすると別ウィンドウで確認できます。
↓↓↓
前回までの解説は、こちらの目次からご覧ください。
HTMLとPHPで会員登録フォームを作る
ではHTMLとPHPを使ってフォームを作っていきましょう。
CSSと画像登録部分は省き、簡易版を作っていきます。
作成するサイトの外見は次のようになります。
コードは次のとおり。
【test.php】
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<?php // ★ポイント1★ session_start(); require('dbconnect.php'); if (!empty($_POST) ){ $_SESSION['join'] = $_POST; header('Location: test3.php'); exit(); } ?> <!DOCTYPE html> <html lang="ja"> <head> <title>会員登録をする</title> </head> <body> // ★ポイント2★ <form action="" method="post" enctype="multipart/form-data" class="registrationform"> // ★ポイント3★ // ★ポイント4★ <p>ニックネーム<input type="text" name="name" style="width:150px" value="<?php echo htmlspecialchars($_POST['name']??"", ENT_QUOTES); ?>"></p> <p>email<input type="text" name="email" style="width:150px" value="<?php echo htmlspecialchars($_POST['email']??"", ENT_QUOTES); ?>"></p> <p>パスワード<input type="password" name="password" style="width:150px" value="<?php echo htmlspecialchars($_POST['password']??"", ENT_QUOTES); ?>"></p> <p>パスワード再入力<span class="red">*</span><input type="password" name="password2″ style="width:150px"></p> <input type="submit" value="確認する" class="button"> </form> </body> </html> |
★ポイント★ごとにコードの組み方を解説していきます。
ポイント① 接続情報を設定する
まず最初の部分のです。
- session_start();
- require(‘dbconnect.php’);
最初は「セッション始めるよ」という意味。
ふたつ目のコードは「dbconnect.phpファイルを読み込んでね」という意味になります。
dbconnect.phpというファイルには、MySQLに接続するための情報が入れてあります。
こんなふうに書いておきます。
【dbconnect.php】
|
1 2 3 4 5 6 7 |
<?php try { $db = new PDO ('mysql:dbname=データベースの名前;host=127.0.0.1; charset=utf8', 'root', ''); } catch (PDOException $e) { echo 'DB接続エラー' . $e->getMessage; } ?> |
「データベースの名前」には、MySQLで作成したデータベースの名前を入力してください。
接続情報はファイルの中に毎回書き込んでもOKです。
ですが別のファイルに書き込んでおくと、そのファイルに複数のファイルからリンクを貼れます。
こうしておけば、もし接続情報が変わった時には、ひとつのファイルだけ書き換えればよいことになってラクですよね。
MySQLの設定の仕方は前の記事も参考にしてください。
ポイント② POSTメソッドを選択する
ふたつめのポイントはFormタグの中のmethodをpostにするという点。
|
1 |
<form action="" method="post" enctype="multipart/form-data"> |
ユーザーが入力した情報をサーバーに送信するために、GETメソッドとPOSTメソッドという２つの方法があります。
一言でいうと、GETメソッドはURLに情報が組み込まれる方法で、POSTメソッドはURLに情報が入らない方法。
フォームのような個人情報が送信される場合には、POSTメソッドを選びましょう。
ポイント③ inputタグの中にname属性を割り当てる
ポイントの3つ目は、各inputタグの中に【name属性】を入れるという点。
|
1 |
<p>ニックネーム<input type="text" name="name" style="width:400px" value="<?php echo htmlspecialchars($_POST['name']??"", ENT_QUOTES); ?>"> |
この【name属性】の値が、ここで入力されるデータの名前になります。
name属性が上記のように “name” となっていれば、フォームにユーザーが入力したときの値は【$_POST[‘name’]】と表現します。
ポイント④ inputタグの中にvalue属性をPHPで設定する
ポイントの4つ目は、各inputタグの中のvalue属性の値をPHPで設定するという点。
|
1 |
<p>ニックネーム<input type="text" name="name" style="width:400px" value="<?php echo htmlspecialchars($_POST['name']??"", ENT_QUOTES); ?>"> |
valueの後のカッコ部分は、４つの要素が組み合わさっています。
ひとつずつ解説していきます。
HTMLの中でPHPのコードを埋め込む
- <p>ニックネーム<input type=”text” name=”name” style=”width:150px” value=”<?php echo htmlspecialchars($_POST[‘name’]??””, ENT_QUOTES); ?>“></p>
HTMLのBODYタグの中でPHPを使うときには、上記のようにPHPのコードを<?php コード ?> で囲んであげます。
Value属性の中に$_POSTの値を入れる
|
1 |
<?php echo htmlspecialchars($_POST['name']??"", ENT_QUOTES); ?> |
value属性の中には【$_POST[‘name’]】がはいっています。これは先ほどご紹介したとおり、ユーザーがフォームに入力した後の値です。
htmlspecialcharsでセキュリティ対策をする
上記の【$_POST[‘name’]】の前には、htmlspecialchars という文字が入っています。
これはセキュリティ対策のために行っています。
こう書くことで、【<】 や 【>】といったカッコをコードではなく文字列として処理してくれます。
これによって、悪意あるユーザーがフォームの中にへんなコードを打ってプログラムに影響をおよぼすのを防げるのです。
書き方としては次のようにします。
この関数をつけないと、どんなリスクがあるか。
PHPのセキュリティリスクを解説した記事で説明しています。
必須知識なので、もしご存じなければ、ぜひ読んでくださいね。
Notice Undefined index エラーを回避するためにダブルクエスチョンを入れる
$_POSTの後に クエスチョンとダブルクオテーションをそれぞれ2個いれています。
|
1 |
$_POST['name']??"" |
実はこの処理をしないと、ブラウザ上に次のような警告が出まくります。
警告メッセージ
このエラー、ググってみましたが、なかなか解決できませんでした。
そこでプログラマの旦那に聞いてみたところ、結構、驚きの回答が。
定義されていない値には、この値が出るようになっているんだ。
回避するには、issetで「この値はあるか」、テストしてあげなきゃいけないんだ。
ふぅん？どうやってテストするの？
if(isset(xxx)) { 処理 } と書いておくと、この値があるか？をtrue, false で答えてくれるんだよ。
ここだと、こんなふうに書くね。
|
1 |
if (isset($_POST['name']) |
すると、issetの後の($_POST[‘name’])が定義さあれている時だけ処理を実行するんだよ。
ふぅん？？
なんだか、めんどくさいね。
うん。だから、逃げ道もある。
今回みたいな場所なら、??と”” を付けてあげるだけで大丈夫。
これ、以前はなかったんだけどね。
あ、いれたら、エラーが消えた！！
↓
よくわからないけど、【？？】と【””】をつけておくね。
良かったよ。でも、分かってはもらえなかったんだね…
というわけで、正直、分かったような分からないような説明だったのですが、要するに、初めて登場する値はテストしてあげなきゃいけない。
「【$_POST[‘name’]】という値は本当にあるよ！」という結果になった時だけ、処理を実行する形にしなきゃいけません。
本当は【isset】を使うのですが面倒なので、今回のような場所では、こんなふうにクエスチョン２つとダブルクオテーション２つ付けるのでもOK。
|
1 |
if (isset($_POST['name']) |
ちなみにこれ、名前は「NULL合体演算子」というらしいです。
名前からしてよくわかりませんが。
便利なので覚えておいて損はないです♪
さいごに
今回は登録フォームの作り方を紹介しました。
良かったら作ってみてください。
実際に作ってみると、ぐっと理解が深まると思います！
ただ今回作ったフォームでは、実際には使いにくい点が色々あります。
たとえば、空欄だったときにどうするかとか、パスワードの文字数をチェックしたりとか。
このあたりのエラー処理は、次回解説していきますね。
★2021年12月1日編集：
コード内の header('Location: confirm.php'); を header('Location: test3.php'); に修正しました。
コメント
ファイル名は何にして保存すればいいのですか？？？？？？？
ファイル名は、test.php としておいてください。
こんにちは。
test.php の7行目
7 header(‘Location: confirm.php’);
となっていますが、confirm.php は、どこにコードの記載されていますか？
教えてください。
こちら、confirm.php ではなく、test3.php とすべきでした。
記事内のコード、修正しました。ご指摘ありがとうございます。