Edited at

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

More than 1 year has passed since last update.


はじめに

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;'


参考