データの受け取り
データの受け取り
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の中にcssとjsというフォルダを作ります。
また今回は使用しませんが、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と表示されているはずです。
これでデータの受け渡しの一番基礎の部分を学習出来ました。
Just Python フリープラン
ジャスパイなら教材は全て無料！