INTER-Mediatorのハンズオン - セッション5: ブログ

More than 1 year has passed since last update.


はじめに

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


ゴール

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

スクリーンショット 2017-11-25 12.48.33.png

スクリーンショット 2017-11-25 12.57.27.png


前提条件


手順

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


5-0: リレーションのテーブルを確認する

ターミナル.appからVirtualマシンへアクセス

$ ssh developer@192.168.56.101

スクリーンショット 2017-11-25 12.36.37.png

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

chatテーブル

$ mysql -u web -p test_db -e 'select * from chat;'

スクリーンショット 2017-11-25 12.37.13.png

chatテーブル(定義)

$ mysql -u web -p test_db -e 'show full columns from chat;'

スクリーンショット 2017-11-25 12.39.16.png


5-1: ブログを作成する



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

name: message

table: chat

view: chat

key: id

post-reconstruct: true

post-dismiss-message: 投稿しました

Query: [field: groupname, expression: IS NULL, value:]

Sorting: [field: postdt, direction: desc]

Validation:

[field: user, rule: value != '', message: 入力してください。]

[field: message, rule: value != '', message: 入力してください。]

name: comment

table: chat

view: chat

key: id

post-reconstruct: true

post-dismiss-message: 投稿しました

Relationship: [foreign-key: groupname, join-field: id, operator: =]

Sorting: [field: postdt, direction: desc]

Validation:

[field: user, rule: value != '', message: 入力してください。]

[field: message, rule: value != '', message: 入力してください。]

Formatters: [field: chat@message, converter-class: HTMLString]

db-class: PDO

dsn: mysql:host=localhost;dbname=test_db;charset=utf8mb4

user: web

password: password

Debug: false



page05.htmlを編集<html>タグ以下を次のコードに変更入する


page05.html

<!DOCTYPE html>

<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<script type="text/javascript" src="def05.php"></script>
<script type="text/javascript">
INTERMediatorOnPage.processingBeforePostOnlyContext = function (node) {
var dtString, nodeIds, idValue, aNode;
dtString = INTERMediatorLib.dateTimeStringISO();
nodeIds = INTERMediatorOnPage.getNodeIdsHavingTargetFromNode(node, "message@postdt");
if (nodeIds.length > 0) {
document.getElementById(nodeIds[0]).value = dtString;
}
nodeIds = INTERMediatorOnPage.getNodeIdsHavingTargetFromNode(node, "comment@message");
if (nodeIds.length > 0) {
aNode = node.parentNode.parentNode.parentNode;
nodeIds = INTERMediatorOnPage.getNodeIdsHavingTargetFromNode(aNode, "message@id");
idValue = document.getElementById(nodeIds[0]).value;
INTERMediator.additionalFieldValueOnNewRecord = {};
INTERMediator.additionalFieldValueOnNewRecord['comment'] = [
{field: "groupname", value: idValue},
{field: "postdt", value: dtString}
];
}
return true;
};
</script>
<style>
TEXTAREA {
width: 400px;
height: 60px;
}
</style>
</head>
<body>
<table>
<tbody data-im-control="post">
<tr>
<th>From:</th>
<td>
<input type="text" data-im="message@user">
<input type="hidden" data-im="message@postdt">
</td>
</tr>
<tr>
<td colspan="2">
<textarea data-im="message@message"></textarea>
<button data-im-control="post">投稿</button>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td colspan="4">
<hr/>
</td>
</tr>
<tr>
<th>From:</th>
<td data-im="message@user"></td>
<th>Date:</th>
<td data-im="message@postdt"></td>
</tr>
<tr>
<td colspan="4" data-im="message@message@innerHTML" style="background-color: #CCCCCC"></td>
</tr>
<tr>
<td style="width: 50px; background-color: gray">Comment</td>
<td colspan="3">
<input type="hidden" data-im="message@id"/>
<table>
<tbody data-im-control="post">
<tr>
<th>From:</th>
<td>
<input type="text" data-im="comment@user">
</td>
</tr>
<tr>
<td colspan="2">
<textarea data-im="comment@message"></textarea>
<button data-im-control="post">投稿</button>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<th>From:</th>
<td data-im="comment@user"></td>
<th>Date:</th>
<td data-im="comment@postdt"></td>
</tr>
<tr>
<td colspan="4" data-im="comment@message@innerHTML" style="background-color: #CCCCCC"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>


