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です。
次に、収入費目を選択し、金額を入力して「登録」ボタンを押下します。
以下のような画面が表示されれば、動作確認完了です。
このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。
コメントを残す