書籍タイトルを検索するフォームを作成していきます。

URL

トップページの URL を作成します。

app/urls.py

from django.urls import path
from app import views

urlpatterns = [
    path('', views.IndexView.as_view(), name='index'),
]

フォーム

フォームを作成し、タイトルを入力できるようにします。

app/forms.py

from django import forms

class SearchForm(forms.Form):
    title = forms.CharField(label='タイトル', max_length=200, required=True)

ビュー

ビューを作成します。

トップページは検索フォームだけにするので、フォームをテンプレートに渡します。

app/views.py

from django.views.generic import View
from django.shortcuts import render
from .forms import SearchForm


class IndexView(View):
    def get(self, request, *args, **kwargs):
        form = SearchForm(request.POST or None)

        return render(request, 'app/index.html', {
            'form': form
        })

コード解説

フォーム作成したら、このように書くことでフォームの内容を取得できます。

form = SearchForm(request.POST or None)

テンプレート

base

ベースのテンプレートです。

app/templates/app/base.html

{% load static %}

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
    />
    <link rel="stylesheet" href="{% static 'css/style.css' %}" />
    <title>楽天ブックス書籍APIチュートリアル</title>
  </head>

  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container">
        <a class="navbar-brand" href="/">楽天ブックス書籍API</a>
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="/">ホーム</a>
          </li>
          {% if user.is_authenticated %}
          <li class="nav-item">
            <a class="nav-link" href="{% url 'profile' %}">プロフィール</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="{% url 'account_logout' %}">ログアウト</a>
          </li>
          {% else %}
          <li class="nav-item">
            <a class="nav-link" href="{% url 'account_signup' %}"
              >サインアップ</a
            >
          </li>
          <li class="nav-item">
            <a class="nav-link" href="{% url 'account_login' %}">ログイン</a>
          </li>
          {% endif %}
        </ul>
      </div>
    </nav>

    <main>
      <div class="container">{% block content %} {% endblock %}</div>
    </main>

    <footer class="py-2 bg-dark">
      <p class="m-0 text-center text-white">
        Copyright &copy; Django Startup
      </p>
    </footer>

    {% block extra_js %} {% endblock %}
  </body>
</html>

index

トップページのテンプレートです。

検索フォームとボタンのみとなります。

app/templates/app/index.html

{% extends "app/base.html" %} {% load widget_tweaks %} {% block content %}

<div class="text-center my-5">
  <form method="post">
    {% csrf_token %}
    <div class="align-items-center">
      {% render_field form.title class="form-control"
      placeholder="キーワードから探す" %}
      <button class="btn btn-primary mt-2" type="submit">検索</button>
    </div>
  </form>
</div>

{% endblock %}

コード解説

widget_tweaksを使用することで、フォームにクラスを付けることができます。

{% render_field form.title class="form-control" placeholder="キーワードから探す"
%}

確認

トップページはこのように表示されることを確認します。

検索