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

今回は「[Django初心者]DjangoでTodoリストを作成する」の第6回として、Todoの新規作成画面を作成し、実際にtodoを追加していこうと思います。

前回は、削除機能を追加しました。

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

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

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

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

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

[[Django初心者]DjangoでTodoリストを作成する⑤(省略Ver)]
(https://zenn.dev/heku/articles/5a6e4d720f2c01)

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

[Django初心者]DjangoでTodoリストを作成する⑥

GitHubはこちらです。

https://github.com/cardene777

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

構成の確認

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

├── 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
    │       ├── delete.html
    │       ├── detail.html
    │       ├── list.html
    │       └── update.html
    ├── tests.py
    ├── urls.py
    └── views.py

urls.pyに追記

次にように追記してください。

from django.urls import path
from .views import TodoList, TodoDetail, TodoUpdate, TodoDelete, TodoCreate

urlpatterns = [
    path('list/', TodoList.as_view(), name='list'),
    path('detail/<int:pk>/', TodoDetail.as_view(), name='detail'),
    path('update/<int:pk>/', TodoUpdate.as_view(), name='update'),
    path('delete/<int:pk>/', TodoDelete.as_view(), name='delete'),
    path('create/', TodoCreate.as_view(), name='create'),
]

vies.pyに追記

次のように追記してください。

from django.views import generic
from .models import TodoModel
from django.urls import reverse_lazy


class TodoList(generic.ListView):
    template_name = 'todo/list.html'
    model = TodoModel


class TodoDetail(generic.DetailView):
    template_name = 'todo/detail.html'
    model = TodoModel


class TodoUpdate(generic.UpdateView):
    template_name = 'todo/update.html'
    model = TodoModel
    fields = ('title', 'content', 'deadline')
    success_url = reverse_lazy('list')


class TodoDelete(generic.DeleteView):
    template_name = 'todo/delete.html'
    model = TodoModel

    success_url = reverse_lazy('list')
    

class TodoCreate(generic.CreateView):
    template_name = 'todo/create.html'
    model = TodoModel
    fields = ('title', 'content', 'deadline')

    success_url = reverse_lazy('list')

create.htmlの編集

ターミナルで次のようなコマンドを実行してください。

touch todo/templates/todo/create.html 

再度構成を確認します。

├── 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
    │       ├── create.html
    │       ├── delete.html
    │       ├── detail.html
    │       ├── list.html
    │       └── update.html
    ├── tests.py
    ├── urls.py
    └── views.py

create.htmlを次のように編集してください。

{% extends 'base.html' %}

{% block content %}
    <div class="jumbotron jumbotron-fluid">
      <div class="container">
        <h1 class="display-4">新規作成フォーム</h1>
        <p class="lead">新しいTodoを作成しましょう</p>
      </div>
    </div>
    <div class="container">
        <form action="" method="POST">
            {% csrf_token %}
            {{ form.as_p }}
        <input type="submit" value="保存">
    </form>
    </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に追記

次のように追記してください。

{% 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 ">
    <!-- ここの間 -->
    <div>
        <p class="new-btn"><a href="{% url 'create' %}" class="btn btn-success btn-lg" tabindex="-1" role="button" aria-disabled="true">新規作成</a></p>
    </div>
    <!-- ここの間 -->
    {% 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>
                <p class="btn-content"><a href="{% url 'update' list.pk %}" class="btn btn-info" tabindex="-1" role="button" aria-disabled="true">編集</a></p>
                <p class="btn-content"><a href="{% url 'delete' list.pk %}" class="btn btn-danger" tabindex="-1" role="button" aria-disabled="true">削除</a></p>
            </div>
        </div>
    <hr>
    {% endfor %}
</div>
{% endblock content %}

削画面の表示

それでは早速新規作成画面を表示させてみましょう。

こちらにアクセスしてください。
http://127.0.0.1:8000/list/

「新規作成」ボタンを押してください。

それぞれ中身を入力してtodoを追加しましょう。

中身を入力できたら、「保存」ボタンを押してください。

一覧表示画面に移動して、先ほど追加したものが表示されていれば完璧です！

これで新規作成画面の作成とtodoの追加は完了です。

お疲れ様でした！

最後に

今回は「DjnagoでTodoリストを作成する」の第6回として、Todoの新規作成画面を作成して、todoの追加するところまでやってきました。

今回で「DjnagoでTodoリストを作成する」はひとまず完了です！

本当にお疲れ様でした！

今回の講座を通してDjangoへの理解が深まっていれば僕は嬉しいです。

今後もPythonやDjango、機械学習についての記事を書いていくので、よければ見ていってください。

また、Todoリストに新たな機能を追加し、こちらの記事を更新する可能性もあるので楽しみにしていてください！

質問などがあればコメントするか、TwitterのDMまで送ってください！

それでは！