本棚アプリケーションページの遷移とレイアウト

はじめに
リンクの設定
レイアウトの調整
おわりに

はじめに

前回まではブラウザ上でリンクが作成されておらず、127.0.0.1:8000/...などurlを打ち込んで画面の遷移をしていました。
今回はブラウザ上のボタンをクリックすると別の画面に遷移するようにリンクの作成を行います。
さらに各ページでレイアウトを整えます。

リンクの設定

htmlの記述をしていきますが、aタグ()の中にDjangoのタグ({% %})を書いて実装します。Djangoタグには遷移先のviewを書きます。

まずは、book/templates/book/book_list.htmlに以下の記述をします。

{% extends 'base.html' %}

{% block title %}書籍一覧{% endblock %}

{% block content %}
    {% for item in object_list %}
    <div class="card">
        <h5 class="card-header">{{ item.title }}</h5>
        <div class="card-body">
            <p class="card-text">{{item.text}}</p>
            <a href="{% url 'detail-book' item.pk %}" class="btn btn-primary">詳細へ</a>
            <h6 class="card-title">{{item.category}}</h6>
        </div>
    </div>
    {% endfor %}
{% endblock content %}

aタグ()の中にDjangoのタグ({% %})を書いて実装しますと述べたが、上のコードではurl 'detail-book'としており、これはurlpatternsで指定したnameを表しています。つまり、urls.pyでname='detail-book'と定義したコードに対応したurlが呼び出されます。

次に、遷移先である、book/templates/book/book_detail.htmlに以下の記述をします。

{% extends 'base.html' %}

{% block h1 %}書籍詳細{% endblock %}

{% block content %}
<div class="card">
    <h5 class="card-header">{{ object.title }}</h5>
    <div class="card-body">
            <p class="card-text">{{ object.text }}</p>
            <a href="{% url 'list-book' %}" class="btn btn-primary">一覧へ</a>
            <a href="{% url 'update-book' object.pk %}" class="btn btn-primary">編集する</a>
            <a href="{% url 'delete-book' object.pk %}" class="btn btn-primary">削除する</a>
            <h6 class="card-title">{{ object.category }}</h6>
    </div>
</div>
{% endblock content %}

できればサーバーを起動して127.0.0.1:8000/book/1/detailにアクセスして、ボタンが追加されているかを確認します。

レイアウトの調整

では、書籍一覧のページなどレイアウトを調整していきます。やることはbase.htmlにブラウザの見た目が綺麗になるよう記述します。
bookproject/templates/base.htmlに以下を記述していきます。

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
    rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
    crossorigin="anonymous">

    <title>{% block title %}{% endblock title %}| 本棚アプリケーション</title>
    </head>
    <body>
      <nav class="navbar navbar-dark bg-success sticky-top">
        <div class="navbar-nav d-flex flex-row">
          <a class="nav-link mx-3" href="{% url 'list-book' %}">書籍一覧</a>
          <a class="nav-link mx-3" href="{% url 'create-book' %}">書籍登録</a>
        </div>
      </nav>
      <div class='p-4'>
        <h1>{% block h1 %}{% endblock %}</h1>
        {% block content %}{% endblock content %}
      </div>
    </body>
</html>

bodyの中に記述した、navbar navbar-darkは文字をグレーに、bg-successはbockgroundをsuccessは緑色にするように指定しています。また、mx-3に関しては左右の余白を示しています。

次に、今回は書籍一覧のページのレイアウトを整えるので、book/templates/book/book_list.htmlに以下の記述をします。

{% extends 'base.html' %}

{% block title %}書籍一覧{% endblock %}
{% block h1 %}書籍一覧{% endblock %}

{% block content %}
    {% for item in object_list %}
    <div class="p-4 m-4 bg-light border border-success rounded">
        <h2 class="text-success">{{ item.title }}</h2>
        <h6>カテゴリー:{{ item.category }}</h6>
        <div class="mt-3">
            <a href="{% url 'detail-book' item.pk %}">詳細へ</a>
        </div>
    </div>
    {% endfor %}
{% endblock content %}

これで書籍一覧ページのレイアウトの調整ができました。サーバーを立ち上げて127.0.0.1:8000/book/にアクセスします。
すると以下のようなレイアウトになっています。これでレイアウトの調整を終わります。

おわりに

今回はブラウザ上での画面遷移とレイアウトの調整を行いました。次回からはトップページやログイン機能を追加してよりきちんとしたアプリケーションの作成を行います。