BLOG

【Lravel実践】WEBアプリを作りながらLravelを学ぶ【#6ポートフォリオに使える家計簿アプリ完成編】

2023-11-14

■過去回はこちら!
#1:環境構築編
#2:データベース作成編
#3フォーム入力でデータベースに登録編
#4登録されたデータをアプリに表示編
#5登録データの更新機能編
どうもロックシステムのみなみです!
Laravelを使った家計簿アプリ開発も6回目、今回で完成です!
前回の動画では、データベースに登録したデータをアプリから更新する機能を作りました。
・前回の動画でできたこと完成となる今回は、家計簿アプリから登録したデータをアプリから削除する機能をつけ、おまけで支出登録だけでなく収入の登録、それぞれの合計値を表示させ完成となります。完成したアプリはそのままポートフォリオに使ってみてもいいですし、月ごとに表示させたり自由にカスタマイズしてさらにLaravelの勉強に使ってもらえたら嬉しいです!是非最後までチャレンジしてみてくださいね。
今後もいろいろと配信していくのでチャンネル登録もよろしくお願いいたします!!

今回使用したコードはこちら!

▼最終の完成コードは以下Googleドライブから無料でダウンロードできます!
https://drive.google.com/file/d/1jrXztTzP3K_WuObaAnhEyutJsy6eAqiA/view?usp=sharing

・削除用のルート/web.php(00:44あたり)
Route::post('/destroy/{id}', [HomebudgetController::class, 'destroy'])->name('homebudget.destroy');
・formタグのaction/index.blade.php(00:56あたり)
<form action="{{route('homebudget.destroy', ['id'=>$homebudget->id])}}" method="POST">
      @csrf
・削除処理/HomebudgetController.php(01:24あたり)
$homebudget = HomeBudget::find($id);
$homebudget->delete();
session()->flash('flash_message', '収支を削除しました。');
return redirect('/');
・収入と支出の合計を表示HTML/index.blade.php(02:37/03:40~)
<div class="flex">
 <div class="pagination">
      {{$homebudgets->links()}}
 </div>
 <div class="flex total">
  <p>収入合計:{{$income}}円</p>
  <p>収支合計:{{$payment}}円</p>
 </div>
</div>
・上記のCSS
.flex {
    display: flex;
    justify-content: space-between;
}

.total p:first-of-type {
    margin-right: 10px;
}

.income {
    color: aqua;
}

.payment {
    color: tomato;
}
・収入と支出合計額を出す処理/HomebudgetController.php(03:04あたり)
$income = HomeBudget::where('category_id', 6)->sum('price');
$payment = HomeBudget::where('category_id', '!=', 6)->sum('price');
return view('homebudget.index', compact('homebudgets', 'income', 'payment'));

株式会社ロックシステム

「ブラック企業をやっつけろ!!」を企業理念にエンジニアが働きやすい環境をつきつめる大阪のシステム開発会社。2014年会社設立以来、残業時間ほぼゼロを達成し、高い従業員還元率でエンジニアファーストな会社としてIT業界に蔓延るブラックなイメージをホワイトに変えられる起爆剤となるべく日々活動中!絶賛エンジニア募集中。