django user profile FBV

url 설정

config/urls.py

urlpatterns = [
    path("users", include("users.urls", namespace="users")),
]

users/urls.py

from django.urls import path
from . import views

app_name = "users"

urlpatterns = [path("<int:pk>/profile/", views.userDetail, name="profile")]

{% url %}

  url template tag를 이용해서 user profile page로 갈 수 있게 한다. {% url 'users:profile' user.pk %}는 /users/<int:pk>/profile과 같다. 여기서 pk는 primary key 값으로 변수 값이다. urls.py에서 <int:pk>를 설정하였기 때문에 반드시 이에 해당하는 user.pk를 넘겨줘야 한다.

FBV(Function Based View)

users/views.py

  User Profile page에서는 사용자 정보와 사용자가 hosting한 rooms를 보여준다. 그래서 context로 user_obj와 rooms를 넘겨준다. 여기서 이름을 user가 아닌 user_obj로 한 이유는 어디서나 사용될 수 있는 context processor인 user와 중복되지 않기 위해서다. template를 보면 바로 확인할 수 있다.

from django.shortcuts import render, redirect, reverse
from django.core.paginator import Paginator
from . import models

@login_required
def userDetail(request, pk):
    user_obj = models.User.objects.get_or_none(pk=pk)
    if user_obj is None:
        messages.error(request, "User does not exist")
        return redirect(reverse("core:home"))

    page = int(request.GET.get("page", 1))
    page_sector = ((page - 1) // 5) * 5
    qs = user_obj.rooms.all()
    paginator = Paginator(qs, 12, orphans=6)
    rooms = paginator.get_page(page)

    return render(
        request,
        "pages/users/userDetail.html",
        {"user_obj": user_obj, "page_sector": page_sector, "rooms": rooms},
    )

templates

pages/users/userDetail.html

{% extends 'base.html' %}


{% block page_title %}
  {{user_obj.first_name}}'s Profile
{% endblock page_title %}

{% block search-bar %}
<div></div>
{% endblock search-bar %}

{% block content %}
  <div class="grid grid-cols-3 items-center px-16 mb-20">
    <div></div>
    <div class="profile w-full">
      <div class="profile__info">
        <div class="mb-4">
          {% include 'mixins/avatar.html' with user=user_obj %}
        </div>
        <div class="info">
          <h4>First name</h4>
          <span>{{user_obj.first_name|capfirst}}</span>
        </div>
        
        {% if user_obj.last_name %}
        <div class="info">
          <h4>Last name</h4>
          <span>{{user_obj.last_name|capfirst}}</span>
        </div>
        {% endif %}
          
        {% if user_obj.email %}
        <div class="info">
          <h4>Email</h4>
          <span>{{user_obj.email}}</span>
        </div>        
        {% endif %}
          
      </div>
      <div class="profile__info">
        {% if user_obj.gender %}
        <div class="info">
          <h4>Gender</h4>
          <span>{{user_obj.gender}}</span>
        </div>
        {% endif %}
          
        {% if user_obj.language %}
        <div class="info">
          <h4>Language</h4>
          <span>{{user_obj.language}}</span>
        </div>
        {% endif %}
          
        {% if user_obj.currency %}
        <div class="info">
          <h4>Currency</h4>
          <span>{{user_obj.currency}}</span>
        </div>
        {% endif %}
          
        {% if user_obj.birthdate %}
        <div class="info">
          <h4>Birthdate</h4>
          <span>{{user_obj.birthdate}}</span>          
        </div>
        {% endif %}

        {% if user_obj.superhost %}
        <div class="info">
          <h4>Superhost</h4>
        </div>
        {% endif %}
        
        {% if user_obj.bio %}
          <div class="info flex-col mt-3">
            <h4>Bio</h4>
            <div class="text-justify line-clamp-6 w-full">&emsp;{{user_obj.bio}}</div>
          </div>
        {% endif %}
      </div>

      {% if user_obj.pk == user.pk %}
        <button class="button my-6 w-3/4">
          <a href="#">Edit Profile</a>
        </button>
      {% endif %}
    </div>
  </div>

  <div class="flex flex-col items-center justify-items-center">
    <div class="w-10/12">
        {% include 'mixins/room_card.html' with rooms=rooms %}
        <div class="flex justify-center mt-20 itmes-center">
        {% include 'mixins/page_number.html' with page=rooms %}
      </div>
    </div>
  </div>
{% endblock content %}

mixins/avatar.html

  user.first_name|first|upper를 보자 (|)는 template filter라고 한다. |first는 첫 글자만 따오고, |upper는 앞에서 받은 input 값을 대문자로 변환한다. 즉, avatar image가 없을 경우 user의 fist_name의 대문자 첫글자를 따온다.

{% if user.avatar %}
  <img src="{{user.avatar.url}}" class="img" alt="User avatar" title="User Avatar">
{% else %}
  <div class="img">{{user.first_name|first|upper}}</div>
{% endif %}

참고 자료

• 노마드 코더의 Airbnb 클론 강의
• template filter

소스 코드

github.com/zpskek/airbnb-clone-v3/commit/852e9bc43422e2723c1095618bb6388d107f5037