データの受け取り

データの受け取り

Djangoでは、他のWebフレームワーク同様、HTMLを動的に生成することが出来ます。

ここではViewsからデータをHTMLに渡して表示する方法を学習します。
まずは下準備をしていきます。

templatesフォルダの指定

まずはsample_project/settings.pyを編集していきます。

sample_project/settings.py

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['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',
            ],
        },
    },
]

'DIRS': ['templates']とすることでプロジェクト直下のtemplatesフォルダを指定することが出来ます。

もちろん'DIRS': []のままでも開発を進めることは出来ます。
デフォルトのままだと今回の例で言うとsample_app直下のtemplatesフォルダを指定します。

Djangoを使った開発ではdjango-admin startappを使ってappを増やしていきます。
そうすると各app直下のtemplatesフォルダの中にHTMLファイルを作っていくことになります。

それに対してプロジェクト直下を利用する場合はそこにすべて入れることが出来るのでとても便利です。

ターミナル

mkdir templates
cd templates
touch base.html
mkdir sample_app
cd sample_app
touch index.html

Bootstrapの導入

まずはbootstrap4の公式サイトからbootstrap4の素材をダウンロードしましょう。

一番上のCompiled CSS and JSの欄でDownloadをクリックします。

ダウンロードが完了したらzipを解凍しましょう。

プロジェクトディレクトリ直下でstaticという名前でフォルダを作成します。
そして、staticフォルダの中でassetsという名前でフォルダを作成しましょう。
そのassetsの中にcssjsというフォルダを作ります。
また今回は使用しませんが、imgというフォルダも作っておきましょう。

ターミナル

mkdir static
cd static
mkdir assets
cd assets

mkdir css
mkdir js
mkdir img

次に、先ほどダウンロードしたフォルダから
cssは cssフォルダ内のbootstrap.css
jsはjsフォルダ内のbootstrap.min.js
sample_appの static/assets内の
cssはcssフォルダの中に
jsはjsフォルダの中にペーストしましょう。

base.htmlの作成

base.htmlにどのhtmlファイルでも使う共通の内容を記述し、それを継承することで効率的に開発を進めることが出来ます。

base.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample App</title>
    <link href="{% static 'assets/css/bootstrap.css' %}" rel="stylesheet" />
</head>
<body>
{% block main %}{% endblock %}
</body>
<script src="{% static 'assets/js/bootstrap.min.js' %}" type="text/javascript"></script>
</html>

base.htmlを継承したhtmlファイルには{% block main %}{% endblock %}の中身をそれぞれ書けばよくなります。

views.pyにデータを渡すコードを書く

views.py

from django.shortcuts import render

def index(request):
    context = {'greeting': 'Hello world'}
    return render(request, 'sample_app/index.html', context)

これで{{ greeting }}とindex.htmlファイルに書くとHello worldと表示されます。

urls.pyでURL作成

urls.pyにどのURLでindex.htmlを表示されるかを書いていきます。

sample_app/urls.py

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index'),
]

index.htmlでデータを受け取る

sample_app/index.html

{% extends 'base.html' %}
{% load static %}

{% block main %}
<h1 class="text-primary">{{ greeting }}</h1>
{% endblock %}

出来ているか見てみましょう。

ターミナル

python manage.py runserver

ブラウザでhttp://127.0.0.1:8000/にアクセスするとHello worldと表示されているはずです。
これでデータの受け渡しの一番基礎の部分を学習出来ました。