LoginSignup
0
0

More than 1 year has passed since last update.

@muzudho1(むずでょ)

DjangoとDocker練習O3o1o0 Webページを追加しよう！

Last updated at Posted at 2022-03-14

サンプルを見る

📖 この記事のゴール

目標

Webサイトのページを追加したい

詳細

以下のようなURLで表示させる

http://example.com/practice/vol1.0/hello/ver1.0/
------]----------]---------------------------------------
1      2          3

1. スキーム（HTTPプロトコル）
2. ホストの例
3. パス

情報

この記事は Lesson 1. から順に全部やってこないと ソースが足りず実行できないので注意されたい

What is This is
Lesson 1. 📖 DjangoとDockerでゲーム対局サーバーを作ろう！

この記事のアーキテクチャ:

What is This is
OS Windows10
Container Docker
Editor Visual Studio Code （以下 VSCode と表記）

ディレクトリ構成を抜粋すると 以下のようになっている

    ├── 📂 src1
    │   ├── 📂 data
    │   ├── 📂 project1
    │   │   ├── 📄 __init__.py
    │   │   ├── 📄 asgi.py
    │   │   ├── 📄 settings_secrets.py
    │   │   ├── 📄 settings.py
    │   │   ├── 📄 urls.py
    │   │   └── 📄 wsgi.py
    │   ├── 📂 project2
    │   ├── 🐳 docker-compose-project2.yml
    │   ├── 🐳 docker-compose.yml
    │   ├── 🐳 Dockerfile
    │   ├── 📄 manage.py
    │   └── 📄 requirements.txt
    └── 📄 .gitignore

手順

Step [O3o1o0g1o0] Dockerコンテナの起動

👇 （していなければ） Docker コンテナを起動しておいてほしい

# docker-compose.yml ファイルを置いてあるディレクトリーへ移動してほしい
cd src1

# Docker コンテナ起動
docker-compose up

Step [O3o1o0g2o0] フォルダー作成 - apps1/practice_vol1o0 フォルダー

👇 以下のフォルダーを新規作成してほしい

    └── 📂 src1
        └── 📂 apps1                # 複数のアプリケーションを入れるフォルダー
            └── 📂 practice_vol1o0      # アプリケーション フォルダー
  • apps1 - 末尾の 1 は文字列検索しやすいように付けているだけで特別な意味はない
  • practice_vol1o0 - 末尾の _vol1o0 はレッスンの都合で付けている 1.0巻 という意味だが無くてもいい

Step [O3o1o0g3o0] アプリケーション作成

👇 以下のコマンドを打鍵してほしい

docker-compose run --rm web python manage.py startapp practice_vol1o0 ./apps1/practice_vol1o0 --settings=project1.settings
#                                                     --------------- -----------------------            -----------------
#                                                     1               2                                  3
# 1. 任意のDjangoアプリケーション名
# 2. アプリケーション フォルダーへのパス
# 3. `src1/projectN/settings.py` 設定ファイルに従う
#          -----------------

👇 以下のようなディレクトリー、ファイルが自動生成される

    └── 📂 src1
        └── 📂 apps1
            └── 📂 practice_vol1o0              # アプリケーション名
👉              ├── 📂 migrations
👉              │   └── 📄 __init__.py
👉              ├── 📄 __init__.py
👉              ├── 📄 admin.py
👉              ├── 📄 apps.py
👉              ├── 📄 models.py
👉              ├── 📄 tests.py
👉              └── 📄 views.py

Step [O3o1o0g4o0] 今回使わないファイルの削除

👇 以下のファイルを削除してほしい

    └── 📂 src1
        └── 📂 apps1
            └── 📂 practice_vol1o0              # アプリケーション名
                ├── 📂 migrations
                │   └── 📄 __init__.py
                ├── 📄 __init__.py
                ├── 📄 admin.py
                ├── 📄 apps.py
👉              ├── 📄 models.py
                ├── 📄 tests.py
👉              └── 📄 views.py

Step [O3o1o0g5o0] アプリケーション設定変更 - apps.py

👇 以下のファイルを編集してほしい

    └── 📂 src1
        └── 📂 apps1
            └── 📂 practice_vol1o0              # アプリケーション名
                ├── 📂 migrations
                │   └── 📄 __init__.py
                ├── 📄 __init__.py
                ├── 📄 admin.py
👉              ├── 📄 apps.py
                └── 📄 tests.py

# BOF [O3o1o0g5o0]

from django.apps import AppConfig


class PracticeConfig(AppConfig):
    default_auto_field = 'django.db.models.BigAutoField'
    # * 変更前
    #name = 'practice_v1'
    # * [O3o1o0g5o0] 変更後
    name = 'apps1.practice_vol1o0'
    #       ---------------------
    #       1
    # 1. `src1/apps1/practice_vol1o0/apps.py`
    #          ---------------------

# EOF [O3o1o0g5o0]

