PHP Pocket Budget（シンプル家計簿）

▲ PC・スマホの両デバイスに対応したレスポンシブデザイン

デモ

ブラウザから実際に操作できます
https://www.ashigemura.x10.network

概要

日々の収支を素早く記録し、現在の資産状況を「見える化」するためのWebアプリケーションです。
演習課題をベースに、実務での利用を想定して機能とデザインをブラッシュアップしました。

開発背景（DXの視点）

「手書きの家計簿や複雑なExcel管理は続かない」という課題に対し、
「スマホからでも直感的に入力でき、即座に合計金額が計算される」
という効率化（DXの第一歩）をテーマに制作しました。

主な実装ポイント

• 直感的なUI/UX
  Bootstrapを活用し、一目で現在の残高がわかるカード型ダッシュボードを採用
• 保守性の向上
  ヘッダーやDB接続などの共通パーツを分離し、将来の機能追加や修正が容易な構造
• セキュリティの基本
  プリペアドステートメントによるSQLインジェクション対策、
  htmlspecialchars() を利用したXSS対策

使用技術

Backend

• PHP 8.x

Database

• MySQL (MariaDB)

Frontend

• HTML5
• CSS3
• Bootstrap 4.4

セットアップ方法

1. dbconnect.php.sample を参考に、ご自身の環境に合わせて dbconnect.php を作成してください。
2. プロジェクト内の create_table.sql を実行して、テーブルを作成してください。
3. データベースの接続情報は .gitignore を利用して非公開にしています。

ポートフォリオ

https://portfolio-site-lilac-one.vercel.app/