2019/07/27体験授業

# 2019/07/27体験授業 ## 今日やること - webページ作成体験ユーザーの情報をサーバーから取得して表示することができる機能を作成します。 - html(画面)の作成 - phpで画面の動的な描画＆必要な情報の取得処理を作成 ## 今日使う用語の簡単な解説 - html ハイパーテキストを記述するマークアップ言語の一つ。 htmlタグと呼ばれるものを使用する。マークアップ言語 = 文章構造や視覚情報を記述するための言語・・・・ですが、今日はとりあえず html = 画面を作成するためのものくらいの認識でOKです。 - css htmlとセットで使用され、画面の見た目を整えたりすることができる言語。今回は使用しませんが、実際には常にhtmlとセットで使われるくらい関係が深いので存在だけでも紹介しておきます。 - php サーバー上で動作するプログラム言語の一種。 web系で多く使われています。 - ディレクトリ windowsでいうところのフォルダと一緒。例えばディレクトリを作成してくださいという指示があったらフォルダを作成してもらえればOKです。 - エディタファイルを編集するためのアプリケーション。言ってしまえばメモ帳等のテキスト編集ソフトもエディタですが、プログラムを書くためにも使用します。 ## 実際に簡単なwebページを作ってみよう ### htmlのみで画面を作成する `C:\xampp\htdocs`に`sample`という名前のディレクトリを作成し、sampleディレクトリ内に`index.html`を作成、下記のように記述してください。また、 ==htmlタグの間以外に全角文字(スペース含む)が入ると正しく動作しない可能性がある== ため気を付けてください。 ```html <!DOCTYPE html> <html> <head> <title>ユーザー情報</title> </head> <body> <table border="1px"> <tr> <th>名前</th><th>性別</th><th>年齢</th><th>誕生日</th> </tr> <tr> <td>稲村</td> <td>男</td> <td>25</td> <td>11/24</td> </tr> </table> </body> </html> ``` できたらwebブラウザで開いて表示を確認してみましょう。 ### html+phpで動的な表示を行う #### レイアウトを作成する `C:\xampp\htdocs` 下に `test` ディレクトリを作成し、testディレクトリ内に `index.php` を作成します。下記のように記述してください。(ひとつ前に作ったhtmlをコピーして、tdタグの間の文字を消すだけでokです) ```php <!DOCTYPE html> <html> <head> <title>ユーザー情報</title> </head> <body> <table border="1px"> <tr> <th>名前</th><th>性別</th><th>年齢</th><th>誕生日</th> </tr> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table> </body> </html> ``` できたらひとまずこの状態で表示を確認しましょう。 `C:\xampp\xampp-control.exe` を実行し、`Apache` の隣の `Start` ボタンを押してwebサーバーをローカルpc内で起動します。ブラウザのurlバーに `http://localhost/test/` と打ち込んでみてください。 #### ユーザーのデータを取得するためのプログラムを作成する `C:\xampp\htdocs\test` 下に `api` ディレクトリを作成し、 `userData.php` を作成してください。作成したら下記のようなプログラムを書いてみましょう。また、こちらでも ==全角文字(スペース含む)が入ると正しく動作しない、またはエラーとなってしまう== ため注意しましょう。 ```php <?php $data = [ 'name' => '松本', 'birthDay' => '10/3', 'age' => 19, 'sex' => '男', ]; echo json_encode($data); ``` こちらも書けたら表示を確認してみましょう。ブラウザのurlバーに `http://localhost/test/api/userData.php` と打ち込んでみてください。 #### ユーザーのデータを取得して画面に表示する `index.php` をエディタで開き、まずは先ほど作ったプログラムからユーザーの情報を取得します。下記のように追記してください。 ```php <body> ↓========== ここから ========== <?php $url = 'http://localhost/test/api/userData.php'; $curl = curl_init($url); curl_setopt($curl, CURLOPT_CUSTOMREQUEST, 'GET'); curl_setopt($curl, CURLOPT_RETURNTRANSFER, true); $response = curl_exec($curl); curl_close($curl); $userData = json_decode($response, true); ?> ↑========== ここまで ========== --- 略 </body> ``` これでデータの取得ができているはずなので、今度はそのデータを画面に表示してみましょう。下記のように追記してください。 ```php <table border="1px"> <tr> <th>名前</th><th>性別</th><th>年齢</th><th>誕生日</th> </tr> <tr> ↓========== ここから ========== <td><?php echo $userData['name'] ?></td> <td><?php echo $userData['sex'] ?></td> <td><?php echo $userData['age'] ?></td> <td><?php echo $userData['birthDay'] ?></td> ↑========== ここまで ========== </tr> </table> ``` できたらブラウザのurlバーに `http://localhost/test/` と打ち込んでみて表示が変わったか確認しましょう。