Cloud9で学ぶ!Webフォームの作り方

公開日：2017-1-9
プロナビTOP / プログラミング初心者向けお役立ちコンテンツ

この記事では、手を動かしながらWebフォームの仕組みを学習していきます。

環境構築をしなくても学習できるよう、Cloud9を使用します。Cloud9では、今回の学習の肝となるWebサーバー「Apache」が最初から入っています。プログラミングは「習うより慣れろ」といいますが、手を動かしてこそ頭に入る部分がありますので、サンプルコードを見ながらCloud9上でプログラムを作成してみてください。
まだアカウントを取得していない方は、前記事より作成しましょう。

今回は最終的に、このような入力フォームを作れるようになることが目的です。

問い合わせページなどでよくみかけますよね。
作ってみることが目的であるため、一部説明を省略している部分はありますがご容赦ください。

1 WebページはHTMLでできている
2 PHPの役割は？Webサーバーって何？
3 PHPをHTMLに埋め込もう
4 入力フォームを作成してみよう
5 入力項目を複数作ってみよう
6 あとがき

WebページはHTMLでできている

テキストファイルで、「Hello,World!」と打ち込むだけでもブラウザ上には表示されます。しかし、世の中の多くのWebページは下記のようにHTML言語で作成されています。
Webフォームを作るならまずHTMLに慣れておきましょう。
C;oud9でファイルを作り、以下を作成しててください。

<サンプルコード>

<!DOCTYPE html>
<html>
<body>　　
    Hello,world!
</body>
</html>

<!DOCTYPE html>

<html>

<body>　　

Hello,world!

</body>

</html>

HTMLとは「HyperText Markup Langauge」の略で、直訳するならテキストにマークアップする(意味を持たせる)役割を担う言語です。上記の例では、で「本文」という意味を持たせています。

ここに、CSS言語で色やレイアウトを、JavaScript言語で動きを付けていきます。
尚、Javascriptはあくまでwebサーバとやり取りをしない動きがメインです。
これらの言語は一般的にフロントエンド言語と呼ばれます。

PHPの役割は？Webサーバーって何？

PHPやRubyは一方、「サーバサイド言語」と呼ばれます。
サーバサイド言語が使えるようになれば、以下のことができるようになります。
・Webページからユーザが入力したデータをサーバに保存し別フォームに表示させる
・入力データをデータベースに保存する
・データベースの内容をWebページに表示する

例えばAmazonなどのショッピングサイトで商品一覧が表示されたり会員情報が保存されているのはWebページがサーバを通してデータベースと連携しているためです。また、フォームに入力した内容が確認画面として表示される機能がありますが、これもWebサーバを通して入力データを一時保存しています。

PHPをHTMLに埋め込もう

先頬のHTMLのHello,worldを、今度はPHPで呼び出してみましょう。
サンプルコードを参考に、先ほど作成したファイルの内容を少し変更してみてください。

<サンプルコード>

<!DOCTYPE html>
<html>
<body>　　
    〈?php echo “Hello,World!”；?〉
</body>
</html>

<!DOCTYPE html>

<html>

<body>　　

〈?php echo “Hello,World!”；?〉

</body>

</html>

結果は同じですが、コード中のPHPの処理はWebサーバで行われています。

入力フォームを作成してみよう

入力データはどこへ行くのか

入力されたデータを保存したり、別のフォームへ受け渡しするためには一度webサーバを経由する必要があります。データのやり取りのイメージとしては以下のようになります。

①コードにより作成されたボタンをユーザが押すことで、タグのテキストボックスに入力されたデータをWebサーバへ送信します。その際、データは$POST変数へ格納されるます。
②Webサーバでは「action」で指定されているファイルに、①のデータを受け渡します。
③指定先のファイルにて、①のデータが処理(表示や加工など)されます。

入力フォームを作成してみよう

それでは実際に作ってみます。まずは入力フォームです。
〈サンプルコード〉comment..php

<!DOCTYPE html>
<html>
<body>　　
    <form method= "POST" action="view.php">
        <label for = "name">名前：</label>
        <input id = "name" type = "text" name = "name" size = "15" />
        <input type = "submit" value = "送信">
　　    
   　</form>
</body>
</html>

<!DOCTYPE html>

<html>

<body>　　

　</form>

</body>

</html>

〈input〉タグで送信用のテキストボックスを、

表示用フォームを作成してみよう

次に、表示用フォームを作成してみます。
受け渡しのため、入力フォームの「action」での指定と同様のファイル名にする必要があります。
$POST変数は配列形式のため、入力フォームのnameで使用した名前を[]内に入れる必要があります。

<サンプルコード>view.php

<!DOCTYPE html>
<html>
<body>　　
　　　　　こんにちは、<?=$_POST['name']?>さん！
</body>
</html>

<!DOCTYPE html>

<html>

<body>　　

　　　　　こんにちは、<?=$_POST['name']?>さん！

</body>

</html>

動かしてみよう

入力項目を複数作ってみよう

$POST変数は配列であるため、複数の項目を送信可能です。
以下のコードでは、〈input.〉タグのnameの値が3項目との異なることに注意して作成しましょう。

《サンプルコード》comment.php

<<!DOCTYPE html>
<html>
<body>
    <form method= "POST" action="view.php">
        <p><label for = "name">名前：</label></p>
        <p><input id = "name" type = "text" name = "name" size = "15" /></p>
　　　　<p><label for = "name">年齢：</label></p>
        <p><input id = "name" type = "text" name = "age" size = "15" /></p>
　　　　<p><label for = "name">コメント：</label></p>
        <p><input id = "name" type = "text" name = "comment" size = "15" /></p>
        <p><input type = "submit" value = "送信"></p>
    </form>
</body>
</html>

<<!DOCTYPE html>

<html>

<body>

</form>

</body>

</html>

《サンプルコード》view.php

<!DOCTYPE html>
<html>
　　<body>
    <p>お名前：<?=$_POST['name']?>さん</p>
    <p>年齢：<?=$_POST['age']?>歳</p>
    <p>コメント：<?=$_POST['comment']?></p>
    </body>
</html>