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

今回は「[Django初心者]DjangoでTodoリストを作成する②」の第２回として、Todoの一覧表示まで一気にやっていきたいと思います。

前回はプロイジェクトを立ち上げ、ロケットを飛ばし、settings,pyの編集まで行いました。

まだそこまでやれていない人はぜひ第１回をみてください。

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

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

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

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
```

# アプリケーションの作成
```terminal
# todoディレクトリの配下で以下を実行してください。
python manage.py startapp todo
```
構成確認

```terminal
├── config
│   ├── __init__.py
│   ├── __pycache__
│   │   ├── __init__.cpython-36.pyc
│   │   └── settings.cpython-36.pyc
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── db.sqlite3
├── manage.py
└── todo
    ├── __init__.py
    ├── admin.py
    ├── apps.py
    ├── migrations
    │   └── __init__.py
    ├── models.py
    ├── tests.py
    └── views.py
```

# アプリケーションのつなぎ込み

## settings.pyに追記

```settings.py

# 34行目あたりのINSTALLED_APPSに追記します。
INSTALLED_APPS = [
    'todo.apps.TodoConfig',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]
```
## urls.pyの編集

```urls.py

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('todo/', include('todo.urls')),
]
```

# models.pyの編集
```models.py

from django.db import models
from django.utils import timezone


class TodoModel(models.Model):
    class Meta:
        verbose_name = "Todoリスト"
        verbose_name_plural = 'Todoリスト'

    title = models.CharField(
        verbose_name="タイトル",
        max_length=50,
    )
    content = models.TextField(
        verbose_name="内容"
    )
    deadline = models.DateTimeField(
        verbose_name="期日",
        default=timezone.now
    )

    def __str__(self):
        return self.title
```
# アプリケーションのurls.pyの作成と編集
urls.pyの作成

```terminal
touch urls.py
```
構成の確認

```terminal
├── config
│   ├── __init__.py
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── db.sqlite3
├── manage.py
└── todo
    ├── __init__.py
    ├── admin.py
    ├── apps.py
    ├── migrations
    │   └── __init__.py
    ├── models.py
    ├── tests.py
    ├── urls.py
    └── views.py
```

urls.pyの編集

```todo/urls.py

from django.urls import path
from .views import TodoList

urlpatterns = [
    path('list/', TodoList.as_view(), name='list'),
]
```

# view.pyの編集

```view.py
from django.views import generic
from .models import TodoModel


class TodoList(generic.ListView):
    template_name = 'todo/list.html'
    model = TodoModel
```
# HTMLファイルの作成
base.htmlの作成

```terminal
mkdir templates
cd templates
touch base.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
    │   └── __init__.py
    ├── models.py
    ├── tests.py
    ├── urls.py
    └── views.py
```
list.htmlの作成

```terminal
cd todo
mkdir templates
cd templates
mkdir todo
cd todo
touch list.html
```
構成の確認

```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
    │   └── __init__.py
    ├── models.py
    ├── templates
    │   └── todo
    │       └── list.html
    ├── tests.py
    ├── urls.py
    └── views.py
```

## base.htmlの編集

```base.html

{% load static %}
<html lang="ja">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    {% block header %}
    {% endblock header %}
    <title>Todo App</title>
  </head>
  <body>
    {% block content %}
    {% endblock content %}

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</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>
    <hr>
    {% endfor %}
</div>
{% endblock content %}
```
## CSSファイルの作成と編集

```terminal
cd todo
mkdir static
cd static
mkdir todo
cd todo
mkdir css
cd css
touch list.css
```
構成の確認

```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
    │   └── __init__.py
    ├── models.py
    ├── static
    │   └── todo
    │       └── css
    │           └── list.css
    ├── templates
    │   └── todo
    │       └── list.html
    ├── tests.py
    ├── urls.py
    └── views.py
```
編集

```list.css
.new-btn{
    margin-bottom: 3rem;
    margin-top: 3rem;
}

.btn-content{
    margin: 1rem;
}

.btns{
    display: flex;

}
```
# 管理画面にログイン

```terminal
python manage.py createsuperuser
ユーザー名 (leave blank to use '~'): test
メールアドレス: 何も入力せずにEnterキーを押してください。
Password: test
Password (again): test
このパスワードは ユーザー名 と似すぎています。
このパスワードは短すぎます。最低 8 文字以上必要です。
このパスワードは一般的すぎます。
Bypass password validation and create user anyway? [y/N]: y
Superuser created successfully.
```

admin.pyを編集

```admin.py
from django.contrib import admin
from todo.models import TodoModel

admin.site.register(TodoModel)
```

```terminal
python manage.py makemigrations
python manage.py migrate
python manage.py runserver
```
[http://127.0.0.1:8000/admin/](http://127.0.0.1:8000/admin/)
ここにアクセスして、データを２、３個作成してください。

# 一覧表示の確認
[http://127.0.0.1:8000/list/](http://127.0.0.1:8000/list/)
ここにアクセス。
しっかり表示されていることを確認してください。

# 最後に
今回は「DjnagoでTodoリストを作成する」の第2回として、Todoの一覧表示まで解説してきました。

続き...

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

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

それでは！