Python・Djangoで家計簿アプリ ~ナビバーの導入~

Masa

こんにちは！Masaです。

今回も引き続き家計簿アプリの作成を行っていきましょう💪

前回の記事↓

Python・Djangoを使用して家計簿アプリを作成しています。３回目の今回はフォームとデータベースの値をテンプレートに反映させる作業で、どのアプリ開発にもつながる基礎的内容です。初心者の方もわかりやすいように各工程詳細に書いていますので、ぜひご覧ください！

こんな方におすすめ！

Django初心者で簡単なWebアプリケーション作成を考えている人
Djangoの学び直しをしている人
Djangoの基礎を身に付けたい人

前回のおさらい
ナビゲーションバーの表示
まとめ

前回のおさらい

前回の記事ではフォームの配置や、データの受け渡しを行いました。

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='/')

{% 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 %}

ナビゲーションバーの表示

今回の記事では各ページの作成、ナビゲーションバーの導入を行いたいと思います。

各ページとは

トップページ
月別収入・支出の詳細ページ
口座別保有資産ページ
資産の推移ページ
設定ページ

などです。
最初はこの５ページを作成し、必要に応じて追加していきたいと思います。

各ページにはナビゲーションバーから移動できるようにします。
ナビゲーションバーとは各ページに飛べるボタンが並んでるものです。
ちょっと違いますが、当サイトだと以下の赤枠の部分ですね。

それでは各ページを作成していきましょう。

各ページのテンプレートを作成する

各ページにはそれぞれテンプレートが必要になるため作成します。

今回、各テンプレートは、

トップページ : index.html
月別収入・支出の詳細ページ : monthly_details.html
口座別保有資産ページ : by_account.html
資産の推移ページ : assets.html
設定ページ : setup.html

としますので、”index.html”以外を新規に作成してください。

各ビューの設定

次に各ページを表示するためにviews.pyでクラスを作成します。

まだなにも表示させないため、形だけ作成しておきます。
以下のコードをviews.pyに追加して下さい（IndexViewの下）

class Monthly_DetailsView(View):
    def get(self, request):

        params = {

        }

        return render(request, 'money_diary/monthly_details.html', params)

class By_AccountView(View):
    def get(self, request):

        params = {

        }

        return render(request, 'money_diary/by_account.html', params)

class AssetsView(View):
    def get(self, request):

        params = {

        }

        return render(request, 'money_diary/assets.html', params)

class SetupView(View):
    def get(self, request):

        params = {

        }

        return render(request, 'money_diary/setup.html', params)

URLの設定

次に各ページのURLを設定します。

アプリケーションディレクト”money_diary”の“urls.py”に追記します。

from django.urls import path

from . import views

urlpatterns = [
    path('', views.IndexView.as_view(), name='index'),
    path('monthly_details/', views.Monthly_DetailsView.as_view(), name='monthly_details'),
    path('by_account/', views.By_AccountView.as_view(), name='by_account'),
    path('assets/', views.AssetsView.as_view(), name='assets'),
    path('setup/', views.SetupView.as_view(), name='setup'),
]

Bootstrapの導入

ナビゲーションバーの導入にBootstrapを使用します。

Bootstrapについては以前の記事で簡単に導入方法を紹介しています。
（テンプレート作成/base.htmlの部分）

【Django】To-Doリスト②　～テンプレート作成と管理者画面の使い方～

Python・Djangoを用いてタスク管理アプリ（To-Doリスト）の作成をわかりやすく解説しています。今回はテンプレート作成と管理者画面の使い方です。データベースのテーブルに追加する方法をメインで解説しています。次回はフォームの作成方法です。

今回も同様に、まずBootstrapの準備として”base.html”にコードを追加します。

<!DOCTYPE html>

<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>家計簿アプリ</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  </head>
  <body>
    <h1>家計簿アプリ</h1>
    {% block content %}{% endblock %}

    <!-- Bootstrap Javascript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  </body>
</html>

次にナビゲーションバーを導入します。
ナビゲーションバーはどのページでも上部に表示されるものなので、“base.html”に記述します。

Bootstrapのnavbarのページにサンプルがあるので””コピーして改良しましょう。

<!DOCTYPE html>

<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>家計簿アプリ</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">家計簿アプリ</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link" href="{% url 'index' %}">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="{% url 'monthly_details' %}">月別詳細</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="{% url 'by_account' %}">資産詳細</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="{% url 'assets' %}">資産推移</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="{% url 'setup' %}">設定</a>
            </li>
          </ul>
          <form class="d-flex">
            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success" type="submit">Search</button>
          </form>
        </div>
      </div>
    </nav>
    {% block content %}{% endblock %}

    <!-- Bootstrap Javascript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  </body>
</html>

サンプルよりも簡単にしてあります。

いじった部分は主に20行目から34行目までで、各リストにリンクを結びつけています。
サンプルでは文字色のグラデーションがありましたが、今回は消しています。

これで各ページにナビゲーションバーから飛べると思います。
飛んだ先は白紙になって入れなOKです。

各テンプレートにbase.htmlを反映させる

各ページでもナビオゲーションバーが表示されるようにしましょう。

“index.html”以外のテンプレートに以下のコードを記述して下さい。

{% extends 'money_diary/base.html' %}

{% block content %}

{% endblock %}

これにより、各ページでもナビゲーションバーが表示されページを行き来することができるようになりました。

まとめ

今回の範囲は以上となります。

本日はナビゲーションバーの設置、各ページの配置を行いました。

ナビゲーションバーは家計簿アプリに限らず、どんなアプリケーションやWebページにも使う可能性があるので、覚えていて損はありません！

次回はトップページの改良から行っていきたいと思います！

最後まで読んでいただきありがとうございます。
自己学習に役立てていただけたら嬉しく思います
またSNSやブログでシェアしていただくことや、誤植などをコメントで指摘いただけたら幸いです。

次回の記事↓

Python・Djangoで家計簿アプリ開発⑤【フォームのモーダル化・選択ボックスの適用】

Python・Djangoを使用して家計簿アプリを作成しています。5回目の今回はフォームのモーダル化やカテゴリー選択の適用を行っています。どちらも汎用性が高く、初心者の方もわかりやすいように各工程詳細に書いていますので、ご覧ください！