More than 5 years have passed since last update.

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

INTER-Mediator

Last updated at 2017-08-27Posted at 2017-08-23

作成日 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を編集

\タグ以下を次のコードに変更入する

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>

2-2: コンテキストを追加する

def03.phpを編集

定義ファイルの編集状況

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

page03.htmlを編集

\タグの次に次の\

を挿入する

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>

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

page03.htmlを編集

タグにstyle属性を設定して、\
タグを追加する

page03.html

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