the dawn of yuriko hisory

アニメやら漫画関係で何か作りたいものと勉強したことのメモ用

DjangoでミリオンライブキャラクターDBを作成 ~個別ページの作成~

現在までの完成形

現在までの完成形
https://i.gyazo.com/b980fabf75df0e29f5741060cff65f90.png

個別ページのViewの説明

def detail(request, pk):
    idol = get_object_or_404(Idol, pk=pk) //1
    return render(request, 'mysite/detail.html', {'idol' : idol} )

1. 基本通りにDBのプライマリキーからアイドルの情報を取得しています。
アイドルの名前から取得するように変更した方がURLとしてもいいとは思うのですが、
そこまでの必要性はないかなと思いデフォルトのpkにしています。

個別ページのテンプレートの説明

{% extends 'mysite/base.html' %}

{% block content %}
  <div class="row">
    <div class="image col-md-4">
      <img src="{{ idol.image.url }}" class="img-responsive"/> <!-- 1 -->
    </div>
    <div class="detail col-md-8">
      <table class="table table-bordered">
        <tbody>
          <tr>
            <td><strong>名前</strong></td>
            <td>{{ idol.name }}({{ idol.yomigana }})</td>
          </tr>
          <tr>
            <td><strong>誕生日</strong></td>
            <td>{{ idol.birthday }}</td>
          </tr>
          <tr>
            <td><strong>身長</strong></td>
            <td>{{ idol.height }}cm</td>
          </tr>
          <tr>
            <td><strong>声優</strong></td>
            <td>{{ idol.cv }}</td>
          </tr>
        </tbody>
      </table>
      <p class="h2">詳細</p>
      {{ idol.detail }}
    </div>
  </div>

{% endblock content %}

1. 前回モデルで作成したImageFieldのurlを使うと格納されているフォルダのアドレスをそのまま渡してくれるので
imgタグにそのまま入れるだけで表示ができました。

classのimg-responsiveはBootStrapのクラスで、
画像ファイルをレスポンシブ対応にしてくれています。
これのおかげで画像をレスポンシブにしてくれるので、表示がキレイにできます。

テーブル内の表記については、特別難しいことはしていなくて、
Viewから渡された値を表示しているだけです。

次やること

個別ページは現段階ではこの状態で完成形として
(他にやることといえばモデルの修正と実際のデータを入力するだけなので)
Indexページで初期表示に全件のアイドルを取得できるようにしてみましょう。