11 コメント（演習）

各投稿にコメントを付けられるようにします。

11.1 models.py

models.pyにクラスCommentを追加します。以下のようなフィールドを持ちます。

• cid Integer 主キー
• tid Integer 外部キー（toukou.tid）
• uid Integer 外部キー（user.uid）
• body String(255) コメント本文
• hi DateTime 投稿日時　初期値：現在日時

リレーション設定

また、Userクラス、ToukouクラスにCommentクラスとのリレーションを設定します。

11.2 init_db.py

init_db.py でimportでCommentを追加します。 また、初期データを追加するコードを下に追加します。

    # コメント初期データ追加
    if Comment.query.count() == 0:
        data = [
            Comment(tid=1, uid=2, body="いいですね"),
            Comment(tid=1, uid=1, body="ありがとう")
        ]
        db.session.add_all(data)
        db.session.commit()

11.3 toukou.html

コメント表示

toukou.html の下部にコメントを表示します。コメントのリストは　toukou.comment で取得出来ます。

※ヒント：index.htmlの画像一覧表示を参照

投稿の一覧と同じく、各項目をdivタグで囲みclassを設定します。 なお、一件のコメント全体はdivタグでclass="comment"で囲みます。

11.4 コメントの投稿

toukou.html

コメント一覧の下にコメント投稿フォームを設置します。 /comment/投稿ID にpostで送信します。 入力内容はtextareaでコメント本文（name="body"）を入力できるようにします。

app.py

これを受け取るために、app.pyではcomment_post関数を作成します。 bodyを受け取って、Commentテーブルに追加を行います。 （uploadのデータ保存部分参照）

なお、ユーザIDはセッションから取得します。

※Commentのインポートを追加すること

11.5 style.css

.commentに以下のスタイルを設定します。

• 背景色は白
• 枠線は1px、実線、グレイ
• 角を丸くする（8px）
• 枠線の内側の余白を0.5文字分付ける。
• 枠線の外側下部に余白を1文字分付ける。

.bodyに以下のスタイルを設定します。

• 外側に余白を1文字分付ける。
• 複数行表示できるようにする(.mes参照)