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

本レッスンのゴール
- DBへの新規登録、参照のUIを実装し、Webアプリの形をざっくり作る。
前提条件
- (必須)Modelを実装し、DBにマイグレーション済みである事。
- (推奨)Django AdminからDBの操作が出来るようになっている事。
それぞれの手順は、以下のリンク先をご参照ください。
全体の流れ
以下の流れで進めます。
- テンプレートの実装
- Viewの実装
- ルーティング設定
- 動作確認
作業
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です。
次に、収入費目を選択し、金額を入力して「登録」ボタンを押下します。
以下のような画面が表示されれば、動作確認完了です。
コメントを残す