6.5 簡易書籍アプリケーション作成(CRUD版)

簡易書籍アプリケーション作成(CRUD版)

6.5 簡易書籍アプリケーション作成(CRUD版)

6.5.1 アプリケーション概要

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

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

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

6.5.2 View(views.py)の編集

「bmsdjango」ディレクトリ直下の「views.py」にソースコードの記述

「views.py」に以下に示すソースコードを記述する。

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

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

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

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

■ソースコード
【ファイル名：insert.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{{test}}</h1>
17                </div>
18            </header>
19 
20            <!-- メニュー部分 -->
21            <div id="menu">
22                <div class="container">
23                    <!-- ナビゲーション  -->
24                    <div id="nav">
25                        <ul>
26                            <li><a href="./">[メニュー]</a></li>
27                            <li><a href="{% url 'insert' %}">[書籍登録]</a></li>
28                            <li><a href="{% url 'list' %}">[書籍一覧]</a></li>
29                        </ul>
30                    </div>
31 
32                    <!-- ページタイトル -->
33                    <div id="page_title">
34                        <h2>書籍登録</h2>
35                    </div>
36                </div>
37            </div>
38 
39            <!-- 書籍一覧のコンテンツ部分 -->
40            <div id="main" class="container">
41                <!--入力フォーム -->
42                <form action="{% url 'insert' %}" method="POST">
43                    {% csrf_token %}
44                    <table class="input-table" align="center">
45                        <tr>
46                            <th>ISBN</th>
47                            <td>
48                                <input type="text" name="isbn">
49                            </td>
50                            </tr>
51                        <tr>
52                            <th>TITLE</th>
53                            <td>
54                                <input type="text" name="title">
55                            </td>
56                        </tr>
57                        <tr>
58                            <th>価格</th>
59                            <td>
60                                <input type="text" name="price">
61                            </td>
62                        </tr>
63                    </table> 
64                    <input type="submit" value="登録">
65                </form>
66            </div>
67 
68            <!-- フッター部分 -->
69            <footer>
70                <div class="container">
71                    <h4>Copyright&copy; 2018 All Right Reserved.</h4>
72                </div>
73            </footer>
74 
75        </div>
76    </body>
77</html> 

■ソースコード
【ファイル名：update.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="nav">
25                        <ul>
26                            <li><a href="./">[メニュー]</a></li>
27                            <li><a href="{% url 'insert' %}">[書籍登録]</a></li>
28                            <li><a href="{% url 'list' %}">[書籍一覧]</a></li>
29                        </ul>
30                    </div>
31 
32                    <!-- ページタイトル -->
33                    <div id="page_title">
34                        <h2>書籍変更</h2>
35                    </div>
36                </div>
37            </div>
38 
39             <!-- 書籍一覧のコンテンツ部分 -->
40             <div id="main" class="container">
41 
42                 <!--  入力フォーム -->
43                 <form action="{% url 'update' book.isbn %}" method="POST">
44                     {% csrf_token %}
45                    <table class="detail-table">
46                        <thead>
47                             <tr>
48                              <td></td>
49                              <th>&lt;&lt;変更前情報&gt;&gt;</th>
50                              <th>&lt;&lt;変更後情報&gt;&gt;</th>
51                             </tr>
52                        </thead>
53                        <tbody>
54                            <tr>
55                                <th>ISBN</th>
56                                <td>{{book.isbn}}</td>
57                                <td>{{book.isbn}}</td>
58                            </tr>
59                            <tr>
60                                <th>TITLE</th>
61                                <td>{{book.title}}</td>
62                                <td><input type="text" name="title"></td>
63                            </tr>
64                            <tr>
65                                <th>価格</th>
66                                <td>{{book.price}}</td>
67                                <td><input type="text" name="price"></td>
68                            </tr>
69                        </tbody>
70                      </table>
71                      <input type="hidden" name="isbn" value="{{book.isbn}}">
72                      <input type="submit" value="変更">
73                 </form>
74 
75            </div>
76 
77             <!-- フッター部分 -->
78             <footer>
79                 <div class="container">
80                     <h4>Copyright&copy; 2018 All Right Reserved.</h4>
81                 </div>
82             </footer>
83         </div>
84 
85     </body>
86</html>

6.5.4 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]