PHPとMySQLを使った掲示板の作り方を初心者向けにコード付き解説【会員登録フォーム】

プログラミング・PHP学習

いちから掲示板作成講座、2回目になります。

今回はPHPとHTMLを使った会員登録フォームの作り方について。

今回は、こんな会員登録フォームを作る方法を解説します。

実際のフォームは、下記をクリックすると別ウィンドウで確認できます。

↓↓↓

前回までの解説は、こちらの目次からご覧ください。

HTMLとPHPで会員登録フォームを作る

ではHTMLとPHPを使ってフォームを作っていきましょう。

CSSと画像登録部分は省き、簡易版を作っていきます。

作成するサイトの外見は次のようになります。

コードは次のとおり。

【test.php】

★ポイント★ごとにコードの組み方を解説していきます。

ポイント① 接続情報を設定する

まず最初の部分のです。

  1. session_start();
  2. require(‘dbconnect.php’);

最初は「セッション始めるよ」という意味。

ふたつ目のコードは「dbconnect.phpファイルを読み込んでね」という意味になります。

dbconnect.phpというファイルには、MySQLに接続するための情報が入れてあります。

こんなふうに書いておきます。

【dbconnect.php】

「データベースの名前」には、MySQLで作成したデータベースの名前を入力してください。

接続情報はファイルの中に毎回書き込んでもOKです。

ですが別のファイルに書き込んでおくと、そのファイルに複数のファイルからリンクを貼れます。

こうしておけば、もし接続情報が変わった時には、ひとつのファイルだけ書き換えればよいことになってラクですよね。

MySQLの設定の仕方は前の記事も参考にしてください。

ポイント② POSTメソッドを選択する

ふたつめのポイントはFormタグの中のmethodをpostにするという点。

ユーザーが入力した情報をサーバーに送信するために、GETメソッドとPOSTメソッドという2つの方法があります。

一言でいうと、GETメソッドはURLに情報が組み込まれる方法で、POSTメソッドはURLに情報が入らない方法。

フォームのような個人情報が送信される場合には、POSTメソッドを選びましょう。

ポイント③ inputタグの中にname属性を割り当てる

ポイントの3つ目は、各inputタグの中に【name属性】を入れるという点。

この【name属性】の値が、ここで入力されるデータの名前になります。

name属性が上記のように “name” となっていれば、フォームにユーザーが入力したときの値は【$_POST[‘name’]】と表現します。

$_POST[‘name’]   とはフォームのname属性にユーザーが入力した値

ポイント④ inputタグの中にvalue属性をPHPで設定する

ポイントの4つ目は、各inputタグの中のvalue属性の値をPHPで設定するという点。

valueの後のカッコ部分は、4つの要素が組み合わさっています。

ひとつずつ解説していきます。

HTMLの中でPHPのコードを埋め込む

  1. <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の値を入れる

value属性の中には【$_POST[‘name’]】がはいっています。これは先ほどご紹介したとおり、ユーザーがフォームに入力した後の値です。

htmlspecialcharsでセキュリティ対策をする

上記の【$_POST[‘name’]】の前には、htmlspecialchars という文字が入っています。

これはセキュリティ対策のために行っています。

こう書くことで、【<】 や 【>】といったカッコをコードではなく文字列として処理してくれます。

これによって、悪意あるユーザーがフォームの中にへんなコードを打ってプログラムに影響をおよぼすのを防げるのです。

書き方としては次のようにします。

htmlspecialchars (変換対象, ENT_QUOTES)
じゅんこ
じゅんこ

この関数をつけないと、どんなリスクがあるか。

PHPのセキュリティリスクを解説した記事で説明しています。

必須知識なので、もしご存じなければ、ぜひ読んでくださいね。

Notice Undefined index エラーを回避するためにダブルクエスチョンを入れる

$_POSTの後に クエスチョンとダブルクオテーションをそれぞれ2個いれています。

実はこの処理をしないと、ブラウザ上に次のような警告が出まくります。

警告メッセージ

Notice: Undefined index: name in

このエラー、ググってみましたが、なかなか解決できませんでした。

そこでプログラマの旦那に聞いてみたところ、結構、驚きの回答が。

