学生向けプログラミング入門 | 無料

学生向けにプログラミングを無料で解説。Java、C++、Ruby、PHP、データベース、Ruby on Rails, Python, Django

Django3.2 | クラウドソーシングアプリの構築 | 16 | アバター

↓↓クリックして頂けると励みになります。


15 | 依頼者モデル】 << 【ホーム】 >> 【17 | Bootoast


「core/customer/forms.py」ファイルを編集します。


記述編集 【Desktop/crowdsource/core/customer/forms.py】

from django import forms
from django.contrib.auth.models import User

from core.models import Customer

class BasicUserForm(forms.ModelForm):
  class Meta:
    model = User
    fields = ('last_name', 'first_name')

class BasicCustomerForm(forms.ModelForm):
  class Meta:
    model = Customer
    fields = ('avatar',)



「core/customer/views.py」ファイルを編集します。


記述編集 【Desktop/crowdsource/core/customer/views.py】

from django.shortcuts import render, redirect
from django.contrib.auth.decorators import login_required
from django.urls import reverse
from core.customer import forms

@login_required()
def home(request):
    return redirect(reverse('customer:profile'))

@login_required(login_url="/sign-in/?next=/customer/")
def profile_page(request):
    user_form = forms.BasicUserForm(instance=request.user)
    customer_form = forms.BasicCustomerForm(instance=request.user.customer)

    if request.method == "POST":
        user_form = forms.BasicUserForm(request.POST, instance=request.user)
        customer_form = forms.BasicCustomerForm(request.POST, request.FILES, instance=request.user.customer)

        if user_form.is_valid() and customer_form.is_valid():
                user_form.save()
                customer_form.save()

                return redirect(reverse('customer:profile'))

    return render(request, 'customer/profile.html', {
        "user_form": user_form,
        "customer_form": customer_form,
    })



「core/templates/customer/profile.html」ファイルを編集します。


記述編集 【Desktop/crowdsource/core/templates/customer/profile.html】

{% extends 'customer/base.html' %}
{% load bootstrap4 %}

{% block main %}
<!-- 基本情報 -->
<b class="text-secondary">基本情報</b><br />
<div class="card bg-white mt-2 mb-5">
  <div class="card-body">
    <form method="POST" enctype="multipart/form-data">
      {% csrf_token %}
      {% bootstrap_form user_form %}
      {% bootstrap_form customer_form %}
      <input type="hidden" name="action" value="update_profile">
      <button type="submit" class="btn btn-danger">保存</button>
    </form>
  </div>
</div>

{% endblock %}



「crowdsource/settings.py」ファイルを編集します(2箇所)。


記述追加 【Desktop/crowdsource/crowdsource/settings.py】13行目

import os #追加
from pathlib import Path



記述追加 【Desktop/crowdsource/crowdsource/settings.py】159(末尾に追加)行目

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'



「crowdsource/urls.py」ファイルを編集します。


記述編集 【Desktop/crowdsource/crowdsource/urls.py】

from django.contrib import admin
from django.urls import path, include
from django.contrib.auth import views as auth_views
from django.conf import settings
from django.conf.urls.static import static

from core import views

from core.customer import views as customer_views
from core.courier import views as courier_views

customer_urlpatters = [
    path('', customer_views.home, name="home"),
    path('profile/', customer_views.profile_page, name="profile"),
]

courier_urlpatters = [
    path('', courier_views.home, name="home"),
]


urlpatterns = [
    path('admin/', admin.site.urls),
    path('oauth/', include('social_django.urls', namespace='social')),
    path('', views.home),

    path('sign-in/', auth_views.LoginView.as_view(template_name="sign_in.html")),
    path('sign-out/', auth_views.LogoutView.as_view(next_page="/")),
    path('sign-up/', views.sign_up),

    path('customer/', include((customer_urlpatters, 'customer'))),
    path('courier/', include((courier_urlpatters, 'courier'))),

]

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



「core/templates/customer/base.html」ファイルを編集します。


記述編集 【Desktop/crowdsource/core/templates/customer/base.html】11行目

{% extends 'base.html' %}
{% load static %}

{% block content %}

<div class="container bg-light mt-4 pt-3 pb-3">
  <div class="row">
    <div class="col-lg-4">
      <div class="text-center">
        <img
          src="{% if request.user.customer.avatar %}{{ request.user.customer.avatar.url }}{% else %}{% static 'img/avatar01.jpg' %}{% endif %}"
          alt="" class="rounded-circle mb-2" width="150">
        <h4>{{ request.user.last_name }} {{ request.user.first_name }}</h4>
        <p class="text-secondary">{{ request.user.email }}</p>
      </div>

      <ul class="list-group">
        <li class="list-group-item">仕事登録</li>
        <li class="list-group-item">自分の仕事</li>
        <li class="list-group-item">プロフィール</li>
        <li class="list-group-item">支払い方法</li>
      </ul>

    </div>
    <div class="col-lg-8">
      {% block main %}

      {% endblock %}
    </div>
  </div>
</div>

{% endblock %}



ブラウザを確認します。
http://127.0.0.1:8000/customer/profile/


画像を選択して登録できるのを確認してください。

登録確認
登録確認



登録した画像が「crowdsource/media/customer/avatars」フォルダに格納されているのを確認してください。

登録確認
登録確認


↓↓クリックして頂けると励みになります。


15 | 依頼者モデル】 << 【ホーム】 >> 【17 | Bootoast