【django】todoリストアプリを作ってみる④（メイン画面 /list を整える）【pythonメモ】

{% extends &#39;base.html&#39; %}
{% comment %} このファイルはbase.htmlを基準として作成するという宣言 {% endcomment %}

{% block header%}
&lt;div class=&quot;jumbotron jumbotron-fluid&quot;&gt;
  &lt;div class=&quot;container&quot;&gt;
    &lt;h1 class=&quot;display-4&quot;&gt;Todolist&lt;/h1&gt;
    &lt;p class=&quot;lead&quot;&gt;TodoListを作って毎日を効率的に過ごしましょう。&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;
{% endblock %}

{% block content %}

&lt;div class=&#39;container&#39;&gt;

{% for item in object_list %}

&lt;div class=&quot;alert alert-{{ item.priority }}&quot; role=&quot;alert&quot;&gt;
  &lt;p&gt;{{ item.title }}&lt;/p&gt;
  &lt;a href=&quot;{% url &#39;update&#39; item.pk %}&quot; class=&quot;btn btn-info&quot; tabindex=&quot;-1&quot; role=&quot;button&quot; aria-disabled=&quot;true&quot;&gt;編集&lt;/a&gt;
  &lt;a href=&quot;{% url &#39;delete&#39; item.pk %}&quot; class=&quot;btn btn-primary&quot; tabindex=&quot;-1&quot; role=&quot;button&quot; aria-disabled=&quot;true&quot;&gt;削除&lt;/a&gt;
  &lt;a href=&quot;{% url &#39;detail&#39; item.pk %}&quot; class=&quot;btn btn-success&quot; tabindex=&quot;-1&quot; role=&quot;button&quot; aria-disabled=&quot;true&quot;&gt;詳細&lt;/a&gt;
&lt;/div&gt;
{% comment %} memoは、リンク先にするので削除した {% endcomment %}

{% endfor %}

&lt;/div&gt;

{% endblock content %}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

{% extends 'base.html' %}

{% comment %} このファイルはbase.htmlを基準として作成するという宣言 {% endcomment %}

{% block header%}

<h1 class="display-4">Todolist</h1>

<p class="lead">TodoListを作って毎日を効率的に過ごしましょう。</p>

</div>

{% endblock %}

{% block content %}

{% for item in object_list %}

<p>{{ item.title }}</p>

</div>

{% comment %} memoは、リンク先にするので削除した {% endcomment %}

{% endfor %}

</div>

{% endblock content %}

{% extends &#39;base.html&#39; %}
{% comment %} このファイルはbase.htmlを基準として作成するという宣言 {% endcomment %}

{% block header%}
&lt;div class=&quot;jumbotron jumbotron-fluid&quot;&gt;
  &lt;div class=&quot;container&quot;&gt;
    &lt;h1 class=&quot;display-4&quot;&gt;Todolist&lt;/h1&gt;
    &lt;p class=&quot;lead&quot;&gt;TodoListを作って毎日を効率的に過ごしましょう。&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;
{% endblock %}

{% block content %}

&lt;div class=&#39;container&#39;&gt;

    &lt;a href=&quot;{% url &#39;create&#39; %}&quot; class=&quot;btn btn-info&quot; tabindex=&quot;-1&quot; role=&quot;button&quot; aria-disabled=&quot;true&quot;&gt;新規作成&lt;/a&gt;

  {% for item in object_list %}

  &lt;div class=&quot;alert alert-{{ item.priority }}&quot; role=&quot;alert&quot;&gt;
    &lt;p&gt;{{ item.title }}　期日：{{ item.duedate}}&lt;/p&gt;
    &lt;a href=&quot;{% url &#39;update&#39; item.pk %}&quot; class=&quot;btn btn-info&quot; tabindex=&quot;-1&quot; role=&quot;button&quot; aria-disabled=&quot;true&quot;&gt;編集&lt;/a&gt;
    &lt;a href=&quot;{% url &#39;delete&#39; item.pk %}&quot; class=&quot;btn btn-primary&quot; tabindex=&quot;-1&quot; role=&quot;button&quot; aria-disabled=&quot;true&quot;&gt;削除&lt;/a&gt;
    &lt;a href=&quot;{% url &#39;detail&#39; item.pk %}&quot; class=&quot;btn btn-success&quot; tabindex=&quot;-1&quot; role=&quot;button&quot; aria-disabled=&quot;true&quot;&gt;詳細&lt;/a&gt;
  &lt;/div&gt;
  {% comment %} memoは、リンク先にするので削除した {% endcomment %}

  {% endfor %}

&lt;/div&gt;

{% endblock content %}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

{% extends 'base.html' %}

{% comment %} このファイルはbase.htmlを基準として作成するという宣言 {% endcomment %}

{% block header%}

<h1 class="display-4">Todolist</h1>

<p class="lead">TodoListを作って毎日を効率的に過ごしましょう。</p>

</div>

{% endblock %}

{% block content %}

{% for item in object_list %}

<p>{{ item.title }}　期日：{{ item.duedate}}</p>

</div>

{% comment %} memoは、リンク先にするので削除した {% endcomment %}

{% endfor %}

</div>

{% endblock content %}

{% extends &#39;base.html&#39; %}
{% comment %} このファイルはbase.htmlを基準として作成するという宣言 {% endcomment %}

{% block header%}
&lt;div class=&quot;jumbotron jumbotron-fluid&quot;&gt;
  &lt;div class=&quot;container&quot;&gt;
    &lt;h1 class=&quot;display-4&quot;&gt;詳細画面&lt;/h1&gt;
    &lt;p class=&quot;lead&quot;&gt;todoの詳細です。&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;
{% endblock %}

{% block content %}

&lt;div class=&#39;container&#39;&gt;
  &lt;div class=&quot;alert alert-success&quot; role=&quot;alert&quot;&gt;
    &lt;p&gt;タイトル：{{ object.title }}&lt;/p&gt;
    &lt;p&gt;中身：{{ object.memo }}&lt;/p&gt;
    &lt;p&gt;期日：{{ object.duedate }}&lt;/p&gt;
  &lt;/div&gt;

&lt;/div&gt;

{% endblock content %}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

{% extends 'base.html' %}

{% comment %} このファイルはbase.htmlを基準として作成するという宣言 {% endcomment %}

{% block header%}

<p class="lead">todoの詳細です。</p>

</div>

{% endblock %}

{% block content %}

<p>タイトル：{{ object.title }}</p>

<p>中身：{{ object.memo }}</p>

<p>期日：{{ object.duedate }}</p>

</div>

{% endblock content %}

【django】todoリストアプリを作ってみる④（メイン画面 /list を整える）【pythonメモ】

list.htmlを編集

レイアウトを調整する

/listの期日表示をする。
新規作成ボタンを設置する。

/detail.htmlの見た目を修正する

あ、宜しければ・・・。

コメントを残すコメントをキャンセル

管理人

最近の投稿

最近のコメント

アーカイブ

カテゴリー

しめさばtweet

mug tweet

list.htmlを編集

レイアウトを調整する

/listの期日表示をする。新規作成ボタンを設置する。

/detail.htmlの見た目を修正する

あ、宜しければ・・・。

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

【髪を傷ませない為には】久々に美容院に行ってきた話【普通のドライヤーで乾かす…

【Udemy】実践Webサイトコーディング講座 ｜ HTML5とCSS3を使…

セイコーマートがおでんを売らない理由を考えてみた

【母の日】プレゼントをネット通販で送る【父の日】

【何時に行っても】食品の買い物もネットでやってみようと思う【密だから】

海老のしっぽを飲んでしまった時の対処法。

本当にふつうの日記

未来の評価サイトについて一考してみた

管理人

最近の投稿

最近のコメント

アーカイブ

カテゴリー

しめさばtweet

mug tweet

/listの期日表示をする。
新規作成ボタンを設置する。

コメントを残すコメントをキャンセル

【Udemy】実践Webサイトコーディング講座　｜ HTML5とCSS3を使…