Django(ジャンゴ) | 11 | モデルからデータを抽出して表示 - 学生向けプログラミング入門

10 | ビューの編集　＜＜　[ホーム]　＞＞　12 | 写真詳細ページ作成

ビューに写真モデルの読み込みを定義します。
from .models import Picture

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

記述追加　【testapp/views.py】２行目

from django.shortcuts import render
from .models import Picture

# 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', {})

次にモデルのデータを変数に格納します。
picture_data = Picture.objects.all()

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

記述追加　【testapp/views.py】24行目

from django.shortcuts import render
from .models import Picture

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

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

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

    #     },
    # ]
    picture_data = Picture.objects.all()

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

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

表示を確認します。

フィルターをかける方法を書いておきます。
picture_data = Picture.objects.filter(star__gt=2)
この記述で星が２より大きいものが表示されます。

さらに検索条件を追加してみます。
picture_data = Picture.objects.filter(star__gt=2, date__gt=2015)
この記述で、星が２より大きいかつ、年が2015より大きいものが表示されます。

BootstrapのCard表示させます。

「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>

<div class="row mt-5">
  {% for m in picture %}

  <div class="col-sm">
    <div class="card" style="width: 18rem">
      <img src="https://{{m.file_category}}" class="card-img-top" />
      <div class="card-body">
        <h5 class="card-title">{{ m.name }}</h5>
        {% if m.star > 3 %}
        <span class="badge bg-danger">激アツ</span>
        {% else %}
        <span class="badge bg-warning text-dark">まあまあ</span>
        {% endif %}

        <p class="card-text">{{ m.description }}</p>
        <a href="#" class="btn btn-primary">写真</a>
      </div>
    </div>
  </div>

  {% endfor %}
</div>

{% endblock %}