【PHP講座05】HTMLのフォームから値を受け取ろう

前回は、変数を拡張した配列、連想配列について解説した。

今回の内容にもこの連想配列が出てくるので、不安な方は先に復習しておいてほしい。

前回の記事は以下だ。

【PHP講座04】配列とは？使い方を解説！ | Shino’s Mind Archive

さて、今回はHTMLから値を受け取ってみようと思う。

アクセス時に、色々な情報が同時に送られてくる。

その中で、特定のデータをPHPで使用するための方法だ。

これがあると、動的なページを作ることができる。

Webアプリケーションを作る際にはほぼ必須と言ってもいい内容なので、しっかり身に付けていこう。

シノ

今回は、とりあえず動かすことを目的として解説するよ！

詳細はまた別で解説するね！

静的なページと動的なページ
リンクからデータを送ろう
1. GETを使った値の送信方法
2. POSTを使った値の送信方法
送られてきたデータをPHPで受け取ろう
実際に組んでみよう
おわりに

静的なページと動的なページ

まず、今回の内容で作ることができる動的なページ、そしてそれと対する静的なページという言葉を説明しておこう。

静的なページとは、いつだれがアクセスしても同じ内容が表示されるページのことだ。

例えるなら、企業のホームページで、会社情報を載せているページがそうだろう。

ここは、誰がいつアクセスしても同じ内容が表示されている。

中身も、そのHTMLファイルを編集しないと変更されない。

それに対し、動的なページとはアクセスする人やタイミングによって中身が変わるページのこと。

こちらの例としては、各種ショッピングサイトなんかがそうだ。

ログインして、商品をカートに入れ、そのカートの中身を表示する。

そうすると、ログインしているユーザーごとに異なる内容が表示されているはずだ。

このときに、アクセスに入っている情報から必要な情報を受け取り、それを使って処理を行っているのだ。

今回説明する内容は、この情報を受け取る部分になる。

実際に例を作ってアクセスしてもらうので、そこで感覚を掴んでいこう。

リンクからデータを送ろう

さて、受け取る前に情報をアクセスの中に入れなければならない。

先に、送る方の解説をしていこう。

といっても、この送るにも幾つか種類があるが、今回はGETとPOSTで解説していく。

両者に共通しているのは、アクセスした先に情報を追加するという部分。

これらの違いについては、解説しようとするとそれだけで1記事出来上がってしまうくらいになる。

今回はとにかく値を送って使いたいので、一旦は以下のような違いがあると思っておいて欲しい。

GETはURL内に値を含めて送信する(フォームでも可)
POSTはフォームを使って送信する

詳細はまた別記事で解説しようと思うが、先に知りたい方は調べてみよう。

GETを使った値の送信方法

まずはGETから見ていこう。

上に書いた通り、URL内に値を含めて送ることができる。

具体的には、アクセスする先のURLの最後にクエスチョンマークをつけて、その後ろにデータの名前、中身をセットにして記述していく。

書き方は以下の通り。

(URL)?(データ名1)=(データの中身1)&(データ名2)=(データの中身2)&...

これだけだとちょっと分かりづらいかもしれないが、PHPで受け取る側を解説した後で具体例をお見せするので、ちょっと待っていて欲しい。

こちらのイメージとしては、ハガキだろうか。

URLに直接値を指定するので、ぱっと見で中身のデータを確認できる。

POSTを使った値の送信方法

次はPOSTについて見ていこう。

こちらは、HTMLのformというタグを使用する。

書き方は以下の通り。

<form action="(アクセスする先のURL)" method="post">
    <input type="(入力形式)" name="(データ名1)">
    <input type="(入力形式)" name="(データ名2)">
    ...
    <input type="submit" value="(送信ボタンに表示する文字列)">
</form>

こんな感じになる。

データ名しか指定してないが、この値はHTMLの画面に入力された値になる。

こちらも具体例がないとちょっと分かりづらいと思う。

GETと同じく、後で具体例をお見せしよう。

なお、formタグ内のmethodオプションをgetにすると、GETとして送信することもできる。

GETのハガキに対するPOSTのイメージは、封筒だ。

ぱっと見では、パラメータが見えない。

しかし、通信の中身(封筒の中身)を見るとデータが分かってしまう。

POSTを使えば安全！とも言い切れないので注意しよう。

送られてきたデータをPHPで受け取ろう

さて、上記の方法でアクセス時にデータが付与されるようになった。

ここからは、その値をPHPで受け取る方に進んでいく。

