前回の続きで、くじ引きアプリを作成していきます。
【前回のまとめ】
・ログイン/ログアウト画面の準備をする
【今回の作業】
・ログイン/ログアウト画面を作成する
前回はログイン/ログアウト画面の準備しましたので、今回はログイン/ログアウト画面を作成していきたいと思います。
設定は今までの差分を利用しますので、初めから設定したい方は以下記事を参照してください。
・ログイン/ログアウト画面の作成する
【手順】
１．ログイン・ログアウト画面の共通テンプレートを作成する
まずはログイン・ログアウト画面で利用するテンプレートを作成します。
内容は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」で表示します。 |
２．ログイン用テンプレートを作成する
次はログイン用テンプレートを作成します。
ファイル：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’> |
ログイン用のフォーム画面を準備しています。 |
３．ログアウト用テンプレートを作成する
ログアウト用テンプレートを作成します。
ファイル：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
次の手順で確認していきます。
- 以下URLにブラウザでアクセスする
http://localhost:8000/accounts/loginlocalhost - ログイン画面が表示される
- ユーザとパスワードを入力してログインする
- ログイン後、リダイレクトされて一覧画面に遷移する
- もう一度、以下のURLに移動する
http://localhost:8000/accounts/loginlocalhost - ログイン画面のナビゲーションバーに現在ログインしているユーザが表示される
- 最後にログアウトリンクをクリックする
- ログアウトできることを確認する
確認した結果を動画に取りました。
以上で今回の目的であるログイン・ログアウト画面を作成することができました。
次回は、サインアップ画面を作成したいと思います。
ありがとうございました。
【参考にしたサイトと本】
コメント