プログラマの旦那
プログラマの旦那

定義されていない値には、この値が出るようになっているんだ。

回避するには、issetで「この値はあるか」、テストしてあげなきゃいけないんだ

じゅんこ
じゅんこ

ふぅん?どうやってテストするの?

プログラマの旦那
プログラマの旦那

if(isset(xxx)) { 処理 } と書いておくと、この値があるか?をtrue, false で答えてくれるんだよ。
ここだと、こんなふうに書くね。

 

プログラマの旦那
プログラマの旦那

すると、issetの後の($_POST[‘name’])が定義さあれている時だけ処理を実行するんだよ。

じゅんこ
じゅんこ

ふぅん??

なんだか、めんどくさいね。

プログラマの旦那
プログラマの旦那

うん。だから、逃げ道もある。

今回みたいな場所なら、??と”” を付けてあげるだけで大丈夫。

これ、以前はなかったんだけどね。

じゅんこ
じゅんこ

あ、いれたら、エラーが消えた!!

じゅんこ
じゅんこ

よくわからないけど、【??】と【””】をつけておくね。

プログラマの旦那
プログラマの旦那

良かったよ。でも、分かってはもらえなかったんだね…

というわけで、正直、分かったような分からないような説明だったのですが、要するに、初めて登場する値はテストしてあげなきゃいけない。

「【$_POST[‘name’]】という値は本当にあるよ!」という結果になった時だけ、処理を実行する形にしなきゃいけません。

本当は【isset】を使うのですが面倒なので、今回のような場所では、こんなふうにクエスチョン2つとダブルクオテーション2つ付けるのでもOK。

ちなみにこれ、名前は「NULL合体演算子」というらしいです。

じゅんこ
じゅんこ

名前からしてよくわかりませんが。

便利なので覚えておいて損はないです♪

さいごに

今回は登録フォームの作り方を紹介しました。

良かったら作ってみてください。

実際に作ってみると、ぐっと理解が深まると思います!

ただ今回作ったフォームでは、実際には使いにくい点が色々あります。

たとえば、空欄だったときにどうするかとか、パスワードの文字数をチェックしたりとか。

このあたりのエラー処理は、次回解説していきますね。

 

★2021年12月1日編集:

コード内の header('Location: confirm.php'); を  header('Location: test3.php'); に修正しました。

プログラミング・PHP学習

【Laravelの教科書・プレゼント】

Junko
Laravelの使い方を覚えたい!と思ったら、ぜひ、役立ててほしいです。 基礎編は無料でプレゼント中です♪
ひつじプログラマ
会員制サイトをいちから作っていくよ。ボタンをクリックして詳細を見てね。
Laravelの教科書の詳細を見る

最新のLaravel10版テキストに加え、Laravel8版・Laravel9版もご用意しています♪

【無料プレゼント】

「LaravelでWebアプリをいちから作れるようになりたい!」

そんなLaravel初心者のあなたへ【Laravelの教科書】基礎編プレゼント中! 会員制フォーラムサイトを学習しながら作れます。

詳細はこちらをクリック

最新のLaravel10版テキストに加え、Laravel8版・Laravel9版もご用意しています♪



【法人向けオンラインセミナー実施中】
1日セミナーと、専用サイトを使った1ヵ月セミナーをご用意しています。
社内にLaravelエンジニアを増やしたい時にご活用ください。

詳細はこちら

Laravelの本を書きました。


ひつじが目印です

Laravel10対応

Laravelの使い方を分かりやすく解説した書籍を出版しました。書店やAmazon等のオンラインショップにて販売中です。

書籍の詳細を見てみる
Twitter始めました。
40代からプログラミング!

コメント

  1. より:

    ファイル名は何にして保存すればいいのですか???????

  2. M より:

    こんにちは。
    test.php の7行目
    7 header(‘Location: confirm.php’);
    となっていますが、confirm.php は、どこにコードの記載されていますか?

    教えてください。

    • Junko Junko より:

      こちら、confirm.php ではなく、test3.php とすべきでした。
      記事内のコード、修正しました。ご指摘ありがとうございます。

タイトルとURLをコピーしました