フォームの作り方

【連載】

基礎の基礎から学ぶ、Webプログラミング超入門

【第7回】フォームの作り方

[2017/09/19 07:00]TechAcademy ブックマーク ブックマーク

開発ソフトウェア

今回は、ショッピングサイトやSNSなどでの商品購入画面、会員登録画面などでよく見るフォーム画面をPHPで作成する方法について、詳しく紹介していきます。

「フォームって何?」「名前は聞いたことあるけどどうやって作るか検討もつかない!」という人も、本稿を読めば、普段Webサイトで見るフォームがどういう処理をしているのかわかるはずです。

フォームって何 ?

そもそもフォームとは、どういったものを指すのでしょうか。簡単に説明すると、商品購入画面や会員登録画面などでユーザが名前や住所などを入力し、それらの情報を画面ごとに持ち回し、何か処理を行う機能を指します。

ECサイトで商品を購入する際に、一度住所やクレジットカード情報を入力してしまえばずっと登録されたデータとして残るはずです。

一般的なWebサイトのフォームの仕組みとは

では、フォームの裏側ではどのようなことが行われているのでしょうか。

ここではフォームに名前やメールアドレスを入力し、送信ボタンをクリックすると自動でメールが届く仕組みを例に説明します。

HTML形式で作成されたフォームに対して、ユーザがデータを入力し、メール送信ボタンをクリックします。入力されたデータはサーバー側に送信されます。サーバー側に送信されたデータは入力値チェックなどが行われ、問題なければサーバー側でメール送信処理を行います。

そして、「◯◯さん、会員登録ありがとうございます。」といった名前付きでメールが送られるのです。2回目以降はID/パスワードでログインすれば、フォーム上で名前を入力しなくても、名前付きのメールを届けることができますが、これは、フォームに入力したメールアドレスと名前が同じIDとして紐づけられるためです。

リクエストとレスポンスとは

先ほどフォームの仕組みについて、「ユーザが入力した情報を持ち回し、処理を行う」と説明しましたが、この仕組みを「リクエスト」と「レスポンス」という言葉を使って説明しましょう。

「リクエスト」は、「ユーザがデータを入力し、メール送信ボタンをクリックする(メール送信を依頼する)」という仕組みを指し、「レスポンス」は「サーバー側でメール送信処理を行う(メールを送信する)」という仕組みを指します。

もう少し「リクエスト」と「レスポンス」についてご説明しましょう。

ユーザが入力した情報を元に、サーバー側へ処理を依頼します。この依頼する内容は、ショッピングサイトであれば「この商品を購入したい」、メール送信フォームであれば「このフォームに入力した住所へメールを送りたい」というものになります。この「サーバー側へ処理を依頼する」という仕組みを「リクエスト」と言います。

対して「レスポンス」は、送信されたリクエストについて、サーバー側から「対応する結果を返す」ことを指します。

なお、レスポンスについて、先ほどのメールの例ではシステム全体のフローという視点で説明しましたが、HTTPというWebの処理の話であれば「メールを送信しました」「商品購入を完了しました」といったWebページをサーバ側から送ることを意味します。

PHPのget/postとは

先ほど、「リクエスト」についてお話ししましたが、サーバー側にリクエストを送信する方法に「get」と「post」という2つの仕組みがあります。両方とも「リクエストを送信する」という機能は同じですが、どのような違いがあるのか簡単に説明しておきましょう。

まず「get」についてですが、皆さんはサイトのURLで「http://www.php.co.jp/hogehoge/index.php?param=hugahuga」のような形式を見たことはないでしょうか。「?」以降の文字列がポイントです。「get」リクエストは、このようにURL上でリクエスト情報をサーバー側に送信しています。

URLにリクエスト情報を挿入できるため、実装がしやすいという点では便利なのですが、リクエスト情報が丸見えなので、会員情報登録画面など、名前や住所などをリクエスト情報とするような画面には不向きです。

さらにURLにリクエスト情報が入るため、送信する情報が多ければ多いほどURLが長くなります。URLの長さにはブラウザ毎に上限があるため、長くなりすぎるとリクエスト情報が正しく送信できなくなります。

したがって、「get」はリクエスト情報が少ない場合や、外部に触れても問題が無い情報を送信する場合のみに使用します。

一方の「post」は、URLではなく、HTTPの「body」と呼ばれる本体部分に情報を組み込みます。したがって、一般的なユーザの目には触れることはありませんし、長さもさほど気にする必要はありません。そのため、名前や住所などの機密情報をリクエスト情報として送信する場合は「post」を使います。

「get」と「post」についてメリット・デメリットをまとめると以下のようになります。

get

メリット

  • 実装がしやすい
  • どのようなリクエスト情報を送信しているか見えるため、デバッグ(バグなどの修正)がしやすい

デメリット

  • 名前や住所、パスワードなどセキュリティ情報を送る際に使用してしまうと、アカウント乗っ取りなどのセキュリティ事故につながる
  • リクエスト情報が多い場合、URLも長くなる

post

メリット

  • getと異なり、URLにセットしない(外に出ない)のでセキュリティ性は高い
  • リクエスト情報によって、URLが長くなることがない

デメリット

  • 実装の際、エスケープ処理(フォームに入力された個人情報が特定されないように別の文字列に置き換える)等の考慮が必要になる

具体的な 実装方法については、次の項目で説明していきます。

今回は、PHPで動くフォームの処理の流れについて見てみました。次回は、フォームに文字を入力し、入力した値を元に出力結果を出す流れについて実際にコーディングを交えて解説していきます。

HPを理解する中でgetとpostは最低限の知識になるので、実際に自分でも書いてみて理解していきましょう。

著者紹介


TechAcademy (https://techacademy.jp/)

プログラミングやWebデザイン、アプリ開発が学べるオンラインスクールを運営。

TechAcademyマガジンでは、プログラミングやWebデザインなど技術に関する最新トレンド、ツールの使い方を紹介しています。開発作業や学習に役立つコンテンツがご覧になれます。

なお、本稿はTechAcademy の「はじめてのプログラミングコース」を元に解説しています。

※ 本記事は掲載時点の情報であり、最新のものとは異なる場合がございます。予めご了承ください。

関連リンク

この記事に興味を持ったら"いいね!"を Click
Facebook で IT Search+ の人気記事をお届けします
3076
2
【連載】基礎の基礎から学ぶ、Webプログラミング超入門 [7] フォームの作り方
今回は、ショッピングサイトやSNSなどでの商品購入画面、会員登録画面などでよく見るフォーム画面をPHPで作成する方法について、詳しく紹介していきます。
https://news.mynavi.jp/itsearch/2017/09/13/wp7/WebProg300-250.jpg
今回は、ショッピングサイトやSNSなどでの商品購入画面、会員登録画面などでよく見るフォーム画面をPHPで作成する方法について、詳しく紹介していきます。

会員登録(無料)

セキュリティ・キャンプ2017 - 精彩を放つ若き人材の『今』に迫る
ぼくらのディープラーニング戦争
ドローンのポテンシャル、メーカーやキャリア、ユーザー企業はこう見る
マイナビニュース スペシャルセミナー 講演レポート/当日講演資料 まとめ
人事・経理・総務で役立つ! バックオフィス系ソリューション&解説/事例記事まとめ

一覧はこちら

今注目のIT用語の意味を事典でチェック!

一覧はこちら

ページの先頭に戻る