Python Django 入門トップページ

---

ユーザ認証とコメント掲示板の開発

1. プロジェクトの概要
2. プロジェクトの作成と初期設定
3. アプリケーションの作成と有効化
4. ルートの記述
5. ビューの定義
6. HTML のテンプレート化
7. HTML ファイルの作成
8. Web ページ雛形の表示確認
9. トップページの作成
10. データベースのマイグレーション
11. ユーザの作成
12. ユーザ認証機能の実装
13. セッション情報の確認
14. ユーザ認証の状態を表示
15. Navbar を設置
16. モデルの作成とマイグレーション
17. テストデータの投入
18. コメントの一覧表示
19. ページネーションと更新逆順表示
20. コメント投稿機能の実装
21. フラッシュメッセージ
22. コメント詳細表示ページの実装
23. 投稿者のユーザ名とメールアドレスの表示
24. 投稿者であるかどうかの判断
25. 編集・更新機能の実装
26. コメント削除機能の実装
27. Navbar の調整
28. Profile の表示
29. Profile の編集と更新
30. パスワードの変更
31. 管理サイトの準備
32. 管理ユーザの登録
33. 管理サイトへのログインとスタッフの登録
34. グループの追加と権限の付与
35. 管理サイトに comments アプリケーションを登録
36. Comments アプリケーションから管理サイトへ

---

ユーザ認証とコメント掲示板の開発

HTML ファイルの作成

前のページでは HTML ファイルの共通部分を取り出したテンプレートファイルを作成しました．ここでは，そのテンプレートファイルを利用して，comments アプリケーションの HTML ファイルを作成します．ただし，具体的な機能がまだ実装されていないので，それぞれのページに移動するリンクだけを記述することにします．

まず，comments/templates/ フォルダ内に comments フォルダを作成し，その中に，index.html, show.html, form.html, delete_confirm.html という 4 つのファイルを設置します．一覧ページである index.html には次の内容を記述します．詳細ページ，更新ページ，削除ページへのリンクは ID = 10 のコメントに関する機能が呼び出されるようにリンクを記述しています．

comments/templates/comments/index.htmlコピー
{% extends "base.html" %}

{% block title %}
コメント一覧
{% endblock %}

{% block content %}
<h1 class="my-5">コメント一覧</h1>
<ul>
    <li>
        <a href="{% url 'comments:index' %}">コメント一覧</a>
    </li>
    <li>
        <a href="{% url 'comments:show' 10  %}">コメント詳細</a>
    </li>
    <li>
        <a href="{% url 'comments:create' %}">コメント投稿</a>
    </li>
    <li>
        <a href="{% url 'comments:update' 10  %}">コメント更新</a>
    </li>
    <li>
        <a href="{% url 'comments:delete' 10  %}">コメント削除</a>
    </li>
    <li>
        <a href="/">トップページへ</a>
    </li>
</ul>
{% endblock content %}

詳細ページである show.html ではコメントの ID も表示されるようにしておきます．

comments/templates/comments/show.htmlコピー
{% extends "base.html" %}

{% block title %}
コメント {{ comment_id }}
{% endblock %}

{% block content %}
<h1 class="my-5">コメント {{ comment_id }}</h1>
<ul>
    <li>
        <a href="{% url 'comments:index' %}">コメント一覧</a>
    </li>
    <li>
        <a href="{% url 'comments:show' 10  %}">コメント詳細</a>
    </li>
    <li>
        <a href="{% url 'comments:create' %}">コメント投稿</a>
    </li>
    <li>
        <a href="{% url 'comments:update' 10  %}">コメント更新</a>
    </li>
    <li>
        <a href="{% url 'comments:delete' 10  %}">コメント削除</a>
    </li>
    <li>
        <a href="/">トップページへ</a>
    </li>
</ul>
{% endblock content %}

コメント投稿ページと更新ページから呼び出される form.html ファイルです．更新ページからは ID の情報が送信されますが，投稿ページからはそのような情報が送られてきません．したがって，現時点では ID を表示しないようにしておきます．ただし，投稿ページであるか更新ページであるかがわかるようにしておきます．

comments/templates/comments/form.htmlコピー
{% extends "base.html" %}

{% block title %}
{{ page_title }}
{% endblock %}

{% block content %}
<h1 class="my-5">{{ page_title }}</h1>
<ul>
    <li>
        <a href="{% url 'comments:index' %}">コメント一覧</a>
    </li>
    <li>
        <a href="{% url 'comments:show' 10  %}">コメント詳細</a>
    </li>
    <li>
        <a href="{% url 'comments:create' %}">コメント投稿</a>
    </li>
    <li>
        <a href="{% url 'comments:update' 10  %}">コメント更新</a>
    </li>
    <li>
        <a href="{% url 'comments:delete' 10  %}">コメント削除</a>
    </li>
    <li>
        <a href="/">トップページへ</a>
    </li>
</ul>
{% endblock content %}

削除確認として表示されるページです．

comments/templates/comments/delete_confirm.htmlコピー
{% extends "base.html" %}

{% block title %}
コメントの削除
{% endblock %}

{% block content %}
<h1 class="my-5">コメントの削除</h1>
<ul>
    <li>
        <a href="{% url 'comments:index' %}">コメント一覧</a>
    </li>
    <li>
        <a href="{% url 'comments:show' 10  %}">コメント詳細</a>
    </li>
    <li>
        <a href="{% url 'comments:create' %}">コメント投稿</a>
    </li>
    <li>
        <a href="{% url 'comments:update' 10  %}">コメント更新</a>
    </li>
    <li>
        <a href="{% url 'comments:delete' 10  %}">コメント削除</a>
    </li>
    <li>
        <a href="/">トップページへ</a>
    </li>
</ul>
{% endblock content %}

次のページではすべてのページの表示を確認してみよう．

目次に戻る

---