EGO-LOG

40代2児の父。主にプログラム学習と開発、仮想通貨、メタバース、たまに関係ないことを綴る。

(2022/3/31)Laravel 14日目(PM) bootstrap

掲示板の続き。

引き続きこちらを参考にさせて頂いております。

zenn.dev

■TailwindからBootstrap

普段の開発ではcssに関する便利なモノを一切使っておらず、

今回はBootstrapの学習も兼ねて開発してみたかった。

のだけど、参考サイトはTailwindで書いてるので、

bootstrapに変換しながら実装していこうかな。

getbootstrap.jp

bootstrapにはグリッドの考えがあって、1行を12分割して管理する。

tailwindcss.jp

tailwindも12分割なのね。

 

いじりだすとハマってきた。全然うまくいかへんがな。。

とりあえず先に進もう。

 

■データベースから掲示板データ表示

ThreadConrollerを修正

f:id:tenomeuonome:20220331232709p:plain

 

index.blade.phpを修正

掲示板の固定データ部分を、モデルからデータ取得してループ出力するように修正。

ループを下記で囲む

@foreach ($threads as $thread )

@endforeach

f:id:tenomeuonome:20220331234607p:plain

デザインが残念すぎるが調整がうまくいってないのです。

bootstrapは色数が少ないのか・・?フォントも変、というか薄い?

まぁいいや

 

■リプライを出力

掲示板データ取得用のモデルを修正。

f:id:tenomeuonome:20220331231934p:plain

再度index.blade.phpを修正

リプライ部分を同じようにループで囲む。

リプライデータ取得用のモデル作成

Reply.php

f:id:tenomeuonome:20220331235701p:plain

f:id:tenomeuonome:20220401000217p:plain

投稿に関連したリプライも表示された。

 

■投稿処理

入力フォーム部分を修正

<form action="{{route('bbs.store')}} method="POST">

 

ThreadController修正

f:id:tenomeuonome:20220401002058p:plain

■一覧のソート

作成日時の降順でソートする記述

f:id:tenomeuonome:20220401002519p:plain

 

今日はここまで。

bootstrapと仲良くしていきたい。