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 のテンプレート化

前のページの views.py で呼び出している comments/index.html などの HTML ファイルを作成するが,それらの HTML ファイルで共通する部分をまとめてテンプレート化しておくと後の開発作業や運用開始後の保守作業が非常に楽になります.したがって,HTML ファイルの共通部分を取り出したテンプレート base.html を作成します.

具体的には,comments フォルダに templates フォルダを作成し,その中に base.html を設置します.ここでは,Bootstrap によるレスポンシブ Web デザインを利用することにします.次のように Bootstrap のテンプレートをコピーして若干手を加えることにします.なお,2022年7月時点での最新バージョンは5.2です.

comments/templates/base.html
{% load static %}<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{% block title %}{% endblock %}</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
</head>
<body>
<div class="container">
{% block content %}
{% endblock content %}
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
</html>

上の 1 行目 {% load static %} は静的ファイル(CSSファイル)を読み込むために必要な命令で,5 行目で CSS ファイルを読み込みます.この CSS ファイルは後ほど設置します.上の 2 行目でページの言語を日本語に指定しています.上の 7 行目で <title>{% block title %}{% endblock %}</title> のように記述することで,ページごとに異なったタイトルを指定することができるようになります.12 行目と 13 行目の間にページのコンテンツが差し込まれるようになります.ただしコンテンツ全体が <div class="container"> ... </div> で囲まれるように 11 行目と 14 行目にタグを配置しています.

次のページではこの base.html テンプレートを活用しながら,comments アプリケーションの HTML ファイルを作成します.

目次に戻る