削除機能の付与について
前回は更新機能を作成した。
今回は削除機能を作成する。
現在のディレクトリ構成は以下の通り。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
デスクトップ └Blog ├Blog_app │ ├migrations │ ├__init__.py │ ├admin.py │ ├apps.py │ ├models.py │ ├tests.py │ ├views.py │ ├urls.py │ └templates │ └Blog_templates │ ├index.html │ ├create.html │ ├page_list.html │ ├detail.html │ └update.html ├db.sqlite3 ├config │ ├・・・ │ └urls.py ├env_blog └manage.py |
削除機能を付与する手順
urls.pyの編集
～デスクトップ/Blog/Blog_app/urls.py
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
from django.urls import path from .views import index, create, page_list, detail, update, delete #[1] app_name = 'Blog_app' urlpatterns = [ path('', index, name='index'), path('index/', index, name='index'), path('create/', create, name='create'), path('page_list/', page_list, name='page_list'), path('detail/<int:pk>/', detail, name="detail"), path('update/<int:pk>/', update, name='update'), path('delete/<int:pk>/', delete, name='delete'), #[2] ] |
[1]deleteを追加
views.pyからdelete関数を追加
delete関数は未作成なので、次の手順で作成する。
[2]path関数を追加
urlpatternsにpath関数を追加。
利用者からのリクエストでURLの末尾がdelete/pk/だった場合、第二引数で指定したviews.pyのdelete関数を実行する。また、このURLパターンは第三引数でdeleteと名付けた。
views.pyの編集
～デスクトップ/Blog/Blog_app/views.py
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
from django.shortcuts import render, get_object_or_404, redirect from .models import Blog # Create your views here. def index(request): template_name = "blog_templates/index.html" return render(request, template_name) def create(request): template_name = "blog_templates/create.html" if request.POST: title = request.POST["title"] content = request.POST["content"] object_ = Blog(title=title, content=content) object_.save() return render(request, template_name) def page_list(request): template_name = "blog_templates/page_list.html" pages = Blog.objects.all() context = {'pages': pages} return render(request, template_name, context) def detail(request, pk): template_name = "blog_templates/detail.html" #page = Blog.objects.get(pk=pk) page = get_object_or_404(Blog, pk=pk) context = {'page': page} return render(request, template_name, context) def update(request, pk): template_name = "blog_templates/update.html" page = get_object_or_404(Blog, pk=pk) #if request.method=='POST': if request.POST: title = request.POST.get('title') content = request.POST.get('content') page.title = title page.content = content page.save() return redirect('Blog_app:detail', pk=pk) context = {'page':page} return render(request, template_name, context) #[1] def delete(request, pk): template_name = "blog_templates/delete.html" page = get_object_or_404(Blog, pk=pk) if request.POST: page.delete() return redirect('Blog_app:page_list') context = {'page':page} return render(request, template_name, context) |
[1]delete関数を作成
前の記事のdetail関数と構成は近い。
template_name = “blog_templates/delete.html”
page = get_object_or_404(Blog, pk=pk)
template_nameにblog_templatesディレクトリ内のdelete.htmlを格納。
delete.htmlは未作成なので、次の手順で作成する。
変数pageに指定したブログ記事のオブジェクトを格納。存在しない場合は404エラーを返す。
if request.POST:
page.delete()
return redirect(‘Blog_app:page_list’)
利用者からのリクエストがPOSTメソッドだった場合に処理する。
変数pageに含まれる指定記事のオブジェクトを削除する。
その後、一覧画面へリダイレクトを行う。
context = {‘page’:page}
return render(request, template_name, context)
ここはPOSTメソッドではない場合、つまり削除画面を開いたタイミングで実行される。
変数contextにpageというキーで、変数pageに格納されたブログ記事のオブジェクトを辞書形式で持たせる。
render関数でdelete.htmlにcontextを渡して削除画面を表示する。
この後、利用者が削除ボタンを押すとPOSTメソッドでrequestが送信され、先ほどのif文の内容が実行される
delete.htmlの作成
～デスクトップ/Blog/Blog_app/temlates/blog_templates/delete.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ブログ</title> </head> <body> <h1>削除</h1> <a href="{% url 'Blog_app:index' %}">トップ</a><br> <a href="{% url 'Blog_app:page_list' %}">一覧</a><br> <p>以下の記事を削除します。よろしいですか？</p> {{ page.title }}<br> {{ page.content }}<br> {{ page.created_date }}<br> <form method="POST"> {% csrf_token %} <button type="submit">削除</button> </form> </body> </html> |
<h1>削除</h1>
<a href=”{% url ‘Blog_app:index’ %}”>トップ</a><br>
<a href=”{% url ‘Blog_app:page_list’ %}”>一覧</a><br>
h1タグで削除を表示
また、Aタグでトップページと一覧画面へのリンクを作成。
<p>以下の記事を削除します。よろしいですか？</p>
{{ page.title }}<br>
{{ page.content }}<br>
{{ page.created_date }}<br>
{{}}で囲ってブログ記事の各フィールドを表示
page.title, page.content, page.created_dateは
これらの3つはmodels.pyで定義したBlogモデルの全フィールド。
DBにもこの3カラムが作成されているので
もっと本格的なアプリケーションではフィールドの数が増えるので、表示する内容を取捨選択するか、全部表示するなら1つ1つするよりも別の方法を考えた方が良いかもしれない。
<form method=”POST”>
{% csrf_token %}
<button type=”submit”>削除</button>
</form>
POSTメソッドで削除ボタンを作成
csrf_tokenはセキュリティ上必要な内容。
CSRF対策をするために記述する必要があり、これがないとエラーになる。
detail.htmlの編集
～デスクトップ/Blog/Blog_app/temlates/blog_templates/detail.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ブログ</title> </head> <body> <h1>詳細</h1> <a href="{% url 'Blog_app:index' %}">トップ</a><br> <a href="{% url 'Blog_app:page_list' %}">一覧</a><br> {{page.title}}<br> {{page.content}}<br> {{page.created_date}}<br> <a href="{% url 'Blog_app:update' page.id %}">更新</a> <a href="{% url 'Blog_app:delete' page.id %}">削除</a> <!-- [1] --> </body> </html> |
[1]削除画面へのリンクを作成
<a href=”{% url ‘Blog_app:delete’ page.id %}”>削除</a>
Aタグを使って削除画面へのリンクを作成。
リンクテキストは「削除」。
{%%}で囲われたurlテンプレートタグによってurls.py内でBlog_appと名付けられたアプリケーションの、name=deleteと名付けられているpath関数を指定して呼び出す。その際、pageのIDも一緒に渡している。
このIDはpkと同一。
page_list.htmlの編集
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ブログ</title> </head> <body> <h1>記事一覧</h1> <a href="{% url 'Blog_app:index' %}">トップ</a><br> {% for page in pages %} <ul> <li>{{ page.title }}</li> <li>{{ page.content }}</li> <li>{{ page.created_date }}</li> <li><a href="{% url 'Blog_app:detail' page.id %}">詳細</a></li> <li><a href="{% url 'Blog_app:update' page.id %}">更新</a></li> <li><a href="{% url 'Blog_app:delete' page.id %}">削除</a></li> <!-- [1] --> </ul> {% endfor %} </body> </html> |
[1]削除画面へのリンクを作成
deital.htmlに追記した内容と同一のため省略。
開発用サーバーを起動して確認
開発用サーバーを起動して、画像のように表示されていればOK
開発用サーバーの起動は以下のコマンドで行う。
～デスクトップ/Blog/
|
1 |
python manage.py runserver |
■一覧画面
一覧画面は現在はこの状態。(試しに3つ記事を作成したが、好きに記事を作成してOK)
ここから3つ目の記事を削除する。
一覧画面から削除ボタンを押しても良いし、詳細画面から削除ボタンを押しても良い。
■詳細画面
詳細画面にも削除ボタンを追加している。
■削除画面
ディレクトリ構成の確認
現在のディレクトリ構成は以下の通り。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
デスクトップ └Blog ├Blog_app │ ├migrations │ ├__init__.py │ ├admin.py │ ├apps.py │ ├models.py │ ├tests.py │ ├views.py #編集 │ ├urls.py #編集 │ └templates │ └Blog_templates │ ├index.html │ ├create.html │ ├page_list.html #編集 │ ├detail.html #編集 │ ├update.html │ └delete.html #新規作成 ├db.sqlite3 ├config │ ├・・・ │ └urls.py ├env_blog └manage.py |
Django記事一覧
前回：【Django】詳細画面に更新機能を作る【ブログアプリ】
次回：
コメント