DjangoでCRUD作成

こちらでは、前回作成記事のDjangoまとめの続きとして、
CRUDのアプリを作成です。
既に作成済のメッセージ投稿アプリを例に話していきます。

CRUDとは、create(作成)、read(一覧読みこみ)、update(更新)、delete(削除)
の略称で、アプリ作成の基礎となるものです。
こちらができれば、日記アプリや、ユーザー登録ページなど、様々なものを作ることができます。

前回の記事の手順で、Djangoをインストール、プロジェクト、アプリを作成後に、
まずは、models.pyにデータの持ち方を定義します。


Messageクラスを作成し、
DBで使用する項目をそれぞれ定義しました。
プライマリーキーをいidにし、日付、タイトル、本文、作成日、更新日を追加しました。
```
class Message(models.Model):
    id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)
    date = models.DateField()
    title = models.CharField(max_length=200)
    text = models.CharField(max_length=500)
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)
```
次にマイグレーションファイルの作成をします。
```
python manage.py makemigrations アプリ名
```
ファイルに定義したテーブルをDBに作成する。マイグレーション
```
python manage.py migrate
```
from django.urls import path
from . import views
urls.pyにはルーティングを記載します。

以下のコードの読み方は、
localhost:8000/アプリ名/とURLに打つと、
viewsのmessage_list関数が呼び出されます。

また、localhost:8000/アプリ名/newとURLに打つと、
viewsのmessage_create関数が呼び出されます。

こんな感じで、CRUDのルーティングを記載しました。
```
urlpatterns = [
    path('', views.message_list, name='message_list'),
    path('new/', views.message_create, name='message_create'),
    path('<uuid:id>/', views.message_detail, name='message_detail'),
    path('<uuid:id>/edit/', views.message_edit, name='message_update'),
    path('<uuid:id>/delete/', views.message_delete, name='message_delete'),
]

```
さて、CURDのロジック面をviews.pyに記載します。
ルーティングから呼び出している、関数の部分ですね。
こちらの関数では、各HTMLページを呼び出します。
```
# 一覧ページ
def message_list(request):
    messages = Message.objects.all()
    return render(request, 'message_app/message_list.html', {'messages': messages})


# 詳細表示
def message_detail(request, id):
    message = get_object_or_404(Message, id=id)
    return render(request, 'message_app/message_detail.html', {'message': message})


# 新規作成
def message_create(request):
    if request.method == "POST":
        form = MessageForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('message_list')
        else:
            print(form.errors)
    else:
        form = MessageForm()
    return render(request, 'message_app/message_form.html', {'form': form})


# 編集
def message_edit(request, id):
    message = get_object_or_404(Message, id=id)
    if request.method == "POST":
        form = MessageForm(request.POST, instance=message)
        if form.is_valid():
            form.save()
            return redirect('message_list')
    else:
        form = MessageForm(instance=message)
    return render(request, 'message_app/message_form.html', {'form': form})


# 削除
def message_delete(request, id):
    message = get_object_or_404(Message, id=id)
    if request.method == "POST":
        message.delete()
        return redirect('message_list')
    return render(request, 'message_app/message_confirm_delete.html', {'message': message})
```
長くなるので、記載はしませんが、
上記でそれぞれ、呼び出しているHTMLページも作成をします。

これでサーバ起動後に、
それぞれのページを確認し、実際に想定通りにページへ反映されるか、確かめます。

<h3>一覧ページ</h3>
今回は、message_appというアプリ名で作成していますが、
message_app/ と、アプリ名の後に何もつけない、デフォルトだと、一覧ページが出るように作成しています。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676205/c6dbe20b-1d8e-6f9f-e4be-61a342ab84af.png" alt="一覧" width="500>

次に、詳細ページは、この一番上の[1回目の投稿]をクリックします。
すると、message_app/uuid という、この投稿ページのユニークIDで、
詳細ページが開きます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676205/9b29e31e-203a-94cb-bc21-c523698d0880.png" alt="詳細" width="500">

編集をクリックすると、下記のように、message_app/uuid/editで、
編集ページが表示されます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676205/c0d91051-3fa2-3fad-94b4-cb8aab2b1eeb.png" alt="詳細" width="500">
もしも、頑張りました。を
頑張りました。本当に
と編集して。保存を押すと、

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676205/469b2d85-2f33-f627-2c53-4224e7a789cc.png" alt="詳細" width="200">

再度開いた時に、更新されていることがわかります。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676205/39f2d81b-cc94-cc92-4d79-a2a47dfc774f.png" alt="更新後" width="500">

次に削除ボタンを押すと、アラートが表示されます。
こちらは、message_app/uuid/delete/ でのリクエストとなります。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676205/a9c07cf9-68af-1229-412d-5920bf7b5105.png" alt="削除画面" width=500>

ここで、確認を押すと、削除されたことがわかります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676205/9895b63f-ed2c-e1c9-7f98-1f1848a0c10a.png" alt="削除画面" width=300>

最後に、メッセージの作成をしてみます。
message_app/new/で作成ページに飛びます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676205/49199035-a440-b2c8-48d1-c036ba84eb5d.png" alt="作成画面" width=300>

作成メッセージを書いた後に、保存ボタンを押します。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676205/ddebc6d4-25a1-8ca5-7ca5-0a2cabd15b5c.png" alt="作成画面" width=300>

すると、quitaで投稿というタイトルが一覧ページに増えました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676205/85d6650a-e813-fd86-ab0d-17817115e24e.png" alt="作成画面" width=300>

こちらをクリックすると、作成が成功したことがわかります。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/676205/08880899-b9c0-e360-d286-e3b3a27181ce.png" alt="作成画面" width=500>

どんなフレームワークを学ぶときでも、このCRUDの学習は欠かせないものになるので、
ぜひ、参考になればと思います。