自分だけのクイズを作成しよう - Quipha
スポンサーリンク

【Django4】CRUDアプリを作ろう!

Django

当サイトではアフィリエイト広告を利用しています。

新規登録

ビューの修正

新規登録処理は、CreateViewを使用して、以下のように実装します。
以降、主に差分の実装のみ記載します。完成ソースは、GitHubリポジトリを参照してください。

crud/views.py
from .models import Product
from django.views.generic.edit import CreateView

# Create your views here.

...

class ProductCreateView(CreateView):
    """
    新規登録
    """

    model = Product

    # 登録項目
    fields = ['name', 'price']

モデルの修正

新規登録後のリダイレクト先を記述します。
リダイレクト先は、商品一覧を指定しました。

crud/models.py
...
from django.urls import reverse

class Product(models.Model):

...

    # 新規登録・編集完了後のリダイレクト先
    def get_absolute_url(self):
        return reverse('crud:list')

URLの追加

新規登録画面を呼び出すためのURLを追加します。
以下のファイルを修正します。

crud/urls.py
from django.urls import path
from . import views

app_name = "crud"
urlpatterns = [

...

    # 新規登録
    path('new/', views.ProductCreateView.as_view(), name='new'),
]

テンプレートファイルの作成

新規登録画面のテンプレートファイルを作成します。

crud/templates/crud/product_form.html
<h1>新規登録</h1>

<form method="post">
    {% csrf_token %}
    {{ form.as_p }}

    <a href="{% url 'crud:list' %}">戻る</a>
    <input type="submit" value="登録">
</form>

テンプレートファイルのパスとファイル名は、デフォルトで上記になります。

一覧画面のテンプレートを修正し、新規登録画面への遷移を追加します。

crud/templates/crud/product_list.html
<h1>商品一覧</h1>

<a href="{% url 'crud:new' %}">新規登録</a>

..

以下のURLにアクセスします。

http://localhost:8000/crud/

新規登録リンクが表示されますので、クリックします。

新規登録画面が表示されました。
任意で名前と価格を入力し、登録ボタンをクリックします。

一覧画面に戻り、商品が正常に登録されたことが確認できます。

スポンサーリンク

編集

ビューの修正

編集処理は、UpdateViewを使用して、以下のように実装します。
デフォルトのテンプレートファイル名が、新規登録と同じになってしまうため、ここでは「template_name_suffix」を設定して、編集用のテンプレートファイル名を指定します。

crud/views.py
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を追加します。
以下のファイルを修正します。

crud/urls.py
from django.urls import path
from . import views

app_name = "crud"
urlpatterns = [

...

    # 編集
    path('edit/<int:pk>/', views.ProductUpdateView.as_view(), name='edit'),
]

テンプレートファイルの作成

編集画面のテンプレートファイルを作成します。

crud/templates/crud/product_update_form.html
<h1>編集</h1>

<form method="post">
    {% csrf_token %}
    {{ form.as_p }}

    <a href="{% url 'crud:list' %}">戻る</a>
    <input type="submit" value="編集">
</form>

テンプレートファイルのパスとファイル名は、クラスで接尾辞を指定しましたので上記になります。

一覧画面のテンプレートを修正し、各データごとに編集ボタンを追加しました。

crud/templates/crud/product_list.html
..

<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を使用して、以下のように実装します。
削除完了後のリダイレクト先を指定します。

crud/views.py
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を追加します。
以下のファイルを修正します。

crud/urls.py
from django.urls import path
from . import views

app_name = "crud"
urlpatterns = [

...

    # 削除
    path('delete/<int:pk>/', views.ProductDeleteView.as_view(), name='delete'),
]

テンプレートファイルの作成

削除確認画面のテンプレートファイルを作成します。

crud/templates/crud/product_confirm_delete.html
<h1>削除</h1>

<form method="post">
    {% csrf_token %}

    以下の商品を削除してもよろしいですか?<br>
    {{ object }}<br>

    {{ form }}
    <a href="{% url 'crud:list' %}">戻る</a>
    <input type="submit" value="削除">
</form>

テンプレートファイルのパスとファイル名は、デフォルトで上記になります。

一覧画面のテンプレートを修正し、各データごとに削除ボタンを追加しました。

crud/templates/crud/product_list.html
..

<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を追加)

crud/views.py
from .models import Product
from django.views.generic.list import ListView

# Create your views here.


class ProductListView(ListView):
    """
    一覧
    """

    # 一覧を表示するモデルを指定する
    model = Product

    # 1ページの件数
    paginate_by = 5

一覧画面のテンプレートを修正し、ページネーションを追加します。

crud/templates/crud/product_list.html
..

</table>

{# ページの表示 #}
{{ page_obj.number }} / {{ page_obj.paginator.num_pages }} ページ<br>

{# 前へ #}
{% if page_obj.has_previous %}
<a href="?page=1">&laquo; 先頭</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 }}">最後 &raquo;</a>
{% endif %}

以下のURLにアクセスします。

http://localhost:8000/crud/

5件以下の場合は、「前へ・次へ」のリンクが表示されません。

5件以上データがある場合は、「次へ」リンクが表示されます。

次のページを開くと、「前へ」リンクが表示され、ページを切り替えることができます

完成ソース

今回作成したプロジェクトのソース全容は、以下のリポジトリをご覧ください。

GitHub - chigusa-web/djangoCrudApp: 【Django4】CRUDアプリを作ろう!
【Django4】CRUDアプリを作ろう!. Contribute to chigusa-web/djangoCrudApp development by creating an account on GitHub.

その他

外部サーバーへ公開

作成したアプリは公開して使ってもらいましょう!
Djangoアプリケーションを外部公開する方法をまとめました。

脆弱性対策

脆弱性を抱えたアプリケーションの場合、攻撃を受ける可能性があり大変危険です。
作成したアプリケーションは、脆弱性対策も意識しましょう。

GitHubと連携

GitHubと連携する方法を解説しました。
プロジェクトの管理はGitHubを活用しましょう。

GitHub Copilot

GitHub Copilotを導入し、AIにコーディングをサポートしてもらうこともできます。

さいごに

今回はDjangoでCRUDアプリを作成してみました。
予め用意されているクラスを使用することにより、簡単に作成することができました。
もちろん柔軟に対応することもできますので、ぜひ試してみてください。

他にも私のブログで、Djangoについて解説している記事がありますのでご覧ください。

\オススメ/

コメント

タイトルとURLをコピーしました