Django3.2 | クラウドソーシングアプリの構築 | 05 | Bootstrap - 学生向けプログラミング入門

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

【04 | startapp】 << 【ホーム】 >> 【06 | テンプレート】

django-bootstrapをインストールします。

コマンド
pip install django-bootstrap4==2.3.1

「crowdsource/settings.py」ファイルに記述を追加します。

記述追加　【Desktop/crowdsource/crowdsource/settings.py】41行目

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'core',
    'bootstrap4', #追加
]

「templates/home.html」ファイルを編集します。

記述編集　【Desktop/crowdsource/core/templates/home.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' %}
    </head>
    <body>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <a class="navbar-brand" href="/">クラウドソーシングアプリ</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
          
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav">
                <li class="nav-item active">
                  <a class="nav-link" href="/customer/">依頼人</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="/courier/">配達人</a>
                </li>
              </ul>
            </div>
        </nav>
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center mt-5 mb-5">
                    <h2>クラウドソーシングアプリ</h2>
                </div>
    
                <div class="col-lg-6 mb-4">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">依頼人</h5>
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <a href="/customer/" class="btn btn-info">詳細</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 mb-4">    
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">配達人</h5>
                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                            <a href="/courier/" class="btn btn-info">詳細</a>
                        </div>
                    </div>
                </div>                     
            </div>
    
            </div>            
        </div>
          
          
        <footer class="text-center mt-5 mb-5">
            &copy; クラウドソーシングアプリ
        </footer>
    </body>
</html>

パスを追加します。

記述追加　【Desktop/crowdsource/crowdsource/urls.py】23,24行目

"""crowdsource URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/3.2/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from core import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.home),
    path('customer/', views.customer_page),
    path('courier/', views.courier_page),

]

「core/views.py」を編集します。

記述追加　【Desktop/crowdsource/core/views.py】

from django.shortcuts import render

# Create your views here.
def home(request):
    return render(request, 'home.html')

def customer_page(request):
    return render(request, 'home.html')

def courier_page(request):
    return render(request, 'home.html')