DjangoWeb アプリ開発(はじめてのWebDBアプリ:UI実装)

:2018年01月02日

:Django

:PythonDjangoViewTemplate

DjangoWeb アプリ開発(はじめてのWebDBアプリ:UI実装)

本レッスンのゴール

  • DB への新規登録、参照の UI を実装し、Web アプリの形をざっくり作る。

前提条件

  • (必須)Model を実装し、DB にマイグレーション済みである事。
  • (推奨)Django Admin から DB の操作が出来るようになっている事。
ATTENTION

全体の流れ

以下の流れで進めます。

  1. テンプレートの実装
  2. View の実装
  3. ルーティング設定
  4. 動作確認

作業

1. テンプレートの実装

Django における UI の生成は、テンプレートに対して値を埋め込む形で生成されます。 ここでは、費目と金額を入力して収入を記録し、一覧を表示する画面を想定します。 まず、以下のように、myapp/templates/myapp に、index.htmlを作成します。

index

これがテンプレートファイルです。このファイルに、以下のようにテンプレートを実装します。

<!DOCTYPE html>
<html lang="jp">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <form action="{% url 'myapp:income' %}" method="post">
      {% csrf_token %} 収入費目:
      <select name="income_category">
        {% for income_category in income_category_list %}
        <option value="{{income_category.id}}">{{income_category.name}}</option>
        {% endfor %}
      </select>
      金額:
      <input type="number" name="income_amount" />
      <input type="submit" value="登録" />
    </form>

    <table>
              
      <tr>
        <th>年月日</th>
        <th>費目</th>
        <th>金額</th>
      </tr>
      {% if income_record_list %} {% for income_record in income_record_list %}
                        
      <tr>
                              
        <td>{{income_record.ymd}}</td>
                              
        <td>{{income_record.category}}</td>
                             
        <td>{{income_record.amount}}</td>
                   
      </tr>
      {% endfor %} {% endif %}
    </table>
  </body>
</html>

これでテンプレートは実装完了です。

2. View の実装

次に、1.で実装したテンプレートを使って、

  • ブラウザーの入力を DB に登録する
  • DB に登録されたデータをブラウザーに表示する

処理を実装します。 views.pyに、以下のコードを実装してください。

from django.http import HttpResponse
from django.template import loader

from .models import IncomeCategory, Income

def index(request):

    # 収入費目リストを取得
    income_category_list = IncomeCategory.objects.all()

    if request.method == 'POST':
        # 収入費目を取得
        income_category = IncomeCategory.objects.get(pk=request.POST['income_category'])

        income_amount = request.POST['income_amount']
        income = Income(amount=income_amount, incomecategoryid=income_category)
        income.save()

    # 収入記録データを取得
    income_record_list = Income.objects.all()

    # HTMLテンプレートオブジェクトを取得
    template = loader.get_template('myapp/index.html')

    # テンプレートの表示に使うデータ
    context = {
        'income_category_list': income_category_list,
        'income_record_list': income_record_list,
    }

    return HttpResponse(template.render(context, request))

これで、View の実装は完了です。

3. ルーティングの設定

URL と View を紐付けるため、url.py に、以下のコードを実装します。

from django.urls import path

from . import views

app_name = 'myapp'
urlpatterns = [
path('', views.index, name='index'),
]

以上でルーティングの設定は完了です。

4. 動作確認

最後に、動作確認を行います。 manage.py のあるディレクトリで、以下のコマンドを実行します。

$ python manage.py runserver

次に、ブラウザを起動し、http://127.0.0.1:8000/myappにアクセスします。 以下のような画面が表示されれば OK です。

myapp

次に、収入費目を選択し、金額を入力して「登録」ボタンを押下します。

以下のような画面が表示されれば、動作確認完了です。

register