一覧
したこと：ページネーションと詳細
流れ
views.py -> urls.py -> anime_list.html
フォームの基礎 -> 選択肢 -> 見た目 -> urlの設定 -> html(ユーザーの見た目)
役割
views.py(データをhtmlに渡すため)/ urls.py(urlの設定)/html(ユーザーに見せる)
ポイント：urlの指定
int:pk を使う理由：pkは一意であるため
views.py
- get_object_or_404で一致するものを受け取る
- pkはプライマリーキー（一意）：idとか
- 受け取ったデータをhtmlに渡す
def anime_detail(request, pk=None):
anime = get_object_or_404(Anime.objects.prefetch_related('casts', 'staff'), pk=pk) #related(リレーションについては別の機会)
return render(request, 'myapp/anime_detail.html', {'anime' : anime})
urls.py
-
int:pkで個々のページを生成
#int:pkでアニメの詳細を指定
path('anime/int:pk/', views.anime_detail, name='anime_detail'),
html
- 受け取った各データを出力
<!DOCTYPE html>
<html lang="ja">
<head>
{% load static %}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anime Detail</title>
<link rel="stylesheet" href="{% static 'myapp/css/book_detail.css' %}">
</head>
<body>
<h1>{{ anime.title }}</h1>
<!-- 分類 -->
<h3>分類:
{% with anime.status.all as status_list %}
{% if status_list %}
{{ status_list|join:", " }} #カンマ区切りで出力
{% else %}
分類はありません
{% endif %}
{% endwith %}
</h3>
<!-- ジャンル -->
<h3>ジャンル:
{% with anime.genre.all as genre_list %}
{% if genre_list %}
{{ genre_list|join:", " }}
{% else %}
ジャンルはありません
{% endif %}
{% endwith %}
</h3>
<!-- 評価 -->
<h3>評価:
{% with anime.value.all as value_list %}
{% if value_list %}
{{ value_list|join:", " }}
{% else %}
評価はありません
{% endif %}
{% endwith %}
</h3>
<p>メディア: {{ anime.media }}</p>
<p>話数: {{ anime.episodes_count }}</p>
<p>放送年度: {{ anime.season_year }}</p>
<p>季節： {{ anime.season_name}}
<h2>キャスト</h2>
<ul>
{% for cast in anime.casts.all %}
<li>{{ cast.name }}</li>
{% empty %}
<li>キャストは登録していません</li>
{% endfor %}
</ul>
<h2>スタッフ</h2>
<ul>
{% for staff_name_roletext in anime.staff.all %}
<li>{{ staff_name_roletext.roletext }} : {{ staff_name_roletext.name }}</li>
{% empty %}
<li>キャストは登録していません</li>
{% endfor %}
</ul>
<div class = 'group'>
<!-- 削除ボタン -->
<form action="{% url 'anime_delete' anime.id %}" method="post" style="display:inline;">
{% csrf_token %}
<button type="submit">削除</button>
</form>
<!-- 編集ボタン -->
<form action="../form/{{ anime.id }}/" method="get" style="display:inline;">
<button type="submit">編集する</button>
</form>
<!-- 戻るボタン -->
<form action="{% url 'home' %}" method="get" style="display:inline;">
<button type="submit">戻る</button>
</form>
</div>
</body>
</html>