静的ページの作成 - Django

Django プロジェクトの中にアプリケーションを作成

プロジェクトの中にアプリケーションを作成するには次のようにします。試しに hello というアプリケーションを作成しいます。

python manage.py startapp hello

上記のコマンドを実行すると以下のようなフォルダ構成になります。

  • pythonApp
    • env
      • django_app
        • django_app
          • __pycache__
          • __init__.py
          • asgi.py
          • settings.py
          • urls.py
          • wsgi.py
        • hello
          • migrations
            • ...
          • __init__.py
          • admin.py
          • apps.py
          • models.py
          • tests.py
          • views.py
        • db.sqlite3
        • manage.py
      • include
      • Lib
      • Scripts
      • pyenv.cfg

アプリケーションの登録

作成したアプリケーションを「 settings.py 」ファイルの INSTALLED_APPS に設定します。

pythonApp/env/django_app/django_app/settings.py

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

テンプレートを置くディレクトリの作成

テンプレートを置くディレクトリは、「 hello 」アプリケーションの中に、「 templates/hello 」というフォルダを作成しその中にファイルを作成します。

  • pythonApp
    • env
      • django_app
        • django_app
          • ...
        • hello
          • migrations
            • ...
            • templates
              • hello
                • index.html
          • __init__.py
          • admin.py
          • apps.py
          • models.py
          • tests.py
          • views.py
        • db.sqlite3
        • manage.py
      • ...

「 pythonApp/env/djnago_app/hello/templates/hello/index.html 」ファイルを次のように編集します。

pythonApp/env/djnago_app/hello/templates/hello/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>hello/index</h1>
</body>
</html>

hello アプリケーションに urls.py を作成

アプリのアドレスはそれぞれのアプリ内で管理するようにするため、hello ディレクトリの中に「 urls.py 」を作成します。

pythonApp/env/djnago_app/hello/urls.py

from django.urls import path
from . import views

urlpatterns = [
  path('', views.index, name='index')
]

「 pythonApp/env/djnago_app/django_app/urls.py 」が「 pythonApp/env/djnago_app/hello/urls.py 」を読み込めるようにします。

pythonApp/env/djnago_app/django_app/urls.py

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

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

ルーティングの設定

「 hello/views.py 」にルーティングの設定をします。

pythonApp/env/djnago_app/hello/views.py

from django.shortcuts import render
from django.http import HttpResponse

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

sub.html を追加する

新たに「 sub.html 」ファイルを作成して表示してみます。

以下のようにファイルを編集します。

pythonApp/env/djnago_app/hello/templates/hello/sub.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>hello/sub</h1>
</body>
</html>

pythonApp/env/djnago_app/hello/urls.py

from django.urls import path
from . import views

urlpatterns = [
  path('', views.index, name='index'),
  path('sub', views.sub, name='sub'),
]

pythonApp/env/djnago_app/hello/views.py

from django.shortcuts import render
from django.http import HttpResponse

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

def sub(request):
  return render(request, 'hello/sub.html')

ファイルを編集した後、サーバーを再起動し、ブラウザで「 http://localhost:8000/hello/sub 」を開き表示されれば成功です。

値の受け渡し

テンプレートの値を渡すには、次のように変更します。

pythonApp/env/djnago_app/hello/views.py

from django.shortcuts import render
from django.http import HttpResponse

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

def sub(request):
  params = {
    'title': 'Hello/Sub',
  }
  return render(request, 'hello/sub.html', params)

pythonApp/env/djnago_app/hello/templates/hello/sub.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>{{ title }}</h1>
</body>
</html>

サイト内リンクの貼り方

サイト内を移動するリンクを指定するには次のようにします。

pythonApp/env/djnago_app/hello/templates/hello/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>hello/index</h1>
  <p><a href="{% url 'sub' %}">hello/sub</a></p>
</body>
</html>

pythonApp/env/djnago_app/hello/templates/hello/sub.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>{{ title }}</h1>
  <p><a href="{% url 'index' %}">index</a></p>
</body>
</html>