見出し画像

Django4の説明9：一覧ページの作成

green_blue_sky

0．前提

今回は会員が投稿した写真などをトップページに表示する方法です。

  1. トップページに投稿写真の全データを表示する

  2. トップページのテンプレートの編集をする

  3. ページネーションテンプレートの作成をする

  4. トップページにページネーションを組み込みます

  5. 1ページ当たりの表示数の設定をする

  6. medeiaフォルダのURLパターンの設定

  7. 表示の確認をする

1．トップページに投稿写真の全データの表示

1.1．ビューの編集

/code/photo/views.py
以下はソースコードの概要です。
　今回の対象は　2、7、8、9です。

  1. django.shortcutsからrenderをインポートしています。これは、テンプレートを使用してHTTPレスポンスを返すための関数です。

  2. django.views.genericからTemplateView、ListView、CreateViewをそれぞれインポートしています。これらは、汎用的なビュークラスであり、特定の処理を簡単に実装するのに役立ちます。

  3. django.urlsからreverse_lazyをインポートしています。これは、URLパターンを逆引き解決するための関数で、遅延評価（lazy evaluation）を提供します。

  4. formsモジュールからPhotoPostFormをインポートしています。これは、フォームを定義するためのクラスです。

  5. django.utils.decoratorsからmethod_decoratorをインポートしています。これは、ビューにデコレータを適用するためのヘルパー関数です。

  6. django.contrib.auth.decoratorsからlogin_requiredをインポートしています。これは、ビューに対してユーザーのログインを要求するデコレータです。

  7. .modelsからPhotoPostモデルをインポートしています。これは、PhotoPostという名前のモデル（データベースのテーブルに対応）を表します。

  8. IndexViewというクラスを定義しています。これはListViewを継承しており、ListViewはデータベースからオブジェクトのリストを取得して表示するビューを提供します。

  9. IndexViewクラス内で、template_nameはindex.htmlという名前のテンプレートを指定しています。querysetはPhotoPostモデルからデータを取得し、posted_atフィールドを降順で並べ替えています。

このコードは、トップページを表示するためのビューを定義しており、index.htmlというテンプレートを使用してPhotoPostモデルのデータを表示することが想定されています。また、ログインが必要な場合も考慮されています（@login_requiredデコレータの利用）。

2．トップページのテンプレートの編集

2.1．photos_list.htmlの編集

/code/photo/templates/photos_list.html
以下はコードの主な構造と機能です：
2以降の一覧表示をする方法が重要です

  1. Bootstrapのクラスを使用したレイアウト構築:

    • div要素にalbumクラスがあり、背景色がbg-lightに設定されています。

    • Bootstrapのグリッドシステムが適用されたcontainerクラスが含まれています。

  2. アルバムのレコード表示:

    • object_listに含まれるレコードを1つずつrecordとして取り出します（{% for record in object_list %}...{% endfor %}）。

    • 各レコードはBootstrapのカード（card）を使用して表示されます。

  3. 各レコードの表示内容:

    • 各レコードには、record.image1.urlを使って画像を表示しています。

    • タイトルはrecord.titleから取得して表示されます。

    • カテゴリはrecord.category.titleから取得して表示されます。

    • ユーザー名はrecord.user.usernameから取得して表示されます。

  4. ボタン要素:

    • 各レコードには、「View」という内容のボタンがあります。このボタンはbtn-outline-secondaryクラスを持つBootstrapのボタンです。

    • もう一つのボタンは、レコードのカテゴリを表示します。

  5. 最終的なレイアウト:

    • グリッドシステムを使用して、1行に1つから3つのレコードを配置するようにしています。画面サイズに応じて列の数が変化します（row-cols-1, row-cols-sm-2, row-cols-md-3）。

要するに、このコードはDjangoテンプレートを使用して、アルバムのようなコンテンツをデザインし、Bootstrapを利用してレスポンシブなデザインを実現しています。データはDjangoのモデルから取得され、それぞれのフィールド値がHTMLに反映されています。

3．ページネーションテンプレートの作成

3.1．作成

/code/photo/templates/pagination.html
以下は、このソースコードの機能に関する説明です：

  1. <ul class="pagination" style="justify-content:center">: ページネーションを表示するためのリスト（ul要素）。スタイルとして中央揃えが適用されています。

  2. {% if page_obj.has_previous %}から{% endif %}: 直前のページが存在する場合に前のページへのリンク（「<<」と表示されるアイコン）を設定します。page_obj.has_previousは、直前にページがあるかどうかを示す条件です。

  3. {% for num in page_obj.paginator.page_range %}から{% endfor %}: ページ番号のアイコンを表示するためのループです。page_obj.paginator.page_rangeは、利用可能なすべてのページ番号を保持しています。

  4. {% if page_obj.number == num %}から{% else %}: 各ページ番号に対応するアイコンを表示するための条件分岐です。page_obj.numberは現在のページ番号を示し、これがnum（ループ内の各ページ番号）と一致するかどうかを確認します。

  5. {% if page_obj.has_next %}から{% endif %}: 次のページが存在する場合に、次のページへのリンク（「>>」と表示されるアイコン）を設定します。page_obj.has_nextは、次のページがあるかどうかを示す条件です。

このコードは、ページネーションを処理し、現在のページの周囲に対応するページ番号のリンクを表示するためのHTMLを生成します。ユーザーが前後のページに移動できるように、ページネーションのインターフェースを提供します。

4．トップページにページネーションを組み込みます

4.1．組み込み

/code/photo/templates/index.htmlの修正

/code/photo/templates/index.htmlの修正画面

5．1ページ当たりの表示数の設定をする

/code/photo/views.py 編集画面

6．medeiaフォルダのURLパターンの設定

/code/dproj/urls.py 編集画面

これをしないと、画像がリンク切れになってしまいます

7．表示の確認をする

表示画面の確認

まとめ

次回はカテゴリ単位で表示する画面になります。
繰り返しになりますが、Djnagoに合わせた方法で開発をすれば簡易に作れます。またセキュリティに関しても有意義になります。

この記事が気に入ったらサポートをしてみませんか？