【Django】クラスベースビューで更新画面を作成【ブログアプリ2】

クラスベースビューでの更新画面の作成について
クラスベースビューでの更新画面を作成する手順
Django記事一覧

クラスベースビューでの更新画面の作成について

前回はクラスベースビューを使ってブログ記事の詳細画面を作成した。

今回はクラスベースビューを使って更新画面を作成する。

現在のディレクトリ構成は以下の通り。

■ディレクトリ構成

デスクトップ
 └Blog2
   ├app
   │ ├migrations
   │ ├__init__.py
   │ ├admin.py
   │ ├apps.py
   │ ├models.py
   │ ├tests.py 
   │ ├views.py
   │ ├urls.py
   │ └forms.py
   ├db.sqlite3
   ├config
 　│ ├・・・
 　│ ├settings.py
 　│ └urls.py
   ├templates
　 │　├base.html
　 │  ├index.html
　 │  ├list.html
　 │  ├create.html
　 │  └detail.html
   ├env_blog2
   └manage.py

デスクトップ

└Blog2

├app

│ ├migrations

│ ├__init__.py

│ ├admin.py

│ ├apps.py

│ ├models.py

│ ├tests.py

│ ├views.py

│ ├urls.py

│ └forms.py

├db.sqlite3

├config

　│ ├・・・

　│ ├settings.py

　│ └urls.py

├templates

　 │　├base.html

　 │ ├index.html

　 │ ├list.html

　 │ ├create.html

　 │ └detail.html

├env_blog2

└manage.py

クラスベースビューでの更新画面を作成する手順

urls.pyの編集

～デスクトップ/Blog2/app/urls.py

from django.urls import path, include
from .views import TopPageView1, TopPageView2, BlogListView, BlogCreateView, BlogDetailView, BlogUpdateView #[1]

app_name = 'blog'
urlpatterns = [
    path('', TopPageView1.as_view(), name="index1"),
    path('index/', TopPageView2.as_view(), name="index2"),
    path('list/', BlogListView.as_view(), name="list"),
    path('create/', BlogCreateView.as_view(), name="create"),
    path('detail/<int:pk>/', BlogDetailView.as_view(), name="detail"),
    path('update/<int:pk>/', BlogUpdateView.as_view(), name="update"), #[2]
]

from django.urls import path, include

from .views import TopPageView1, TopPageView2, BlogListView, BlogCreateView, BlogDetailView, BlogUpdateView #[1]

app_name = 'blog'

urlpatterns = [

path('', TopPageView1.as_view(), name="index1"),

path('index/', TopPageView2.as_view(), name="index2"),

path('list/', BlogListView.as_view(), name="list"),

path('create/', BlogCreateView.as_view(), name="create"),

path('detail/<int:pk>/', BlogDetailView.as_view(), name="detail"),

path('update/<int:pk>/', BlogUpdateView.as_view(), name="update"), #[2]

]

[1]BlogUpdateViewのインポート

views.pyからBlogUpdateViewをインポート。

BlogUpdateViewは未作成なので、次の手順で作成する。

[2]新しいURLパターンの追加

利用者からのリクエストURLが以下と一致した場合に実行されるPath関数を追加した。

例

http://127.0.0.1:8000/app/update/1

views.pyの編集

～デスクトップ/Blog2/app/views.py

from django.shortcuts import render
from django.views.generic import View, TemplateView, ListView, CreateView, DetailView, UpdateView #[1]
from django.urls import reverse_lazy
from .models import Blog
from .forms import CreateForm, UpdateForm #[2]

# Create your views here.
class TopPageView1(View):
    def get(self, request):
        template_name = 'index.html'
        return render(request, template_name)


class TopPageView2(TemplateView):
    template_name = 'index.html'
    

class BlogListView(ListView):
    model = Blog
    template_name = 'list.html'
    context_object_name = 'blogs'


class BlogCreateView(CreateView):
    model = Blog
    form_class = CreateForm
    template_name = 'create.html'
    success_url = reverse_lazy('blog:list')
    

class BlogDetailView(DetailView):
    model = Blog
    template_name = 'detail.html'
    context_object_name = 'blog'

#[3]
class BlogUpdateView(UpdateView):
    model = Blog
    form_class = UpdateForm
    template_name = 'update.html'
    #success_url = reverse_lazy('blog:list')
    def get_success_url(self):
        return reverse_lazy('blog:detail', kwargs={'pk': self.object.pk})

from django.shortcuts import render

from django.views.generic import View, TemplateView, ListView, CreateView, DetailView, UpdateView #[1]

from django.urls import reverse_lazy

from .models import Blog

from .forms import CreateForm, UpdateForm #[2]

# Create your views here.

class TopPageView1(View):

def get(self, request):

template_name = 'index.html'

return render(request, template_name)

class TopPageView2(TemplateView):

template_name = 'index.html'

class BlogListView(ListView):

model = Blog

template_name = 'list.html'

context_object_name = 'blogs'

class BlogCreateView(CreateView):

model = Blog

form_class = CreateForm

template_name = 'create.html'

