This article is a Private article. Only a writer and users who know the URL can access it.
Please change open range to public in publish setting if you want to share this article with other users.

More than 3 years have passed since last update.

[Day 14] DetailViewを使った詳細表示画面の作成

Last updated at Posted at 2021-01-19

January 19, 2021
←前回:Day 13 ListViewを使ったリスト表示画面の作成

「Djangoを学びたい!」とのことでありましたら[Day 1]Djangoの開発環境から読むことをおすすめします。

はじめに

前回に引き続きクラスベースビューの使い方を覚えていきましょう。
DetailViewは名前の通り詳細情報を表示するビューです。
今回は前回リスト表示したトピックの詳細を表示するページを作っていきましょう。

トピック詳細ページを作る

まずはtemplates/thread/detail_topic.htmlを作成します。

templates/base/detail_topic.html

{% extends 'base/base.html' %}
{% block title %}トピック作成 - {{ block.super }}{% endblock %}
{% block content %}
<div class="ui grid stackable">
    <div class="eleven wide column">
        <div class="ui breadcrumb">
            <a href="{% url 'base:top' %}" class="section">TOP</a>
            <i class="right angle icon divider"></i>
            <a class="section">{{topic.category.name}}</a>
            <i class="right angle icon divider"></i>
            <a class="active section">{{topic.title}}</a>
        </div>
        <div class="ui segment">
            <div class="content">
                <div class="header"><h3>{{topic.title}}</h3></div>
                <p>{{topic.user_name}} - {{topic.created}}</p>
                <div class="ui secondary segment">
                    <p><pre>{{topic.message}}</pre></p>
                </div>
            </div>
        </div>
    </div>
    {% include 'base/sidebar.html' %}
</div>
{% endblock %}

次にthread/views.pyに追記しましょう。

thread/views.py
from django.shortcuts import render, redirect
from django.views.generic import CreateView, FormView, DetailView

from . models import Topic


class TopicDetailView(DetailView):
    template_name = 'thread/detail_topic.html'
    model = Topic
    context_object_name = 'topic'

DetailViewはtemplate_nameとmodelに値を渡してあげると、URLで渡されたpk(primary key)に対応したオブジェクトを呼び出してテンプレートに渡してくれます。
その際、例えばTopicオブジェクトならばtopicという名前で渡されます。
もしテンプレートに渡す名前を指定したい場合はcontext_object_nameで指定します。
今回の場合はcontext_object_nameがなくても問題なく機能しますが、できるだけcontext_object_nameは書いたほうが良いと思います。

URLを作成する

ページにアクセスするURLを決めましょう。{domain_root}/thread/{トピックID}というURLでアクセス出来るようにしましょう。

thread/urls.pyを以下のようにします。

thread/urls.py

from django.urls import path

from . import views
app_name = 'thread'

urlpatterns = [
    path('<int:pk>/', views.TopicDetailView.as_view(), name='topic'),
]

ここでint:pkがポイントです。URLからpkを渡すことでDetailViewがpkを元にオブジェクトを取得してくれます。

ブラウザで確認してみましょう。localhost:8080/thread/1にアクセスしてます。番号はトピックのIDであればOKです。
スクリーンショット 2021-01-19 9.47.41.png

この後、Django学習帳ではTemplateViewクラスと関数ベースを使った場合の説明に入りますが、作成上は関係ないと思いここでは説明しません。
「読みたい!」方はリンクから飛んでもらえれば大丈夫です。

最後に各トピックへのリンクを修正しておきましょう。

templates/base.top.html
#一部抜粋
<div class="item">
     <div class="content">
         <div class="header">
             <a href="{% url 'thread:topic' pk=topic.id %}"><h4>{{topic.title}}</h4></a>
         </div>
         <div class="meta">
             <span class="name">{{topic.user_name}}</span>
             <span class="date">{{topic.created}}</span>
         </div>
     </div>
 </div>

引数をpk=topic.idで渡しているところがポイントですね。
これでトップページから各トピックにアクセスすることが出来るようになりました。

おわりに

これからは「おわりに」にも少し時間を割こうかな?と考えたりしています。
今までは(今後もですが)「おわりに」に差し掛かっている頃には頭がヘトヘトで、いつも適当になってしまいます。
しかしながら、一応日記ですので、最後はしっかり閉めた方がいい気もしています。
この調子だと、今後も変わらず適当に済ましそう、、、

それではまたまた

←前回:Day 13 管理画面と管理者の作成
→次回:Day 15 簡単なトピック投稿画面の作成

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