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を押して保存して閉じる)