Step [O3o1o0g6o0] アプリケーション登録 - settings.py ファイル＜その２＞

👇 以下の既存のファイルを編集してほしい

    └── 📂 src1
        ├── 📂 apps1
        │   └── 📂 practice_vol1o0              # アプリケーション名
        │       ├── 📂 migrations
        │       │   └── 📄 __init__.py
        │       ├── 📄 __init__.py
        │       ├── 📄 admin.py
        │       ├── 📄 apps.py
        │       └── 📄 tests.py
        └── 📂 project1
👉          └── 📄 settings.py

INSTALLED_APPS = [
    # Djangoの標準アプリケーション
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    # vvvv 追加 ここから
    # あなたが追加したアプリケーション
    # [O3o1o0g6o0] 練習1.0巻
    'apps1.practice_vol1o0',
    # ^^^^ 追加 ここまで
]

これで、 src1/apps1/practice_vol1o0 フォルダーは practice_vol1o0 アプリケーションとして認識される。
そのメリットは　今後のレッスンで触れる

Step [O3o1o0g7o0] 画面作成 - hello/ver1o0.html ファイル

👇 以下のファイルを新規作成してほしい

    └── 📂 src1
        ├── 📂 apps1
        │   └── 📂 practice_vol1o0              # アプリケーション
        │       ├── 📂 migrations
        │       │   └── 📄 __init__.py
        │       ├── 📂 templates
        │       │   └── 📂 practice_vol1o0      # アプリケーションと同名
        │       │       └── 📂 hello
👉      │       │           └── 📄 ver1o0.html
        │       ├── 📄 __init__.py
        │       ├── 📄 admin.py
        │       ├── 📄 apps.py
        │       └── 📄 tests.py
        └── 📂 project1
            └── 📄 settings.py
  • templateの下のpractice_vol1o0 - あなたの Django の支配下のすべてのアプリケーションのテンプレート素材は、まるで実行時メモリの中で、あなたの Django の支配下のすべてのアプリケーションからアクセスできる１つの静的フォルダーに再配置されているかのように扱えると考えてほしい。あとは自分の頭で考えてほしい
<!-- BOF [O3o1o0g7o0] -->
<html>
    <head>
        <title>ページ１</title>
    </head>
    <body>
        こんにちわ、世界！
    </body>
</html>
<!-- EOF [O3o1o0g7o0] -->

Step [O3o1o0g8o0] 設定変更 - settings.py ファイル

👇 以下の既存ファイルを編集してほしい

    └── 📂 src1
        ├── 📂 apps1
        │   └── 📂 practice_vol1o0              # アプリケーション
        │       ├── 📂 migrations
        │       │   └── 📄 __init__.py
        │       ├── 📂 templates
        │       │   └── 📂 practice_vol1o0      # アプリケーションと同名
        │       │       └── 📂 hello
        │       │           └── 📄 ver1o0.html
        │       ├── 📄 __init__.py
        │       ├── 📄 admin.py
        │       ├── 📄 apps.py
        │       └── 📄 tests.py
        └── 📂 project1
👉          └── 📄 settings.py

👇 変更するのは TEMPLATES[0]["DIRS"] 変数

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        # * [O3o1o0g8o0] 変更前
        # 'DIRS': [],
        # * 変更後
        'DIRS': [
            # [O3o1o0g8o0] 練習1.0巻
            os.path.join(BASE_DIR, 'apps1/practice_vol1o0/templates'),
            #                       -------------------------------
            #                       10
            # Example: /src1/apps1/practice_vol1o0/templates/practice_vol1o0/hello/ver1o0.html
            #                      ---------------          ----------------
            #                      11                       2
            #                -------------------------------
            #                10
            # 10. テンプレート ディレクトリーへのパス
            # 11. アプリケーション
            # 2. まるで `http://example.com/practice_vol1o0` という素材フォルダーがあるかのように扱われる
            #                             ----------------
        ],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

Step [O3o1o0g9o0] ビュー作成 - hello/ver1o0 フォルダー

👇 以下のファイルを新規作成してほしい

    └── 📂 src1
        ├── 📂 apps1
        │   └── 📂 practice_vol1o0                  # アプリケーション
        │       ├── 📂 migrations
        │       │   └── 📄 __init__.py
        │       ├── 📂 templates
        │       │   └── 📂 practice_vol1o0
        │       │       └── 📂 hello
        │       │           └── 📄 ver1o0.html
        │       ├── 📂 views
        │       │   └── 📂 hello
        │       │       └── 📂 ver1o0
👉      │       │           └── 📄 __init__.py
        │       ├── 📄 __init__.py
        │       ├── 📄 admin.py
        │       ├── 📄 apps.py
        │       └── 📄 tests.py
        └── 📂 project1
            └── 📄 settings.py

# BOF [O3o1o0g9o0]

from django.shortcuts import render


