この研修では、htdocs/LetsEngineer/curriculum/2-11フォルダに課題を作成してください。
今回の研修では、よくある入力フォームを作成し、その内容を次のページで表示させることを実施します。
入力フォームの作成
それではまず、index.phpを作成し、そこに下記のソースコードをコピペしてください。
<form action="result.php" method="get"> 名前：<input type="text" name="my_name" /> <br> パスワード：<input type="password" name="password" /> <br> <input type="submit" value="送信" /> </form>
また、同じフォルダにresult.phpというファイルを作成し、下記をコピペしてください。
<?php $my_name = $_GET['my_name']; $password = $_GET['password']; ?> <p>私の名前は、<?php echo $my_name; ?></p> <p>私のパスワードは、<?php echo $password; ?></p>
このページを表示すると、冒頭の写真のような入力フォームができていると思います。
http://localhost/LetsEngineer/curriculum/2-11/index.php
入力欄に何か入力して送信してみましょう。
画面が変わり、その文字が表示されたと思います。
index.phpの説明
さて、既にお気付きかもしれませんが、このソースコードにはPHPの部分がありません。
HTMLだけで構成されております。
こういう入力フォームは formタグ を使用して作成します。
それでは上からソースコードを見ていきます。
<form action="result.php" method="get"> <!-- 省略 --> </form>
このワンセットが formタグ です。
この中に入力欄を作成することで、ページ間のデータの受け渡しをすることが可能です。
formタグには設定しなければならない属性があります。
action・・・データを渡す先のページ（ボタンを押すと、そのページに移ります。）method・・・通信するプロトコル（手段）を指定します。後ほど解説しますが、今回は GET で送ります。
さて、それでは中身を見ていきましょう。
名前：<input type="text" name="my_name" /> <br> パスワード：<input type="password" name="password" /> <br> <input type="submit" value="送信" />
<br>はもういいですね？
その場所で改行しています。
さて、重要なのはinputです。
インプットというくらいなので、入力を示していることはなんとなく分かるかと思います。
このinputタグはそれ自体が入力フォームであるため、閉じタグは必要ありませんが、分かりやすくタグの最後で/>としてあげます。（このタグはここで終わりだよ、という印）
また、formと同様、設定しておくべき属性があります。
type
これは入力欄の種類を指定します。
例えば、今回のケースでいえば、名前はtype="text"、パスワードはtype="password"となっています。
入力してみると、名前の方は普通に入力できますが、パスワードの方は黒丸で隠れてしまいます。
このtype属性にはまだまだ種類があります。
今回は解説しませんが、気になる方は調べてみましょう。
HTMLタグクイックリファレンス-input-
name
次のページに送る際に、入力した値を箱に入れるイメージを持ってください。
その箱につける名前を決めることができます。
（この辺りは変数とデータ型のときやった、変数のイメージと同様で大丈夫です。）
今回で言えば、
my_nameという箱・・・名前の入力欄に入力した値が入っている。passwordという箱・・・パスワードの入力欄に入力した値が入っている。
この箱を、この後のresult.phpで受け取ります。
result.phpの説明
<?php $my_name = $_GET['my_name']; $password = $_GET['password']; ?
さて、本項のキモはここです。
GETで送信された値を受け取るためには、$_GETを使用します。
そこで、先ほどname属性で名付けた箱を指定することで、その中に入っている値を取得できます。
ちなみに、$_GETには連想配列でそれぞれの箱が収納されているので、下記で全体を確認することも可能です。
var_dump($_GET);
あとは大丈夫ですね？
変数に入れた値をHTMLに埋め込んで出力させています。
GETとPOST
formタグのmethod属性ですが、主に GET と POST の2種類があります。
先ほど作成したものはmethod=getなので、 GET通信 になります。
入力フォームに値を入力し、「送信」ボタンを押した後のURLを見てみましょう。
先ほど送信したデータが?より後ろについています。
このように、送信したデータの値を見ることができるのがGETの特徴です。
とはいえ、パスワードなど、見られたくない情報もありますよね？
そういうときに使用するのが POST です。
POST通信を試してみましょう。
まずは、index.phpのformタグ、method属性をpostにします。
<form action="result.php" method="post">
次に、result.phpの$_GETを$_POSTに修正します。
POSTで送られてきた値は$_POSTで受け取ります。
<?php $my_name = $_POST['my_name']; $password = $_POST['password']; ?>
さて、これでもう1度試してみましょう。
今度はURLに?以降がついていないと思います。
GETとPOSTの使い分け
「見える」ということは「書き換える」ことも可能です。
このように、「見られたくない」、「書き換えられたくない」データはPOSTで送信します。
また、大量のデータを送信する場合もPOSTで送信します。
課題
- 本項で作成した入力フォームに、新たに
emailを追加しましょう。 - POSTで送信してください。
inputタグのtype属性はtextです。name属性は自由に設定してください。
IT用語 SESに向けて準備しよう
3章では一つ一つの項目で数個のIT用語について調べていただきます。
どの用語もSESでよく耳にする言葉なのできちんと調べていきましょう！
下記の用語について、調べてみましょう。
※IT用語についてはチェックテストの範囲外です。
1. 仕様書・設計書
2. Git
3. マージツール
用語の意味を調べて同じく2-11フォルダ内に記載してください。
Hello Worldでやった時のように用語については記載するようにしてください。
