1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

PythonでWebアプリ開発04(DjangoでHello World!を表示した後にやること〜HTMLテンプレートに変数をセットする)

Last updated at Posted at 2019-10-14

前の記事: PythonでWebアプリ開発(DjangoでHello World!)

Djangoで無事Hello Worldを表示できた。
HttpResponseで直接文字列をreturnする一番簡単と思われる方法でDjangoのミニマムな動作確認まで完了できた。

アプリ追加をプロジェクトに認識させるためにはプロジェクトディレクトリ配下のプロジェクト名と同じディレクトリ配下のsettings.py内INSTALLED_APPSにアプリ名を追加し、プロジェクト全体のurls.pyにURLのパス名と実際のファイル、関数へのパスを記してやる必要があるところまで確認した。

次にやることといえば、HTMLテンプレートを準備して、指定したURLをコールした場合そのHTMLを返すことである。
さらに次の一歩はHTMLのテンプレートの中に変数を埋め込んで、その変数にプログラムから値を設定してやることである。

下記をゴールとして設定する。

  • HTMLのテンプレートを作成する
  • テンプレートに変数を埋め込み、その変数に現在の日時が表示されるようにする
  • http://localhost:8000/mytemplate にアクセスしたときにテンプレートHTMLが表示され、現在の日時が表示される

####テンプレート格納ディレクトリをsettings.pyに追記する
settings.pyの中に"TEMPLATES"から始まる行がある段落がありその中に'DIRS'という項目がある。
ここを以下のように修正する。

オリジナル:

プロジェクトroot/プロジェクト名/settings.py
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        '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',
            ],
        },
    },
]

変更後:

プロジェクトルート/プロジェクト名/settings.py
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'mytemplates01'),],    #←ここでーす!!
        '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',
            ],
        },
    },
]

プロジェクトルート配下にmytemplates01という名前でディレクトリを作成し、テンプレートHTMLファイルを作成する。

$ mkdir mytemplates01
$ cd mytemplates01/
$ vi myindex.html

myindex.html内記述内容

プロジェクトルート/mytemplates01/myindex.html
<!DOCTYPE html>
<html>
<head lang="ja">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
Hello My Template!
</body>
</html>

すでに存在しているview.pyは下記の通り編集。

プロジェクトルート/アプリ名/views.py
from django.shortcuts import render
from django.http import HttpResponse
          
# Create your views here.
def myFunk(req):
    return HttpResponse('My Hello, World !!')
         
# 下記2行を追加!!
def myCallTemplate(req):
    return render (req, 'myindex.html')

URLへのパスを通すためにプロジェクトに属するurls.pyを編集する。

プロジェクトルート/プロジェクト名/urls.py
import myHelloWorld.views
urlpatterns = [
    path('admin/', admin.site.urls),
    path('aaa/', myHelloWorld.views.myFunk),
    path('mytemplate/', myHelloWorld.views.myCallTemplate), #←これを追記!!
]

"mytemplate/"はURLを呼び出すときのパス(http://127.0.0.1:8000/mytemplate/)、myHelloWorldはアプリ名、myCallTemplateはviews.pyに追加した関数名。

ここまでのチェックリスト:

  • settings.pyにテンプレートディレクトリの場所を追記
  • テンプレートディレクトリを作成して配下にHTMLファイルを格納する
  • views.pyに関数を追加し、HTMLを呼び出してやる
  • urls.pyにviews.pyにURLの階層、呼び出す関数名のパスを記述

下記URLを叩いてが表示されればテンプレートHTMLの呼び出しは成功。

さて、ここからもう一歩踏み込んで作業を進める必要がある。
テンプレートHTLMに変数を埋め込み、views.pyからコールするときに値を渡すことだ。
viewsを以下の通り編集する。

view.py
from django.shortcuts import render
from django.http import HttpResponse
import datetime    #←追加!!
         
# Create your views here.
def myFunk(req):
    return HttpResponse('My Hello, World !!')

# 下記2行を追加!!
def myCallTemplate(req):
    myParam = {
        'mydatetime': datetime.datetime.now(),
        'message': 'こんにちは!テックエンジェルです!!', 
    }
    return render (req, 'myindex.html', myParam) 

datetime.now()を追加するだけだとエラーが発生するのでdatetimeのimportも追加してやる必要がある。
この段階で下記URLを叩いて元のHTMLテンプレートが問題なく表示されれば問題なく作業が進んでいる。
ここから更にテンプレートHTMLファイルの中に変数を埋め込んでやる必要がある。

<!DOCTYPE html>
<html>
<head lang="ja">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
Hello My Template!<br>
今日は{{ mydatetime }}です。<br>
ついでに追加したメッセージも表示: {{ message }}
</body>
</html>

再度URLをコールして準備したHTMLテンプレートに日時と指定したメッセージが正しくセットされて表示されることを確認する。

下記のような文言表示を確認できれば成功!

Hello My Template!
今日はOct. 14, 2019, 10:21 a.m.です。
ついでに追加したメッセージも表示: こんにちは!テックエンジェルです!!
1
1
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
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?