Chapter 03無料公開

プロフィール情報変更

はる@Python、Djangoプログラミング講師
はる@Python、Djangoプログラミング講師
2021.03.21に更新

プロフィール情報を変更します。

自己紹介とプロフィール画像を追加します。

モデル

モデルにプロフィールとプロフィール画像を追加します。

accounts/models.py

class CustomUser(AbstractBaseUser, PermissionsMixin):
    email = models.EmailField('メールアドレス', unique=True)
    first_name = models.CharField(('姓'), max_length=30)
    last_name = models.CharField(('名'), max_length=30)
    description = models.TextField('自己紹介', default="", blank=True)
    image = models.ImageField(upload_to='images', verbose_name='プロフィール画像', null=True, blank=True)

マイグレーション実行

モデルを追加したので、マイグレーションが必要になります。

(myvenv) ~$ python3 manage.py makemigrations
(myvenv) ~$ python3 manage.py migrate

データ追加

管理画面で自己紹介とプロフィール画像が設定できるか試してみてください。

フォーム

フォームに自己紹介とプロフィール画像を追加します。

accounts/forms.py

class ProfileForm(forms.Form):
    first_name = forms.CharField(max_length=30, label='姓')
    last_name = forms.CharField(max_length=30, label='名')
    description = forms.CharField(label='自己紹介', widget=forms.Textarea(), required=False)
    image = forms.ImageField(required=False, )

ビュー

ビューに自己紹介とプロフィール画像を追加します。

accounts/views.py

class ProfileEditView(LoginRequiredMixin, View):
    def get(self, request, *args, **kwargs):
        user_data = CustomUser.objects.get(id=request.user.id)
        form = ProfileForm(
            request.POST or None,
            initial={
                'first_name': user_data.first_name,
                'last_name': user_data.last_name,
                'description': user_data.description,
                'image': user_data.image
            }
        )

        return render(request, 'accounts/profile_edit.html', {
            'form': form,
            'user_data': user_data
        })

    def post(self, request, *args, **kwargs):
        form = ProfileForm(request.POST or None)
        if form.is_valid():
            user_data = CustomUser.objects.get(id=request.user.id)
            user_data.first_name = form.cleaned_data['first_name']
            user_data.last_name = form.cleaned_data['last_name']
            user_data.description = form.cleaned_data['description']
            if request.FILES.get('image'):
                user_data.image = request.FILES.get('image')
            user_data.save()
            return redirect('profile')

        return render(request, 'accounts/profile.html', {
            'form': form
        })

テンプレート

profile

プロフィールのテンプレートを変更します。

accounts/templates/accounts/profile.html

<tr>
  <th class="header">プロフィール画像</th>
  <td class="data">
    {% if user_data.image %}
    <img src="/{{ user_data.image.url }}" width="100px" />
    {% endif %}
  </td>
</tr>
<tr>
  <th class="header">名前</th>
  <td class="data">{{ user_data.first_name }} {{ user_data.last_name }}</td>
</tr>
<tr>
  <th class="header">メールアドレス</th>
  <td class="data">{{ user_data.email }}</td>
</tr>
<tr>
  <th class="header">自己紹介</th>
  <td class="data">{{ user_data.description }}</td>
</tr>

profile_edit

プロフィール編集のテンプレートを変更します。

accounts/templates/accounts/profile_edit.html

<form method="post" enctype="multipart/form-data">
  {% csrf_token %}
  <table class="profile_table mb-4">
    <tbody>
      <tr>
        <th class="header">プロフィール画像</th>
        <td class="data">{{ form.image }}</td>
      </tr>
      <tr>
        <th class="header">名前</th>
        <td class="data form_wrap form_wrap-2">
          {% render_field form.first_name class="form-control" placeholder="姓"
          %} {% render_field form.last_name class="form-control"
          placeholder="名" %}
        </td>
      </tr>
      <tr>
        <th class="header">自己紹介</th>
        <td class="data">
          {% render_field form.description class="form-control"
          placeholder="自己紹介" %}
        </td>
      </tr>
    </tbody>
  </table>
</form>

確認

プロフィール情報に自己紹介とプロフィール画像が表示されていることを確認してください。

http://127.0.0.1:8000/accounts/profile/

プロフィール

編集もできるか確認しましょう。

プロフィール編集