Django3.2 | クラウドソーシングアプリの構築 | 36 | 配達人ページ - 学生向けプログラミング入門

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

【35 | 配達人登録モデル】 << 【ホーム】 >> 【37 | Googleマップ表示】

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

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

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"),
    path('payment_method/', customer_views.payment_method_page, name="payment_method"),
    path('create_job/', customer_views.create_job_page, name="create_job"),

    path('jobs/current/', customer_views.current_jobs_page, name="current_jobs"),
    path('jobs/archived/', customer_views.archived_jobs_page, name="archived_jobs"),
    path('jobs/<job_id>/', customer_views.job_page, name="job"),
]

courier_urlpatters = [
    path('', courier_views.home, name="home"),
    path('jobs/available/', courier_views.available_jobs_page, name="available_jobs"),
]


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/courier/views.py」ファイルを編集します。

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

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

@login_required(login_url="/sign-in/?next=/courier/")
def home(request):
    return redirect(reverse('courier:available_jobs'))

@login_required(login_url="/sign-in/?next=/courier/")
def available_jobs_page(request):
    return render(request, 'courier/available_jobs.html')

「core/templates」フォルダに「courier」フォルダを新規作成します。
作成した「core/templates/courier」フォルダに「base.html」ファイルを新規作成します。

新規作成　【Desktop/crowdsource/core/templates/courier/base.html】

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <title>配達人 | クラウドソーシングアプリ</title>
        {% load bootstrap4 %}
        {% bootstrap_css %}
        {% bootstrap_javascript jquery='full' %}

        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css">

        {% block head %}{% endblock %}
    </head>
    <body>

        {% block content %}{% endblock %}
          
    </body>
</html>

先ほど作成した「core/templates/courier」フォルダに「available_jobs.html」ファイルを新規作成します。

新規作成　【Desktop/crowdsource/core/templates/courier/available_jobs.html】

{% extends 'courier/base.html' %}

{% block content %}
利用可能な配達依頼
{% endblock %}

ブラウザを確認します。
http://127.0.0.1:8000/courier/jobs/available/

「core/templates/courier/available_jobs.html」ファイルに記述を追加します。

記述追加　【Desktop/crowdsource/core/templates/courier/available_jobs.html】6行目

{% extends 'courier/base.html' %}

{% block content %}
利用可能な配達依頼

{% include 'courier/bottom_tabs.html' %}

{% endblock %}

「core/templates/courier」フォルダに「bottom_tabs.html」ファイルを新規作成します。

新規作成　【Desktop/crowdsource/core/templates/courier/bottom_tabs.html】

<style>
    .bottom-tabs {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 60px;
      display: flex;
      background-color: white;
      box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
      text-align: center;
    }
  
    .bottom-tabs>a {
      flex: 1;
      padding: 5px;
      color: #BFBFBF;
      text-decoration: none;
    }
  
    .bottom-tabs>a>span {
      font-size: 13px;
      font-weight: bold;
      display: block;
    }
  
    .bottom-tabs>a>i {
      font-size: 20px;
    }
  
    .bottom-tabs>a.active {
      color: #8216ce;
    }
  </style>
  
  <div class="bottom-tabs d-flex">
    <a href="#" class="active">
      <i class="fas fa-map-marked-alt"></i>
      <span>利用可能な配達依頼</span>
    </a>
    <a href="#">
      <i class="fas fa-archive"></i>
      <span>引き受けた配達依頼</span>
    </a>
    <a href="#">
      <i class="fas fa-user"></i>
      <span>プロフィール</span>
    </a>
  </div>