Webページからのデータ送信

PHPLearning

データ送信のプログラム

「Webページからデータ送信」➡「送られてきたデータをそのまま表示」という簡単な仕組みをフォームとPHPを使って実現します。ただし、実際に公開されているWebサーバーでこれをやると危険が伴うので、必ずlocalhostで試してください。

sousin.html

  フォームに入力した文字列を「zyusin,php」に送信する

zyusin.php

  受信したデータをそのまま表示する

sousin.htmlは送り側のWebページ、zyusin.phpは受け側のPHPスクリプトです。

sousin.htmlはデータをzyusin.phpに向けて送信します。

送信されたでーたはzyusin.phpが受け取り、そのままprintで表示します。

f:id:mkyosuke:20191128161906p:plain

・データ送信する側のWebページの作成
まず、「送信ボタンをクリックすると、テキストボックスに入力されたデータが送信される」という仕組みを作成します。

「送信ボタン」「入力用テキストボックス」の2つを作成しますが、この2つの部品は

<FORM>内の<INPUT>タグで設定します。

<html>
<head><title>送信フォーム</title></head>
<body>
<form action = "zyusin.php" method = "GET">
     <input type ="text" name="a">
     <br>
     <input type ="submit" value="送信">
</form>
</body>
</html>

f:id:mkyosuke:20191128164458p:plain

・<FORM>タグにフォームの配置

<FORM>タグは送信用のフォームを定義するもので画面上に何かを表示するものではありません。

<FORM>から</FORM>の間がフォームとして扱われます。フォーム中に表示される

テキストボックスやボタンは、次に解説する<INPUT>タグなどを使って作成します。

<FORM>タグ

書式　<FORM ACTION="データの送信先"　METHOD ="送信の方法">

        フォーム部品の設置

　　　＜/FORM>

sousin.htmlでは、下記のように記述しています。

<form action = "zyusin.php" method = "GET">

ACTION属性は「action="zyusin.php"」のようになっています。これで「送信」ボタンをクリックすると、「zyusin.php」というPHPスクリプトにデータを送信することになります。METHOD属性には送信の方法を「GET」、もしくは「POST」で指定します。

・＜INPUT>タグ

<INPUT>タグは<FORM>タグの中に記述することで、「入力用テキストボックス」や「送信ボタン」などのフォーム部品を作ります。送受信のプログラムに欠かすことのできない要素です。

書式

<input type ="ボタンの種類" name="データを識別する名前" size="サイズ" value="部品に表示する文字">

<input>タグはtype属性に設定する順によって、表示される部品が変わります。

値 設定される部品の種類
submit データを送信する機能を持つボタン
button ボタン
text 一行のテキストボックス
password パスワード入力用ボックス(入力した文字が***などで表示される)
checkbox チェックボックス
radio ラジオボタン

name属性の値は、受信側のPHPプログラム内で使用されます。

size属性はtypeが「text」の場合にテキストボックスの幅を指定します。

value属性ではボタンに表示する名前などを設定します。

sousin.htmlでは、入力用テキストボックスは次のようになります。

<input type="text" name="a">

テキストボックスの場合はtype="text"、また「データを識別する名前」であるname属性に「a」を指定しました。

これで、データを受け取るPHPスクリプト「zyusin.php」では「a」という名前で、データを受け取ることが出来ます。

送信ボタンの場合はtype属性がsubmitになります。value属性を「送信」とすることでボタンに「送信」という文字が表示されます。

<input type="submit" value="送信">

・<TEXTAREA>タグ

<textarea>タグもフォームの部品としてよく使われます。

<textarea>タグは、複数行の文字列が入力できるテキストボックスを設定します。

入力した文字列の送信する場合、name属性で「データを識別するための名前」を設定しておきます。

書式　<textarea name="データを識別する名前" rows="行数" cols="横幅">~</textarea>

cols属性に指定する値は環境により異なりますが、だいたい半角の文字数だと考えましょう。

<textarea>~</textarea>にあらかじめ記述した文字列は、テキストボックスの初期値として表示されます。例えば5行、40文字のテキストボックスが表示されます。

<html>
<head><title>送信フォーム</title></head>
<body>
          <textarea rows=5 cols=40>俺は最強だ！！！</textarea>
