自作ページを表示するまでの手順 – PART2

PART1に引き続き、作成したDjangoプロジェクトDjangoアプリケーションへ記述を加え、自らが作成したページWebブラウザ上で表示するまでの手順を記載します。カスタマイズすることを前提としているため、必要最低限の手順ではありませんが、その分さまざまな場面で活用することができます。
ここでは目標として次のことを行えるようにします。

  • イベントトップページhttp://localhost:8000/event/へアクセスした時に独自のページを表示する
  • イベント一覧ページhttp://localhost:8000/event/table/へアクセスした時に独自のページを表示する

urls.pyの編集

まずはDjangoプロジェクトを作成した時に生成されたC:¥python¥sports¥sports配下のurls.pyを開きます。

  • c:
    • python
      • sports
        • event
          • migrations
            • __init__.py
          • __init__.py
          • admin.py
          • apps.py
          • models.py
          • tests.py
          • views.py
        • sports
          • __init__.py
          • settings.py
          • urls.py
          • wsgi.py
        • templates
          • sports
            • index.html
        • manage.py

このファイルに対し、以下のように追加を行います。
※ここではPART1で編集した後のurls.pyに対して追記を行うものとします。

"""sports URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/2.0/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, include

from sports import views

urlpatterns = [
    path('', views.index, name='index'),
    path('event/', include('event.urls')),
    path('admin/', admin.site.urls),
]

pathの第一引数にはURLパターンを、第二引数にはインクルードを行う別のurls.pyを指定します。インクルードを行わず、indexのような形ですべてのURL定義をここで定義しても構いませんが、多くのURL定義が入り混じると管理が煩雑になりがちです。そのため、各Djangoアプリケーション(ここではeventアプリケーション)はそれぞれ独自のURL定義(urls.py)を持つものとし、それをインクルードする事によって管理する事とします。eventのurls.pyはまだ存在していないのでこれから作成します。

urls.pyの編集(新規作成)

まずはeventアプリケーションへurls.pyを作成します。

  • c:
    • python
      • sports
        • event
          • migrations
            • __init__.py
          • __init__.py
          • admin.py
          • apps.py
          • models.py
          • tests.py
          • views.py
          • urls.py
        • sports
          • __init__.py
          • settings.py
          • urls.py
          • wsgi.py
        • templates
          • sports
            • index.html
        • manage.py

このファイルを以下のような形で保存してください。

from django.urls import path

from event import views

app_name = 'event'
urlpatterns = [
    path('', views.index, name='index'),
    path('table/', views.table, name='table'),
]

pathの第一引数にはURLパターンを、第二引数にはURLパターンに対するビューを、name引数にはこのURLパスに対する名称を指定します。このurls.pyは最上位のURL定義(最初に編集したurls.py)からpath(‘event/’, include(‘event.urls’)),のような形でインクルードされています。そのため、先頭に「event/」が付与され実際にアクセスするURLはそれぞれevent/event/table/となり、トップページのpath(”, views.index, name=’index’),とeventアプリケーションのpath(”, views.index, name=’index’),は明確に区別されます。ここで定義したeventアプリケーションに対応するビューはまだ存在していないのでこれから作成します。
※urls.py内へ記述した「app_name」は別項で説明します。

views.pyの編集

次はC:¥python¥sports¥eventviews.pyを編集します。

  • c:
    • python
      • sports
        • event
          • migrations
            • __init__.py
          • __init__.py
          • admin.py
          • apps.py
          • models.py
          • tests.py
          • views.py
          • urls.py
        • sports
          • __init__.py
          • settings.py
          • urls.py
          • wsgi.py
        • templates
          • sports
            • index.html
        • manage.py

以下のように記述してください。関数名はindexで、引数を1つ受け取ります。戻り値としてrenderの第一引数にそのままrequestを、第二引数にテンプレートファイル名を、第三引数にコンテキスト(ここでは空のディクショナリ)を指定します。それぞれの関数の違いは、使用するテンプレートファイルが異なるだけですが、そのテンプレートファイル自体はまだ存在していないのでこれから作成します。

from django.shortcuts import render

def index(request):
    return render(request, 'event/index.html', {})


def table(request):
    return render(request, 'event/table.html', {})

テンプレートファイルの追加

次はC:¥python¥sports下へテンプレートファイルを配置するディレクトリ、templatesを作成し、その下にindex.htmltable.htmlを作成します(間にeventディレクトリを挟みます、またPART1ですでにtemplatesディレクトリを作成している場合は適宜読み替えてください)。

  • c:
    • python
      • sports
        • event
          • migrations
            • __init__.py
          • __init__.py
          • admin.py
          • apps.py
          • models.py
          • tests.py
          • views.py
        • sports
          • __init__.py
          • settings.py
          • urls.py
          • wsgi.py
          • views.py
        • templates
          • sports
            • index.html
          • event
            • index.html
            • table.html
        • manage.py

テンプレートファイルへ記述する内容はHTMLであれば何でも構いません。ここでは例として次のような内容で作成を行います。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>イベントトップページ</title>
</head>
<body>
  イベントトップメニュー
  <ul>
    <li><a href="{% url 'event:table' %}">イベント一覧</a></li>
    <li>リンクB</li>
    <li>リンクC</li>
  </ul>
</body>
</html>

※「イベント一覧」のリンク先URLの指定は別項で説明します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>イベント一覧ページ</title>
</head>
<body>
  イベント一覧
  <ul>
    <li>イベントA</li>
    <li>イベントB</li>
    <li>イベントC</li>
    <li>イベントD</li>
    <li>イベントE</li>
  </ul>
</body>
</html>

Djangoプロジェクトディレクトリ配下(C:¥python¥sports)へテンプレートファイルディレクトリ(templates)およびテンプレートファイル(index.html、table.html)を作成したため、このままではDjangoプロジェクト上で認識されません。最後にそのための設定を追加します(設定方法はPART1を参照してください、すでに設定済みである場合は不要です)。

Webブラウザで表示確認

すべての設定ができましたので、Webブラウザで表示を確認してみましょう。コマンドプロンプトでmanage.pyがあるディレクトリへ移動し、テストサーバーを起動します。

python manage.py runserver

待ち受け状態となったことを確認したら、Webブラウザで下記URLを入力してページを開きます。例のような画面が表示されれば問題ありません。

http://127.0.0.1:8000/event/

http://127.0.0.1:8000/event/table/

イベントトップページ( http://127.0.0.1:8000/event/ )のイベント一覧リンクよりイベント一覧ページ( http://127.0.0.1:8000/event/table/ )へ遷移する事ができます。