受け取る…と書いたが、実は特別な配列に格納された状態になっているのだ。

その配列というのが、以下の2種類。

$_GET : GETで送られたデータが入っている
$_POST : POSTで送られたデータが入っている

他にもあるのだが、今回はこの2つを解説していく。

…と書いたのだが、これらの違いは上に書いた通り、どちらのメソッドで送られたかだ。

データの形式は同じで、連想配列になっている。

キーが送信時に指定したデータ名、その中にデータの値が入っている。

実際に組んでみよう

さて、ここまで色々と説明を書いてきたが、実際に動かした方が分かりやすいだろう。

というわけで、ここからサンプルソースをご紹介する。

先に、今回のサンプルは三つのファイルがセットになっている。

事前にディレクトリを作っておくといいだろう。

例では、C:\xampp\htdocs\php\sample10というディレクトリの中に以下三つのファイルを作成する。

index.html : データを送信するページ
result_get.php : 送信されたGETの内容を表示するページ
result_post.php : 送信されたPOSTの内容を表示するページ

このうち、先にアクセスするのはindex.html。

この通りにディレクトリを作っていた場合、アクセスは「http://localhost/php/sample10/index.html」、あるいは最後のindex.htmlを取って「http://localhost/php/sample10/」となる。

別のディレクトリ構造を作っている場合は、それに合わせて変えて欲しい。

では、その中身を見ていこう。

まずは、データを送信するindex.htmlから。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>データ送信サンプル</title>
    </head>
    <body>
        <h1>データ送信サンプル</h1>
        <hr>
        <p>GET送信</p>
        <a href="http://localhost/php/sample10/result_get.php?no=1&name=data1">一つ目のデータ</a><br>
        <a href="http://localhost/php/sample10/result_get.php?no=2&name=data2">二つ目のデータ</a>
        <hr>
        <p>POST送信</p>
        <form action="http://localhost/php/sample10/result_post.php" method="post">
            No : <input type="number" name="no"><br>
            Name : <input type="text" name="name"><br>
            <input type="submit" value="送信">
        </form>
    </body>
</html>

上で解説してきた2種類の方法でデータを送信するページだ。

一つ目はGET。

URLに注目すると、アクセスする先のresult_get.phpの後ろにクエスチョンで二つのパラメータを追加している。

noというパラメータとnameというパラメータだ。

これで、一つ目のリンクをクリックしたらnoが1、nameがdata1というデータが送られる。

二つ目なら、noが2、nameがdata2だ。

その下で、今度はPOSTで送信を行う。

formタグのオプションとして、アクセスする先のURLと、今回はPOSTを使うのでそれを指定している。

その中、GETと同じく二つのパラメータを送れるようにしてある。

一つ目はnoという名前で、数字を。

二つ目はnameという名前で、文字列を。

これで、最後の「送信」ボタンを押したときに、その欄に入力されていた内容を送ることができるのだ。

では、値を受け取る側を見ていこう。

まずはGET。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>データ受信サンプル - GET</title>
    </head>
    <body>
        <h1>データ受信サンプル - GET</h1>
        <hr>
        <p>送られてきたデータは</p>
        <ul>
            <li>No : <?php echo $_GET["no"]; ?></li>
            <li>Name : <?php echo $_GET["name"]; ?></li>
        </ul>
        <p>です。</p>
    </body>
</html>

注目してほしいのは、真ん中ちょい下にある箇条書きの中身。

ここで、$_GET[何か]という記述がある。

これが、GETで送られてきた値を取得する部分だ。

このように、送られてきたデータは連想配列になっているので、送信時の名前を指定することで取り出すことができる。

もちろん、このページのままではPOSTの内容は受け取れない。

というわけで、POSTを受け取るようにしたのが、もう一つのresult_post.phpだ。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>データ受信サンプル - POST</title>
    </head>
    <body>
        <h1>データ受信サンプル - POST</h1>
        <hr>
        <p>送られてきたデータは</p>
        <ul>
            <li>No : <?php echo $_POST["no"]; ?></li>
            <li>Name : <?php echo $_POST["name"]; ?></li>
        </ul>
        <p>です。</p>
    </body>
</html>

変わっているのは、タイトルやh1のGETをPOSTに変えた部分と、箇条書きの中の出力が$_GETから$_POSTになっている部分。

これで、POSTで送信された値を受け取ることができる。

こちらは入力欄に色々と値を入れられるので、実際に変化するか試してみよう。