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 アプリケーションから管理サイトへ

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

Profile の表示

ここではユーザの Profile を表示するページを作成します．具体的にはユーザ名，メールアドレスなどを表示します．まず，urls.py にルート情報を定義します． 

comments/urls.py
from django.urls import path

from . import views

app_name = 'comments'
urlpatterns = [
    path('', views.comments_index, name='index'),
    path('<int:comment_id>', views.comments_show, name='show'),
    path('create/', views.comments_create, name='create'),
    path('<int:comment_id>/update/', views.comments_update, name='update'),
    path('<int:comment_id>/delete/', views.comments_delete, name='delete'),
    path('logout/', views.logout_view, name='logout'),
    path('profile/', views.profile, name='profile'),
]

次に，views.py に profile() 関数を定義し，その中でログイン中のユーザの情報を取得します． 

comments/views.py
def profile(request):
    if not request.user.is_authenticated:
          return redirect('%s?next=%s' % (settings.LOGIN_URL, request.path))
    context = {}
    context['user'] = request.user
    return render(request, 'profile/show.html', context)

comments/templates/ フォルダに profile フォルダを作成し，その中に show.html ファイルを設置します． 

comments/templates/profile/show.html
{% extends "base.html" %}

{% block title %}
Profile
{% endblock %}

{% block content %}
<h1 class="my-5">Profile</h1>
<div class="card mb-3">
    <div class="card-header">
        ID : {{ user.id }}
    </div>
    <div class="card-body">
        <p class="card-text">User Name : {{ user.username }}</p>
        <p class="card-text">First Name : {{ user.first_name }}</p>
        <p class="card-text">Last Name : {{ user.last_name }}</p>
        <p class="card-text">Email : {{ user.email }}</p>
        <p class="card-text">Date Joined : {{ user.date_joined }}</p>
        <p class="card-text">Last Login : {{ user.last_login }}</p>
        <p class="card-text">Is Superuser : {{ user.is_superuser }}</p>
        <p class="card-text">Is Staff : {{ user.is_staff }}</p>
        <p class="card-text">Is active : {{ user.is_active }}</p>
        <p class="card-text">Password : {{ user.password }}</p>
      </div>
    <div class="card-footer">
        <p></p>
    </div>
</div>
<hr>
{% endblock content %}

ログイン後の Navbar からプロフィールページを開くことができるようにリンクを設置します． 

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">
  <nav class="navbar navbar-expand-lg bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="/">コメント</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="/comments/">Home</a>
          </li>
        </ul>
        {% if user.is_authenticated %}
          <ul class="navbar-nav ml-auto">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                {{ user.username }}
              </a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="{% url 'comments:profile' %}">Profile</a></li>
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="{% url 'comments:logout' %}">ログアウト</a></li>
              </ul>
            </li>
          </ul>
        {% else %}
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <a class="nav-link" href="{% url 'comments:index' %}">Login</a>
            </li>
          </ul>
        {% endif %}
      </div>
    </div>
  </nav>
  <div>
    {% for message in messages %}
      <p class="flash_message" onclick="this.classList.add('hidden')"> {{ message }}</p>
    {% endfor %}
  </div>
{% 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>

ログイン後，Navbar のメニューから Profile を開くことができる．

django2022-00112

学習用のシステムとしてパスワード情報も表示しています．もちろん本番用のシステムではパスワードを表示すべきでありません．

django2022-00113

現時点では First Name と Last Name に情報が登録されていません．次のステップでこれらを編集できるようにしましょう．

目次に戻る

« 戻る 次へ »