いちから掲示板作成講座、2回目になります。
今回はPHPとHTMLを使った会員登録フォームの作り方について解説します。
作成するサイトの外見は次のようになります。
「どんな掲示板ができるのかな。」と思ったら、下記の紹介動画をクリックしてくださいね。
↓↓↓
なお記事では掲示板に必要なコードはご紹介しますが、デザイン部分は省略しています。
デザイン部分も含めた形で、GitHubにコード公開しています。全体のコードを見たい時に、参考にしてください。
いいなと思ったら、GitHub右上のStarボタン、クリックしてもらえると、嬉しいです。
前回までの内容
掲示板作成の7ステップの目次と概要はこちらをご覧ください。
- 概要説明
- ① 設計図を作って、データベースの準備をしよう
- ②会員登録画面をつくる 前編⇒今ここ
- ③会員登録画面をつくる 後編
- ④会員登録確認画面をつくる
- ⑤ログイン画面をつくる
- ⑥投稿画面をつくる
- ⑦削除画面をつくる
HTMLとPHPで会員登録フォームを作る
ではHTMLとPHPを使ってフォームを作っていきましょう。
まずはデータベースとの接続用ファイルを作成します。
データベースとの接続ファイル作成
xamppを通常どおりインストールすると、Cドライブ直下にxamppフォルダができます。その中にhtdocsフォルダもできます。
このC:\xampp\htdocsの中にforumフォルダを作成します。今後、この中に、プロジェクト用のファイルを作成していきます。
まずはここに、データベースとの接続用ファイル dbconnect.phpファイルを作ります。「データベースの名前」には、前回作成したforumを指定します。
【C:\xampp\htdocs\forum\dbconnect.php】
|
1 2 3 4 5 6 7 |
<?php try { $db = new PDO ('mysql:dbname=forum;host=127.0.0.1; charset=utf8', 'root', ''); } catch (PDOException $e) { echo 'DB接続エラー' . $e->getMessage(); } ?> |
データベースとの接続情報は、毎回ファイルごとに記述することもできます。
ただ、このようにひとつのファイルにまとめておくと、そのファイルに複数のファイルからリンクを貼れます。
こうしておけば、もし接続情報が変わった時には、ひとつのファイルだけ書き換えればよいことになってラクですよね。
ログインファイル作成
次にログイン用画面と作ります。
プロジェクト用フォルダ内に、register.phpファイルを作り、下記コードをいれます。
【C:\xampp\htdocs\forum\register.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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!-- 説明用 --> <?php // ★ポイント①★ session_start(); require('dbconnect.php'); ?> <!DOCTYPE html> <html lang="ja"> <head> <title>会員登録をする</title> <style> .error { color: red;font-size:0.8em; } </style> </head> <body> <h1>会員登録をする</h1> <!-- ★ポイント②★ --> <form action="" method="post" class="registrationform"> <label> 名前 <!-- ★ポイント③★ --> <!-- ★ポイント④★ --> <input type="text" name="name" style="width:150px" value="<?php echo $_POST['name']??""; ?>"> </label> <br> <label> email <input type="text" name="email" style="width:150px" value="<?php echo $_POST['email']??""; ?>"> </label> <br> <label> パスワード <input type="password" name="password" style="width:150px" value="<?php echo $_POST['password']??""; ?>"> </label> <br> <label> パスワード再入力<span class="red">*</span> <input type="password" name="password2" style="width:150px"> </label> <br> <input type="submit" value="確認する" class="button"> </form> </body> </html> |
★ポイント★ごとにコードの組み方を解説していきます。
ポイント① 接続情報を設定する
まず最初の部分です。
|
1 2 3 |
// ★ポイント①★ session_start(); require('dbconnect.php'); |
これは「セッション始めるよ」という意味。
ふたつ目のコードは「dbconnect.phpファイルを読み込んでね」という意味になります。
dbconnect.phpというファイルには、すでに、データベースに接続するための情報が入れてあります。
ポイント② POSTメソッドを選択する
ふたつめのポイントはFormタグの中のmethodをpostにするという点。
|
1 2 |
<!-- ★ポイント②★ --> <form action="" method="post" class="registrationform"> |
ユーザーが入力した情報をサーバーに送信するために、GETメソッドとPOSTメソッドという２つの方法があります。
一言でいうと、GETメソッドはURLに情報が組み込まれる方法で、POSTメソッドはURLに情報が入らない方法です。
フォームのような個人情報が送信される場合には、POSTメソッドを選びましょう。
ポイント③ inputタグの中にname属性を割り当てる
ポイントの3つ目は、各inputタグの中に【name属性】を入れるという点。
|
1 2 |
<!-- ★ポイント③★ --> <input type="text" name="name" style="width:150px" value="<?php echo $_POST['name']??""; ?>"> |
この【name属性】の値が、ここで入力されるデータの名前になります。
name属性が上記のように “name” となっている場合、フォームにユーザーが入力したときの値は$_POST[‘name’]となります。
ポイント④ inputタグの中にvalue属性をPHPで設定する
ポイントの4つ目は、各inputタグの中のvalue属性の値をPHPで設定するという点。
|
1 2 |
<!-- ★ポイント④★ --> <input type="text" name="name" style="width:150px" value="<?php echo $_POST['name']??""; ?>"> |
valueの後のカッコ部分については、大事な点が多いので、じっくり解説します。
valueの後ポイント①
HTML部分にPHPのコードを挿入する場合は、このように<?php コード ?> で囲んであげます。
valueの後ポイント②
value属性の中には【$_POST[‘name’]】がはいっています。これは先ほどご紹介したとおり、ユーザーがフォームに入力した後の値です。
valueの後ポイント③
$_POSTの後に クエスチョンとダブルクオテーションをそれぞれ2個いれています。
|
1 |
$_POST['name']??"" |
この処理をしないと、ブラウザ上に「Undefined index: name in」といった警告が出ます。
定義されていない値には、こういったエラーが出ます。これを回避するには、if(isset(xxx)) { 処理 } などの条件文をいれる必要があります。
今回の場合は、下記のようにisset関数を使って、コードを書けます。
|
1 |
if (isset($_POST['name']) |
これにより、$_POST[‘name’]が存在する時だけ処理を実行することができます。
同じ意味のコードをもう少し簡略化したのが、今回使用したコードです。
|
1 |
$_POST['name']??"" |
これは、NULL合体演算子を使ったコードです。これによって、$_POST[‘name’]がなければ、””内の値を使用します。””内に値を入れていなければ、空欄になります。
便利なので、２つの方法をご紹介しました。if構文でもNULL合体演算子でも、お好きなほうを使ってください。
NULL合体演算子は名前は覚えにくいですが、便利なので、覚えておいて損はないですよ。
テスト
今の段階で一度、テストしてみましょう。
XAMPPを起動した状態で、下記のURLを開きます。
次のようにフォームが表示されていれば、OKです。
さいごに
今回は登録フォームの作り方を紹介しました。
良かったら実際に手を動かして、作ってみてください。実際に作ってみると、ぐっと理解が深まります。
ただ今回作ったフォームでは、実際には使いにくい点が色々あります。
たとえば、空欄だったときにどうするかとか、パスワードの文字数をチェックしたりとか。こういった処理はバリデーションとも呼ばれます。
次回は、このバリデーションの処理について、解説していきますね。
コメント
ファイル名は何にして保存すればいいのですか？？？？？？？
ファイル名は、test.php としておいてください。
こんにちは。
test.php の7行目
7 header(‘Location: confirm.php’);
となっていますが、confirm.php は、どこにコードの記載されていますか？
教えてください。
こちら、confirm.php ではなく、test3.php とすべきでした。
記事内のコード、修正しました。ご指摘ありがとうございます。