LighsailのCentOSインスタンスでDjangoのトップページを作成する

このページが完了していることが前提です。

プロジェクトにmainAppアプリを設定する

前提の状態では、Djangoのプロジェクトにトップページがありません。トップページの設定をプログラミングする。まずは、トップページのアプリケーションの作成をしてから、URLデスパッチャとViewの作成をする。名称はmainAppとします。

// ${workDirPath}/django/にmainAppというディレクトリが作成される。パーミッションに注目。
$ docker exec ${work_id}_django python manage.py startapp mainApp
$ ls -al ${workDirPath}/django/ ${workDirPath}/django/mainApp/

// 最初の所有者はrootになっています。この場合は、変更しないとmainAppのファイルを変更できません。
$ sudo chown -R $USER:$USER ${workDirPath}/django/mainApp/
$ ls -l ${workDirPath}/django/ ${workDirPath}/django/mainApp/

// 以下の2行を修正する
vim ${workDirPath}/django/config/settings.py
// Macでvimの場合、fn + ↓を使うと移動が早くて便利。 
// ~~~(↓該当部分にこのように追加する)~~~
INSTALLED_APPS = (
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'mainApp',            ← この行を追加
)

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates'),],   ← この行を修正
        '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',
            ],
        },
    },
]

// ~~~(↑該当部分にこのように追加する)~~~


// プロジェクト全体のURLディスパッチャの設定をする
$ vim ${workDirPath}/django/config/urls.py
(iで編集を開始する。)
from django.contrib import admin
from django.urls import path, include   ← この行を修正する

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('mainApp.urls')),  ← この行を追加する
    〜〜その他のディレクトリの設定(省略)〜〜
]
(escを押して、:wqを押して保存して閉じる)

アプリ側のurlディスパッチャとビューの設定

// アプリケーション個別のURLディスパッチャの設定をする
// アプリケーション個別のURLディスパッチャは、手動で新規作成することになる。
$ vim ${workDirPath}/django/mainApp/urls.py
(iで編集を開始する。)
from django.urls import path
from . import views

app_name="main_app"
urlpatterns = [
    path('', views.index, name='index'),
]
(escを押して、:wqを押して保存して閉じる)


// MTVにおけるViewの変更
$ vim ${workDirPath}/django/mainApp/views.py
(iで編集を開始する。)
from django.shortcuts import render

# Create your views here.
from django.http.response import HttpResponse

def index(request):
    return render(request, 'index.html')
(escを押して、:wqを押して保存して閉じる)

テンプレートの作成

// templateのディレクトリの作成
$ mkdir -p ${workDirPath}/django/templates/

// MTVにおけるTの作成(index.htmlの作成)
$ vim ${workDirPath}/django/templates/index.html
(iで編集を開始する。)
hello_world!!
(escを押して、:wqを押して保存して閉じる)

ブラウザの表示を確認する。hello_world!!の表示がされていれば成功です。

親テンプレートを使う

// 
$ mkdir -p ${workDirPath}/django/templates/common


// MTVにおけるTの作成(index.htmlの作成)
// 親テンプレートをbase.htmlとして、子テンプレートをindex.htmlとする
// urlデスパッチャで呼び出されるのは、子テンプレートであり、
// 親テンプレートのbase.htmlは子テンプレートの継承元として呼び出される
// 親テンプレートの作成base.htmlの作成
// すべてのページで利用されるhtmlの記述をbase.htmlに書く
$ vim ${workDirPath}/django/templates/common/base.html
(iで編集を開始する。)
<!DOCTYPE html>
<html>
<head lang="ja">
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
{% block body %}
{% endblock %}
</body>
</html>
(escを押して、:wqを押して保存して閉じる)


// 子テンプレートを作成する(上で作ったbase.htmlを使う)
$ vim ${workDirPath}/django/templates/index.html
(iで編集を開始する。)
{% extends "common/base.html" %}

{% block body %}
トップページです。
{% endblock %}
(escを押して、:wqを押して保存して閉じる)

ブラウザでアクセスして、トップページです。と表示されていることを確認して下さい。
{% %} は、テンプレートタグといいます。

親テンプレートの強化

// まずは、親テンプレートの強化
$ vim ${workDirPath}/django/templates/common/base.html
(iで編集を開始する。)
<!DOCTYPE html>
<html>
<head lang="ja">
  <meta charset="UTF-8">
  <title>{% block title %}{% endblock %}</title>
</head>
<body>
  <div class="left">
    いいいい
  </div>
  <div class="main">
    {% block body %}
    {% endblock %}
  </div>
</body>
</html>
(escを押して、:wqを押して保存して閉じる)


// index.htmlの強化
$ vim ${workDirPath}/django/templates/index.html
(iで編集を開始する。)
{% extends "common/base.html" %}

{% block title %}
ああああ
{% endblock %}

{% block body %}
トップページです。
{% endblock %}
(escを押して、:wqを押して保存して閉じる)