djangoで作るTodo管理アプリ⑨（CreateView、UpdateView、DeleteView）

$ sudo apt update
$ sudo apt upgrade
$ sudo apt install python3.12
$ sudo apt install python3.12-venv

$ mkdir todo
$ cd todo
$ python3.12 -m venv venv

$ source ./venv/bin/active
(venv)$ pip install --upgrade pip
(venv)$ pip install django==4.2.9

(venv)$ django-admin startproject todo_project .
(venv)$ python manage.py startapp todolist
(venv)$ python manage.py startapp tododetail
(venv)$ python manage.py startapp common
(venv)$ python manage.py startapp todoupdate
(venv)$ python manage.py startapp tododelete
(venv)$ python manage.py startapp todocreate

(venv)$ mkdir templates
(venv)$ touch ./common/forms.py
(venv)$ touch ./todolist/urls.py
(venv)$ touch ./tododetail/urls.py
(venv)$ touch ./tododelete/urls.py
(venv)$ touch ./todocreate/urls.py
(venv)$ touch ./todoupdate/urls.py
(venv)$ touch ./templates/_form.html
(venv)$ touch ./templates/base.html
(venv)$ touch ./templates/create.html
(venv)$ touch ./templates/detail.html
(venv)$ touch ./templates/list.html
(venv)$ touch ./templates/update.html

(venv)$ cd ..
(venv)$ tree -L 3
.
└── todoapp
    ├── LICENSE
    ├── README.md
    ├── common
    │    ├── __init__.py
    │    ├── __pycache__
    │    ├── admin.py
    │    ├── apps.py
    │    ├── forms.py
    │    ├── migrations
    │    ├── models.py
    │    ├── tests.py
    │    └── views.py
    ├── db.sqlite3
    ├── forms.py
    ├── manage.py
    ├── templates
    │    ├── _form.html
    │    ├── base.html
    │    ├── create.html
    │    ├── detail.html
    │    ├── list.html
    │    └── update.html
    ├── todo_project
    │    ├── __init__.py
    │    ├── __pycache__
    │    ├── asgi.py
    │    ├── settings.py
    │    ├── urls.py
    │    └── wsgi.py
    ├── todocreate
    │    ├── __init__.py
    │    ├── __pycache__
    │    ├── admin.py
    │    ├── apps.py
    │    ├── migrations
    │    ├── models.py
    │    ├── tests.py
    │    ├── urls.py
    │    └── views.py
    ├── tododelete
    │    ├── __init__.py
    │    ├── __pycache__
    │    ├── admin.py
    │    ├── apps.py
    │    ├── migrations
    │    ├── models.py
    │    ├── tests.py
    │    ├── urls.py
    │    └── views.py
    ├── tododetail
    │    ├── __init__.py
    │    ├── __pycache__
    │    ├── admin.py
    │    ├── apps.py
    │    ├── migrations
    │    ├── models.py
    │    ├── tests.py
    │    ├── urls.py
    │    └── views.py
    ├── todolist
    │    ├── __init__.py
    │    ├── __pycache__
    │    ├── admin.py
    │    ├── apps.py
    │    ├── migrations
    │    ├── models.py
    │    ├── tests.py
    │    ├── urls.py
    │    └── views.py
    ├── todoupdate
    │    ├── __init__.py
    │    ├── __pycache__
    │    ├── admin.py
    │    ├── apps.py
    │    ├── migrations
    │    ├── models.py
    │    ├── tests.py
    │    ├── urls.py
    │    └── views.py
    └── venv
    ├── bin
    ├── include
    ├── lib
    ├── lib64 -> lib
    └── pyvenv.cfg

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'common',
    'todolist',
    'tododetail',
    'todoupdate',
    'tododelete',
    'todocreate',
]

• テンプレートhtmlを配置している場所について、BASE_DIRで設定します。
• settings.pyを編集し、57行目あたりにある「TEMPLATES」の箇所の「’DIRS’」に「[BASE_DIR / ‘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',
            ],
        },
    },
]

todo_projectのurls.pyを編集

from django.contrib import admin
from django.urls import path, include
from django.views.generic.base import RedirectView

