こんにちは!Masaです。
今回もDjangoで家計簿アプリ作成の続きを行っていきます。
前回の記事↓
- Django初心者で簡単なWebアプリケーション作成を考えている人
- Djangoの学び直しをしている人
- Djangoの基礎を身に付けたい人
前回のおさらい
前回の記事ではビューの作成、フォームの作成を行いました。
from django.shortcuts import render
from django.views import View
from .models import Income, Expense, Account, Assets
#トップページ
class IndexView(View):
def get(self, request):
#データをインスタンスに格納
income = Income.objects.all()
expense = Expense.objects.all()
params = {
'income': income,
'expense': expense,
}
return render(request, 'money_diary/index.html', params)
from django import forms
from .models import(
Income,
Expense,
)
#収入入力のフォーム
class IncomeForm(forms.ModelForm):
class Meta:
model = Income
fields = '__all__'
#支出入力のフォーム
class ExpenseForm(forms.ModelForm):
class Meta:
model = Expense
fields = '__all__'
今回は実際にHTMLを記述して、ブラウザに表示させたいと思います👍
テンプレートの拡張
まずは、テンプレートの拡張を行います。
テンプレートの拡張は以前の記事で扱っていますので参考にしてください。
ベーステンプレートの作成
ベースのテンプレートを作成します。
“templates”ファイル内の“index.html”と同じディレクトリ(階層)に“base.html”を作成します。
“base.html”に以下のコードを記述してください。
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<title>家計簿アプリ</title>
</head>
<body>
<h1>家計簿アプリ</h1>
{% block content %}
{% endblock %}
</body>
</html>
index.htmlにbase.htmlを反映させる
次に”index.html”に”base.html”を反映させましょう。
“index.html”に以下を記述してください。
{% extends 'money_diary/base.html' %}
{% block content %}
<h3>家計簿アプリ</h3>
{% endblock %}
適用されているか開発用サーバを起動して確認してみてください。
「家計簿アプリ」という文字が2つ表示されていたらOKです👍
フォームと取引履歴を配置する
今回は家計簿アプリを作成するにあたって、有名な家計簿アプリMFのWebアプリを参考に配置などを考えていきたいと思います。
まず収入、支出のフォームと最近の取引履歴を配置していきます。
最近の取引履歴に関してはとりあえず収入と支出で分けて記載します(後日結合させます)
{% extends 'money_diary/base.html' %}
{% block content %}
<h2>収入の入力</h2>
<form method="post">
{% csrf_token %}
{{ incomeform.as_p }}
<button type="submit" name="income_register_button">追加</button>
</form>
<h2>支出の入力</h2>
<form method="post">
{% csrf_token %}
{{ expenseform.as_p }}
<button type="submit" name="expense_register_button">追加</button>
</form>
<h2>収入履歴</h2>
<table>
{% for item in income %}
<tr>
<td>{{ item.date }}{{ item.kind }}{{ item.amount }}</td>
</tr>
{% endfor %}
</table>
<h2>支出の履歴</h2>
<table>
{% for item in expense %}
<tr>
<td>{{ item.date }}{{ item.kind }}{{ item.amount }}</td>
</tr>
{% endfor %}
</table>
{% endblock %}
開発用ブラウザを表示すると、フォーム等が表示されていると思います。
POST時の処理を記述する
現在IndexViewにはGET時の処理しか記述がなく、POST時の処理がまだありません。
GETとPOSTの違いは以下の通りです。
GET/POST | 違い | 用途 |
---|---|---|
GET | 指定したリソースの表現を 転送するようにリクエストする | ブラウザでURLを入力し 検索するとき |
POST | 指定したリソースを実装した 機能に従って処理する機能 | 登録処理や更新処理などの 書き込みがある場合 |
よって、URLを入力して最初にページを表示させるときはGET処理を行い、支出の入力処理はPOST処理を行うことになります。
そのため、IndexViewにPOST処理を記述していきましょう。
基本的にフォームからのPOST処理は以下のように行います。
モデルインスタンス = モデルクラス()
フォームインスタンス = フォームクラス(request.POST, instance=モデルインスタンス)
フォームインスタンス.save()
今回は同一ページ内にフォームが複数あるため、<button>タグに名前を付けてどちらのボタンが押されたかで条件分けをしています。
views.pyに一部追加とPOST時の処理を記述します。(追加部分はコメントしています)
from django.shortcuts import render, redirect #追加
from django.views import View
from .models import Income, Expense, Account, Assets
from .forms import IncomeForm, ExpenseForm
#トップページ
class IndexView(View):
def get(self, request):
#データをインスタンスに格納
income = Income.objects.all()
expense = Expense.objects.all()
#formをインスタンスに格納
incomeform = IncomeForm() #追加
expenseform = ExpenseForm() #追加
params = {
'income': income,
'expense': expense,
'incomeform': incomeform, #追加
'expenseform': expenseform, #追加
}
return render(request, 'money_diary/index.html', params)
#以下全て追加
def post(self, request):
#収入の登録が行われた時
if 'income_register_button' in request.POST:
income = Income()
incomeform = IncomeForm(request.POST, instance=income)
incomeform.save()
#支出の登録が行われた時
elif 'expense_register_button' in request.POST:
expense = Expense()
expenseform = ExpenseForm(request.POST, instance=expense)
expenseform.save()
return redirect(to='/')
これで開発用サーバを起動してみてみてください。
収入・支出の入力が反映されれば成功です!
デザインが見にくいですが、先に機能を充実させたいと思います¥。
まとめ
今回はフォームやデータベースの値をテンプレートに反映させる作業を行いました。
ここまでの内容は当ブログのタスク管理アプリ作成シリーズと全く一緒だと思います。
今後数回でより充実した機能を作成していきたいと思うので、お時間があるときに覗いてください!
最後まで読んでいただきありがとうございます。
自己学習に役立てていただけたら嬉しく思います
またSNSやブログでシェアしていただくことや、誤植などをコメントで指摘いただけたら幸いです。
次回の記事↓
コメント