7.3 簡易書籍アプリケーション作成(ログイン機能版)

簡易書籍アプリケーション作成(ログイン機能版)

7.3 簡易書籍アプリケーション作成(ログイン機能版)

以上、セッションについて学習したところで、セッション機能を使ったアプリケーションを作成していきましょう。

7.3.1 アプリケーション概要

アプリケーション作成の目的

具体的には書籍管理システムをもとに、セッション機能を使ったログイン機能の実装方法を学習していきます。

簡易ログインアプリケーション(Template版)プロジェクト構成(完成状態)

7.3.2 セッションの有効化

プロジェクトを始めるにあたり、セッション(Session)を有効にし、またログイン情報を保存するためのテーブルをデータベースに追加します。
「Django_basic」フォルダ内の「settings.py」に以下に示すソースコードの記述を確認する(記述されていない場合は下記の内容を記載する)

【ファイル名：Django_basic/settings.py】

図 7.3 1：settings.pyの記載内容

7.3.3 Modelの準備①：Modelクラス(Userクラス)の作成

ログイン情報を保存するためのテーブルをデータベースに追加します。

「bmsdjango」パッケージにある「models.py」内にソースコードの記述
「models.py」ファイルに以下に示すソースコードを記述する。

■ソースコード
【ファイル名：models.py】

7.3.4 Modelの準備②：Modelクラス(Userクラス)のマイグレーション

以下の手順に従い、上記のModelクラス(Userクラス)に対応するテーブルをデータベースに作成する

① マイグレーションファイルを作成する
ターミナルを開き、以下のコマンドを実行する

■ マイグレーションファイルの作成

`1`	`python manage.py makemigrations bmsdjango`

図 7.3 2：マイグレーションファイルの作成とマイグレーションの実行

② マイグレーションファイルを実行する
先ほど作成したマイグレーションファイルを適用させるため、以下、コマンドを実行する

■ マイグレーションファイルの実行

図 7.3 3：マイグレーションファイルの作成とマイグレーションの実行

以上でデータベース内にUserテーブルが生成されます。

7.3.5 データベースへのデータの登録

続いてUserテーブルに対して、当プロジェクトで使用するデータの登録を行っていきます。

① データベースの各テーブルを管理するadmin.py
この段階ではBookテーブルは管理画面に反映されません。管理画面に反映させるために、「bmsdjango」ディレクトリ直下の「admin.py」に以下のコードを記述します。

■ソースコード
【ファイル名：bmsdjango/admin.py】

② 管理画面(http://localhost:8000/admin/)にログインする

③ データを登録する
「User」テーブルを選択し、以下のデータを登録します。

7.3.6 View(views.py)の編集

「bmsdjango」ディレクトリ直下の「views.py」にソースコードの記述
「views.py」に以下に示すソースコードを記述する。

■ソースコード
【ファイル名：bmsdjango/views.py】

7.3.7 テンプレートファイルの作成

「bmsdjango /templates」フォルダ内に「login.html」を作成
既存の「list.html」、作成した「login.html」ファイルに以下に示すソースコードを記述する。

■ソースコード
【ファイル名：list.html】

1<!DOCTYPE html>
2{%load static%}
3<html>
4    <head>
5        <title>書籍一覧</title>
6        <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}"/>
7    </head>
8    <body>
9            <!-- ブラウザ全体 -->
10        <div id="wrap">
11            <!--ヘッダー部分  -->
12            <header>
13                <div class="container">
14                    <h1>書籍管理システムWeb版 Ver.1.0</h1>
15                </div>
16            </header>
17            <!-- メニュー部分 -->
18            <div id="menu">
19                <div class="container">
20                    <!-- ナビゲーション  -->
21                    <div id="nav">
22                        <ul>
23                            <li><a href="./">[メニュー]</a></li>
24                            <li><a href="{% url 'insert' %}">[書籍登録]</a></li>
25                            <li><a href="{% url 'list' %}">[書籍一覧]</a></li>
26                            <li><a href="{% url 'logout' %}">【ログアウト】</a></li>
27                        </ul>
28                    </div>
29 
30                    <!-- ページタイトル -->
31                    <div id="page_title">
32                        <h2>書籍一覧</h2>
33                    </div>
34                </div>
35            </div>
36 
37            <!-- 書籍一覧のコンテンツ部分 -->
38            <div id="main" class="container">
39                <!-- 検索フォーム -->
40                <form class="inline-block" action="./search" >           
41                    ISBN <input type="text"  name="isbn">
42                    TITLE <input type="text" name="title">
43                    価格 <input type="text" name="price">
44                    <input type="submit" value="検索">
45                </form>
46                <form class="inline-block" action="{% url 'list' %}" >
47                    <input type="submit" value="全件表示">
48                </form>
49                <table class="list-table">
50                    <thead>
51                        <tr>
52                            <th>ISBN</th>
53                            <th>TITLE</th>
54                            <th>価格</th>
55                            <th>変更 / 削除</th>
56                        </tr>
57                    </thead>
58                    <tbody>
59                        {% for book in bookList %}
60                        <tr>
61                            <td><a href="#">{{book.isbn}}</a></td>
62                            <td>{{book.title}}</td>
63                            <td>{{book.price}}</td>
64                            <td>
65                            <a href="{% url 'update' book.isbn %}">変更</a>
66                            <a href="{% url 'delete' %}?isbn={{book.isbn}}">削除</a>
67                            </td>
68                        <tr>
69                        {% endfor %}
70                    </tbody>
71                </table>
72            </div>
73 
74        <!-- フッター部分 -->
75            <footer>
76                <div class="container">
77                    <h4>Copyright&copy; 2016 All Right Reserved.</h4>
78                </div>
79            </footer>
80        </div>
81    </body>
82</html>

