49. (app3) Django 프로필 페이지 만들기

프로필 만드는 방법에는 2가지 정도가 있다.

1) 기존의 장고 User모델을 확장시키는 방법

- 뷰를 쓸때 편함(유저랑 관련된 디테일 뷰, 리스트 뷰를 쓰면 되기 때문에)

2) 사용자와 one to one 관계를 가지는 프로필 모델을 추가하는 방법(난이도 상으론 이게 더 쉬움)

- User모델이랑 프로필 모델이랑 2개를 가져와야 하는 경우가 생긴다.

1. models.py에 Profile 클래스 추가.

class Profile(models.Model):
    user = models.OneToOneField(settings.AUTH_USER_MODEL) # 현 계정의 사용자를 가져올 수 있음.
    nickname = models.CharField(max_length=64)
    profile_photo = models.ImageField(blank=True)                 # 값을 채워넣지 않아도 되는 속성.

2. admin.py에서 사용자정보와 프로필 정보가 같이 보여지도록 작업

- 아래의 코드를 삽입해줌.

from django.contrib.auth.admin import UserAdmin
from django.contrib.auth.models import User
from .models import Profile

class ProfileInline(admin.StackedInline): # 로또 프로젝트에서 썼던 방식으로 유저 밑에 프로필 을 붙여서 보여주려고 이를 상속받음
    model = Profile
    con_delete = False                    # 프로필을 아예 없앨 수 없게 하는 속성(한번 만들면 지우는건 이상하니까)


class CustomUserAdmin(UserAdmin):
    inlines = (ProfileInline,)

# 기존의 User의 등록을 취소했다가 User와 ProfileInline을 붙임.
admin.site.unregister(User)
admin.site.register(User, CustomUserAdmin)

3. "python manage.py makemigrations", "python manage.py migrate" 이후 admin페이지 접속.

- 사용자 정보를 확인하는 창에서 맨아래 프로필이 추가된것을 볼 수 있음.

4. views.py에 ProfileView클래스 생성

- 아래의 코드를 views.py에 추가해줌.

- 이와 상관없이 CreateUserView, RegisteredView 클래스는 allauth를 사용하게 되면서 사용하지 않으므로 주석처리해줌.

from django.contrib.auth.models import User
from django.views.generic.detail import DetailView

class ProfileView(DetailView):
    context_object_name = 'profile_user' # model로 지정해준 User모델에 대한 객체와 로그인한 사용자랑 명칭이 겹쳐버리기 때문에 이를 지정해줌.
    model = User
    template_name = 'kilogram/profile.html'

5. kilogram/urls.py에 url추가

url(r'^profile/(?P<pk>[0-9]+)/$', login_required(views.ProfileView.as_view()), name='profile'),

6. kilogram/static/kilogram/style.css에 둥글게 보여주는 코드 추가

- 프로필 동글게 보여주는 속성임.

.round {
    border-radius: 50%;
}

7. kilogram/static/kilogram/images폴더 생성 후 기본 프로필사진을 그 아래에 넣어줌.

8. kilogram/templates/kilogram/profile.html생성

{% extends 'account/base.html' %}
{% block content %}

{% load staticfiles %}

<div class="row">
    <div class="col-xs-6 col-md-3">
        {% if profile_user.profile.profile_photo %}
        <img class="round" src="{{profile_user.profile.profile_photo.url}}" width="200"> <br>
        {% else %}
        <img class="round" src="{% static 'kilogram/images/default_profile.png' %}" width="200"> <br>
        {% endif %}
    </div>

    <div class="col-xs-6 col-md-3">
        {% if profile_user.profile.nickname %}
        <h2>{{profile_user.profile.nickname}}</h2>
        {% endif %}
        {% if user == profile_user %}   <!-- 로그인한 사용자와 profile_user(프로필 소유자)가 일치할 때만 프로필 편집이 가능하도록 함 -->
        <a href="#">
            <button type="button" class="btn btn-default">프로필 편집</button></a></h2>
        {% endif %}
        <h3> username: {{profile_user.username}} <br>
            {% if profile_user.first_name is not None %}
            name: {{profile_user.first_name}} {{profile_user.last_name}} <br>
            {% endif %}
        </h3>
    </div>
</div>

{% endblock %}

9. kilogram/templates/account/base.html 수정

- 로그인 사용자 아이디를 클릭하면 프로필 설정 화면으로 가도록 url지정

- 예전에 비워뒀던 링크 부분을 채워준다.

<li><a href="{% url 'kilogram:profile' user.pk %}"> <span class="glyphicon glyphicon-heart"></span> {{user.username}}</a></li>

10. 결과확인

- pk 값 1을 가지는 admin 계정으로 로그인 했을 때 profile/1에서 프로필은 편집할 수 있으나

- admin계정으로 profile/2에 접속하면 프로필을 편집할 수 없는 상태.

- 오른쪽 위의 아이디 버튼을 누르면 프로필 성정 페이지로 이동함.