新規登録画面の修正
新規登録画面を修正します。
formについては、django-widget-tweaksを使用してクラスを指定し調整します。
crud/templates/crud/product_form.html
{% extends 'crud/base.html' %}
{% load widget_tweaks %}
{% block content %}
<h1>新規登録</h1>
<form method="post">
{% csrf_token %}
<div class="mb-3">
{{ form.name|add_label_class:"form-label" }}
{{ form.name|add_class:"form-control" }}
{{ form.price|add_label_class:"form-label" }}
{{ form.price|add_class:"form-control" }}
</div>
<a class="btn btn-secondary" href="{% url 'crud:list' %}">戻る</a>
<input class="btn btn-primary" type="submit" value="登録">
</form>
{% endblock %}一度、以下のURLにアクセスし確認しましょう。
http://localhost:8000/crud/new/新規登録画面が表示されました。
商品名と価格についてはそれぞれ、「Name」と「Price」と表示されていますので変更します。
モデルを以下のように修正します。(verbose_nameを指定)
crud/models.py
from django.db import models
from django.urls import reverse
# Create your models here.
class Product(models.Model):
name = models.CharField(max_length=200, verbose_name="商品名")
price = models.IntegerField(verbose_name="価格")
def __str__(self):
return self.name
# 新規登録・編集完了後のリダイレクト先
def get_absolute_url(self):
return reverse('crud:list')
再度画面を表示してみると、今度は日本語で表示されました。
編集画面の修正
編集画面を修正します。新規登録画面と同じような要領です。
crud/templates/crud/product_update_form.html
{% extends 'crud/base.html' %}
{% load widget_tweaks %}
{% block content %}
<h1>編集</h1>
<form method="post">
{% csrf_token %}
<div class="mb-3">
{{ form.name|add_label_class:"form-label" }}
{{ form.name|add_class:"form-control" }}
{{ form.price|add_label_class:"form-label" }}
{{ form.price|add_class:"form-control" }}
</div>
<a class="btn btn-secondary" href="{% url 'crud:list' %}">戻る</a>
<input class="btn btn-primary" type="submit" value="編集">
</form>
{% endblock %}一覧画面の編集ボタンをクリックして確認します。
編集画面が表示されました。
削除画面の修正
削除画面を修正します。
crud/templates/crud/product_confirm_delete.html
{% extends 'crud/base.html' %}
{% block content %}
<h1>削除</h1>
<form method="post">
{% csrf_token %}
<div class="alert alert-danger" role="alert">
以下の商品を削除してもよろしいですか？
</div>
<div class="alert alert-light" role="alert">
{{ object }}
</div>
{{ form }}
<a class="btn btn-secondary" href="{% url 'crud:list' %}">戻る</a>
<input class="btn btn-danger" type="submit" value="削除">
</form>
{% endblock %}一覧画面の削除ボタンをクリックして確認します。
削除画面が表示されました。
完成ソース
今回作成したプロジェクトのソース全容は、以下のリポジトリをご覧ください。
GitHub - chigusa-web/djangoCrudApp: 【Django4】CRUDアプリを作ろう！
【Django4】CRUDアプリを作ろう！. Contribute to chigusa-web/djangoCrudApp development by creating an account on GitHub.
github.com
その他
外部サーバーへ公開
作成したアプリは公開して使ってもらいましょう！
Djangoアプリケーションを外部公開する方法をまとめました。
脆弱性対策
脆弱性を抱えたアプリケーションの場合、攻撃を受ける可能性があり大変危険です。
作成したアプリケーションは、脆弱性対策も意識しましょう。
GitHubと連携
GitHubと連携する方法を解説しました。
プロジェクトの管理はGitHubを活用しましょう。
GitHub Copilot
GitHub Copilotを導入し、AIにコーディングをサポートしてもらうこともできます。
さいごに
今回はBootstrapを利用して、デザインを調整しました。
レスポンシブデザインにも対応でき、便利です。
ぜひ活用しましょう。
他にも私のブログで、Djangoについて解説している記事がありますのでご覧ください。
コメント