Python Django 入門トップページ

« 戻る 次へ »

このページは Django version 3 系の情報です．新たな version 4 系の情報はこちらからどうぞ．

Django によるコメント掲示板の開発：目次

  1. プロジェクトの作成
  2. Git でコミット
  3. Web サーバを起動しておく
  4. Config
  5. Comments アプリケーションを作る
  6. はじめてのビューを作成する
  7. モデルを作る
  8. アプリケーションを有効にする
  9. マイグレーション
  10. テストデータの設定
  11. データベースからコメント一覧を取得して表示してみよう
  12. Bootstrap の導入
  13. コメントの詳細表示
  14. urls.pyの書き方
  15. HTML のテンプレート化
  16. コメントの新規投稿
  17. コメントの編集機能を追加する
  18. さらにテンプレート化
  19. モデル，マイグレーションファイル，フォームの関連
  20. 入力内容の検証（バリデーション）
  21. コメントを削除する
  22. 一覧を逆順にする
  23. ページネーション
  24. フラッシュメッセージ
  25. Static コンテンツの設置
  26. 更新や削除にもフラッシュメッセージを表示
  27. テストの自動化を実現しよう
  28. デバッグツールバーを使う
  29. generic モジュールを使わずにコメント一覧を取得する
  30. コメント一覧のページネーション
  31. 一覧の表示順序を制御する
  32. generic モジュールを使わずにコメントの詳細を表示する
  33. コメント詳細にページ送り機能を作成する
  34. generic モジュールを使わずにコメント登録機能を作成する
  35. generic モジュールを使わずにコメント編集機能を作成する
  36. generic モジュールを使わずにコメント削除機能を作成する

Django によるコメント掲示板の開発

Bootstrap の導入

コメントの一覧が取得できたが，今後のためここで Bootstrap を導入して，ページのデザインを美しくできるようにしておこう．Bootstrap のトップページ から 「Get started」 をクリックし，［Starter template］にあるコードを利用すると良い．なお，直前のリンクはバージョン4.5であるので，最新バージョンを利用すると良いでしょう．

comments/templates/comments/comment_list.html に数行のコードを加える（Starter template のコードをコピーペーストする）だけで良い． 

comments/templates/comments/comment_list.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <title>コメント一覧</title>
</head>
<body>
{% block content %}
<h1>コメント一覧</h1>
<ul>
    {% for comment in object_list %}
      <li>
          {{ comment.title }} : {{ comment.body }}
      </li>
    {% endfor %}
</ul>
{% endblock content %}

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>

Bootstrap の導入によってマージンやフォントなど，見た目が若干ではあるが変化した．

django-comment-05

さらに，タイトルや一覧の書き方に Bootstrap の card を適用して美しくしてみよう． 

comments/templates/comments/comment_list.html （抜粋）
<body>
{% block content %}
  <div class="container">
    <h1 class="my-5">コメント一覧</h1>
    {% for comment in object_list %}
    <div class="card mb-3">
      <div class="card-body">
        <h5 class="card-title">{{ comment.title }}</h5>
        <p class="card-text">{{ comment.body }}</p>
      </div>
    </div>
    {% endfor %}
  </div>
{% endblock content %}

美しいカードが並ぶ一覧表示に変化しました．

django-comment-06

django-comment-07

目次に戻る

« 戻る 次へ »