[Djnago初心者]DjnagoでTodoリストを作成する③ (省略Ver)

今回は「[Django初心者]DjangoでTodoリストを作成する」の第3回として、Todoの詳細画面を作成していきます。

前回までは、データを追加して一覧表示ができていることを確認しました。

まだそこまでやれていない人はぜひ前回までをみてください！

[[Djnago初心者]DjnagoでTodoリストを作成する① (省略Ver)](https://qiita.com/cardene/items/b15b0172fc446259fd29)

[[Django初心者]DjangoでTodoリストを作成する②(省略Ver)](https://qiita.com/cardene/items/274d25a6605a3e310db2)

また、この記事は手順の確認のため解説を省いています。
細かい説明しているバージョンもあるので、初学者のかたは下記を見てください。

[[Django初心者]DjangoでTodoリストを作成する③](https://www.cardenema.com/?p=113)

GitHubはこちらです。

[https://github.com/cardene777](https://github.com/cardene777)

GitHubの使い方がわからない方はこちらを参考にしてください！

[GitHubは難しくないよ！](https://www.cardenema.com/?p=687)

それでは早速やっていきましょう！

# 構成の確認
まずは前回までの構成の確認からしていきましょう。

```terminal
├── 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
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に追記
次のように追記してください。

```view.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
```
# detail.htmlの編集
ターミナルで次のようなコマンドを実行してください。

```terminal
cd todo/templates/todo/
touch detail.html
cd ../../../  
```

再度構成を確認します。

```terminal
├── 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 %}
```
# 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 %}
```

# 詳細画面の表示
次のURLにアクセスしてください。
[http://127.0.0.1:8000/list/](http://127.0.0.1:8000/list/)

一覧表示画面が表示されていると思うので、「詳細」というボタンを押してください。
詳細情報がしっかり表示されているはずです。

# 最後に

今回は「[Django初心者]DjangoでTodoリストを作成する」の第3回として、Todoの詳細画面を作成してきました。

続き...

[[Django初心者]DjangoでTodoリストを作成する④(省略Ver)](https://qiita.com/cardene/items/a6aaee7c2a8f5f8e4251)

質問などがあればコメントするか、[Twitter](https://twitter.com/home)のDMまで送ってください！
それでは！