こんにちは、こちょすです。今日も今日とてDjangoアプリ制作やっていきましょー！

前回までの復習

前回は登録機能の実装から、その登録した内容を一覧表示するところまでを実装しました。views.pyでデータベースからデータを取得し、それをcontextとしてテンプレートに渡し、テンプレート側で中身を展開してfor文で表示するという流れでした。

前回は登録日時しか出していませんでしたが、今回は体重・体脂肪率も表示してみましょう。

base.htmlの修正

ここからは登録画面や一覧画面を行ったり来たりするようになるので、それがしやすいように、ナビゲーションバーを付けましょう。

普通に一から実装すると大変ですが、楽をするために、最初の方に仕込んでおいたものがありますね？？

、、、そうです。bootstrapです💪🔥

bootstrapのチートシートを見れば、だいたいやりたいことを実現するためのコードがあるので、それをコピペしてきましょう❗️

bootstrapのチートシートサイトをこちらに貼っておきますね！

今回はナビゲーションバーを実装したいので、navをクリック、コピーしましょう！

<nav class="nav">
 <a class="nav-link active" href="#!">Active</a>
 <a class="nav-link" href="#!">Link</a>
 <a class="nav-link disabled" href="#!">Disabled</a>
</nav>

これをペーストする先は、base.htmlです！

containerというdivで囲っているのは、bootstrapで余白がいい感じに調整してくれるためです。これをやることで、先ほどまで左上に寄っていた表示が少し綺麗に整形されます。

また、navの中のhref属性の部分はDjangoの逆引きを使ってURLを取得しています。

一覧表示の改善（day_list.htmlの修正)

ここでは日付・体重・体脂肪率をテーブルを使って整形してみましょう！

データの数だけ、行を追加していけばいいので、行（trタグ）以下をfor文で回せばいいですね。そして体重と体脂肪率には単位もそれぞれ付けておきましょう。

では実際に動かして見ましょう！

まずは登録画面にアクセスして、、、

データ入力して、、、

送信ボタンを押下！

ぱぱーん👏👏👏いい感じに表示できましたね！！

テーブルがいい感じに整形されているのも、bootstrapのおかげです。（tableタグにclass = tableを指定することで実現しています。）

だいぶアプリケーション感が出てきましたね！🎉🎉

次回は登録機能のほうもbootstrapで改善するのと、一度登録したデータの更新機能を実装していきたいと思います💪

ではでは今回もお疲れ様でした！次回以降もぜひ見てくださいねー！！

ツイッターもやっています！エンジニアに向けた様々なお役立ち情報を発信していますので、ぜひフォローお願いします！🙇