はじめに

前回（ユーザ認証編）で使用したプロジェクトを引き継いで作成する。

開発環境

・Windows10 professional 64bit
・Python 3.7.1
・Django 2.1.2
・MySQL 8.0.12

ユーザ情報

表示と編集

ログインしているユーザの情報を表示するページと，変更できるページを作成する

URL設定

ユーザ情報の表示と変更のURLをaccounts/urls.pyに設定する

urls.py

urlpatterns = [
                        .
                        .
                        .
    path('profile/<int:pk>/', views.Profile.as_view(), name='profile'),   # 追加
    path('profile/<int:pk>/update/', views.ProfileUpdate.as_view(), name='profile_update'),   # 追加
]

ユーザ情報更新用のフォームを作成

forms.py


""" アカウント更新フォーム """
class AccountsUpdateForm(forms.ModelForm):

    class Meta:
        model = User
        fields = (
            'username', 'email',
            'last_name', 'first_name',
        )

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        for field in self.fields.values():
            field.widget.attrs['class'] = 'form-control'

'fields'によって更新できる値を指定できる

views.pyを編集

views.py

from django.contrib.auth.mixins import LoginRequiredMixin, UserPassesTestMixin
from django.shortcuts import redirect, resolve_url
from .forms import LoginForm, RegistrationForm, AccountsUpdateForm


""" ユーザ限定クラス """
class UserOnlyMixin(UserPassesTestMixin):
    raise_exception = True

    def test_func(self):
        user = self.request.user
        return user.pk == self.kwargs['pk'] or user.is_superuser


""" ユーザ情報表示ページ """
class Profile(UserOnlyMixin, generic.DetailView):
    model = User
    template_name = 'profile.html'


""" ユーザ情報更新ページ """
class ProfileUpdate(UserOnlyMixin, generic.UpdateView):
    model = User
    form_class = AccountsUpdateForm
    template_name = 'profile_update.html'

    def get_success_url(self):
        return resolve_url('accounts:profile', pk=self.kwargs['pk'])

UserPassesTestMixinを継承したMixinクラスによって，自分以外のユーザがそのページを見れないようにする事が出来るので，
各ページには作成したMixinクラスを継承させる

あとはHTMLを作れば画面に表示される

HTML作成

ユーザ情報へ移動するボタンを作成するので'base.html'の<body></body>内を以下のように修正する

base.html

<body>
        <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
            <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="/">TaskMan</a>
            <div class="form-control form-control-dark w-100">{% block mainT %}{% endblock %}</div> 
            <div class="btn-group">
                <div class="btn dropdown-toggle naviDrop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        {% if user.is_authenticated %}
                            User : {{ user.get_username }}
                        {% else %}
                            User
                        {% endif %}
                </div>
                {% if user.is_authenticated %}
                    <div class="dropdown-menu dropdown-menu-right" >
                    <a class="dropdown-item" href="{% url 'accounts:profile' user.pk %}">ユーザ情報</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="/logout/">ログアウト</a>
                    </div>
                {% endif %}
            </div>
        </nav>
    
        {% block body %}{% endblock %}

    </body>

また，CSSを追加する

adjustment.css

.naviDrop {
    color:white;
    margin-right:20px;
    width:200px;

}

ユーザ情報ページ（profile.html）とユーザ情報更新ページ（profile_update.html）を作成する

profile.html

{% extends "base.html" %}
{% block title %} TaskMan {% endblock %}
{% block mainT %} アカウント情報 {% endblock %}
{% block body %}
<div style="margin:20px">
    <table class="table">
        <tbody>
            <tr>
                <th>ユーザー名</th>
                <td>{{ user.username }}</td>
            </tr>
            <tr>
                <th>メールアドレス</th>
                <td>{{ user.email }}</td>
            </tr>
            <tr>
                <th>姓</th>
                <td>{{ user.last_name }}</td>
            </tr>
            <tr>
                <th>名</th>
                <td>{{ user.first_name }}</td>
            </tr>
        </tbody>
    </table>
    <a href="{% url 'accounts:profile_update' user.pk %}" class="btn btn-primary ">変更</a>
</div>
{% endblock %}

profile_update.html

{% extends "base.html" %}
{% block title %} TaskMan {% endblock %}
{% block mainT %} アカウント情報 更新 {% endblock %}
{% block body %}
<div style="margin:20px">
    <form action="" method="POST">
        {{ form.non_field_errors }}
        <table class="table">
            <tbody>
                {% for field in form %}
                    <tr>
                        <th><label for="{{ field.id_for_label }}">{{ field.label }}</label></th>
                        <td>{{ field }} <span style="color:red">{{ field.errors }}<span></td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
        {% csrf_token %}
        <button type="submit" class="btn btn-success" >更新</button>
    </form>
</div>
{% endblock %}

ユーザ情報画面とユーザ情報更新画面の完成

画面確認

作成した画面を確認すると次のようになる

・トップページ

・ユーザ情報

・ユーザ情報更新

・異なるユーザでログインし同じURLを開こうとする

※superuserだと見れるので注意

期待している動きを確認することができた

パスワード変更

URL設定

パスワード変更用のURLをaccounts/urls.py設定する

urls.py

urlpatterns = [
              .
              .
              .
    path('profile/<int:pk>/password', views.PasswordChange.as_view(), name='password'),  # 追記
    path('profile/<int:pk>/password/complete', views.PasswordChangeComplete.as_view(), name='password_complete'),  # 追記
]

views.pyの設定も行う

views.py

from django.contrib.auth.views import LoginView, LogoutView, PasswordChangeView, PasswordChangeDoneView


""" パスワード変更ページ """
class PasswordChange(UserOnlyMixin, PasswordChangeView):
    model = User
    template_name = 'password_change.html'

    def get_success_url(self):
        return resolve_url('accounts:password_complete', pk=self.kwargs['pk'])


