X

【挫折させないWebアプリ講座⑥】ユーザー管理の第一歩、HTMLからデータを受け取ろう

この記事は約 7 分で読めます。

コードを書きたい皆さん。お待たせしました今日からコーディング編がスタートしますよ。

まず初めにこちらで用意した簡単なサンプルプログラムをCloud9上に作っていきましょう。

動画解説はコチラ

開発環境(Cloud9)のセットアップがまだの方はコチラ

【挫折させないWebアプリ講座④】プログラミング初心者が挫折する開発環境を3分でゲットする方法

2017.04.29

この記事で扱う範囲

以前の記事でWebアプリの全体像を説明したのは覚えていますか?

【挫折させないWebアプリ講座①】プログラミング初心者必見!Facebookで学ぶWebアプリの仕組み

2017.05.05

その中で今日はHTMLとPHPの連携によってユーザーからデータをもらうサンプルアプリを作っていきましょう!

今日の目標

HTMLとPHPの連携でデータを受け取る

Webアプリはユーザーからもらうデータを使って動いています。

なので、Webアプリを作るにはまずユーザーからデータを受け取る処理が必要ですね。

その処理はHTMLの知識も必要となるので、まとめて解説しましょう。

まずはHTMLから解説

HTMLはタグ(↓こんなのです)によって様々な挙動を示すように設計されてます。

<h1>これは見出し</h1>

<p>これは本文</p>

<form>フォームタグ→今日の重要部分</form>

formタグでPHPと連携

HTMLの中にはformタグなるものがあります。これはサーバーへデータを送るフォームを作るタグで、たとえばTwitterへログインする時もこのフォームからメールアドレスとパスワードが送られて、データベースのものと一致するか確認されているんです。

じゃあ実際にフォームから名前を送ってPHPで受け取るプログラムを作っていきましょう。

 

YUMA
僕は根性論なんて言わないので、サンプルコードをコピペして使ってくださいね。
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>PHP_TEST</title>
    </head>
    <body>
        <h1>データ受け取りプログラム</h1>
        <p>お名前を入力してください</p>
        <form action="" method="post">
            <input type="text" name="data">
            <input type="submit" name="datapost">
        </form>

    </body>
</html>

こちらが完成形のHTMLです。これを解説していきますね。

formタグの解説

formタグに囲われた部分がフォームになるので、まずはフォームタグを書きましょう。

さて、formの後にあるaction=””はデータが送信された後の遷移ページを示しています。今回のプログラムは別のページに移動するわけではないので、空でOK。

その後のmethod=”post”はデータの送信方法を選んでいます。postとgetがあるんですが、今回はややこしいので説明しません。しばらくはpostを使えば問題ないので、気にせずいきましょう。

次のinputタグが入力画面になります。type=”text”というのは文字列を意味していて、日本語の名前なんかも送信できるタイプになってます。

そして次のnameは重要だからよく読んでくださいね。これは送信されるデータの名前を自分で決められるのです、PHPで受け取るときに使うので、覚えておきましょう。

さて、ここまでがフォームの見える部分の解説でした。

 

最後にデータ送信の設定を決めるのが<input type=”submit”>になります。これでデータを送信するボタンが作れます。さらに上記と同じく、名前を任意で付けることができるんです。これもPHPで利用することになるので、わかりやすい名前を付けましょうね。

最後にvalue=””に文字を入れることで、ボタンに表示されるラベルが変わります。中身の部分だけ変えてみて、Cloud9のプレビューで確認してみてくださいね。

PHPでデータを受け取る

先ほどのHTMLでサーバーに名前を送ることができましたね。では次はサーバーに送ったデータをPHPで使ってみましょうか。

ちょっとおさらい:HTML→PHPにデータを渡すことで、ブラウザに表示したり、データベースに登録したりできる。PHPはユーザーとデータベースの仲介役でしたね?

 

わかりやすいようにスライドにしてみました。HTMLの解説で<input>要素に任意で名前を付けることができると説明しましたね。

そこで付けたdataという名前を

$_POST["data"]

というふうに入力するとサーバーから拾ってきてくれるという仕組みになっているのです。

PHPの$_POSTはHTMLからformタグでデータを送った時に自動的に作られる変数なので、自分で宣言する必要はないので、覚えやすくて便利。これでPHPを使ってデータを受け取れましたね。

PHPを使ってブラウザにデータを表示しよう

さあ、あと一歩でサンプルプログラムが完成しますよ。

最後は受け取ったデータを表示。

echoというのは後ろの変数もしくは文字列を表示するコマンドになり、HTMLから受け取ったデータを表示してます。

そして注意点。命令の最後には必ず;(セミコロン)を付けてくださいね。さもないとエラーが発生しますよ。

<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>PHP_TEST</title>
    </head>
    <body>
        <h1>データ受け取りプログラム</h1>
        <p>お名前を入力してください</p>
        <form action="" method="post">
            <input type="text" name="data">
            <input type="submit" name="datapost">
        </form>
    <?php
      echo $_POST["data"];
    ?>
    </body>
</html>

あとはフォームタグのしたにPHPを挿入したらOK。<?php  ?>で「これからphpを書くよ」と宣言できるので、こちらを忘れずに。

それと、phpの書く位置はHTMLの中であればどこでも書けるので、自分が表示したい位置に書けばOKです。

次回予告

今回のレッスンはいかがでしたか?

次回はPHPで受け取ったデータをデータベース内に登録するためにデータベースを構築していきます。

次はこちら

【挫折させないWebアプリ講座⑦】Webアプリのキモ。Cloud9のデータベースを準備しよう!

2017.05.18

お楽しみに!