Djangoでくじ引きアプリを作ってみる_part8

lottery-146318_1280.png Django

前回の続きで、くじ引きアプリを作成していきます。

【前回のまとめ】

・ログイン/ログアウト画面の準備をする

【今回の作業】

・ログイン/ログアウト画面を作成する

前回はログイン/ログアウト画面の準備しましたので、今回はログイン/ログアウト画面を作成していきたいと思います。

設定は今までの差分を利用しますので、初めから設定したい方は以下記事を参照してください。

Djangoでくじ引きアプリを作ってみる_part1

Djangoでくじ引きアプリを作ってみる_part2

Djangoでくじ引きアプリを作ってみる_part3

Djangoでくじ引きアプリを作ってみる_part4

Djangoでくじ引きアプリを作ってみる_part5

Djangoでくじ引きアプリを作ってみる_part6

Djangoでくじ引きアプリを作ってみる_part7

・ログイン/ログアウト画面の作成する

【手順】

1.ログイン・ログアウト画面の共通テンプレートを作成する

まずはログイン・ログアウト画面で利用するテンプレートを作成します。
内容はbase.htmlと共通する部分が多いので、そのファイルをコピーして作成します。

ファイル:myapptdl>templates>layout.html

コード:

<!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8">
      <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
      <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css'>
      <style>body {padding-top:80px;}</style>
      <title>くじ引き</title>
  </head>
  <body>
      <nav class='navbar navbar-expand -sm navbar-dark bg-dark fixed-top'>
          <a class='navbar-brand' href='{% url "tdl:index" %}'>くじ引き</a>

# ---base.htmlをコピーした場合は以下より新規追加コード---
          <ul class='navbar-nav'>
               {% if user.is_authenticated %}
                   <li class='nav-item'>
                       <span class='navbar-text'>{{ user }} - </span>
                   </li>
                   <li class='nav-item'>
                       <a href='{% url "logout" %}' class='logout nav-link'>Logout</a>
               {% else %}
                   <a href='{% url "login" %}' class='login nav-link'>Login</a>
               {% endif %}
# ---ここまで---
      </nav>
      <div class='container'>
          {% block content %}
          {% endblock %}
      </div>
  </body>
</html>

各コードの説明

コード 説明
<ul class=’navbar-nav’> ナビゲーションバーを利用します
{% if user.is_authenticated %} ユーザがログインしている場合に次のコードを実行します。
 <li class=’nav-item’><span class=’navbar-text’>{{ user }} – </span>

ナビゲーションバーの上にテキストで、「ユーザ名」を表示します。

<li class=’nav-item’><a href='{% url “logout” %}’ class=’logout nav-link’>Logout</a>

ログアウト用にリンクを「Logout」で表示します。

{% else %}

ユーザがログインしていない場合に次のコードを実行します。

<a href='{% url “login” %}’ class=’login nav-link’>Login</a>

ログイン用のリンクを「Login」で表示します。

2.ログイン用テンプレートを作成する

次はログイン用テンプレートを作成します。

ファイル:myapptdl>templates>registration>login.html

コード:

{% extends '../layout.html' %}

{% block content %}
    <h1>ログイン</h1>
    <section class='common-form'>
       {% if form.errors %}
           <p class='error-msg'>ユーザ名とパスワードが一致していません。もう一度試してください。</p>
       {% endif %}

       {% if next %}
           {%if user.is_authenticated %}
               <p class='error-msg'>あなたのアカウントにはこのページへのアクセス権がありません。,
                   続行するには、アクセス権のあるアカウントでログインしてください。</p>
           {% else %}
               <p class='error-msg'>このページを表示するにはログインしてください。</p>
           {% endif %}
       {% endif %}

       <form action='{% url "login" %}' method='post'>
           {% csrf_token %}
           <input type='hidden' name='next' value='{{ next }}' />
           {{ form.as_p }}
           <button type='submit'>Login</button>
       </form>
    </section>
{% endblock %}
コード 説明
{% if form.errors %} もしフォームに入力エラーがあった場合、次の処理を行います。
<p class=’error-msg’>ユーザ名とパスワードが一致していません。もう一度試してください。</p> メッセージを表示します
{%if user.is_authenticated %}

もし、ユーザがログイン状態であった場合、次の処理を行います。

<p class=’error-msg’>あなたのアカウントにはこのページへのアクセス権がありません。,
続行するには、アクセス権のあるアカウントでログインしてください。</p>

メッセージを表示します

{% else %}

ユーザがログインしていない場合に次のコードを実行します。

<p class=’error-msg’>このページを表示するにはログインしてください。</p>

メッセージを表示します

<form action='{% url “login” %}’ method=’post’>

ログイン用のフォーム画面を準備しています。

3.ログアウト用テンプレートを作成する

ログアウト用テンプレートを作成します。

ファイル:myapptdl>templates>registration>logged_out.html

コード:

{% extends '../layout.html' %}

{% block content %}
    <h1>ログアウト</h1>
    <p>サイトご利用ありがとうございます。</p>
    <p><a href='{% url "login" %}'>再ログイン</a></p>
{% endblock %}
コード 説明
<p>サイトを利用してくれてありがとうございます。</p> メッセージを表示します
 <p><a href='{% url “login” %}’>再ログイン</a></p> 再ログインリンクを表示します。

以上で設定は終わりなので、サーバを起動して確認します。

cd myapp 
python manage.py runserver

次の手順で確認していきます。

  1. 以下URLにブラウザでアクセスする
    http://localhost:8000/accounts/login
  2. ログイン画面が表示される
  3. ユーザとパスワードを入力してログインする
  4. ログイン後、リダイレクトされて一覧画面に遷移する
  5. もう一度、以下のURLに移動する
    http://localhost:8000/accounts/login
  6. ログイン画面のナビゲーションバーに現在ログインしているユーザが表示される
  7. 最後にログアウトリンクをクリックする
  8. ログアウトできることを確認する

確認した結果を動画に取りました。

以上で今回の目的であるログイン・ログアウト画面を作成することができました。

次回は、サインアップ画面を作成したいと思います。

ありがとうございました。

【参考にしたサイトと本】

#04:ログイン・ログアウト画面のテンプレートを作ろう

Python Django3超入門 (日本語) 単行本 – 2020/6/13

コメント

タイトルとURLをコピーしました