""" パスワード変更完了 """
class PasswordChangeComplete(UserOnlyMixin, PasswordChangeDoneView):
    template_name = 'password_change_complete.html'

HTML作成

ユーザ情報からパスワード変更画面に飛びたいので，`profile.html'を修正する

profile.html

     .
     .
     .
    </table>
    <a href="{% url 'accounts:profile_update' user.pk %}" class="btn btn-primary ">変更</a>
    <a href="{% url 'accounts:password' user.pk %}" class="btn btn-primary ">パスワード変更</a>  <!-- 追加 -->
</div>
{% endblock %}

パスワード変更画面（password_change.html）と変更完了画面（password_change_complete.html）を作成する

password_change.html

{% extends "base.html" %}
{% block title %} TaskMan {% endblock %}
{% block mainT %} パスワード変更 {% endblock %}
{% block body %}
<div style="margin:20px">
    <form action="" method="POST">
        {{ form.non_field_errors }}
        {% for field in form %}
        <div class="form-group">
            <label class="col-6" for="{{ field.id_for_label }}">{{ field.label_tag }}</label>
            {{ field }}
            <span style="color:red">{{ field.errors }}<span>
        </div>
        {% endfor %}
        {% csrf_token %}
        <div class="form-group row">
            <div class="authElement">
                <button type="submit" class="btn btn-success">変更</button>
            </div>
            <div class="authElement">
                <a href="{% url 'accounts:profile' user.pk %}" class="btn btn-primary">戻る</a>
            </div>
        </div>
    </form>
    
</div>
{% endblock %}

password_change_complete.html

{% extends "base.html" %}
{% block title %} TaskMan {% endblock %}
{% block mainT %} パスワード変更 {% endblock %}
{% block body %}
<div style="text-align: center; padding-top: 50px;">
    <h2 >パスワードを変更しました</h2>
    <div class="authElement">
        <a href="{% url 'accounts:profile' user.pk %}" class="btn btn-primary">ユーザ情報</a>
    </div>
</div>
{% endblock %}

画面確認

・ユーザ情報画面

・パスワード変更画面

・パスワード変更完了画面

次回ログイン時，変更したパスワードでログインできれば確認完了

ユーザアイコン設定

今後，チャット機能を追加する予定なのであらかじめユーザアイコンを準備しておく

準備

画像を保存するためにはPIL (Pillow)が必要なのでインストールする

PowerShell

> python -m pip install pillow

画像を保存しておくmediaフォルダをmanage.pyと同じ階層に作成し，setting.pyにその場所を記録する

setting.py

# media root setting
MEDIA_URL = '/mdeia/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

画像用のURLをプロジェクトのurls.py(taskMan/urls.py)に設定する

urls.py

from django.contrib import admin
from django.urls import path, include
from django.conf import settings  # 追加
from django.conf.urls.static import static  # 追加

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('accounts.urls')),
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root = settings.MEDIA_ROOT)  # 追加

Userモデルの変更

ユーザモデルを以下のように変更する

models.py

class User(AbstractUser, models.Model):
    icon = models.ImageField(
        upload_to='img/',
        verbose_name='アイコン',
        blank=True,
    )

更新用のフォームにアイコンを追加する

forms.py

fields = (
            'icon',  # 追加
            'username', 'email',
            'last_name', 'first_name',
        )

urls.pyとviews.pyは変更しない

HTML修正

ユーザ情報画面のテーブルの上に以下のコードを追加する

profile.html

    <div class="icon">
        {% if user.icon.url != "" %}
            <img src="{{ user.icon.url }}" style="height: 100px; width: 100px;">
        {% else %}
            <img src="/static/img/c0063_6_2.png" style="height: 50px; width: 50px;">
        {% endif%}
    </div>

/static/img/c0063_6_2.pngは画像を登録していないときのデフォルト画像
staticフォルダにimgフォルダを作り，そこに画像を準備する

更新する際に画像をアップロードできるように<form>を変更する

profile_update.html

  <form action="" method="POST" enctype ="multipart/form-data">

また，ユーザ名の横にアイコンを表示できるようにbase.htmlも変更する

base.html

<div class="btn dropdown-toggle naviDrop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
   {% if user.is_authenticated %}
       User : {{ user.get_username }}
       {% if user.icon.url != "" %}
           <img src="{{ user.icon.url }}" style="height: 20px; width: 20px;">
       {% else %}
           <img src="/static/img/c0063_6_2.png" style="height: 20px; width: 20px;">
       {% endif%}
   {% else %}
        User
   {% endif %}
</div>

アイコン調整用のCSSを作成する

adjustment.css

.icon {
    text-align: center;
    margin-bottom: 20px;
}

画面確認

・ユーザ情報画面

デフォルトアイコンが表示されている

・ユーザ情報更新画面

画像を選択して更新すると

アイコン画像が更新されたのが確認できた

今回のまとめ

情報更新やパスワード変更は比較的に早く完成したが，アイコン設定に時間がかかってしまった。本当は画像が更新された際に前の画像を削除したかったが，画像が更新されなくても前の（つまり今の）画像が削除されてしまったので諦めた。しかし，最終的には導入しなくてはいけないと思っているので，もう少しPythonやDjangoになれてから再挑戦しようと思う

シリーズ

・Djangoでタスク管理アプリをつくりたい！環境構築編
・Djangoでタスク管理アプリをつくりたい！ユーザ認証編
・Djangoでタスク管理アプリをつくりたい！ユーザ情報編
・Djangoでタスク管理アプリをつくりたい！プロジェクト管理編
・Djangoでタスク管理アプリをつくりたい！タスク管理編１