前回の 【 Django入門】venv(仮想環境)でプロジェクトを立ち上げて GitHubにpushするまでの続きとして、ビューでHello Worldの表示と、Templateを使って、htmlページを表示するまでのメモです。
バージョンはこちらです
1 2 |
Python 3.7.1 Django 2.1.2 |
前回まででは次のような構成になっています。
1 2 3 4 5 6 7 8 9 10 11 12 |
d-project ├── mysite │ ├── __pycache__ │ ├── __init__.py │ ├── settings.py │ ├── urls.py │ └── wsgi.py ├── myvenv ├── db.sqlite3 ├── gitignore ├── manage.py └── requirements.txt |
Hellow, World!するまで
d-projectに移動して、仮想環境をアクティブにします。 (ここではmyvenv)
1 |
$ source myvenv/bin/activate |
d-project/配下に、myappという名前でアプリを作成します。
1 |
$ python manage.py startapp myapp |
myapp/views.pyにHTTPレスポンスで”Hello, World!”を返すように記述します。
myapp/views.py
1 2 3 4 |
from django.http import HttpResponse def index(request): return HttpResponse("Hello, World!") |
myapp/配下にurls.py を作成して、views.indexと紐づかせて、ルートurlで表示させます。
myapp/urls.py
1 2 3 4 5 6 |
from django.conf.urls import url from . import views urlpatterns = [ url(r'^$', views.index, name='index'), ] |
mysite/urls.pyも以下のように、編集します。
mysite/urls.py
1 2 3 4 5 6 7 |
from django.contrib import admin from django.conf.urls import include, url urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^$', include('myapp.urls')), ] |
INSTALLED_APPSに’myapp’を追加します。
mysite/settings.py
1 2 3 4 5 6 7 8 9 |
INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'myapp', # ここを追加 ] |
これで http://127.0.0.1:8000 にアクセスして、”Hello, World!”が表示されたら成功です!
テンプレートでhtmlページの表示
これまでのファイルにいくつかの記述を追加していきます。myapp/urls.pyにはviews.indexでtemplateを呼ぶようにurlに記述します。
myapp/urls.py
1 2 3 4 5 6 7 |
from django.conf.urls import url from . import views urlpatterns = [ url(r'^$', views.index, name='index'), url(r'^template/$', views.index, name="index"), #ここを追加 ] |
mySite/settings.pyに以下の1行を追加して、templatesのpathを指定します。
mysite/settings.py
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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', ], }, }, ] |
d-project/配下に、templatesディレクトリを作成して、その中に共通して使用する親テンプレートとなるmain.htmlを作成して、以下のように記述します。
「{% block ブロック名 %}」と「{% endblock %}」で囲まれた部分は子テンプレートを継承します。
templates/main.html
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head lang="ja"> <meta charset="UTF-8"> <title></title> </head> <body> {% block body %} {% endblock %} </body> </html> |
templates/index.htmlを以下のように作成します。「{% extends “親テンプレート名” %}」で継承します。
templates/index.html
1 2 3 4 |
{% extends "main.html" %} {% block body %} <p>welcome template!</p> {% endblock %} |
myapp/views.pyの以下の箇所を追記します。
myapp/views.py
1 2 3 4 5 |
from django.http.response import HttpResponse #ここを変更 from django.shortcuts import render #ここを追加 def index(request): return render(request, 'index.html') #ここを変更 |
これで http://127.0.0.1:8000 にアクセスして、”welcome template!”が表示されたら成功です!
以上です!ご覧いただき、ありがとうございました!!☺️