見出し画像

Webアプリ開発（Django+Vue.js+Docker）#5

たくみ

こちらの記事の続きになります。

今回はアプリで使用するページを全て作り、各ページに遷移させる部分と、bootstrapとCSSを使用して見た目を整えてみることをしてみましょう。
※ログインページのみ後日。

フロントエンド

「create_test.html」「exam.html」「test_history.html」ファイルをtemplatesディレクトリ内に作成します。

そしてindex.htmlの様に以下をコピペします。

#create_test.html
{% extends 'base.html' %}

{% block content %}
<h1><b>テストを作る</b></h1>
{% endblock content %}
#exam.html
{% extends 'base.html' %}

{% block content %}
<h1><b>テストする</b></h1>
{% endblock content %}
#test_history.html
{% extends 'base.html' %}

{% block content %}
<h1><b>登録した問題</b></h1>
{% endblock content %}

では次に、localhost:80/<file_name>/と検索すると、このページが表示されるように設定します。

バックエンド

まず、urls.pyを以下の様に変更します。

urlpatterns = [
    path("", views.index, name="index"),
    path("create_test/", views.create_test, name="create_test"),
    path("exam/", views.exam, name="exam"),
    path("test_history/", views.test_history, name="test_history"),
]

次に、views.pyに以下の関数を追加します。

def create_test(request):
  if request.method == 'GET':
    return render(request, 'create_test.html')
  
def exam(request):
  if request.method == 'GET':
    return render(request, 'exam.html')
    
def test_history(request):
  if request.method == 'GET':
    return render(request, 'test_history.html')

これで、URLを指定して検索した場合、定義した関数によって適当なhtmlファイルが表示される仕組みが完成しました。
※ここまではindex.htmlと同じ

パスがつながっているか確認する

では、確認して見ましょう！

docker-compose upをして各ページに飛んでみましょう。

http://localhost/create_test/
http://localhost/exam/
http://localhost/test_history/

どうでしたか？
それぞれ適切なタイトルが表示されていればOKです！

見た目を整える

それでは、次は見た目を整えていきましょう！
まず、すべてのページで基本となる背景やメニューなどを作成していきます。

base.htmlの内容を以下に変更しましょう。

<body style="background-color: #faebd7;">
  <!-- ヘッダー -->
  <header>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container-fluid">
        <a class="navbar-brand" href="/">復習テスト</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse show" id="navbarNavAltMarkup">
          <div class="navbar-nav">
            <a class="nav-link active">ホーム</a>
            <a class="nav-link">ログアウト</a>
          </div>
        </div>
      </div>
    </nav>
  </header>
  <!-- ボディ -->
  <div class="container">
    <div class="row">
      <div class="col-sm-10 mx-auto mt-4">
        {% block content %}
        {% endblock %}
      </div>
    </div>
  </div>
  
  <!-- CDN -->
  {% block cdn %}
  {% endblock cdn %}
  
  <!-- JavaScript -->
  {% block script %}
  {% endblock script %}
</body>

説明していくと、

<body style="background-color: #faebd7;"></body>でページのボディの背景色を決定します。
※色の部分は検索して自分なりに変更してもらっても大丈夫です。

そして、ここで出ました。navタグです。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="/">復習テスト</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse show" id="navbarNavAltMarkup">
      <div class="navbar-nav">
        <a class="nav-link active">ホーム</a>
        <a class="nav-link">ログアウト</a>
      </div>
    </div>
  </div>
</nav>

今回使用しているnavタグは、以下サイトのnavbar without using listというものを使用しています。

使い方はめちゃくちゃ簡単、Code Snippetのコードをコピぺして中身を自分なりに変えるだけ！
さらに嬉しいことに、コピペしたやつは、レスポンシブ対応済み！！！

これで一度、ページを確認して見ましょう。

見た目の確認

全てに共通するbase.htmlの見た目を変更したので、すべてのページにそれが反映されていることが分かります。

index.html
test_history.html

ページ遷移できるようにする

では最後！

ボタンを配置し、各ページを行き来できるようにしましょう。
ページ遷移には<form>タグを使います。

<div>
  <form method="get" action="{% url 'test:create_test' %}">
    <button type="submit" class="btn btn-primary">テストを作る</button>
  </form>
</div>

それでは、説明をします。

まず、formタグ内のmethodでメソッドを指定します。
views.pyで、

if request.method == 'GET':

という部分がありましたが、これの事です。メソッドはほかにもPOSTがあります。

※重要なデータをバックエンドに送る処理の場合はPOSTメソッド
※ページ遷移などセキュリティ上何も問題がない場合はGETメソッド
メソッドごとに利点欠点があるので、気になった人は調べてみてください。

次にactionでurlを格納しています。
これは、urls.pyで、

path("create_test/", views.create_test, name="create_test"),

という部分がありましたが、nameで指定された部分が実行されます。
※ここで以前飛ばした説明に戻ってきます！

<button type="submit" class="btn btn-primary">テストを作る</button>

という部分は、formタグで指定したものを実行するための起爆ボタン見ないな感じです。
このボタンをクリックするとフォームが送信され、views.pyに設定された適当な関数が実行されます。

それでは、長々と説明してしまいましたが、index.htmlを以下の様に修正してください。

{% extends 'base.html' %}

{% block content %}
<div>
  <h1>{{ date|date:"Y年 m月 d日"}}</h1>
  
  <div>
    <h5>ようこそ！</h5>
    <h5>ユーザさん</h5>
    <h5>今日も頑張りましょう！</h5>
  </div>
</div>

<!-- createページへ -->
<div>
  <form method="get" action="{% url 'test:create_test' %}">
    <button type="submit" class="btn btn-primary">テストを作る</button>
  </form>
</div>

<!-- examページへ -->
<div>
  <form method="get" action="{% url 'test:exam' %}">
    <button type="submit" class="btn btn-danger">テストを始める</button>
  </form>
</div>

<!-- historyページへ -->
<div>
  <form method="get" action="{% url 'test:test_history' %}">
    <button type="submit" class="btn btn-success">登録した問題</button>
  </form>
</div>
{% endblock %}

ここで、classとして指定しているものは先ほどのbootstrapのHPからコピペしてきたものになります。

上と同様各ページに戻るボタンをつけるため、create_test.heml、exam.html、test_history.htmlのタイトルの下に以下をコピペしましょう。

<!-- メニューに戻る -->
<form method="get" action="{% url 'test:index' %}">
  <button type="submit" class="btn btn-secondary">戻る</button>
</form>

では、ここまで出来たら確認して見ましょう！

ページ遷移の確認

index.html
create_test.html

ちゃんと動きますね！

今回は以上になります！

最後に今のファイル構成です。

ファイル構成


この記事が参加している募集

#スキしてみて

526,895件

#振り返りnote

85,214件

この記事が気に入ったらサポートをしてみませんか？