6.2 簡易書籍一覧表示アプリケーション作成

簡易書籍一覧表示アプリケーション作成

6.2 簡易書籍一覧表示アプリケーション作成

6.2.1 アプリケーション概要

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

書籍管理システムをもとに、Modelを利用した簡単なデータベースアクセス方法を学習していきます。

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

6.2.2 プロジェクトの準備

1 プロジェクトの作成

プロジェクトを始めるにあたり、コマンドプロンプトを開きます。「Anaconda Navigater」の「Environments」の「django_environment」の「▶」をクリックし、「Open Terminal」を選択してください。

図 6.2 1：ターミナルの起動

ターミナルが起動したら、「desktop/django_basic」フォルダに移動します。

■ Desktopファルダへの移動

`1`	`cd desktop\django_basic`

図 6.2 2：作業ディレクトリの移動

「django_basic」フォルダに移動したら、「bmsdjango」プロジェクトを作成します。

■ bmsdjangoプロジェクトの作成

`1`	`python manage.py startapp bmsdjango`

図 6.2 3：アプリケーション用のプロジェクトの作成

2 フォルダの作成

「bmsdjango」フォルダ内に下記のフォルダを作成する

① static
② static/css
③ templates

3 DB接続設定(settings.pyの編集)

「Django_basic」フォルダ内の「settings.py」に以下に示すソースコードの記述を確認する(記述されていない場合は下記の内容を記載する)

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

図 6.2 4：settings.pyの記載内容

変数INSTALLED_APPSには、「django_basic」プロジェクト内で使用するアプリケーションを登録するための変数であり、「bmsdjango」を登録しています。

1---省略----
2DATABASES = {
3    'default': {
4        'ENGINE': 'django.db.backends.sqlite3',
5        'NAME': BASE_DIR / 'db.sqlite3',
6    }
7}

図 6.2 5：settings.pyの記載内容

また変数DATABASESには「django_basic」で使用するデータベースを記載しています。

6.2.3 Modelの準備①：Model(Bookクラス)の作成

「bmsdjango」パッケージにある「models.py」内にソースコードの記述
ディレクトリ(bmsdjango)直下にある「models.py」ファイルに以下に示すソースコードを記述します。

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

1from django.db import models
2 
3class Book(models.Model):
4 
5    #isbn
6    isbn = models.CharField(max_length=128,primary_key=True)
7 
8    #タイトル
9    title = models.CharField(max_length=128)
10 
11    #価格
12    price = models.IntegerField()

図 6.2 6：Book.クラスのソースコード記述結果

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

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

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

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

`1`	`python manage.py makemigrations bmsdjango`

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

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

`1`	`python manage.py migrate`

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

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

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

Djangoのプロジェクトを作成すると、データベースの各テーブルを管理、編集するためのadminページが使用できます。
Bookテーブルに対して、当プロジェクトで使用するデータの登録を行っていきます。

① 管理画面のログインIDを作成する
まず管理画面のログインID、パスワードを作成するにあたり、「django_basicディレクトリ直下」で以下のコマンドを実行します。

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

1python manage.py createsuperuser
2Username (leave blank to use 'kanda-it'): admin
3Email address: メールアドレスを入力
4Password:password
5Password (again):password
6This password is too common.
7Bypass password validation and create user anyway? [y/N]: y
8Superuser created successfully.

図 6.2 9：管理画面のログイン情報の作成

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

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

1from django.contrib import admin
2from .models import Book
3 
4admin.site.register(Book)

図 6.2 10：admin.pyの編集

③ 管理画面にログインする
簡易サーバーを起動した上で「http://localhost:8000/admin/」にアクセスします。ログイン画面が表示されるので先ほど設定したログイン情報を入力し、ログインします。

「username」に「admin」と入力
「password」に「password」と入力
「LOG IN」をクリック

図 6.2 11：管理画面へのログイン

④ データを登録する
ログインするとプロジェクト別にテーブルが表示されています。

図 6.2 12：テーブルの選択

「BMSDJANGO」の「Books」を選択してください。下記の図のような画面が表示されたら、「ADD BOOK +」をクリックします。

図 6.2 13：admin.pyの編集

下記のような画面が表示されますので、「isbn」の項目に「0001」、「title」の項目に「java」、「price」の項目に「1001」を入力し、「save and add other」をクリックし、データを登録します。

図 6.2 14：admin.pyの編集

すると続け様にデータを登録できるので、以下のデータを登録してください。最後まで登録できたら「SAVE」をクリックします。

6.2.6 View(views.py)の編集

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

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

1from django.shortcuts import render
2from .models import Book
3 
4def listView(request):
5 
6    #Bookオブジェクトのリストを取得する
7    bookList = Book.objects.all()
8 
9    #エラーの有無でフォワード先を呼び分ける
10    params ={
11        'bookList':bookList,
12        }
13    return render(request, 'list.html',params)

図 6.2 15：プロジェクト準備完了

6.2.7 CSSファイルの配置

「bmsdjango/static/css」フォルダ内に下記からダウンロードした「style.css」を配置

http://kanda-it-school-kensyu.com/docs/sample/text/

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

「bmsdjango /templates」フォルダ内に「list.html」を作成
作成した「list.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="./insert">[書籍登録]</a></li>
25                            <li><a href="{% url 'list' %}">[書籍一覧]</a></li>
26                        </ul>
27                    </div>
28 
29                    <!-- ページタイトル -->
30                    <div id="page_title">
31                        <h2>書籍一覧</h2>
32                    </div>
33                </div>
34            </div>
35 
36            <!-- 書籍一覧のコンテンツ部分 -->
37            <div id="main" class="container">
38                <!-- 検索フォーム -->
39                <form class="inline-block" action="./search" >
40                    ISBN <input type="text"  name="isbn">
41                    TITLE <input type="text" name="title">
42                    価格 <input type="text" name="price">
43                    <input type="submit" value="検索">
44                </form>
45                <form class="inline-block" action="{% url 'list' %}" >
46                    <input type="submit" value="全件表示">
47                </form>
48                <table class="list-table">
49                    <thead>
50                        <tr>
51                            <th>ISBN</th>
52                            <th>TITLE</th>
53                            <th>価格</th>
54                            <th>変更 / 削除</th>
55                        </tr>
56                    </thead>
57                    <tbody>
58                        {% for book in bookList %}
59                        <tr>
60                            <td><a href="#">{{book.isbn}}</a></td>
61                            <td>{{book.title}}</td>
62                            <td>{{book.price}}</td>
63                            <td>
64                            <a href="#">変更</a>
65                            <a href="#">削除</a>
66                            </td>
67                        <tr>
68                        {% endfor %}
69                    </tbody>
70                </table>
71            </div>
72 
73        <!-- フッター部分 -->
74            <footer>
75                <div class="container">
76                    <h4>Copyright&copy; 2016 All Right Reserved.</h4>
77                </div>
78            </footer>
79        </div>
80    </body>
81</html>