class HelloView():
    """[O3o1o0g9o0] こんにちわページ"""

    @staticmethod
    def render(request):
        """描画"""

        template_path = 'practice_vol1o0/hello/ver1o0.html'
        #                ---------------------------------
        #                1
        # 1. `src1/apps1/practice_vol1o0/templates/practice_vol1o0/hello/ver1o0.html` を取得
        #                                          ---------------------------------

        context = {}
        return render(request, template_path, context)

        # テンプレートを使わず、HTMLをハードコーディングすることもできる
        # return HttpResponse("""Hello, world.<br/>
        #                    <a href="http://example.com/">ホーム</a>""")

        # 以下のような書き方もある
        # from django.http import HttpResponse
        # from django.template import loader
        # template = loader.get_template('this/is/a/local/path/example.html')
        # context = {}
        # HttpResponse(template.render(context, request))

# EOF [O3o1o0g9o0]

Step [O3o1o0gA10o0] サブ ルート作成 - urls_practice.py

👇 以下のファイルを新規作成してほしい

    └── 📂 src1
        ├── 📂 apps1
        │   └── 📂 practice_vol1o0                  # アプリケーション
        │       ├── 📂 migrations
        │       │   └── 📄 __init__.py
        │       ├── 📂 templates
        │       │   └── 📂 practice_vol1o0
        │       │       └── 📂 hello
        │       │           └── 📄 ver1o0.html
        │       ├── 📂 views
        │       │   └── 📂 hello
        │       │       └── 📂 ver1o0
        │       │           └── 📄 __init__.py
        │       ├── 📄 __init__.py
        │       ├── 📄 admin.py
        │       ├── 📄 apps.py
        │       └── 📄 tests.py
        └── 📂 project1
            ├── 📄 settings.py
👉          ├── 📄 urls_practice.py          # 新規作成
❌          └── 📄 urls.py                   # これではない

# BOF [O3o1o0gA10o0]

from django.urls import path

# [O3o1o0gA10o0] 練習1.0巻 こんにちわページ1.0版
from apps1.practice_vol1o0.views.hello.ver1o0 import HelloView
#          ---------------             ------        ---------
#          11                          12            2
#    ----------------------------------------
#    10
# 10, 12. ディレクトリー
# 11. アプリケーション
# 2. `12.` に含まれる __init__.py ファイルにさらに含まれるクラス


urlpatterns = [

    # [O3o1o0gA10o0] 練習1.0巻 こんにちわページ1.0版
    path('practice/vol1.0/hello/ver1.0/',
         # ----------------------------
         # 1
         HelloView.render, name='hello'),
    #    ----------------        -----
    #    2                       3
    # 1. 例えば `http://example.com/practice/vol1.0/hello/ver1.0/` のようなURLのパスの部分
    #                              -----------------------------
    # 2. HelloView クラスの render 静的メソッド
    # 3. HTMLテンプレートの中で {% url 'hello' %} のような形でURLを取得するのに使える
]

# EOF [O3o1o0gA10o0]

Step [O3o1o0gA11o0] 総合ルート編集 - urls.py

👇 以下の既存ファイルを編集してほしい

    └── 📂 src1
        ├── 📂 apps1
        │   └── 📂 practice_vol1o0                  # アプリケーション
        │       ├── 📂 migrations
        │       │   └── 📄 __init__.py
        │       ├── 📂 templates
        │       │   └── 📂 practice_vol1o0
        │       │       └── 📂 hello
        │       │           └── 📄 ver1o0.html
        │       ├── 📂 views
        │       │   └── 📂 hello
        │       │       └── 📂 ver1o0
        │       │           └── 📄 __init__.py
        │       ├── 📄 __init__.py
        │       ├── 📄 admin.py
        │       ├── 📄 apps.py
        │       └── 📄 tests.py
        └── 📂 project1
            ├── 📄 settings.py
❌          ├── 📄 urls_practice.py          # これではない
👉          └── 📄 urls.py                   # こっち

# ...略...


from django.urls import include, path # include を追加

# [O3o1o0gA11o0] 総合ルート編集
from .settings import PROJECT_NAME
#    ]--------        ------------
#    12               3
# 1. 同じディレクトリー
# 2. `src1/projectN/settings.py`
#                   --------
# 3. 変数


# ...略...


urlpatterns = [


    # ...中略...


    # [O3o1o0gA11o0] 練習
    path('', include(f'{PROJECT_NAME}.urls_practice')),
    #    --            ----------------------------
    #    1             2
    # 1. 例えば `http://example.com/` のような URLの直下
    # 2. `src1/projectN/urls_practice.py` の urlpatterns を `1.` にぶら下げる
    #          ----------------------
]

Step [O3o1o0gA12o0] Webページにアクセスする

📖 http://localhost:8000/practice/vol1.0/hello/ver1.0/

次の記事

📖 [o3o2o_1o0] URL設定を自動化しよう！

参考にした記事

👇 より一般的なバージョン番号の付け方は、 セマンティック バージョニング が参考になる

📖 Semantic Versioning

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0