INTER-Mediatorのハンズオン - セッション2: 住所録

+ 作成日 2017/08/21
+ 13分
+ YouTube: https://youtu.be/RezREVqn9Bk
+ Doc: http://qiita.com/motofumi/items/ab16f4b16112cceee157

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

# ゴール
トライアル用のページファイル(page03.html)と定義ファイル(def03.php)を編集して住所録のページを作成し、期待通り表示できれば完成です。なお、使用するデータベースのスキーマは用意されています。



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



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

##2-1: 住所録を作成する
<details>
<summary>def03.phpを編集</summary>定義ファイルの編集状況
</details>

`name: person_list`
`table: person`
`view: person`
`key: id`
`paging: true`
`repeat-control: insert`
`records: 10`
`maxrecords: 100`

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




![IM102_2-1_1.jpg](https://qiita-image-store.s3.amazonaws.com/0/54439/8d6d4516-c759-a28a-db23-3cd7577734cf.jpeg)



<details>
<summary>page03.htmlを編集</summary>\<html>タグ以下を次のコードに変更入する
</details>

```page03.html
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>INTER-Mediator Demo</title>
    <link rel="stylesheet" type="text/css" href="INTER-Mediator/Samples/sample.css">
    <script type="text/javascript" src="def03.php"></script>
</head>
<body>
  <div id="IM_NAVIGATOR"></div>
  <table>
    <tbody>
      <tr>
        <td></td><td data-im="person_list@name"></td>
      </tr>
    </tbody>
  </table>
</body>
</html>
```



![IM102_2-1_2.jpg](https://qiita-image-store.s3.amazonaws.com/0/54439/38d16447-ff83-40f3-bb02-979764172806.jpeg)




##2-2: コンテキストを追加する
<details>
<summary>def03.phpを編集</summary>定義ファイルの編集状況
</details>

`name: person_detail`
`table: person`
`view: person`
`key: id`
`records: 1`
`maxrecords: 1`



![IM102_2-2_1.jpg](https://qiita-image-store.s3.amazonaws.com/0/54439/d48c872f-8fc4-20ad-6119-2be04a9eaf6b.jpeg)




<details>
<summary>page03.htmlを編集</summary>\<table>タグの次に次の\<table>を挿入する
</details>

```page03.html
  <table>
    <tbody>
      <tr>
        <th>名前</th>
        <td><input type="text" data-im="person_detail@name"/></td>
      </tr>
      <tr>
        <th>住所</th>
        <td><input type="text" data-im="person_detail@address"/></td>
      </tr>
      <tr>
        <th>メール</th>
        <td><input type="text" data-im="person_detail@mail"/></td>
      </tr>
      <tr>
        <th>地域</th>
        <td><input type="text" data-im="person_detail@location"/></td>
      </tr>
      <tr>
        <th>分類</th>
        <td><input type="text" data-im="person_detail@category"/></td>
      </tr>
      <tr>
        <th>メモ</th>
        <td><textarea data-im="person_detail@memo"></textarea></td>
      </tr>
    </tbody>    
  </table>
```



![IM102_2-2_2.jpg](https://qiita-image-store.s3.amazonaws.com/0/54439/3d1f523e-33f5-179c-e430-be6ce4b73be0.jpeg)




##2-3: iPadのようなナビゲーションを実現する

<details>
<summary>page03.htmlを編集</summary>\<table>タグにstyle属性を設定して、\<br>タグを追加する
</details>

```page03.html
  <table style="float: left">
  ...
  ...
  ...
  </table>
  <table style="float: left; margin-left: 12px">
  ...
  ...
  ...
  </table>
  <br clear="all"/>
```


![IM102_2-3_1.png](https://qiita-image-store.s3.amazonaws.com/0/54439/40cb43b7-2c50-a46b-4713-04187acb584c.png)



<details>
<summary>def03.phpのperson_listコンテキストを編集</summary>定義ファイルの編集状況
</details>

`navi-control: master-hide`
`navi-control: master`

<details>
<summary>def03.phpのperson_detailコンテキストを編集</summary>定義ファイルの編集状況
</details>

`navi-control: detail`

![IM102_2-3_2.png](https://qiita-image-store.s3.amazonaws.com/0/54439/8c86c347-9433-7c33-f735-4c24707958c0.png)

![IM102_2-3_3.jpg](https://qiita-image-store.s3.amazonaws.com/0/54439/19345dfa-1df2-b9eb-dacb-de8bef9153a1.jpeg)

![IM102_2-3_4.jpg](https://qiita-image-store.s3.amazonaws.com/0/54439/b1392324-37d8-3273-3864-4453ba46e6a9.jpeg)

![IM102_2-3_5.jpg](https://qiita-image-store.s3.amazonaws.com/0/54439/0904f322-5d20-45c1-8445-e520fa1e1e0f.jpeg)

![IM102_2-3_6.jpg](https://qiita-image-store.s3.amazonaws.com/0/54439/98e4c9f3-2f0e-99b1-1655-d6ae15bfc28a.jpeg)







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

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

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






<!--
<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) 

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