Django

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

Django UpdateViewを使って更新画面を作成

今まで、一覧表を作成するListView、データの詳細画面を表示するDetailView、前回のデータを作成するCreateViewをしました。

残りは、今回のUpdateViewとDeleteViewのふたつです。

それでは、さっそくUpdateViewの実装をしていきましょう❕

views.pyを修正

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

from django.shortcuts import render
from django.http import HttpResponse
from django.views.generic import ListView, DetailView, CreateView, UpdateView #追記
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') 

項目は、CreateViewと同じです。フィールドの指定と、更新が成功した時にどのページに遷移するかの指定です。

update.html ファイルの作成

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

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


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

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

{% block content %}
<form action="" method="POST">{% csrf_token %}
    {{form.as_p}}
    <a href="{% url 'task:list' %}" button type="button" class="btn btn-secondary">戻る</a>
    <input type="submit"  class="btn btn-primary" value="更新">
</form>
{% endblock content %}

コードは、create.htmlをコピペして、登録ボタンか更新ボタンかを変えているだけですね。

楽ちん(⌒∇⌒)

urls.pyを修正

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

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

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'),#追記
]

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

たったこれだけなんですねー

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

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

ちゃんと開きましたね!終了予定日を31日に変更して更新してみましょう

更新が成功したので、リスト画面に戻ってきました。2つ目の詳細画面で確認してみましょう❕

終了予定日が月末に変わっていますね😀これだけで、更新ができるなんてすごいですねー

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

それでは、リストの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></th>
        <td>{{task.title}}</td>
        <td>{{task.user}}</td>
        </tr>
    {% endfor %}
    </tbody>
    </table>
{% endblock content %}

これで、修正ボタンができます🙂

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

更新画面に遷移できました😀

これで、一覧表、新規登録、詳細画面、更新画面ができました。次回は、削除画面を作っていきましょう❕

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

もくじ1 Django DeleteViewを使って削除画面を作成1.1 views.pyを修正1.2 delete.html ファイルの作成1.3 urls.pyを修正1.4 list.htmlから ...

続きを見る

-Django

© 2021 ごろう@縁紡ぐ