urlpatterns = [
    path('admin/', admin.site.urls),
    path('list/', include('todolist.urls')),
    path('', RedirectView.as_view(url='/list/top/', permanent=True)),
    path('detail/', include('tododetail.urls')),
    path('create/', include('todocreate.urls')),
    path('update/', include('todoupdate.urls')),
]

from django.db import models

class Priority(models.TextChoices):
    HIGH = 'danger', '高'
    NORMAL = 'warning', '通常'
    LOW = 'primary', '低'

class TodoModel(models.Model):
    title = models.CharField(max_length=100)
    description = models.TextField()
    priority = models.CharField(
        max_length=10, 
        choices=Priority.choices,
        default=Priority.NORMAL
        )
    duedate = models.DateField()

    def __str__(self):
        return self.title

commonのadmin.pyを編集

from django.contrib import admin
from .models import TodoModel

admin.site.register(TodoModel)

from django import forms
from .models import TodoModel

class TodoModelForm(forms.ModelForm):
    class Meta:
        model = TodoModel
        fields = ('title', 'description', 'priority', 'duedate')
        widgets = {
            'title': forms.TextInput(attrs={'class': 'form-control'}),
            'description': forms.Textarea(attrs={'class': 'form-control', 'rows': 5}),
            'priority': forms.Select(attrs={'class': 'form-select'}),
            'duedate': forms.DateInput(attrs={'class': 'form-control', 'type': 'date'}),
        }

from django.urls import path, include
from .views import TodoListTop

urlpatterns = [
    path('top/', TodoListTop.as_view(), name='list')
]

from django.shortcuts import render
from django.views.generic import ListView
from common.models import TodoModel

class TodoListTop(ListView):
    template_name = 'list.html'
    model = TodoModel

from django.urls import path, include
from .views import TodoDetail

urlpatterns = [
    path('<int:pk>/', TodoDetail.as_view(), name='detail')
]

• 「<int:pk>/」URLからキャプチャされた整数値をpkという名前のキーワード引数としてビューに渡します。
• 通常、pk(プライマリキー)はデータベースのレコードを一意に識別するために使います。
• pk（プライマリキー）には、/1/や/2/の数字が入ります。
• それぞれの数字はレコードのIDとして扱います。

from django.shortcuts import render
from django.views.generic import DetailView
from common.models import TodoModel

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

from django.urls import path, include
from .views import TodoUpdate

urlpatterns = [
    path('<int:pk>/', TodoUpdate.as_view(), name='update')
]

from django.shortcuts import render
from django.views.generic import UpdateView
from common.forms import TodoModelForm
from common.models import TodoModel
from django.urls import reverse_lazy

class TodoUpdate(UpdateView):
    template_name = 'update.html'
    model = TodoModel
    form_class = TodoModelForm
    success_url = reverse_lazy('list')

from django.urls import path, include
from .views import TodoDelete

urlpatterns = [
    path('<int:pk>/', TodoDelete.as_view(), name='delete')
]

from django.shortcuts import render
from django.views.generic import DeleteView
from common.models import TodoModel
from django.urls import reverse_lazy

class TodoDelete(DeleteView):
    model = TodoModel
    success_url = reverse_lazy('list')

from django.urls import path, include
from .views import TodoCreate

urlpatterns = [
    path('top/', TodoCreate.as_view(), name='create')
]

from django.shortcuts import render
from django.views.generic import CreateView
from common.models import TodoModel
from common.forms import TodoModelForm
from django.urls import reverse_lazy

class TodoCreate(CreateView):
    template_name = 'create.html'
    model = TodoModel
    form_class = TodoModelForm
    success_url = reverse_lazy('list')

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Todo 管理</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
    
    <div class="bg-body-tertiary p-3 p-sm-3 mb-2">
      <div class="container">
        <h2 class="display-4">{% block header %}{% endblock header %}</h2>
      </div>
    </div>

    {% block content %}
    {% endblock content %}
    
    <!-- 共通の削除モーダル -->
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="deleteModalLabel">削除の確認</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <p id="deleteItemName">このアイテムを本当に削除しますか？</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">キャンセル</button>
            <button type="button" class="btn btn-danger" id="deleteConfirmButton">削除</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 共通のJavaScript -->
    <script>
      function setupDeleteModal(itemId, itemName) {
        document.getElementById('deleteItemName').textContent = '「' + itemName + '」を本当に削除しますか？';
        var deleteButton = document.getElementById('deleteConfirmButton');
        deleteButton.onclick = function() {
          document.getElementById('deleteForm' + itemId).submit();
        };
      }
    </script>

  </body>
