今回は「[Django初心者]DjangoでTodoリストを作成する」の第3回として、Todoの詳細画面を作成していきます。
前回までは、データを追加して一覧表示ができていることを確認しました。
まだそこまでやれていない人はぜひ前回までをみてください！
GitHubはこちらです。
https://github.com/cardene777/todo
GitHubの使い方がわからない方はこちらの記事を参考にしてください！
https://www.cardenema.com/?p=687
それでは早速やっていきましょう！
構成の確認
まずは前回までのプロジェクトの構成の確認からしていきましょう。
├── config
│ ├── __init__.py
│ ├── asgi.py
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
├── db.sqlite3
├── manage.py
├── templates
│ └── base.html
└── todo
├── __init__.py
├── admin.py
├── apps.py
├── migrations
│ ├── 0001_initial.py
│ ├── __init__.py
├── models.py
├── static
│ └── todo
│ └── css
│ └── list.css
├── templates
│ └── todo
│ └── list.html
├── tests.py
├── urls.py
└── views.py
このような構成になっているでしょうか？
構成が違う方は前回までの記事を確認してください。
urls.pyに追記
まずは「urls.py」にパスを通すことからしていきましょう。
todoアプリケーションの方の「urls.py」に追記してください。
from django.urls import path
from .views import TodoList, TodoDetail
urlpatterns = [
path('list/', TodoList.as_view(), name='list'),
path('detail/<int:pk>/', TodoDetail.as_view(), name='detail'),
]ほとんど前回追加したことと同じですね。
<int: pk>とはなんでしょう？
これはデータを詳細表示するときに、データに割り振られた番号で判断するため、その番号が入る部分です。
っと言葉で言われてもなかなか理解するのが難しいですよね。
では、実際にデータに番号が割り振られているのか確認してみましょう。
まずは先ほど追記した部分をコメントアウトしましょう。
コメントアウトすると、そこは実行する時に認識されなくなります。
from django.urls import path
from .views import TodoList#, TodoDetail
urlpatterns = [
path('list/', TodoList.as_view(), name='list'),
# path('detail/<int:pk>/', TodoDetail.as_view(), name='detail'),
]ターミナルで起動コマンドを実行してください。
python manage.py runserver起動できたら、次のURLにアクセスして管理画面に移動してください。
ログイン画面が出てきた人は、前回作成した名前とパスワードを入れましょう。
ちなみに記事通りに実行した人は、どちらも「test」で通るはずです。
無事ログインできると、このような画面が表示されます。
「Todoリスト」をクリックしてください。
そうするとこのような画面が表示されます。
Todoリストの中からどれか１つ好きなものをクリックしてください。
そうするとこのような画面になります。
しかし、今回確認したいのはここではなく、URLの部分です。
こんなURLになっているはずです。
このURLの「todomodel/1」に注目してください。
これがデータベースに登録されているデータの番号です。
この番号を指定すると、先ほどの「urls.py」の「<int:pk>」に渡され、目的の詳細ページを表示することができます。
では、「urls.py」を元に戻し、次に進みましょう。
from django.urls import path
from .views import TodoList, TodoDetail
urlpatterns = [
path('list/', TodoList.as_view(), name='list'),
path('detail/<int:pk>/', TodoDetail.as_view(), name='detail'),
]vies.pyに追記
次に「views.py」に追記していきましょう。
ここのながれは前回の一覧表示と同じです。
「views.py」に次のように追記してください。
from django.views import generic
from .models import TodoModel
class TodoList(generic.ListView):
template_name = 'todo/list.html'
model = TodoModel
class TodoDetail(generic.DetailView):
template_name = 'todo/detail.html'
model = TodoModel前回と違う点のみ説明します。
class TodoDetail(generic.DetailView):この部分の「DetailView」は、詳細ページを表示することに特化したものです。
Djangoにはこのように、用途に応じて便利に使える機能がたくさんあるので、段々と覚えていきましょう！
detail.htmlの編集
すでに「models.py」は作成されているので、HTMLファイルを作成していきましょう。
「terminal」で次のコマンドを実行してください。
cd todo/templates/todo/
touch detail.html
cd ../../../
# 1行で実行
cd todo/templates/todo/ && touch detail.html && cd ../../../ 構成を確認しましょう。
├── config
│ ├── __init__.py
│ ├── asgi.py
│ ├── settings.py
│ ├── urls.py
│ └── wsgi.py
├── db.sqlite3
├── manage.py
├── templates
│ └── base.html
└── todo
├── __init__.py
├── admin.py
├── apps.py
├── migrations
│ ├── 0001_initial.py
│ ├── __init__.py
├── models.py
├── static
│ └── todo
│ └── css
│ └── list.css
├── templates
│ └── todo
│ ├── detail.html
│ └── list.html
├── tests.py
├── urls.py
└── views.py
「detail.html」が作成されたのが確認できますね。
では早速「detail.html」を編集していきましょう。
次のように追記してください。
{% extends 'base.html' %}
{% block content %}
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">詳細</h1>
<p class="lead">詳細が見れます</p>
</div>
</div>
<div class="container">
<h1>{{ object.title }}</h1>
<p>{{ object.content }}</p>
<p>{{ object.deadline }}</p>
</div>
<div class="container">
<p class="btn-content"><a href="{% url 'list' %}" class="btn btn-info" tabindex="-1" role="button" aria-disabled="true">一覧に戻る</a></p>
</div>
{% endblock content %}初めて見る部分を１つずつ説明していきます。
<div class="container">
<h1>{{ object.title }}</h1>
<p>{{ object.content }}</p>
<p>{{ object.deadline }}</p>
</div>この「object」とは、指定したデータの内容が入ったもの、思ってもらったらイメージしやすいと思います。
デフォルトではこのような指定方法ですが、名前を任意で決めることもできます。（それについては今後説明します）
<div class="container">
<p class="btn-content"><a href="{% url 'list' %}" class="btn btn-info" tabindex="-1" role="button" aria-disabled="true">一覧に戻る</a></p>
</div>この部分では、一覧表示しているページに戻るボタンを設定しています。
「href="{% url 'list' %}"」という指定方法は見慣れないと思いますが、この「'list'」という名前と一致するものを「urls.py」の中から探し、そのパスを呼び出すというながれです。
「urls.py」を確認してみましょう。
from django.urls import path
from .views import TodoList, TodoDetail
urlpatterns = [
path('list/', TodoList.as_view(), name='list'),
path('detail/<int:pk>/', TodoDetail.as_view(), name='detail'),
]色が薄くなっている部分の後ろの方を見てください。
「name='list'」となっているのが確認できます。
「detail.html」ではこの部分を指定しているのです。
list.htmlに追記
前の章では、詳細画面から一覧表示画面に移動するリンクを作成しましたが、一覧表示画面から詳細画面に移動するリンクも作成しないと、そもそも詳細画面を表示することができません。
そのため、「list.html」にそのリンク追記していきたいと思います。
「list.html」に次のように追記してください。
{% extends 'base.html' %}
{% load static %}
{% block header %}
<link rel="stylesheet" href="{% static 'todo/css/list.css' %}">
{% endblock header %}
{% block content %}
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">TodoList</h1>
<p class="lead">やることを記入しましょう</p>
</div>
</div>
<div class="container ">
{% for list in object_list %}
<div class="one_box">
<h1>{{ list.title }}</h1>
<h4>{{ list.deadline }}</h4>
<div class="btns">
<p class="btn-content"><a href="{% url 'detail' list.pk %}" class="btn btn-primary "tabindex="-1" role="button" aria-disabled="true">詳細</a></p>
</div>
</div>
<hr>
{% endfor %}
</div>
{% endblock content %}「href="{% url 'detail' list.pk %}"」
先ほどと違ってこの部分がちょっと長いですね。
この「list.pk」は先ほど説明していた、「<int:pk>」の部分に当たります。
どの詳細画面を表示するのかをDjango側に教えてあげています。
詳細画面を表示
では詳細画面を実際に表示してみましょう。
こちらにアクセスしてください。
こんな感じの画面が表示されているはずです。
では、「詳細」と書かれているボタンをどれか押してみてください。
こんな画面が表示されていれば完璧です。
しっかり目的の詳細が記述されていますね。
今度は逆に一覧表示画面に戻ってみましょう。
「一覧に戻る」を押してみてください。
ちゃんと一覧表示画面に戻っているでしょうか？
今回はここまでです！
最後に
今回は「DjnagoでTodoリストを作成する」の第３回として、Todoの詳細画面を作成して、表示するところまでやってきました。
続き...
質問などがあればコメントするか、下のアイコンからTwitterのDMまで送ってください！
それでは！
