LoginSignup
0

More than 5 years have passed since last update.

posted at

updated at

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

はじめに

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

ゴール

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

前提条件

手順

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

IM102_2-1_1.jpg


page03.htmlを編集<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>

IM102_2-1_2.jpg

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


def03.phpを編集定義ファイルの編集状況

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

IM102_2-2_1.jpg


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

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

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


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

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

IM102_2-3_1.png


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

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


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

navi-control: detail

IM102_2-3_2.png

IM102_2-3_3.jpg

IM102_2-3_4.jpg

IM102_2-3_5.jpg

IM102_2-3_6.jpg

コマンド&コード

ターミナル.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;'

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
0