■HTMLとPHPの連携
今回はWEBシステムについて学んでいきます。
具体的に言うと、HTMLからPHPにデータを送信してみたいと思います。
みなさんもユーザー登録画面や、検索画面で使用したことがあると思います。
必要事項を入力しボタンを押すと、登録が実行されたり、検索結果が表示されたりします。
この入力する画面部分がHTMLで、登録や検索などの処理を行う部分がPHPなどのプログラミング言語となります。
■サンプル
早速ですがサンプルです。
このサンプル参考に説明を進めていきます。
以下2つのファイルは同じ階層(フォルダ)に配置します。
▼form.html(HTML側)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <! DOCTYPE html> < html > < head > < title >サンプル</ title > < meta charset = "utf-8" > </ head > < body > < h1 >入力フォームの値をPHPに送信します。</ h1 > < form action = "recieve.php" method = "GET" > なにか入力してください:< input type = "text" name = "word" > < button type = "submit" >送信</ button > </ form > </ body > </ html > |
▼recieve.php(PHP側)
1 2 3 4 | <?php $word = $_GET [ 'word' ]; echo $word ; ?> |
■入力フォーム(HTML側)
HTMLでは入力フォームを作成することができます。
formタグ内にinputタグ、selectタグ、textareaタグなどで入力フォームを作成します。
するとテキストボックス、プルダウン、複数行のテキストボックス、送信ボタンが作成できます。
送信(submit)が実行されると、formタグ内のデータがまとめて送信されます。
いくつかポイントをあげてみましょう。
formタグ
ポイントはaction属性とmethod属性です。(form.htmlの8行目)
action属性で指定した先に入力値が送信されます。
今回はrecieve.phpに入力した値を渡します。
method属性は値の送信方法の指定です。
ほとんどの場合、GETかPOSTを指定します。(HTMLには大文字小文字の区別はありません)
GETとPOSTについては別の記事で
inputタグ
inputタグではname属性がポイントになります。(form.htmlの9行目)
formタグ内の入力値はまとめて送信されるので、区別をつけなければいけません。
そこで、入力値にname属性で名前を付けて送信し、受け取り側で区別ができるようにします。
例えばログイン処理において、送信されてきた値がどっちがユーザー名でどっちがパスワードなのかを判別したいわけですね。
inputタグにはvalue属性も指定でき、その値が送信されるのですが、テキストボックスの場合は入力値がvalueとしてそのまま送信されます。
■受け取り処理(PHP側)
今度はrecieve.phpをみてみましょう。
ポイントは2行目です。
$word = $_GET[‘word’];
の部分が送信されてきたデータの受け取り処理です。
$_GETという既に定義されている定数があり、その後ろに[‘name属性の値’]と書くとHTMLから送信されてきたデータを取得できます。
取得した値は$wordという変数に格納され、echoでブラウザに出力されます。
もしHTML側が
1 | < input type = "text" name = "hogehoge" > |
だったら、
1 | $var = $_GET [ 'hogehoge' ]; |
と記述し受け取ります。
もし
1 2 | < input type = "text" name = "name" > < input type = "text" name = "age" > |
と2つフォームがあるなら
1 2 | $name = $_GET [ 'name' ]; $age = $_GET [ 'age' ]; |
と2つ受け取り処理を書きます。
このname属性に指定した値で受け取りを指定するという部分がとても重要です。
値がうまく受け取れない場合はここが送信側と受取側でズレていることが多いです。
値がうまく受け取れない場合は、真っ先にname属性のズレを確認してみてください。
しょうもないスペルミスが見つかることでしょう。(経験談)
ちなみにformタグのmethod属性がPOSTだった場合、
受取側は
1 | $_POST [ 'name属性の値' ]; |
と書きます。
書き方は文字だけの違いですね。
じゃあGETとPOSTは何が違うのか、ということについては次回の記事で説明していきます!