■ソースコード
【ファイル名：login.html】

1{%load static%}
2<!DOCTYPE html>
3<html>
4<head>
5    <meta charset="UTF-8">
6    <title>ログイン</title>
7    <link rel="stylesheet" type="text/css" href="{% static 'style.css' %}"/>
8</head>
9<body>
10    <!-- ブラウザ全体 -->
11    <div id="wrap">
12 
13        <!--ヘッダー部分  -->
14        <header>
15            <div class="container">
16                <h1>書籍管理システムSpring版 Ver.1.0</h1>
17            </div>
18        </header>
19 
20        <!-- メニュー部分 -->
21        <div id="menu">
22            <div class="container">
23                <!-- ページタイトル -->
24                <div id="page_title">
25                    <h2>ログイン</h2>
26                </div>
27            </div>
28        </div>
29 
30        <!-- 書籍一覧のコンテンツ部分 -->
31        <div id="main" class="container">
32            <!--  入力フォーム -->
33            <p>{{message}}</p>
34            <form action="{% url 'login' %}" method="POST">
35            {% csrf_token %}
36                <table align="center">
37                <tr>
38                    <th bgcolor="#6666ff" width="120">ユーザー</th>
39                    <td><input type=text size="20" name="user" value="{{user.userid}}"></input></td>
40                </tr>
41                <tr>
42                    <th bgcolor="#6666ff" width="100">パスワード</th>
43                    <td><input type=password name="password" value="{{user.password}}"></input></td>
44                </tr>
45                </table>
46                <div align="center">
47                    <input type="submit" value="ログイン"></input>
48                </div>
49            </form>
50 
51        </div>
52 
53        <!-- フッター部分 -->
54        <footer>
55            <div class="container">
56                <h4>Copyright&copy; 2018 All Right Reserved.</h4>
57            </div>
58        </footer>
59 
60    </div>
61</body>
62</html>

7.3.8 urls.pyの作成、編集

bmsdjangoプロジェクト直下に作成した「urls.py」に以下に示すソースコードを記述する。

■ソースコード
【ファイル名：bmsdjango/urls.py】

1from django.urls import path
2from . import views
3 
4urlpatterns = [
5    path('list', views.listView, name='list'),
6    path('insert', views.insert, name='insert'),
7    path('update/<str:isbn>', views.update, name='update'),
8    path('delete', views.delete, name='delete'), 
9    path('login', views.login, name='login'),
10    path('logout', views.logout, name='logout'), 
11]

7.3.9 アプリケーションの実行

ターミナルで簡易サーバを起動する
アプリケーションにアクセス（書籍一覧画面）

以下のアドレスから簡易書籍一覧表示アプリケーションにアクセスします。

URL：http://localhost:8000/bmsdjango/list

図 7.3 4：アプリケーションアクセス画面行

http://localhost:8000/bmsdjango/login へ遷移されるを確認します。ログイン画面が表示されるので、先ほどUserテーブルに登録したログイン情報(Userid列、Password列)を入力したら、「ログイン」をクリックしてください。

図 7.3 5：アプリケーションアクセス画面（ログイン画面）

すると「http://localhost:8000/bmsdjango/list」へ遷移し、画面一覧が表示されることを確認します。確認したら「ログアウト」をクリックしてください。

図 7.3 6：アプリケーションアクセス画面（書籍一覧画面）

再びログイン画面に戻ったことを確認します。

図 7.3 7：アプリケーションアクセス画面（ログイン画面）

NEXT>> 7.4 簡易書籍アプリケーション(ログイン機能版)の説明