前へ

次へ

演習 - 汎用ビューを実装してデータを表示する

完了

犬用の新しい詳細ページを作成します。 ここでは、汎用ビュー DetailView を使用して、作成する必要があるコードの量を合理化します。

重要

このモジュールの前半で、設定を完了していることを前提としています。

DogDetail ビューの作成

まず、詳細ビュー クラスを作成します。

1. Visual Studio Code で dog_shelters/views.py を開きます。

2. # TODO: Import generic views という行の下に、次のコードを追加して、汎用ビュー モジュールをインポートします。

   # TODO: Import generic views
   from django.views import generic
   

3. 次のコードを views.py の下部に追加して、DogDetail の汎用ビューを作成し、モデル、テンプレート、およびコンテキスト オブジェクトを設定します。

   class DogDetailView(generic.DetailView):
       model = models.Dog
       template_name = 'dog_detail.html'
       context_object_name = 'dog'
   

詳細ビューを登録する

ビューを作成したら、パスを登録できます。

1. dog_shelters/urls.py を開きます。

2. # TODO: Register detail view という行の下に、次のコードを追加して DogDetailView のパスを登録します。

   # TODO: Register detail view
   path('dog/<int:pk>', views.DogDetailView.as_view(), name='dog_detail'),
   

   重要

   行末の末尾のコンマを覚えておいてください。

HTML テンプレートを作成する

ここで、犬の詳細を表示する HTML テンプレートを作成します。 オブジェクト名は、フォームの作成時に設定した dog になります。

1. Visual Studio Code 内で、dog_detail.html という名前の dog_shelters/templates 内に新しいファイルを作成します。

2. 次のコードを dog_detail.html に追加して、犬の詳細を表示するテンプレートを作成します。

   {% extends 'base.html' %}
   
   {% block title %}
   {{ dog.name }}
   {% endblock %}
   
   {% block content %}
   <h2>{{ dog.name }}</h2>
   <div>About {{ dog.name }} - {{ dog.description }}</div>
   {% endblock %}
   

シェルターの詳細ページを更新してリンクを含める

パスを登録し、テンプレートを作成したら、シェルターの詳細テンプレートを更新して、犬の詳細ページへのリンクを含めることができます。

1. dog_shelters/templates/shelter_detail.html を開きます。

2. {# TODO: Add link to dogs #} という行の下に、次のコードを追加して、各犬の詳細ビューへのリンクを作成します。

   {# TODO: Add link to dogs #}
   <a href="{% url 'dog_detail' dog.id %}">
       {{dog.name}}
   </a>
   
   

ページをテストする

すべてが作成されたので、ページの動作を見てみましょう。

1. [ファイル]>[すべて保存] を選択して、すべてのファイルを保存します。

2. ブラウザーで http://localhost:8000 に移動します。

3. シェルターの一覧から、[Contoso] を選択します。

4. 犬の一覧から、[Roscoe] を選択します。

   詳細ページが表示されます。

   

これで、Django の汎用ビュー システムを使用して、ビューを作成できました。

続行