Django

Django 簡単なアプリを作って基礎を覚える⑦ CreateViewを作る

次は、登録する画面を作っていきましょう❕

CreateVeiwで登録画面を作成

それでは、新規登録する画面を作成していきましょう❕

まずは、viewsからしていきましょう

views.py 登録を追加

from django.shortcuts import render
from django.http import HttpResponse
from django.views.generic import ListView, DetailView, CreateView #追記
from .models import TaskModel
from django.urls import reverse_lazy #追記


def helloworld(request):
    hello_display = HttpResponse("Hello World")
    return hello_display

class TaskList(ListView):
    template_name = "list.html"
    model = TaskModel

class TaskDetail(DetailView):
    template_name = "detail.html"
    model = TaskModel

#追記
class TaskCreate(CreateView):
    template_name = "create.html"
    model = TaskModel
    fields = ('title', 'memo', 'user', plants_startdate', 'plants_enddate')
    success_url = reverse_lazy('task:list') 

これは、ほとんどパターン化してきましたね😀

今回は、fields でどのフィールドの入力をするかをここで指定しています。

success_url は、入力した情報を登録した時に遷移する先のURLになります。

create.htmlを作成

次は、htmlファイルを作成しましょう❕

create htmlを作成しよう

htmlファイルにコードを書いていきましょう!

{% extends 'templates/base.html' %}


{% block title %}
{% endblock title %}

{% block header %}
{% endblock header %}

{% block content %}
<form action="" method="POST">
    {{form.as_p}}
    <a href="{% url 'task:list' %}" button type="button" class="btn btn-secondary">戻る</a>
    <input type="submit"  class="btn btn-primary" value="作成">
</form>
{% endblock content %}

まずは、フォームであること、そしてPOSTで送ることを指定ています。最初に登録画面を開いた時って、データを入力するために開きます。この時は、GETで、登録したいデータを入力した後に登録ボタンを押下した時は、POST
となります。

戻るボタンと登録用のボタンを配置しています。

あと、入力項目は、viewsでどのフィールドを入力するか決めていると、たった {{ from.as_p }}だけで、改行しながら表示してくれるという便利な機能になっています。

urls.py を修正

あとは、指示をだすためにurls.pyを修正します。

from django.urls import path, include
from .views import helloworld, TaskList, TaskDetail, TaskCreate #追記

app_name = 'task'
urlpatterns = [
    path('hello/', helloworld),
    path('list/', TaskList.as_view(), name='list'),
    path('detail/<int:pk>', TaskDetail.as_view(), name='detail'),
    path('create/', TaskCreate.as_view(), name='create'), #追記
]

これで、実際にURLに、 http://127.0.0.1:8000/task/create/ といれて、画面を確認してみましょう❕

いやーすごですね❕これだけで、すべてが整っています😁

実際に登録してみる!

それでは実際、登録してみましょう❕

いい内容ですね❕絶対に達成させるタスクです😆

では、作成ボタンを押下しましょう

なんかエラーになりましたね💦

これは、CSRF検証に失敗したと書いています。これは、クロスサイトリクエストフォージェリのことです。細かいことはググるとたくさん出てきますので調べてみてください。

Djangoの良いところは、CSRF対策をしていないとエラーとなるようになっているところです。

では、DjangoでのCSRF対策を入れてみましょう。

CSRF対策をhtmlファイルにいれる

{% extends 'templates/base.html' %}


{% block title %}
{% endblock title %}

{% block header %}
{% endblock header %}

{% block content %}
<form action="" method="POST">{% csrf_token %} 追加
    {{form.as_p}}
    <a href="{% url 'task:list' %}" button type="button" class="btn btn-secondary">戻る</a>
    <input type="submit"  class="btn btn-primary" value="作成">
</form>
{% endblock content %}

たったこれだけなんですが、{% csrf_token %} これを入れるだけなんです。

本当に便利なDjnagoさまです。

これでもう一度、再読み込みして登録できるかやってみましょう❕

作成ボタンを押す

やりましたねー❕登録されて、successで指定していたリストに遷移し、今登録した情報が一番下に追加されています。

リストから新規登録画面へ遷移するようにする

リスト画面を修正します。

{% extends 'templates/base.html' %}


{% block title %}
{% endblock title %}

{% block header %}
{% endblock header %}

{% block content %}
    <a href="{% url 'task:create' %}" class="btn btn-primary">新規登録</a> #追加
    <table class="table">
    <thead>
        <tr>
        <th scope="col">#</th>
        <th scope="col">タイトル</th>
        <th scope="col">担当者</th>
        </tr>
    </thead>
    <tbody>
    {% for task in object_list %}
        <tr>
        <th scope="row"><a href="{% url 'task:detail' task.pk %}" button type="button" class="btn btn-info">詳細</button></th>
        <td>{{task.title}}</td>
        <td>{{task.user}}</td>
        </tr>
    {% endfor %}
    </tbody>
    </table>
{% endblock content %}

リストの表の上に新規登録ボタンが表示されるようにしました。

リスト内に設置すると新規登録ボタンがすべての行に表示されちゃいますので。

だんだん、システムっぽくなってきましたね❕

次回は、登録したデータを修正する機能を実装しましょう❕

django-updateview
Django 簡単なアプリを作って基礎を覚える⑧ UpdateViewを作る

もくじ1 Django UpdateViewを使って更新画面を作成1.1 views.pyを修正1.2 update.html ファイルの作成1.3 urls.pyを修正1.4 list.htmlから ...

続きを見る

-Django

© 2021 ごろう@縁紡ぐ