↓↓クリックして頂けると励みになります。
【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>
ページを確認します。
http://127.0.0.1:8000/courier/jobs/available/
↓↓クリックして頂けると励みになります。
【35 | 配達人登録モデル】 << 【ホーム】 >> 【37 | Googleマップ表示】