Chapter 03無料公開

プロフィール情報変更

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

決済ページでユーザーの住所や電話番号も表示したいので、プロフィール情報を変更します。

所属の代わりに、住所と電話番号を追加します。

モデル

モデルにaddresstelを追加します。

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)
    address = models.CharField(('住所'), max_length=30, blank=True) # 追加
    tel = models.CharField(('電話番号'), max_length=30, blank=True) # 追加
    created = models.DateTimeField(('入会日'), default=timezone.now)

フォーム

フォームにaddresstelを追加します。

accounts/forms.py

class ProfileForm(forms.Form):
    first_name = forms.CharField(max_length=30, label='姓')
    last_name = forms.CharField(max_length=30, label='名')
    address = forms.CharField(max_length=30, label='住所', required=False) # 追加
    tel = forms.CharField(max_length=30, label='電話番号', required=False) # 追加

ビュー

ビューにaddresstelを追加します。

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,
                'address': user_data.address, # 追加
                'tel': user_data.tel # 追加
            }
        )

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

    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.address = form.cleaned_data['address'] # 追加
            user_data.tel = form.cleaned_data['tel'] # 追加
            user_data.save()
            return redirect('profile')

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

テンプレート

プロフィール

プロフィール画面に住所電話番号を追加します。

accounts/templates/accounts/profile.html

<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.address }}</td>
</tr>
<tr>
  <th class="header">電話番号</th>
  <td class="data">{{ user_data.tel }}</td>
</tr>
<tr>
  <th class="header">入会日</th>
  <td class="data">{{ user_data.created }}</td>
</tr>

プロフィール編集

プロフィール編集画面に住所電話番号を追加します。

accounts/templates/accounts/profile_edit.html

<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.address class="form-control" placeholder="住所" %}
  </td>
</tr>
<tr>
  <th class="header">電話番号</th>
  <td class="data">
    {% render_field form.tel class="form-control" placeholder="電話番号" %}
  </td>
</tr>

確認

プロフィール画面が表示して、住所と電話番号を追加しましょう。

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

プロフィール