Works

家計簿システム

言語とツール: HTML/CSS/ Sass/ JavaScript/ jQuery/ PHP/ MySQL/ Git/GitHub

制作期間:8ヶ月(現在も開発中)

ソースコード: 非公開

  • 概要
  • 制作フロー
  • 見どころ

シンプルな家計簿システムです。
クレジットカードやスマホ決済が普及し、どのツールでいくら使っているのか確認する手間を1つのサイトで解決したいという思いから開発を始めました。
一般的な家計簿アプリにもあるカテゴリーを自由に登録できたりレポートを表示する機能はもちろん、使っているクレジットカードやスマホ決済まで詳細に登録できるようにすることで、どのツールでいくら使用したのかを簡単に見られるようにしています。
この家計簿システムは、より使いやすくするため現在も開発中です。

※上記タイトルから遷移できるページはデモページなので、データを操作することはできません。

STEP1

静的コーディング

HTML/Sass/JavaScriptを使用して、最終的にどのようなUIにしたいかコーディングを行いました。

STEP2

データベースの構築

MAMPのphpMyAdminで必要なテーブル、カラムを作成し仮のデータを挿入しました。

STEP3

CRUD処理実装

データベース操作における基本処理CRUD(生成、読込、削除、更新)処理を実装しました。主に、収支データやカテゴリー等の選択項目のCRUD処理、アカウント情報の更新処理を実装しました。

STEP4

カレンダー機能

カレンダーの日付にその日の収支の合計金額を表示させ、いついくら収支が合ったのかをわかりやすくするカレンダー機能を開発しました。その日の金額だけでなく、日付をクリックすることで詳細の表示やデータの編集、削除をすることもできます。

STEP5

選択項目の各グラフ実装

カテゴリーや支払い方法、クレジットカードの種類やスマホ決済の種類などの選択項目の月別割合や、月別金額推移のグラフを描画する機能を実装しました。

STEP6

本番環境へアップロード

MAMPのローカルで開発していたデータをFilleZillaを用いてファイルをアップロード、データベース情報はレンタルサーバーの管理画面からインポートする形式でアップロードしました。

完成

  • クレジットカードやスマホ決済の種類まで詳細に登録可能に

    どのカードでいくら使っているのか、よく使うスマホ決済はどれかを見やすくするために詳細に登録できるようにしました。

  • 月指定で検索したデータをエクセル形式で出力可能に

    画面上の「Excel出力」ボタンを押下すると、その時点で画面に表示されている分のデータをエクセル形式で出力することができます。

  • カテゴリーや支払い方法、クレジットカードの種類やスマホ決済の種類の月別割合や金額推移のグラフ化

    月の収支の中の割合を円グラフで表示させたり、1つの項目の月別金額推移を棒グラフで表示し、収支をより見やすくしました。

  • カレンダー機能

    いついくら支払ったのか、入ったのかがひと目で分かるカレンダー機能を開発し、日付からもデータを編集することができるようにしました。

Others

"> モンのポートフォリオ
架空ハンバーガーサイトのアイキャッチ"> 架空ハンバーガーサイト
RaiseTech公式サイト模写のアイキャッチ"> RaiseTech公式サイト模写