新規登録
ビューの修正
新規登録処理は、CreateViewを使用して、以下のように実装します。
以降、主に差分の実装のみ記載します。完成ソースは、GitHubリポジトリを参照してください。
from .models import Product
from django.views.generic.edit import CreateView
# Create your views here.
...
class ProductCreateView(CreateView):
"""
新規登録
"""
model = Product
# 登録項目
fields = ['name', 'price']
モデルの修正
新規登録後のリダイレクト先を記述します。
リダイレクト先は、商品一覧を指定しました。
...
from django.urls import reverse
class Product(models.Model):
...
# 新規登録・編集完了後のリダイレクト先
def get_absolute_url(self):
return reverse('crud:list')
URLの追加
新規登録画面を呼び出すためのURLを追加します。
以下のファイルを修正します。
from django.urls import path
from . import views
app_name = "crud"
urlpatterns = [
...
# 新規登録
path('new/', views.ProductCreateView.as_view(), name='new'),
]
テンプレートファイルの作成
新規登録画面のテンプレートファイルを作成します。
<h1>新規登録</h1>
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<a href="{% url 'crud:list' %}">戻る</a>
<input type="submit" value="登録">
</form>一覧画面のテンプレートを修正し、新規登録画面への遷移を追加します。
<h1>商品一覧</h1>
<a href="{% url 'crud:new' %}">新規登録</a>
..以下のURLにアクセスします。
http://localhost:8000/crud/新規登録リンクが表示されますので、クリックします。
新規登録画面が表示されました。
任意で名前と価格を入力し、登録ボタンをクリックします。
一覧画面に戻り、商品が正常に登録されたことが確認できます。
編集
ビューの修正
編集処理は、UpdateViewを使用して、以下のように実装します。
デフォルトのテンプレートファイル名が、新規登録と同じになってしまうため、ここでは「template_name_suffix」を設定して、編集用のテンプレートファイル名を指定します。
from .models import Product
from django.views.generic.edit import CreateView, UpdateView
# Create your views here.
...
class ProductUpdateView(UpdateView):
"""
編集
"""
model = Product
# 更新項目
fields = ['name', 'price']
# テンプレートファイル名の接尾辞の指定
template_name_suffix = '_update_form'URLの追加
編集画面を呼び出すためのURLを追加します。
以下のファイルを修正します。
from django.urls import path
from . import views
app_name = "crud"
urlpatterns = [
...
# 編集
path('edit/<int:pk>/', views.ProductUpdateView.as_view(), name='edit'),
]
テンプレートファイルの作成
編集画面のテンプレートファイルを作成します。
<h1>編集</h1>
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<a href="{% url 'crud:list' %}">戻る</a>
<input type="submit" value="編集">
</form>一覧画面のテンプレートを修正し、各データごとに編集ボタンを追加しました。
..
<table border="1">
<thead>
<tr>
<td>商品名</td>
<td>価格</td>
<td></td>
</tr>
</thead>
{% for product in object_list %}
<tr>
<td>{{ product.name }}</td>
<td>{{ product.price }} 円</td>
<td>
<a href="{% url 'crud:edit' pk=product.pk %}">編集</a>
</td>
</tr>
{% endfor %}
</table>以下のURLにアクセスします。
http://localhost:8000/crud/データ行ごとに編集リンクが表示されますので、クリックします。
編集画面が表示されました。
任意で名前と価格を入力し、編集ボタンをクリックします。
一覧画面に戻り、商品が正常に編集されたことが確認できます。
削除
ビューの修正
削除処理は、DeleteViewを使用して、以下のように実装します。
削除完了後のリダイレクト先を指定します。
from .models import Product
from django.views.generic.edit import CreateView, UpdateView, DeleteView
from django.urls import reverse_lazy
# Create your views here.
...
class ProductDeleteView(DeleteView):
"""
削除
"""
model = Product
# 削除完了後のリダイレクト先
success_url = reverse_lazy('crud:list')URLの追加
削除画面を呼び出すためのURLを追加します。
以下のファイルを修正します。
from django.urls import path
from . import views
app_name = "crud"
urlpatterns = [
...
# 削除
path('delete/<int:pk>/', views.ProductDeleteView.as_view(), name='delete'),
]
テンプレートファイルの作成
削除確認画面のテンプレートファイルを作成します。
<h1>削除</h1>
<form method="post">
{% csrf_token %}
以下の商品を削除してもよろしいですか？<br>
{{ object }}<br>
{{ form }}
<a href="{% url 'crud:list' %}">戻る</a>
<input type="submit" value="削除">
</form>一覧画面のテンプレートを修正し、各データごとに削除ボタンを追加しました。
..
<table border="1">
<thead>
<tr>
<td>商品名</td>
<td>価格</td>
<td></td>
</tr>
</thead>
{% for product in object_list %}
<tr>
<td>{{ product.name }}</td>
<td>{{ product.price }} 円</td>
<td>
<a href="{% url 'crud:edit' pk=product.pk %}">編集</a>
<a href="{% url 'crud:delete' pk=product.pk %}">削除</a>
</td>
</tr>
{% endfor %}
</table>以下のURLにアクセスします。
http://localhost:8000/crud/データ行ごとに削除リンクが表示されますので、クリックします。
削除確認画面が表示されました。
削除ボタンをクリックします。
一覧画面に戻り、商品が正常に削除されたことが確認できます。
一覧のページネーション
一覧のページネーションに対応してみましょう。
ListViewがページネーションに対応しているため、簡単に実装できます。
一覧の処理を修正します。(paginate_byを追加)
from .models import Product
from django.views.generic.list import ListView
# Create your views here.
class ProductListView(ListView):
"""
一覧
"""
# 一覧を表示するモデルを指定する
model = Product
# 1ページの件数
paginate_by = 5一覧画面のテンプレートを修正し、ページネーションを追加します。
..
</table>
{# ページの表示 #}
{{ page_obj.number }} / {{ page_obj.paginator.num_pages }} ページ<br>
{# 前へ #}
{% if page_obj.has_previous %}
<a href="?page=1">« 先頭</a>
<a href="?page={{ page_obj.previous_page_number }}">前へ</a>
{% endif %}
{# 次へ #}
{% if page_obj.has_next %}
<a href="?page={{ page_obj.next_page_number }}">次へ</a>
<a href="?page={{ page_obj.paginator.num_pages }}">最後 »</a>
{% endif %}以下のURLにアクセスします。
http://localhost:8000/crud/5件以下の場合は、「前へ・次へ」のリンクが表示されません。
5件以上データがある場合は、「次へ」リンクが表示されます。
次のページを開くと、「前へ」リンクが表示され、ページを切り替えることができます。
完成ソース
今回作成したプロジェクトのソース全容は、以下のリポジトリをご覧ください。
その他
外部サーバーへ公開
作成したアプリは公開して使ってもらいましょう！
Djangoアプリケーションを外部公開する方法をまとめました。
脆弱性対策
脆弱性を抱えたアプリケーションの場合、攻撃を受ける可能性があり大変危険です。
作成したアプリケーションは、脆弱性対策も意識しましょう。
GitHubと連携
GitHubと連携する方法を解説しました。
プロジェクトの管理はGitHubを活用しましょう。
GitHub Copilot
GitHub Copilotを導入し、AIにコーディングをサポートしてもらうこともできます。
さいごに
今回はDjangoでCRUDアプリを作成してみました。
予め用意されているクラスを使用することにより、簡単に作成することができました。
もちろん柔軟に対応することもできますので、ぜひ試してみてください。
他にも私のブログで、Djangoについて解説している記事がありますのでご覧ください。
コメント