LoginSignup
0

More than 5 years have passed since last update.

posted at

updated at

INTER-Mediatorのハンズオン - セッション1: 入力専用ページ

はじめに

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

ゴール

トライアル用のページファイル(page01.html, page02.html)と定義ファイル(def01.php, def02.php)を編集してページを作成し、フォーム入力・閲覧できれば完成です。なお、使用するデータのスキーマは用意されています。

前提条件

手順

INTER-Mediatorサイトのハンズオンセッション手順書 に沿って作成してあります。手順は、手順書を見ながら行い、編集内容の確認やコードのコピペはこちらから行うと便利です。

1-1: ページを表示してフォーム入力を行う


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

name: survey
key: id

db-class: PDO
dsn: mysql:host=localhost;dbname=test_db;charset=utf8mb4
user: web
password: password
Debug: false

IM_102_1-1_1.jpg
IM_102_1-1_2.jpg


page01.htmlを編集<body>タグの間に次の<table>タグ以下を挿入する

page01.html
<table>
  <tbody data-im-control="post">
    <tr>
      <th>名前</th>
      <td><input type="text" data-im="survey@Q5"/></td>
    </tr>
    <tr>
      <th>質問1</th>
      <td><input type="text" data-im="survey@Q1"/></td>
    </tr>
    <tr>
      <th></th>
      <td><button data-im-control="post">Answer</button></td>
    </tr>
  </tbody>
</table>


MariaDBのテーブルにアスセスし、一覧を入手テーブルの一覧状況

IM_102_1-1_3.jpg

1-2:入力フォームらしい感じにする


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

post-reconstruct: true
post-dismiss-message: 送信しました
post-move-url: http://inter-mediator.org/

IM_102_1-2_1.jpg


MariaDBのテーブルにアスセスし、一覧を入手テーブルの一覧状況

IM_102_1-2_2.jpg

1-3:テキストフィールド以外のフォーム要素


page01.htmlを編集<table>内の<tr>タグの間に挿入

page01.html
    <tr>
      <th>質問2</th>
      <td><input type="checkbox" value="1" data-im="survey@Q2"/>はい</td>
    </tr>
    <tr>
      <th>質問3</th>
      <td><div>
      <input type="radio" value="11" name="q3" data-im="survey@Q3"/><input type="radio" value="12" name="q3" data-im="survey@Q3"/>西
      <input type="radio" value="13" name="q3" data-im="survey@Q3"/><input type="radio" value="14" name="q3" data-im="survey@Q3"/></div></td>
    </tr>
    <tr>
      <th>質問4</th>
      <td><div data-im-group="survey@Q4">
      <input type="checkbox" value="21"/>Docomo
      <input type="checkbox" value="22"/>au
      <input type="checkbox" value="23"/>Softbank
      <input type="checkbox" value="24"/>Willcom
      </div></td>
    </tr>


MariaDBのテーブルにアスセスし、一覧を入手テーブルの一覧状況

IM_102_1-3_1.jpg

1-4: 回答を一覧表示する


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

name: survey
key: id
paging: true
repeat-control: confirm-insert confirm-delete
records: 10
maxrecords: 10

db-class: PDO
dsn: mysql:host=localhost;dbname=test_db;charset=utf8mb4
user: web
password: password
Debug: false

IM_102_1-3_2.jpg
IM_102_1-3_3.jpg


page02.htmlを編集<body>タグの間に以下を挿入する

page02.html
<div id="IM_NAVIGATOR"></div>

<table>
  <thead>
    <tr>
      <th>id</th>
      <th>名前</th>
      <th>質問1</th>
      <th>質問2</th>
      <th>質問3</th>
      <th>質問4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-im="survey@id"></td>
      <td><input type="text" data-im="survey@Q5"/></td>
      <td data-im="survey@Q1"></td>
      <td data-im="survey@Q2"></td>
      <td data-im="survey@Q3"></td>
      <td data-im="survey@Q4"></td>
    </tr>
  </tbody>
</table>

コマンド&コード

ターミナル.appからVirtualマシンへアクセス
$ ssh developer@192.168.56.101

MariaDBのテーブルにアスセスし、一覧を入手
$ mysql -u web -p test_db -e 'select * from survey;'

MariaDBのテーブルにアスセスし、テーブル構造の情報を入手
$ mysql -u web -p test_db -e 'describe survey;'

参考

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