Djangoでくじ引きアプリを作ってみる_part5

前回の続きで、くじ引きアプリを作成していきます。

【前回のまとめ】

・一覧画面から新規作成画面へ遷移させる
・一覧画面から編集へ遷移させる

【今回の作業】

・削除ページを作成する

今回は、削除ページを作成したいと思います。

設定は今までの差分を利用しますので、初めから設定したい方は以下記事を参照してください。

Djangoでくじ引きアプリを作ってみる_part1

Djangoでくじ引きアプリを作ってみる_part2

Djangoでくじ引きアプリを作ってみる_part3

Djangoでくじ引きアプリを作ってみる_part4

・削除ページを作成する

【手順】

１．urls.pyを修正する

まずは削除ページ用のルーティングを作成します。

ファイル：myapptdl>tdl>url.py

コード：

from django.urls import path
from . import views

app_name = 'tdl'

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

urlpatternsに削除用のpathを作成しました。
これは、URLに「id/delete」が指定された場合、views.pyの「DeleteView」クラス呼び出します。

２．views.pyを修正する

続いて、DeleteViewクラスを作成します。

ファイル：myapptdl>tdl>views.py

コード：

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

class IndexView(generic.ListView):
   model = Tdl

class CreateView(generic.edit.CreateView):
  model = Tdl
  fields = '__all__'

class UpdateView(generic.edit.UpdateView):
  model = Tdl
  fields = '__all__'

#以下を追加する
class DeleteView(generic.edit.DeleteView):
  model = Tdl
  success_url = reverse_lazy('tdl:index')

新規に DeleteViewクラスを追加しています。
success_urlにはreverse_lazy関数を利用してtdl:indexを呼び出しています。

reverse_lazy関数はreverse関数と同じものになります。
クラスベースの汎用ビューを利用しているとは、reverse_lazyを使う必要があります。

詳細が知りたい方は以下を参照してください。

Django

The web framework for perfectionists with deadlines.

docs.djangoproject.com

汎用ビューのDeleteViewクラスを設定した場合のテンプレートを呼び出すときのデフォルト名は以下になります。

「<app name>/<model name>_confirm_delete.html 」

今回のアプリだと「tdl/tdl_confirm_delete.html」です。

３．tdl_confirm_delete.htmlを作成する

まずは、テンプレートを新規作成します。

ファイル：myapptdl>tdl>templates>tdl>tdl_list.html

コード：

{% extends './base.html' %}
{% block content %}

<h1>内容の削除</h1>

<p>'{{ object.item }}'を削除しますか？</p>

<form action ='' method='post'>{% csrf_token %}
   <button type='submit' class='submit delete'>削除する</button>
</form>

<div>
   <a href='JavaScript:history.back()'>戻る</a>
</div>

{% endblock %}

削除ページでは、削除する内容を「object.item」でデータベースから取り出してきています。

４．tdl_list.htmlを修正する

最後に一覧画面に削除リンクを作成します。

ファイル：myapptdl>tdl>templates>tdl>tdl_list.html

コード：

{% extends './base.html' %}
{% block content %}
       <h1>くじ引き内容</h1>

<table class='table table-striped table-hover'>
    <tr>
        <th>内容</th><th>編集</th><th>削除</th>　#修正
    </tr>
    {% for tdl in object_list%}
    <tr>
        <td> {{ tdl.item }}</td>
        <td> <a href='{% url "tdl:update" tdl.id %}'>編集</a> </td>
        <td> <a href='{% url "tdl:delete" tdl.id %}'>削除</a> </td>　#追加
    </tr>
    {% endfor %}
</table>

    <div>
        <a href='{% url "tdl:create" %}'>新規作成</a>
    </div>
{% endblock %}

前回作成した、updateの下に、deleteを追加するだけです。

これで設定は終わりなので、サーバを起動して確認します。

cd myapp 
python manage.py runserver

次のURLにブラウザでアクセスします。

http://localhost:8000/

localhost

一覧表示画面を確認すると、削除リンクが表示されています。

以上で今回の目的である削除画面を作成することができました。

本日はここまでです。

次回は一覧のデータからランダムで一つを取り出したいと思います。

ありがとうございました。