- 作成日 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をはじめよう - バーチャルマシンの準備でバーチャルマシンが用意されていること。
- ターミナル.appでコマンドを入力したことがあること。
手順
INTER-Mediatorサイトのハンズオンセッション手順書 に沿って作成してあります。手順は、手順書を見ながら行い、編集内容の確認やコードのコピペはこちらから行うと便利です。
2-1: 住所録を作成する
def03.phpを編集
定義ファイルの編集状況
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
page03.htmlを編集
<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>
2-2: コンテキストを追加する
def03.phpを編集
定義ファイルの編集状況
name: person_detail
table: person
view: person
key: id
records: 1
maxrecords: 1
page03.htmlを編集
<table>タグの次に次の<table>を挿入する
<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>
2-3: iPadのようなナビゲーションを実現する
page03.htmlを編集
<table>タグにstyle属性を設定して、<br>タグを追加する
<table style="float: left">
...
...
...
</table>
<table style="float: left; margin-left: 12px">
...
...
...
</table>
<br clear="all"/>
def03.phpのperson_listコンテキストを編集
定義ファイルの編集状況
navi-control: master-hide
navi-control: master
def03.phpのperson_detailコンテキストを編集
定義ファイルの編集状況
navi-control: detail
コマンド&コード
ターミナル.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;'