</html>

{% extends 'base.html' %}

{% block header %}Todo 一覧{% endblock header %}

{% block content %}
<div class="container">
  <a class="btn btn-warning mb-2" href="{% url 'create' %}" role="button">作成</a>
  {% for item in object_list %}
  <div class="alert alert-{{ item.priority }}" role="alert">
    <p>{{ item.title }}&nbsp;【期日:{{ item.duedate|date:"o/n/j" }}】</p>
    <a class="btn btn-primary" href="{% url 'detail' item.pk %}" role="button">詳細</a>
    <a class="btn btn-success" href="{% url 'update' item.pk %}" role="button">編集</a>
    <button class="btn btn-secondary" onclick="setupDeleteModal({{ item.pk }}, '{{ item.title }}')" data-bs-toggle="modal" data-bs-target="#deleteModal">削除</button>
    <form id="deleteForm{{ item.pk }}" action="{% url 'delete' item.pk %}" method="POST" style="display: none;">
      {% csrf_token %}
    </form>
  </div>
  {% endfor %}
</div>

{% endblock content %}

{% extends 'base.html' %}

{% block header %}Todo 詳細{% endblock header %}

{% block content %}
<div class="container">
  <table class="table table-striped-columns">
    <tr>
      <th>タイトル</th>
      <td>{{ object.title }}</td>
    </tr>
    <tr>
      <th>作業内容</th>
      <td>{{ object.description|linebreaksbr }}</td>
    </tr>
    <tr>
      <th>優先度</th>
      <td>
        {% if object.priority == 'danger' %}
          高
        {% elif object.priority == 'warning' %}
          通常
        {% elif object.priority == 'primary' %}
          低
        {% else %}
          {{ object.priority }}
        {% endif %}
      </td>
    </tr>
    <tr>
      <th>期限</th>
      <td>{{ object.duedate|date:"o/n/j" }}</td>
    </tr>
  </table>
  <a class="btn btn-success" href="{% url 'update' object.pk %}" role="button">編集</a>
  <button class="btn btn-secondary" onclick="setupDeleteModal({{ object.pk }}, '{{ object.title }}')" data-bs-toggle="modal" data-bs-target="#deleteModal">削除</button>
  <form id="deleteForm{{ object.pk }}" action="{% url 'delete' object.pk %}" method="POST" style="display: none;">
    {% csrf_token %}
  </form>
  <a class="btn btn-info" href="{% url 'list' %}" role="button">Todo一覧</a>
</div>

{% endblock content %}

<form action="" method="POST" class="row g-3">
  {% csrf_token %}
  <div class="col-12 mb-2">
    <label for="id_title" class="form-label">タイトル</label>
    {{ form.title }}
  </div>
  <div class="col-12 mb-2">
    <label for="id_description" class="form-label">作業内容</label>
    {{ form.description }}
  </div>
  <div class="col-12 mb-2">
    <label for="id_priority" class="form-label">優先度</label>
    {{ form.priority }}
  </div>
  <div class="col-12 mb-2">
    <label for="id_duedate" class="form-label">期日</label>
    {{ form.duedate }}
  </div>
  <div class="col-12">
    <button type="submit" class="btn btn-warning">{{ submit_button_label }}</button>
    <a class="btn btn-info" href="{% url 'list' %}" role="button">Todo一覧</a>
  </div>
</form>

{% block header %}Todo 作成{% endblock header %}

{% block content %}
<div class="container">
  {% include '_form.html' with submit_button_label='作成' %}
</div>
{% endblock content %}

{% extends 'base.html' %}

{% block header %}Todo 編集{% endblock header %}

{% block content %}
<div class="container">
  {% include '_form.html' with submit_button_label='更新' %}
</div>
{% endblock content %}

(venv)$ python manage.py makemigrations
(venv)$ python manage.py migrate

(venv)$ python manage.py runserver