デザイン制作、Web制作、ブログ運営などのノウハウを配信するサイト

【Ruby on Rails開発奮闘記】シンプルな家計簿アプリを作る(2)

こんにちは、koheiです。
前回の記事で、家計簿の科目設定を追加したので、今回は、実際に科目の金額を登録する機能を追加してみたいと思います。

スポンサーリンク

1.仕様(今回追加する部分)

図で示すと今回作成する部分は以下になります。

科目金額の登録は、1カラムずつ登録していくとすごく面倒なので、月ごとに一括で登録するように対応します。
登録する年月を設定し、科目設定で登録した科目毎に金額を月単位で一括登録できるようにします。(以下)

今回作成する部分のMVCモデルは以下のようになります。各科目金額用にモデル、コントローラー、ビューを追加します。各科目の金額用モデルは、それぞれの科目と関連付けします。また、一括登録用にformをモデルに追加しています。

2.収入科目データ登録追加

まずは、収入科目データ登録から作っていきたいと思います。

2-1.モデルの追加

まずは、収入科目金額用のモデルを追加します。

$ bin/rails g model income_value

収入科目金額テーブルのカラムを追加します。
・income_id:収入科目テーブルのID(外部キー)※収入科目テーブルと紐付けるため。
・year_month:年月
・value:金額(値)
・description:備考

db/migrate/xxxx_create_income_values.rb

収入科目テーブルと関連付けをします。収入科目テーブル(income.rb)にhas_manyメソッドを追加して、income_valuesを指定します。dependentオプションに:destroyを指定すると、収入科目テーブルのレコードが削除されたときに、収入金額用のレコードも削除されるようになります。

app/models/income.rb

次に、以下コマンドを入力し、マイグレーションを実行します。これで、income_valuesテーブルが作成されます。

$ bin/rails db:migrate

2-2.コントローラーの追加


次に、収入科目金額テーブルをコントロールするコントローラーを作成します。

bin/rails g controller income_values

routes.rbにリソースを追加します。

config/routes.rb

各アクションを以下のように実装します。
※今回showアクションとテンプレートは使いませんが、とりあえず暫定で追加してます。
今回、一括登録を対応するため、newメソッドやcreateメソッド等では、次節で紹介するIncomeFormクラスをnewしています。

app/controllers/income_values_controller.rb

2-3.一括登録フォームの対応

今回金額登録時は、一括登録フォームで対応するので、modelsフォルダ内に、以下の3つのファイルを追加します。
・app/models/form/base.rb
・app/models/form/income_values.rb
・app/models/form/income_form.rb

一括登録の対応は以下の記事を参考にさせてもらいました。ありがとうございます。

新規登録時、一括フォーム用のクラスIncomeFormを使って、一括登録用のパラメータを構築していきます。
正直、一括フォームの対応は初心者の私には難しく、上記のサイトを参考にかなり試行錯誤を繰り返してようやく動いた実装なので色々と無駄な処理などもあるかもしれません。色々理解したことは随時更新していきます。

app/models/form/base.rb

app/models/form/income_values.rb

app/models/form/income_form.rb

2-4.ビューの追加

最後に表示部分(ビュー)を作成していきます。

app/views/income_values/index.html.erb

app/views/income_values/new.html.erb

app/views/income_values/edit.html.erb

showは、今回は使わないですが、とりあえず追加しておきます。

app/views/income_values/show.html.erb

トップページから、収入金額登録画面へ遷移するためのリンクを追加します。
まず、routes.rbにパスを追加します。

config/routes.rb

次に、トップページのビューに収入金額登録へのリンクを追加します。

app/views/top/index.html.erb

ここまで作ったら、一旦サイトを確認してみます。
bin/rails sコマンドでサーバーを起動し、ブラウザでhttp://localhost:3000/にアクセスしてみてください。
以下のようにトップページから、収入金額登録をクリックし、登録年月を設定し収入科目のデータ登録ができればOKです。

3.固定費科目データ登録追加

次に固定費科目のデータ登録を追加します。クラス名等は違いますが、実装方法は先程の収入科目データ登録と同じなのでコードだけ載せておきます。

モデルの追加

$ bin/rails g model fixedcost_value

カラムの追加

db/migrate/xxxx_create_fixedcost_values.rb

テーブルの関連付け

app/models/fixedcost.rb

マイグレーションの実行

$ bin/rails db:migrate

コントローラーの作成

bin/rails g controller fixedcost_values

リソースの追加

config/routes.rb

アクションの実装

app/controllers/fixedcost_values_controller.rb

一括フォームの対応

app/models/form/fixedcost_value.rb

app/models/form/fixedcost_form.rb

ビューの追加

app/views/fixedcost_values/index.html.erb

app/views/fixedcost_values/new.html.erb

app/views/fixedcost_values/edit.html.erb

app/views/fixedcost_values/show.html.erb

トップページから固定費金額登録画面への遷移追加

config/routes.rb

app/views/top/index.html.erb

4.変動費科目データ登録追加

最後に変動費科目のデータ登録を追加します。こちらもクラス名等は違いますが、実装方法は先程の収入科目データ登録と同じなのでコードだけ載せておきます。

モデルの追加

$ bin/rails g model variablecost_value

カラムの追加

db/migrate/xxxx_create_variablecost_values.rb

テーブルの関連付け

app/models/variablecost.rb

マイグレーションの実行

$ bin/rails db:migrate

コントローラーの作成

bin/rails g controller variablecost_values

リソースの追加

config/routes.rb

アクションの実装

app/controllers/variablecost_values_controller.rb

一括フォームの対応

app/models/form/variablecost_value.rb

app/models/form/variablecost_form.rb

ビューの追加

app/views/variablecost_values/index.html.erb

app/views/variablecost_values/new.html.erb

app/views/variablecost_values/edit.html.erb

app/views/variablecost_values/show.html.erb

トップページから固定費金額登録画面への遷移追加

config/routes.rb

app/views/top/index.html.erb

最後に

今回は、各科目の金額を登録する機能を追加してみました。
※一応、ここまで作成したソースコードを以下から取得できます。
必要な方は以下からダウンロードしてください。

次は、登録したデータの収支を確認する機能を追加してみたいと思います。

それでは!

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で
関連記事(一部広告含む)

飲食店用WordPress無料テーマ
「InomaRestaurantBasic」

飲食店用の無料WordPressテーマを作成しました。
店のコンセプト、メニュー、アクセスなど
飲食店に必要な最低限の機能を搭載しました。
これから飲食店のホームページを開設したい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

ブログ用WordPress無料テーマ
「chameleon(カメレオン)」

WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。
初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください!

ブログ用無料WordPressテーマ

士業用WordPress無料テーマ
「InomaExpertBasic」

士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

コメントを残す

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

CAPTCHA


ページトップボタン