the dawn of yuriko hisory

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

DjangoでミリオンライブキャラクターDBを作成 ~メインページ初期表示の作成~

現在までの完成形

https://i.gyazo.com/fd1f311c1e4690d051d64529b00a8b7c.png

メインページのViewの説明

def index(request):
    idols = Idol.objects.all() //1
    return render(request, 'mysite/index.html', {'idols' : idols} )

1. 現状は初期表示に全件取得するだけを記述
この後検索処理用にPOSTメソッドと分ける必要があります。

メインページのテンプレートの説明

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

{% block style %}
<style>
.img-over{            <!-- 1 -->
  transition: 0.3s;
}

.img-over:hover{
  transform: scale(2.2);
}
</style>

{% endblock style %}

{% block content %}

<form> <!-- 2 -->
  <label>名前:</label>
  <input type="text" name="name" />
  <button type="submit">検索</button>
</form>

<div class="col-md-12">
  {% for idol in idols %}
  <div class="col-md-1">
    <a href="{% url 'mysite:detail' pk=idol.pk %}"><img src="{{ idol.image.url }}" class="img-responsive img-circle img-over"/></a> <!-- 3 -->
  </div>
  {% endfor %}
</div>

{% endblock content %}

1.画像の背景が白なのでマウスオーバーしたときにわかりにくすぎたのでCSSでマウスオーバー用に書いています。
マウスオーバーしたときに画像が拡大されて表示されるようになっています。

2.今回は初期表示だけなので検索はべた書きしています。
実際は検索処理用にDjangoのforms.pyを利用していくことになると思います。

3.今回urlを渡すのに mysite:detailを利用しています。
最初のmysiteは
プロジェクトの方のurls.pyのnamespaceで指定したものです。
最初この指定してある値を間違えてて無駄に時間を取ってしまいました。

urlpatterns = [
    url(r'^admin/', include(admin.site.urls)),
    url(r'^', include('mysite.urls', namespace='mysite')), 
] 

こうして書いておくことでどのアプリケーションのどのViewを渡しているのかわかりやすくなっていいですね。

次やること

検索フォームの実装に入ります。