success_url = reverse_lazy('blog:list')

class BlogDetailView(DetailView):

model = Blog

template_name = 'detail.html'

context_object_name = 'blog'

#[3]

class BlogUpdateView(UpdateView):

model = Blog

form_class = UpdateForm

template_name = 'update.html'

#success_url = reverse_lazy('blog:list')

def get_success_url(self):

return reverse_lazy('blog:detail', kwargs={'pk': self.object.pk})

[1]UpdateViewクラスのインポート

UpdateViewクラスはDjangoのクラスベースの汎用ビュー。

UpdateViewクラスは更新を行うことに特化している。

[2]UpdateFormクラスのインポート

forms.pyからUpdateFormをインポート。

UpdateFormはBlogモデルで定義したフィールド(title, content)のフォームを自動で作成できる。

[3]BlogUpdateViewクラスの作成

BlogUpdateViewはUpdateViewクラスを継承している。

変数modelにBlogモデルを格納

変数form_classにUpdatFormを格納し、Blogモデルから自動作成したフォーム情報を持たせる。

template_nameには更新用画面の情報を持つupdate.html

#success_url = reverse_lazy(‘blog:list’)

更新が完了したら一覧画面画面にリダイレクトする。

今回は更新後の詳細画面にリダイレクトしたいので、コメントアウトしている。

def get_success_url(self):

return reverse_lazy(‘blog:detail’, kwargs={‘pk’: self.object.pk})

更新が完了したら内容が更新された後の詳細画面にリダイレクトする。

この場合はget_success_urlメソッドを使う。

‘blog:detail’はurls.pyで定義したアプリケーション名(app_name)がblogの、detailと名付けられたpath関数を呼び出している。

辞書kwargsにpkというキーで自身のオブジェクト(ブログ記事)のpk(つまりID)を格納して渡している。これにより今回更新したブログ記事を指定して再度詳細画面を開くことができる。

forms.pyの編集

～デスクトップ/Blog2/app/forms.py

from django import forms
from .models import Blog

class CreateForm(forms.ModelForm):
    class Meta:
        model = Blog
        fields = ['title', 'content']

#[1]
class UpdateForm(forms.ModelForm):
    class Meta:
        model = Blog
        fields = ['title', 'content']

from django import forms

from .models import Blog

class CreateForm(forms.ModelForm):

class Meta:

model = Blog

fields = ['title', 'content']

#[1]

class UpdateForm(forms.ModelForm):

class Meta:

model = Blog

fields = ['title', 'content']

[1]UpdateFormの作成

ModelFormを継承したUpdateFormクラスを作成。

Metaクラス内で変数modelにBlogモデルを格納し、

fieldsにはBlogモデルのフィールド(title, content)をリスト形式で保存する。

update.htmlの作成

～デスクトップ/Blog2/template/update.html

{% extends 'base.html' %}

{% block title %}ブログ{% endblock %}

{% block content%}
    <h1>更新</h1>
    <form method="post">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit">登録</button>
    </form>
{% endblock %}

{% extends 'base.html' %}

{% block title %}ブログ{% endblock %}

{% block content%}

{% csrf_token %}

</form>

{% endblock %}

create.htmlとほぼ同じのため割愛。

ディレクトリ構成の確認

現在のディレクトリ構成は以下の通り。

■ディレクトリ構成

デスクトップ
 └Blog2
   ├app
   │ ├migrations
   │ ├__init__.py
   │ ├admin.py
   │ ├apps.py
   │ ├models.py
   │ ├tests.py 
   │ ├views.py #編集
   │ ├urls.py #編集
   │ └forms.py #編集
   ├db.sqlite3
   ├config
 　│ ├・・・
 　│ ├settings.py
 　│ └urls.py
   ├templates
　 │　├base.html
　 │  ├index.html
　 │  ├list.html
　 │  ├create.html
　 │  ├detail.html
　 │  └update.html #新規作成
   ├env_blog2
   └manage.py

デスクトップ

└Blog2

├app

│ ├migrations

│ ├__init__.py

│ ├admin.py

│ ├apps.py

│ ├models.py

│ ├tests.py

│ ├views.py #編集

│ ├urls.py #編集

│ └forms.py #編集

├db.sqlite3

├config

　│ ├・・・

　│ ├settings.py

　│ └urls.py

├templates

　 │　├base.html

　 │ ├index.html

　 │ ├list.html

　 │ ├create.html

　 │ ├detail.html

　 │ └update.html #新規作成

├env_blog2

└manage.py

urls.pyでは新しいURLパターンを作成した。

利用者からのリクエストのURLが以下と一致した場合に実行されるPath関数を追記している。

例

http://127.0.0.1:8000/app/update/1

views.pyでは汎用ビュークラスのUpdateViewを継承したBlogUpdateViewを作成した。

update.htmlではviews.pyのBlogUpdateViewから受け取ったブログ記事の情報を表示している。

Django記事一覧

前回：【Django】クラスベースビューで詳細画面を作成【ブログアプリ2】

次回：【Django】クラスベースビューで削除機能を作成【ブログアプリ2】

Django記事一覧