この研修では、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でやった時のように用語については記載するようにしてください。