Chapter 06無料公開

プロフィール画面

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

ログイン者のプロフィール情報を記載する画面を作成します。

Web アプリケーションには必須の画面になります。

プロジェクト URL

プロジェクト URL に accounts アプリケーションを指定します。

mysite/urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('app.urls')),
    path('accounts/', include('accounts.urls')),
]

アプリケーション URL

アプリケーション URL にProfileViewを指定します。

逆引き名はprofileとします。

accounts/urls.py

from django.urls import path
from accounts import views

urlpatterns = [
    path('profile/', views.ProfileView.as_view(), name='profile'),
]

ビュー

自由度の高い get 関数を使用して作成します。

profile.html をレンダリングするのみとしておきます。

accounts/views.py

from django.views import View
from django.shortcuts import render, redirect


class ProfileView(View):
    def get(self, request, *args, **kwargs):
        return render(request, 'accounts/profile.html')

テンプレート

プロフィール画面のテンプレートを作成します。

accounts/templates/accounts/profile.html

{% extends "app/base.html" %} {% block content %}

<div class="card card-profile my-5 mx-auto">
  <div class="card-body">
    <h5 class="card-title text-center">プロフィール</h5>
    <table class="profile_table mb-4">
      <tbody>
        <tr>
          <th class="header">名前</th>
          <td class="data">xxx</td>
        </tr>
        <tr>
          <th class="header">メールアドレス</th>
          <td class="data">xxx</td>
        </tr>
        <tr>
          <th class="header">所属</th>
          <td class="data">xxx</td>
        </tr>
        <tr>
          <th class="header">入会日</th>
          <td class="data">xxx</td>
        </tr>
      </tbody>
    </table>
    <div class="button mx-auto">
      <a class="btn btn-lg btn-warning btn-block" href="">編集する</a>
    </div>
  </div>
</div>

{% endblock %}

ナビゲーション

ナビゲーションにプロフィールを追加します。

app/templates/app/base.html

<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="/">ホーム</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="{% url 'profile' %}">プロフィール</a>
        </li>
      </ul>
    </div>
  </nav>
</body>

CSS

CSS でプロフィール画面をレイアウトします。

app/static/css/style.css

.card-profile {
  width: 700px;
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 0.2rem 0.2rem 0 rgba(0, 0, 0, 0.1);
}

.button {
  width: 150px;
}

.btn {
  font-size: 80%;
  border-radius: 5rem;
  font-weight: bold;
}

.profile_table {
  width: 100%;
  border: 1px solid #d1dbeb;
  border-radius: 8px;
  border-collapse: separate;
  overflow: hidden;
}

.profile_table .header {
  width: 200px;
  padding: 16px 24px;
  text-align: left;
  background: #f1f5fa;
}

.profile_table .data {
  padding: 16px 24px;
}

確認

プロフィール画面が表示されます。

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

プロフィール