Python・DjangoでTo-Doリスト作成

Masa

こんにちは！Masaです。

今回はタスク管理アプリ作成の続きを行っていきます！

この記事でわかること

タスク管理アプリの作成方法
基本的なDjangoによるアプリ作成

前回までのおさらい
削除ボタンを設置
同じような方法で変更ボタンを実装
まとめ

前回までのおさらい

前回までで、タスク管理アプリとしてある程度完成しました。

Django】タスク管理アプリ開発(To-Doリスト)③　~フォームの作成~

Python・Djangoを用いてタスク管理アプリの作成方法を詳しく解説します。前回までは管理者ページでしかタスクの追加ができませんでしたが、フォーム機能を使用してブラウザ上でタスクを追加できるようにしていきました。

今回は登録したタスクを削除するボタン、編集するボタンを設置していきます！

削除ボタンを設置

削除ボタンを設置する場合以下の順序で行っていきます。

削除時のURLを作成
削除時の処理をviews,pyに記載する
削除ボタンをテンプレートファイルに実装

urls.pyに追加する

まずアプリケーションフォルダにあるurls.pyに９行目を追加しましょう。

from unicodedata import name
from django.urls import path

from . import views

urlpatterns = [
    path('', views.IndexView.as_view(), name='index'),
    path('condition/<int:num>', views.Condition, name='condition'),
    path('delete/<int:num>', views.DeleteViews.as_view(), name='delete')
]

削除ボタンを押すと9行目のパスに行くよう後ほど設定します。

DeleteViewを作成

次にviews.pyに削除時の処理を記載しましょう。
以下のコードをviews.pyの最終行に追加して下さい。

# 削除時の処理
class DeleteView(generic.DeleteView):
    model = To_do
    template_name = 'to_do_list/delete.html'
    success_url = reverse_lazy('index')

テンプレートに削除ボタンを実装

テンプレートにはテーブルが３つあります。
今回はそのうちの１つに適用するので、残りの２つも同じように適用してください。

index.htmlのテーブル部分に2行追加します。

<div class="col-sm-12 col-xs-12 col-md-6">
  <h2>未完了タスク(締め切り後)</h2>
  <div class="table-responsive">
    <table class="table table-sm">
      <tr>
        <th scope="col"></th>
        <th scope="col">超過日数</th>
        <th scope="col">締切日</th>
        <th scope="col">タスク</th>
        <th scope="col">削除</th> #追加
      </tr>
      {% for item in after_deadline_task %}
      <tr>
        <td><a type="button" class="btn btn-outline-primary btn-sm" href="{% url 'condition' item.id %}">完了</a></td>
        <td>{{ today | after_deadline:item }}日</td>
        <td>{{ item.deadline }}</td>
        <td>{{ item.task }}</td>
        <td><a type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#delete-Modal-{{ item.pk }}">削除</a></td> #追加
        {% include 'to_do_list/delete.html' %} #追加
      </tr>
      {% endfor %}
    </table>
  </div>

また新しいテンプレート”delete.html”を新規に作成し、以下のコードを記載してください。

<div class="modal fade" id="delete-Modal-{{ item.pk }}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">タスクの削除</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p>削除するともとに戻せません。よろしいですか？
        </div>
        <div class="modal-footer">
            <form method='POST' action="{% url 'delete' item.pk %}">
            {% csrf_token %}
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">キャンセル</button>
                <button type="submit" class="btn btn-primary">削除</button>
            </form>
      </div>
    </div>
  </div>

これはBootstrapのモーダルという機能を使用しています。
モーダルの詳しい使い方は別記事で解説しているのでご覧ください。

注意点は、index.htmlの18行目のdata-bs-targetとdelete.htmlの1行目のidの値を一緒にしてください。
この２つで紐づけを行っています。

これで削除ボタンが実装されたと思います。

同じような方法で変更ボタンを実装

同じようにモーダルを使用して変更ボタンも実装していきましょう。

urls.pyに追加

urls.pyに1行追記します。

from unicodedata import name
from django.urls import path

from . import views

urlpatterns = [
    path('', views.IndexView.as_view(), name='index'),
    path('condition/<int:num>', views.Condition, name='condition'),
    path('delete/<int:pk>', views.DeleteView.as_view(), name='delete'),
    path('update/<int:pk>', views.UpdateView.as_view(), name='update'), #追加
]

UpdateViewを作成

既に入力されているデータの更新にはUpdateViewを使用します。
以下のようにしました。

# 更新時の処理
class UpdateView(generic.UpdateView):
    model = To_do
    template_name = 'to_do_list/update.html'
    fields = ('deadline', 'task')
    success_url = reverse_lazy('index')

テンプレートに編集ボタンを実装

通常UpdateViewを使うと、選択した項目の値がフォームに渡され、フォームに入力された状態で表示されます。
しかし、今回はBootstrapのモーダルを使用するため入力済み状態で表示できませんでした。
（やり方があれば教えてください。）

少し妥協ですが、以下のようにしました。
削除ボタン実装時と同様、テーブルの１つだけを表示します。

<h2>未完了タスク(締め切り後)</h2>
<div class="table-responsive">
  <table class="table table-sm">
    <tr>
      <th scope="col"></th>
      <th scope="col">超過日数</th>
      <th scope="col">締切日</th>
      <th scope="col">タスク</th>
      <th scope="col">削除</th>
      <th scope="col">編集</th> #追加
    </tr>
    {% for item in after_deadline_task %}
    <tr>
      <td><a type="button" class="btn btn-outline-primary btn-sm" href="{% url 'condition' item.id %}">完了</a></td>
      <td>{{ today | after_deadline:item }}日</td>
      <td>{{ item.deadline }}</td>
      <td>{{ item.task }}</td>
      <td><a type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#delete-Modal-{{ item.pk }}">削除</a></td>
      {% include 'to_do_list/delete.html' %}
      <td><a type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#update-Modal-{{ item.pk }}">編集</a></td> #追加
      {% include 'to_do_list/update.html' %} #追加
    </tr>
    {% endfor %}
  </table>
</div>

また、”update.html”を作成し、モーダルを使用します。

<div class="modal fade" id="update-Modal-{{ item.pk }}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">タスクの編集</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <form method='POST' action="{% url 'update' item.pk %}">
            <div class="modal-body">
                {% csrf_token %}
                {{ form.as_p }}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">キャンセル</button>
                <button type="submit" class="btn btn-primary">編集</button>
            </div>
        </form>
    </div>
  </div>

これで更新ボタンも実装完了です。

まとめ

今回は、タスクの削除ボタン、編集ボタンを実装しました。

Djangoでは削除や編集時に違うページに移動するのが通常ですが、今回はモーダルを使用することで煩わしさを軽減しています。

次回は認証機能を実装しようと思います！

次回の記事↓

Djangoでタスク管理アプリ開発(To-Doリスト)⑤　~認証機能前半編~

PythonとDjangoを使用してタスク管理アプリ(To_Doリスト)を作成しています。今回はタスクを締め切り前後での振り分けと日付順の並び替えを行っています。フィルターを使ってきれいにプログラムできています。

【Django】タスク管理アプリ開発(To-Doリスト)④　~削除・変更ボタン~