Django(ジャンゴ) | 10 | ビューの編集 - 学生向けプログラミング入門

09 | 管理ダッシュボードのカスタマイズ　＜＜　[ホーム]　＞＞　11 | モデルからデータを抽出して表示

ビューの編集方法を解説していきます。
まずは「testapp/views.py」ファイルを編集します。
picture_data変数に格納した文字列を"picture": picture_dataとすることで、home.htmlに値を返します。

記述追加　【estapp/views.py】

from django.shortcuts import render

# Create your views here.
def home(request):
    picture_data = "テスト写真"
    return render(request, 'home.html', {"picture": picture_data})

# 問い合わせ
def inquiry(request):
    return render(request, 'inquiry.html', {})

続いてhome.htmlを編集します。
「testapp/templates/home.html」ファイルを開いて以下のように編集します。
13行目に{{ picture }}という簡単な記述を追加しただけです。

記述追加　【testapp/templates/home.html】13行目

<!-- レイアウトファイルの読み込み-->
{% extends 'layout.html' %}

<!-- タイトル -->
{% block title %}
<title>テストアプリ</title>
{% endblock %}

<!-- コンテンツ -->
{% block content %}
<h3 class="mt-5 text-center">ホームページ</h3>

<p>{{ picture }}</p>
{% endblock %}

レイアウトファイルを編集して見栄えを良くします。
Bootstrapのコンテナを利用します。

「testapp/templates/layout.html」ファイルを開いて以下のように編集します。
{% block content %}{% endblock %}の記述をコンテナで囲んでいます。

記述追加　【testapp/templates/layout.html】33行目

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- title-->
    {% block title %}{% endblock %}

    <!-- Bootstrap CSS-->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <!-- Bootstrap Bundle with Popper -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>

    <!-- Navber -->
    {% include 'navigation.html' %}
  </body>
  <br />

  <!-- content-->
  <div class="container">{% block content %}{% endblock %}</div>
</html>

表示を確認してみます。

次にpicture_data変数の中にリストを格納して表示させてみます。

「testapp/views.py」ファイルを開いて以下のように編集します。

記述追加　【testapp/views.py】

from django.shortcuts import render

# Create your views here.
def home(request):
    # picture_data = "テスト写真"
    picture_data = [
        {
            "name": "写真０１",
             "date": "2013"

        },
        {
            "name": "写真０２",
             "date": "2014"

        },
        {
            "name": "写真０３",
             "date": "2015"

        },
    ]

    return render(request, 'home.html', {"picture": picture_data})

# 問い合わせ
def inquiry(request):
    return render(request, 'inquiry.html', {})

ループを記述し、繰り返し表示させます。
「testapp/templates/home.html」ファイルを開いて以下のように編集します。

記述追加　【testapp/templates/home.html】

<!-- レイアウトファイルの読み込み-->
{% extends 'layout.html' %}

<!-- タイトル -->
{% block title %}
<title>テストアプリ</title>
{% endblock %}

<!-- コンテンツ -->
{% block content %}
<h3 class="mt-5 text-center">ホームページ</h3>

{% for m in picture %}
<p>{{ m.name }} - {{ m.date }}</p>
{% endfor %} {% endblock %}

表示を確認してみます。