見出し画像

36歳がDjangoを勉強してみた(ユーザ管理機能_その2)

今回もpaizaで勉強したWebアプリケーションフレームワークのDjangoについて書きます。

paizaの有料コースになりますので、無料で公開するとその他のお金を払っている方に申し訳ないため、この記事も有料で配信しています。

【やったこと】

●ログイン・ログアウト画面作成の準備をした

今回は前回作成した続きで、ログインとログアウト画面を作成します。

この記事の通り行うと以下のようなアウトプットになります。

●ログイン画面

画像2

それではどのように作成するかコードを書いていきます。

今までの差分で設定するため、過去の設定内容は以下のマガジンを参照ください。

●今回は以下のファイルを修正します。

・layout.html 新規作成
・login.html 新規作成
・logged_out.html 新規作成

まずは、ログイン・ログアウト画面の共通テンプレートを作成します。
ランチマップの共通テンプレートで利用した、base.htmlと共通部分があるため、base.htmlファイルをコピーします。

ファイル:myapp>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>Lunchmap</title>
   </head>
   <body>
        <nav class='navbar navbar-expand-sm navbar-dark bg-dark fixed-top'>
           <a class='navbar-brand' href='{% url "lunchmap:index" %}'>ランチマップ</a>
   
   #ここまではbase.thmlと同じ。以下より新規コード                   
   
            <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」で表示します。

ここから先は

2,284字 / 4画像

¥ 100

期間限定!PayPayで支払うと抽選でお得

この記事が気に入ったらチップで応援してみませんか?