【Lravel実践】WEBアプリを作りながらLravelを学ぶ【＃4便利なリレーションを学ぶ編】

---

■過去回はこちら！
＃1：環境構築編
＃2：データベース作成編
＃3フォーム入力でデータベースに登録編

---

どうもロックシステムのみなみです！
Laravelを使った家計簿アプリ開発4回目です！
前回の動画では、家計簿アプリの支出登録処理を作りながら、フォームから入力したデータをデータベースにデータを登録する流れを学びました！ 作った家計簿アプリでも入力したデータが、データベース上に表示されていましたね！

第４回目の今回は、登録されたデータをアプリの支出一覧に表示させていく機能を作っていきます！

Laravelでデータを取得する前に必要なリレーション、正規化について分かりやすく解説しているので是非ご覧ください！

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

・2：47あたり～

public function category() : Relation {
　return $this->belongsTo(Category::class);
 }

・2：58あたり～

use Illuminate\Database\Eloquent\Relations\Relation;
use App\Models\Category;

・3：18あたり～

$homebudgets = HomeBudget::with('category')->get();

・3：25あたり～

return view('homebudget.index', compact('categories', 'homebudgets'));

・4：00あたり～

@foreach($homebudgets as $homebudget)
<tr>
　<td>{{$homebudget->date}}</td>
　<td>{{$homebudget->category->name}}</td>
　<td>{{$homebudget->price}}</td>
</tr>

・5：17あたり～

$homebudgets = HomeBudget::with('category')->orderBy('date', 'desc')->paginate(5);

5：27あたり～

 <div class="pagination">
　{{$homebudgets->links()}}
</div>

・5：42あたり～

use Illuminate\Pagination\Paginator;

Paginator::useBootstrapFive();    
Paginator::useBootstrapFour();

・コピーしたCSS

.pagination {
    list-style: none;
    display: flex;
}

.pagination li {
    cursor: pointer;
    text-align: center;
    padding: 8px 0px;
}

.pagination li a {
    padding: 15px;
    text-decoration: none;
    background-color: mediumaquamarine;
    opacity: 0.8;
    border: 1px solid #fff;
    color: #fff;
}

.pagination li span {
    padding: 15px;
}

.button-td {
    display: flex;
    align-items: baseline;
}

.button-td input,
.edit-button,
.delete-button {
    padding: 8px 16px;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.edit-button {
    margin-right: 20px;
    background-color: orange;
    text-decoration: none;
}

.delete-button {
    background-color: tomato!important;
}

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