5-2: ブログの動作を確認する


初期状態

最初は単にフォームだけが表示されています。「投稿」ボタンをクリックしても、何も入力しないと警告が表示され、メッセージは追加されません。

スクリーンショット 2017-11-25 12.49.53.png

スクリーンショット 2017-11-25 12.49.57.png


初投稿

Fromに『田中』、messageに『皆様、忘年会の予約は完了しました。』を入力して「投稿」ボタンをクリックします。入力したメッセージが表示されましたが、同時に投稿ボタンを押した日時も設定されています。

スクリーンショット 2017-11-25 12.51.01.png

スクリーンショット 2017-11-25 12.51.23.png


追加投稿

ページの最初のテキスト領域を利用して、メッセージを3つほど入力します。メッセージは、日付の逆順に表示されています。


  • Fromに『田中』、messageに『鈴木さん、普通自動車の運転免許証もってますか?』を入力

  • Fromに『田中』、messageに『皆様、月末の報告書提出は25日までにお願いします。』を入力

  • Fromに『田中』、messageに『山田さん、iPad修理担当者の名前教えてもらえますか?』を入力

スクリーンショット 2017-11-25 12.53.33.png


追加投稿(2個目のメッセージへ)

2つ目のメッセージの直後にも、Formとメッセージの記入部分があります。こちらにも入力をして「投稿」ボタンをクリックします。こちらは、該当メッセージへのコメントになります。いくつかコメントを追加してください。コメントも、日付が自動的に設定され、日付の逆順で表示されます。異なるルートメセージにコメントを記入し、正しいメッセージの後に付随していることを確認します。


  • Fromに『鈴木』、messageに『持っていますが、オートマ限定です。』を入力

  • Fromに『田中』、messageに『問題ありません。営業車はオートマのみです。来週の納品の際、運転お願いします。』を入力
    スクリーンショット 2017-11-25 12.57.27.png

メッセージはテキストエリアです。改行を含むメッセージを入力してみてください。正しく、改行も表示されています。


  • Fromに『鈴木』、messageに『しばらく運転してません。[改行]気をつけて運転します。』を入力
    スクリーンショット 2017-11-25 12.58.59.png
    スクリーンショット 2017-11-25 12.59.26.png

メッセージにJavaScriptのプログラムを、たとえば「<script>alert(9)</script>」のように記述して投稿してみます。タグはHTMLのタグとして解釈はされず、記述した通りの文字列で表示されます。


  • Fromに『田中』、messageに『<script>alert(9)</script>』を入力

スクリーンショット 2017-11-25 13.00.38.png

スクリーンショット 2017-11-25 13.00.52.png


5-3: アプリケーションを改造する


内部コメントの並び順を日付が古い順に変更する(facebook風)


  1. 現状を確認する

    スクリーンショット 2017-11-25 13.02.25.png


  2. 定義ファイルを変更する

    Commentコンテキスト、Sortingのdirectionをdescからascに変更する

    スクリーンショット 2017-11-25 13.11.08.png


  3. 変更後の動作を確認する


スクリーンショット 2017-11-25 13.12.19.png


内部コメントの一番最後にコメント欄を移動する(facebook風)


  1. 現状を確認する
    スクリーンショット 2017-11-25 13.12.19.png


  2. ページファイルを変更する


    タグの位置を入れ替える。

    スクリーンショット 2017-11-25 13.17.01.png

    スクリーンショット 2017-11-25 13.17.21.png
  3. 変更後の動作を確認する

    スクリーンショット 2017-11-25 13.17.35.png