</body>
</html>

f:id:mkyosuke:20191128172125p:plain

・データ受け取り側PHPスクリプトの作成

今度は「sousin.html」で送られたデータを、単純に書き出すスクリプト「zyusin.php」です。

<?php
print $_GET["a"];
?>

GET送信で送られたデータは、スーパーグローバル変数の$_GETに自動的に格納され、次のような書式でPHPから取り出すことが出来ます。

$_GETの使い方

書式　$_GET["データを識別する名前"]

前述の通り、$_GETは連想配列になっており、

配列のキーは「データを識別する名前」を指定します。

送信側(sousin.html)の<input>によるデータ入力用テキストボックスには、「a」という

「データを識別する名前」が付いていました。(name="a")

したがって、$_GET["a"]で送信されたデータを取り出すことができます。

 

sousin.html

<html>
<head><title>送信フォーム</title></head>
<body>
<form action = "zyusin.php" method = "GET">
     <input type ="text" name="a">
     <br>
     <input type ="submit" value="送信">
</form>
</body>
</html>

 

zyusin.php

<?php
print $_GET["a"];
?>

実行結果

f:id:mkyosuke:20191128175054p:plain

文字を入力し、送信ボタンをクリック

f:id:mkyosuke:20191128175130p:plain

 

・GET送信

sousin.htmlでは<form>タグのmethod属性に「GET」を指定しました。これはGET送信を行うという意味ですが、ここでGET送信について解説します。

データ送信後「zyusin.php」が表示された画面でアドレスバーを見てください。

f:id:mkyosuke:20191128175915p:plain

「http://localhost/zyusin.php」の後についてくる「?a=abcdefg」に注目します。

実はGET送信では、送信データをURLにくっつけて送っているのです。

書式　?データを識別する名前=データ

なので、「sousin.html」から「abcdefg」というデータを送信した場合、上記のようになるのです。

これはわざわざ「sousin.html」から送信する必要はありません。

実はブラウザのアドレスバーにいきなり「http://localhost/zyusin.php?a=abcdefg」と入力して「Enter」キーを押しても同じ結果になります。

・URLエンコード

ただし日本語はURLに含めることができませんので、URL用の情報に変換してから送信する必要があります。これをURLエンコードといい、Webブラウザが自動的に行ってくれます。

例えば、日本語では「猫」をURLエンコードにした場合、「?a=%E7%8C%AB」になるのです。

PHPには、URLエンコードを実行するurlencode関数があるので確認してみます。

関数　urlencode

書式　urlencode("文字列")

返り値　URLエンコードにした文字列

<?php
print urlencode("猫");
?>

実行結果

f:id:mkyosuke:20191128182258p:plain

このようにGET送信では、「送信するデータ」と「データを識別する名前」が単純に

表示されてしまいます。

「不正なデータをURLにつけて送る」人がいる可能性は充分にあります。GET送信を行う際はセキュリティに注意する必要があります。

なおGET送信では、URL自体にデータを付加する為送信できる情報量に限度があります。環境によりますが、せいぜい数百文字～2000文字が限度という状況です。

・POST送信

HTTPにおけるデータの送信には、もう一つPOST送信という方法があります。GET送信ではURLにデータを付けて簡易的に送信しますが、

POST送信では外部から見えない形でURLとは別途で送信されます。

次は、先程の送信・受信の各スクリプトをPOST送信に変更したものです。

変更した箇所を赤字にしています。

post_sousin.html

<html>
<head><title>送信フォーム</title></head>
<body>

 <form action = "post_zyusin.php" method = "POST">
      <input type ="text" name="a">
       <br>
       <input type ="submit" value="送信">
</form>
</body>
</html>

 

post_zyusin.php

<?php
print $_POST["a"];
?>

 

 

f:id:mkyosuke:20191128183652p:plain

実行結果

f:id:mkyosuke:20191128183814p:plain

POST送信するときも、GET送信のときとほとんど様子は同じです。ただ、GET送信と異なり、URLの後にデータを示す文字列が付きません。

また、POST送信されたデータは、スーパーグローバル変数$_POSTに格納されます。