Django

Django 簡単なアプリを作って基礎を覚える⑨ DeleteViewを作る

Django DeleteViewを使って削除画面を作成

今まで、一覧表を作成するListView、データの詳細画面を表示するDetailView、データを作成するCreateView、データを更新するUpdateViewをやってきました。

最後のDeleteViewをやっていきましょう。

views.pyを修正

まずは、viewに追加していきます。

from django.shortcuts import render
from django.http import HttpResponse
from django.views.generic import ListView, DetailView, CreateView, UpdateView, DeleteView #追記
from .models import TaskModel
from django.urls import reverse_lazy


def helloworld(request):
    hello_display = HttpResponse("Hello World")
    return hello_display

class TaskList(ListView):
    template_name = "list.html"
    model = TaskModel

class TaskDetail(DetailView):
    template_name = "detail.html"
    model = TaskModel

class TaskCreate(CreateView):
    template_name = "create.html"
    model = TaskModel
    fields = ('title', 'memo', 'user', 'plants_startdate', 'plants_enddate')
    success_url = reverse_lazy('task:list') 

class TaskUpdate(UpdateView):
    template_name = "update.html"
    model = TaskModel
    fields = ('title', 'memo', 'user', 'plants_startdate', 'plants_enddate')
    success_url = reverse_lazy('task:list') 
#追記
class TaskDelete(DeleteView):
    template_name = "delete.html"
    model = TaskModel
    success_url = reverse_lazy('task:list')    

削除が成功した時に、一覧表に戻るようにしておきます。

delete.html ファイルの作成

新規ファイルでdelete.htmlファイルをtemplates内に作成します。

{% extends 'templates/base.html' %}


{% block title %}
{% endblock title %}

{% block header %}
{% endblock header %}

{% block content %}
<form action="" method="POST">{% csrf_token %}
<table class="table">
  <thead>
    <tr>
      <th scope="col"></th>
      <th scope="col">タイトル</th>
      <th scope="col">内容</th>
      <th scope="col">開始予定日</th>
      <th scope="col">終了予定日</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">内容</th>
      <td>{{ object.title }}</td>
      <td>{{ object.memo }}</td>
      <td>{{ object.plants_startdate }}</td>
      <td>{{ object.plants_enddate }}</td>
    </tr>
  </tbody>
</table>
    <a href="{% url 'task:list' %}" button type="button" class="btn btn-secondary">戻る</a>
    <input type="submit"  class="btn btn-primary" value="削除">
</form>
{% endblock content %}

コードは、detail.htmlをコピペして、update.htmlからフォームとボタン部分を貼り付けて、削除ボタンに変えています。

とても楽ちん(⌒∇⌒)

urls.pyを修正

最後に、指示を出せるようにurls.pyに追加します。

from django.urls import path, include
from .views import helloworld, TaskList, TaskDetail, TaskCreate, TaskUpdate, TaskDelete

app_name = 'task'
urlpatterns = [
    path('hello/', helloworld),
    path('list/', TaskList.as_view(), name='list'),
    path('detail/<int:pk>', TaskDetail.as_view(), name='detail'),
    path('create/', TaskCreate.as_view(), name='create'),
    path('update/<int:pk>', TaskUpdate.as_view(), name='update'),
    path('delete/<int:pk>', TaskDelete.as_view(), name='delete'),#追記
]

Deleteの場合、どのレコードを更新するかを指示してあげる必要があるので、<int:pk>でプライマリーキーを渡してあげています。

もう、パターン化してきているのでわかりやすいと思います。

では、実際動くがやってみましょう❕

http://127.0.0.1:8000/task/delete/2 でページを開いてい見ましょう

ちゃんと削除できていますね!削除ボタンを押下して削除できるかやってみましょ!もともとは、下のように4個のレコードがあったので、米を買うが消えて3個のレコードになっていたら正しく動いています。

削除ボタンを押下してみます。

削除が成功し米を買うが消えて、3個の表示に変わっています。

削除もおこなえました!では、最後の作業に入りましょう❕

list.htmlから削除画面へ遷移できるように修正

それでは、リストのhtmlファイルを修正していきましょう❕

{% extends 'templates/base.html' %}


{% block title %}
{% endblock title %}

{% block header %}
{% endblock header %}

{% block content %}
    <a href="{% url 'task:create' %}" class="btn btn-primary">新規登録</a>
    <table class="table">
    <thead>
        <tr>
        <th scope="col">#</th>
        <th scope="col">タイトル</th>
        <th scope="col">担当者</th>
        </tr>
    </thead>
    <tbody>
    {% for task in object_list %}
        <tr>
        <th scope="row"><a href="{% url 'task:detail' task.pk %}" button type="button" class="btn btn-info">詳細</button>
        <a href="{% url 'task:update' task.pk %}" button type="button" class="btn btn-success">修正</button>
        <a href="{% url 'task:delete' task.pk %}" button type="button" class="btn btn-danger">削除</button></th>
        <td>{{task.title}}</td>
        <td>{{task.user}}</td>
        </tr>
    {% endfor %}
    </tbody>
    </table>
{% endblock content %}

これで、削除ボタンができます🙂

削除ボタンを押下すると、削除画面に遷移できる確認してみましょう。

削除画面に遷移できました😀

これで、一覧表、新規登録、詳細画面、更新画面、削除画面ができました。

CRUDの完成

これで、作成画面、詳細画面、更新画面、削除画面がすべてできました❕

システムの基本であるCRUDが完成です😃

次回からは、このアプリを発展させていきたいと思います

-Django

© 2021 ごろう@縁紡ぐ