［Django］プロフィールを表示する！

f:id:jyouj:20181124164719j:plain

　今回は、ユーザーの詳しいプロフィールページを表示させようと思います。

　前回：jyouj.hatenablog.com
　参考：GitHub - benigls/instagram: Instagram clone made with Django framework.

プロフィールページをDetailViewで作る！

　users/helpers.pyを作成して、以下を記述。

from __future__ import absolute_import

from django.contrib.sessions.models import Session

from .models import User

def get_current_user(request=None):
    if not request:
        return None

    session_key = request.session.session_key
    session = Session.objects.get(session_key=session_key).get_decoded()
    uid = session.get('_auth_user_id')

    return User.objects.get(id=uid)

　あと、models.pyに以下を追記。

@python_2_unicode_compatible
class User(AbstractBaseUser):
       # 省略
      
    def get_absolute_url(self):
        return reverse('users:profile', kwargs={'username': self.username})

　次にviews.pyを編集する。

from django.shortcuts import render, redirect
from django.contrib.auth import authenticate, login, logout
from django.contrib.auth.mixins import LoginRequiredMixin
from django.views.generic import CreateView, TemplateView, DetailView
from django.urls import reverse_lazy

from .models import User
from .helpers import get_current_user

class ProfileDetailView(LoginRequiredMixin, DetailView):
    model = User
    template_name = 'users/profile.html'

    slug_field = 'username'
    slug_url_kwarg = 'username'

    def get_context_data(self, **kwargs):
        context = super(ProfileDetailView, self).get_context_data(**kwargs)
        username = self.kwargs['username']
        context['username'] = username
        context['user'] = get_current_user(self.request)

        return context

　urls.pyの記述も忘れずに。

urlpatterns = [
    path('signup', views.SignUpView.as_view(), name='signup'),
    path('login', views.LoginView.as_view(), name='login'),
    path('', views.IndexView.as_view(), name='index'),
    path('logout', views.LogoutView.as_view(), name='logout'),
    path('<slug:username>', views.ProfileDetailView.as_view(), name='profile'),
]

　これによって、〜.com/jyouj/のようなURLを入力することでプロフィールページを見ることができるようになります。

　最後に、templates/users/profile.htmlを作成しましょう。

{% block body %}
<h1>@{{ username }}</h1>
<h3>{{ object.name }}</h3>

{% if user.username == username %}
<h2>私のアカウントです</h2>
{% else %}
<h2>他のユーザーのアカウントです</h2>
{% endif %}
{% endblock %}

　自分のページと別のユーザーのページを区別できるようにしました。
　基盤となるページも作ろうと思います。

base.htmlの作成

　まず、settings.pyにstaticファイルの場所を記述します。

STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.normpath(os.path.join(BASE_DIR, 'static')),]

　templates/base.htmlを作成して、編集します。

{% load staticfiles %}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>サイト名</title>
  <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
  <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
</head>

<body>

  {% include "navi.html" %}

  <div class="container">
     {% block body %}{% endblock %}
  </div>

  <script src="{% static 'js/jquery.min.js' %}"></script>
  <script src="{% static 'js/bootstrap.min.js' %}"></script>
  {% block js %}{% endblock js %}
</body>
</html>

　templates/navi.htmlを作り、ナビバーはそこに記述します。

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">サイト名</a>
    </div>
    <div>
    <ul class="nav navbar-nav">
      {% if user.is_authenticated %}
      <li><a href="#">１</a></li>
      <li><a href="{{ user.get_absolute_url }}">アカウント</a></li>
      <li><a href="#">３</a></li>
      <li><a href="#">４</a></li>
      <li><a href="{% url 'users:logout' %}">ログアウト</a></li>
      {% else %}
      <li><a href="{% url 'users:login' %}">ログイン</a></li>
      <li><a href="{% url 'users:signup' %}">新規登録</a></li>
      {% endif %}
    </ul>
    </div>
  </div>
</nav>