Django

Django 簡単なアプリを作って基礎を覚える④ ListViewを作成

今回から、いよいよ画面を作っていくことになります😃

いよいよって感じですね🙂

Django ListViewを作って一覧表を表示しよう!

管理画面で、登録したタスクを一覧表で表示させていましたが、実際のシステムでは、管理画面で操作してもらうより画面を構築していきます。

templates フォルダを指定する

急になんだ!? って、思うかもしれません。

templatesフォルダとは、webブラウザで表示させるためのhtmlファイルを保存する場所です。

これは、とても便利で、ここにhtmlファイルが全部あることがわかるだけでもとても探しやすいです。

templatesフォルダを作成

manage.pyファイルがある階層に、新たにtemplatesという名称のフォルダを作成しましょう❕

settings.py にtemplatesフォルダの場所を教えてあげる

templatesフォルダがどこにあるかは、フォルダを作っただけでは、Djangoはわかっていません。

settingsファイルにテンプレートはここにあるよ❕っていうのを教えてあげましょう

settingsファイルの上にある

import os #追記

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) #修正

まずは、ベースとなるディレクトリがどこかをDjnagoに教えてあげてるって感じです。

次は、templatesフォルダの場所を教えてあげます。

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR, 'templates'], #修正
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

settingsファイルの真ん中ぐらいにある、TEMPLATESがあるので、DIRSに、[BASE_DIR, 'templates'] と追記することで、先ほど作ったtemplatesフォルダを認識できるようになります。

データベースの場所を指定している場所も修正します。

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), #修正
    }
}

listを表示するためのviews

準備ができたので、実際命令をうけて実施する内容をviews.pyファイルに書いていきましょう😁

まずは、taskの中にあるviews.pyファイルを開きます。

from django.shortcuts import render
from django.http import HttpResponse
from django.views.generic import ListView #追記
from .models import TaskModel #追記

def helloworld(request):
    hello_display = HttpResponse("Hello World")
    return hello_display

class TaskList(ListView): #追記
    template_name = "list.html"
    model = TaskModel

3行目の追記は、Djangoのモジュールをインポートしています。4行目は、自分と同じ階層にあるmodels.pyファイルのTaskModelをインポートしてね!ってことです。

これで、Taskにはタイトルがあったりメモがあったりすることを、Djangoが認識できるようになります。

class TaskListを追記します。class の場合は、名称の最初を大文字ですることは、暗黙のルールとして定着しているので、classでは、最初の文字は大文字にするようにしましょう😆

ポイント

  • class の名称は、大文字ではじめること

template_nameはリストとしていますが、まだ作成していないので作成していきます。

modle = TaskModel で、どのテーブルをリストとして表示させるかを教えてあげていることになります。

list.htmlファイルを作成

ブラウザで表示するためのhtmlファイルを作成していきましょう❕

まずは、先ほど作成したtemplatesフォルダの中に、list.html というファイルを作成しましょう。

list.html

次は、listファイルに、下記の内容を記載しましょう❕

{% for task in object_list %}
    <p>{{ task.title }}</p>
    <p>{{ task.user }}</p>
{% endfor %}

最初のobject_listは、Djangoのgeneric_viewを使うと、指定しない限り、htmlファイルには、object_listとして渡されます。

for は、繰り返し処理で、object_listから、順番に task という変数(箱)に入れて、taskのもっている、タイトル、メモ、担当者、開始予定日、終了予定日を表示して。

で、繰り返し処理が全部終わったら終わり。

と、いう内容になっています。

では、最後に支持を出すurls.pyに、この処理ができるようになったことを教えてあげましょう❕

urls.py に設定

from django.urls import path, include
from .views import helloworld, TaskList

urlpatterns = [
    path('hello/', helloworld),
    path('list/', TaskList.as_view(), name='list'),
]

2行目に、TaskListを読み込みを追加しています。

urlpatternsには、listという、アドレスなら、TaskListを実行するように指示しています。

簡単な流れ

  • urlからurls.pyがどの命令を出すか判断して、viewsに実行の指示を出す
  • viewsは、modelsからデータを取り出し、テンプレートのhtmlにデータをはめる
  • ユーザーが見ている画面に表示される

この流れがイメージできるようになると、めっちゃ理解が進みます。

実際画面を開いて確認してみよう!

ここで画面が起動したら、両手をあげて喜びましょう😆

プログラミングのコツは、ひとつ何かをクリアするたびに喜びを感じることです❕けっして、苦行ではありません。そうすると、続かなくなっちゃいますからね

http://127.0.0.1:8000/task/list/

ちゃんと、表示されました😊いやーすごいですねー

これで少しシステム作ってる感じが出てきましたね🤣

今回は、ここまでにします。

次回は、登録しているデータの詳細を確認するための画面を作成と、リストの見た目をよくして、リストから詳細画面へ遷移できるようにしましょう🤗

Djangoの詳細画面作成
Django 簡単なアプリを作って基礎を覚える⑤ DetailViewを作成

前回は登録している情報をリストとして表示するところまでやりました。 今回は、詳細画面を作ってリストから遷移できるようにしようと思います。 もくじ1 詳細画面を作成する1.1 viewsファイル2 ur ...

続きを見る

-Django

© 2021 ごろう@縁紡ぐ