Help us understand the problem. What is going on with this article?

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

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.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした