INTER-Mediatorのハンズオン - セッション1: 入力専用ページ

+ 作成日 2017/08/17
+ 19分
+ YouTube:  https://youtu.be/x711Z3tk-K0
+ Doc: http://qiita.com/motofumi/items/0bc4c7fa4fa0eac324ea


# はじめに
INTER-Mediatorでは、ハンズオンが5つ用意されています。セッション1: 入力専用ページを作成します。データベースは、MySQL(MariaDB)で行います。

# ゴール
トライアル用のページファイル(page01.html, page02.html)と定義ファイル(def01.php, def02.php)を編集してページを作成し、フォーム入力・閲覧できれば完成です。なお、使用するデータのスキーマは用意されています。



# 前提条件
* [INTER-Mediatorをはじめよう - バーチャルマシンの準備](http://qiita.com/motofumi/items/ff94924a820e9c05b0c8)でバーチャルマシンが用意されていること。
* ターミナル.appでコマンドを入力したことがあること。



# 手順
INTER-Mediatorサイトの[ハンズオンセッション手順書](http://inter-mediator.info/ja/for-novices/handson.html) に沿って作成してあります。手順は、手順書を見ながら行い、編集内容の確認やコードのコピペはこちらから行うと便利です。

## 1-1: ページを表示してフォーム入力を行う
<details>
<summary>def01.phpを編集</summary>定義ファイルの編集状況
</details>
`name: survey`
`key: id`

`db-class: PDO`
`dsn: mysql:host=localhost;dbname=test_db;charset=utf8mb4`
`user: web`
`password: password`
`Debug: false`





![IM_102_1-1_1.jpg](https://qiita-image-store.s3.amazonaws.com/0/54439/c91b9acb-573d-6801-ac76-8e4a349681a3.jpeg)
![IM_102_1-1_2.jpg](https://qiita-image-store.s3.amazonaws.com/0/54439/6bdc7c43-8448-3a68-b3e8-46545ec27277.jpeg)




<details>
<summary>page01.htmlを編集</summary>\<body>タグの間に次の\<table>タグ以下を挿入する
</details>

```page01.html
<table>
  <tbody data-im-control="post">
    <tr>
      <th>名前</th>
      <td><input type="text" data-im="survey@Q5"/></td>
    </tr>
    <tr>
      <th>質問1</th>
      <td><input type="text" data-im="survey@Q1"/></td>
    </tr>
    <tr>
      <th></th>
      <td><button data-im-control="post">Answer</button></td>
    </tr>
  </tbody>
</table>
```

<details>
<summary>MariaDBのテーブルにアスセスし、一覧を入手</summary>テーブルの一覧状況
</details>

![IM_102_1-1_3.jpg](https://qiita-image-store.s3.amazonaws.com/0/54439/0f3ee7b4-832a-e92d-4796-e954fd6b905e.jpeg)


## 1-2：入力フォームらしい感じにする
<details>
<summary>def01.phpを編集</summary>定義ファイルの編集状況
</details>

`post-reconstruct: true`
`post-dismiss-message: 送信しました `
`post-move-url: http://inter-mediator.org/`

![IM_102_1-2_1.jpg](https://qiita-image-store.s3.amazonaws.com/0/54439/92dd7cee-0b94-430a-6eaa-c3d59fe351c1.jpeg)


<details>
<summary>MariaDBのテーブルにアスセスし、一覧を入手</summary>テーブルの一覧状況
</details>

![IM_102_1-2_2.jpg](https://qiita-image-store.s3.amazonaws.com/0/54439/3981666a-9746-5644-5418-f84326fec29a.jpeg)






## 1-3：テキストフィールド以外のフォーム要素
<details>
<summary>page01.htmlを編集</summary>\<table>内の\<tr>タグの間に挿入
</details>

```page01.html
    <tr>
      <th>質問2</th>
      <td><input type="checkbox" value="1" data-im="survey@Q2"/>はい</td>
    </tr>
    <tr>
      <th>質問3</th>
      <td><div>
      <input type="radio" value="11" name="q3" data-im="survey@Q3"/>東
      <input type="radio" value="12" name="q3" data-im="survey@Q3"/>西
      <input type="radio" value="13" name="q3" data-im="survey@Q3"/>南
      <input type="radio" value="14" name="q3" data-im="survey@Q3"/>北
      </div></td>
    </tr>
    <tr>
      <th>質問4</th>
      <td><div data-im-group="survey@Q4">
      <input type="checkbox" value="21"/>Docomo
      <input type="checkbox" value="22"/>au
      <input type="checkbox" value="23"/>Softbank
      <input type="checkbox" value="24"/>Willcom
      </div></td>
    </tr>
```

<details>
<summary>MariaDBのテーブルにアスセスし、一覧を入手</summary>テーブルの一覧状況
</details>

![IM_102_1-3_1.jpg](https://qiita-image-store.s3.amazonaws.com/0/54439/5e289f7c-9587-3c32-07d7-be89b942797a.jpeg)



## 1-4: 回答を一覧表示する
<details>
<summary>def02.phpを編集</summary>定義ファイルの編集状況
</details>
`name: survey`
`key: id`
`paging: true`
`repeat-control: confirm-insert confirm-delete`
`records: 10`
`maxrecords: 10`

`db-class: PDO`
`dsn: mysql:host=localhost;dbname=test_db;charset=utf8mb4`
`user: web`
`password: password`
`Debug: false`

![IM_102_1-3_2.jpg](https://qiita-image-store.s3.amazonaws.com/0/54439/6278d54e-6402-cbdf-5854-b79da51c749d.jpeg)
![IM_102_1-3_3.jpg](https://qiita-image-store.s3.amazonaws.com/0/54439/4fe9793b-c400-a71f-e21a-a1c31982ad28.jpeg)



<details>
<summary>page02.htmlを編集</summary>\<body>タグの間に以下を挿入する
</details>

```page02.html
<div id="IM_NAVIGATOR"></div>

<table>
  <thead>
    <tr>
      <th>id</th>
      <th>名前</th>
      <th>質問1</th>
      <th>質問2</th>
      <th>質問3</th>
      <th>質問4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-im="survey@id"></td>
      <td><input type="text" data-im="survey@Q5"/></td>
      <td data-im="survey@Q1"></td>
      <td data-im="survey@Q2"></td>
      <td data-im="survey@Q3"></td>
      <td data-im="survey@Q4"></td>
    </tr>
  </tbody>
</table>
```




# コマンド＆コード
ターミナル.appからVirtualマシンへアクセス
`$ ssh developer@192.168.56.101`

MariaDBのテーブルにアスセスし、一覧を入手
`$ mysql -u web -p test_db -e 'select * from survey;'`


MariaDBのテーブルにアスセスし、テーブル構造の情報を入手
`$ mysql -u web -p test_db -e 'describe survey;'`





<!--
<details>
<summary>サマリーはこちら</summary>詳細はこちら
</details>
-->

# 参考
* Web [INTER-Mediatorをはじめよう - バーチャルマシンの準備](http://qiita.com/motofumi/items/ff94924a820e9c05b0c8) 
* Web [INTER-Mediator - ハンズオンセッション手順書](http://inter-mediator.info/ja/for-novices/handson.html) 

<!-- 管理用 -->
<!-- ムービースクリプト
+『自己紹介』
+「ムービーを見てる方は、あわせてドキュメントも開いてください」
+ はじめにを朗読
+ ゴールを朗読
+ 前提条件を解説
+ 手順に入ったら、マシンで操作しながら解説
-->

<!-- 入力データ
山田太郎
好きな色は？

鈴木一郎
好きな果物は？

佐藤花子
好きな飲み物は？

田中次郎
好きな野菜は？

青木広美
好きな映画は？

小西哲也
今週の予定は？

山下陽一
井上和之
市川勉
大川陽子
携帯電話は？

小泉健二
携帯電話は？

飯島直子 -> 飯島基文
(複数チェック)
-->