Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@motofumi

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

More than 3 years have 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;'

参考

0
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?