Start App-Dev from 35.

35からはじめるアプリ開発

  1. HOME
  2. 実践編
  3. Webアプリ開発
  4. Django
  5. DjangoWeb アプリ開発(はじめてのWebDBアプリ:UI実装)

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

本レッスンのゴール

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

前提条件

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

それぞれの手順は、以下のリンク先をご参照ください。

全体の流れ

以下の流れで進めます。

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

作業

1. テンプレートの実装

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

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

<!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です。

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

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください