【django】todoリストアプリを作ってみる②(作り込む)【pythonメモ】

pythonLOGO

ブートストラップ等を導入して見た目を整えていく

urls.py

views.py

urls.py

<ink:pk>はobjectに格納されているプライマリーキー(pk)を取得するタグ。intはiteger型という事を指す

template下にlist.htmlを作成する

起動してみる

http://127.0.0.1:8000/detail/1
http://127.0.0.1:8000/detail/3

うまくいきました。

Bootstrapを導入する

ブートストラップのスターターテンプレートを引っ張ってくる

https://getbootstrap.com/docs/4.3/getting-started/introduction/

list.htmlにテンプレートをコピペする

※いままで書いていたコードをbodyタグの中に入れる

detail.htmlにも同樣にする

Bootstrapのリファレンスを確認する

コンポーネントユーティリティ

detail.htmlを整える

http://127.0.0.1:8000/detail/1を確認

うまくいきました。

htmlファイルの重複項目(Bootstrapスターターテンプレートやレイアウト等)をまとめる:base.html

templates下にbase.htmlを作成する

list.htmlを更新する

さらにbase.htmlを更新=Bootstrapスターターテンプレートをコピペして、bodyタグ内に追記する

list.htmlをさらに更新する

list.htmlをにBootstrapを適用してみる

Bootstrapコンポーネントからコピペ

サーバーを起動して確かめる

うまくいきました。

本番環境を見据えたスタイルを作り込む

目標はこんな感じ

まずはタイトル部分から

ジャンボトロンを使う

runserverで確認すると

いい感じ

list.htmlをいじる

list.htmlを更に更新。リストをコンテナ化する

list.htmlを更に更新。コンテナにボタンを配置する

※djangoで開発をする際は、ボタンタグではなく、aタグで生成されたボタンが良い

完成形に近づいてきました。

タスクの属性に応じてコンテナの色が変わるようにします

19行目の{{ item.priority }}を変数として使います。

item.priorityの設定をmodels.pyに仕込む

その他に期日=duedateも仕込む

models.pyをいじったのでまたmakemygrationする

すると何か出てくる

あらたにduedateという概念が出てきたけど、今までのデータに入っていないのでnullになるよ!だからmigrationしないよ!

という意味で、duedate = model.DateField(null = true)とする事もできるが、デフォルトでnullを許容しないようになっているので、そうなっている

で、聞かれているのは

1.デフォルトの数字を入れる
2.作り直す

今回は1を選択して1つずつ数字を入れる事にする。

timezone.now

と入れると今の時間を入れるよ!と言ってきているのでそれに従う

PRIORITYについてどうするかと聞かれているので、とりあえず全部’danger’という事にする

すると新たに

todo/migrations/0002_auto_20200719_1521.py

というファイルが作られる。

中身を見てみると

AddFieldとしてduedateが追加されている。

で、あらためてmigrateする

めでたくデータベースへの反映も完了した

/adminの中身の確認をしてみる

http://localhost:8000/admin/todo/todomodel/3/change/

このようにPriorityとDuedateが追加されている

HTMLも確認する

http://localhost:8000/list/

一個一個のデータが反映されている事が確認できる



 

あ、宜しければ・・・。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です