[Python] DjangoーSqliteで超簡易なCRUDを作成（3/4）

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

テンプレートフォルダ内に、CRUR操作のテンプレートファイルを作ります。
≫djangoMyLiteApp/myliteapp/templates/myliteapp/×××××.html

テンプレートファイルには、HTMLに通常書くコード以外に、Djangoファイルの処理情報やデータを記述する場合には、テンプレートシステムの記法（例={{pagetitle}}、{% url '××' %}）にしたがいコードを書くことになります。

index.html

• スタート画面

ページ移動のメニューのみの表示になります。
aリンクのhref属性には、アプリケーションとページ名を指定して、ページの移動を行うようにしてます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Django Sample DataBase</title>
</head>
<body>
<style>
body{
background:#cffcfc;
}
.line{
border-top:1px solid #aaa;
}
a{
text-decoration:none;
}
</style>
<h1>Django Sample DataBase</h1>
<h2>{{pagetitle}}</h2>
<br /><br />
<div class="line"></div>
<div><a href="{% url 'myliteapp:create' %}">Create</a></div>
<div><a href="{% url 'myliteapp:allshow' %}">All_Show</a></div>
</body>
</html>

create.html

• データの登録

formタグ内の"% csrf_token %"はセキュリティ対策です。
「Django」のシステムが、当アプリケーション内に、外部から同様なプログラムでアクセスができないようにすると言われます。

tableタグ内の"form.as_table"は入力フォームが入っているデータです。tableに表示するようにしました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Django Sample DataBase</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<style>
body{
background:#cffcfc;
}
.line{
border-top:1px solid #aaa;
}
a{
text-decoration:none;
}
</style>
<h1>Django Sample DataBase</h1>
<h2>Create</h2>
<div style="relative:static;font-weight:bold;height:30px;">
  <div id="fademsg" style="color:green;font-weight:bold;">{{msg}}</div>
</div>
<br />
<form action="" method="POST">    
    {% csrf_token %}
    <table>
        {{ form.as_table }}
    </table>
    <button type="submit">save</button>    
</form>
<br />
<div class="line"></div>
<div><a href="{% url 'myliteapp:allshow' %}">All_Show</a></div>
<div><a href="{% url 'myliteapp:index' %}">Index</a></div>
<script>
$(function(){
  $("#fademsg").fadeIn(function(){$("#fademsg").delay(2000).fadeOut();});
});
</script>
</body>
</html>

allshow.html

• 全データの表示

全データが入ったコンテキスト変数（all_list）を読み込み、「datatables」アプリケーションのテーブルに表示します。

「datatables」には、検索機能が装備されており、抽出データは同一テーブルで確認することができます。

テーブル内には、1つのレコードに対しページ遷移する３つのリンクを設けています。
1. Show　　ー　「show.html」へ移動.　任意のデータを表示.
2. Edit　　　ー　「edit.html」へ移動.　任意のデータの編集・更新.
3. deletion　ー　ページ移動はしない.　JavaScriptの「confirm」ダイアログで、データ削除の
　　　　　　　可否を問い、実行します.

"created_at"と"updated_at"の時間表示は、date組込みフィルタを利用して日付フォーマット形式で表示をしました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Django Sample DataBase</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/dt-1.10.18/sl-1.2.6/datatables.min.css"/>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/dt-1.10.18/sl-1.2.6/datatables.min.js"></script>
</head>
<body>
<style>
body{
padding:10px;
background:#cffcfc;
}
// ページ捲り表示
.dataTables_paginate{
position: relative;
float:right;
}
.line{
border-top:1px solid #aaa;
}
a{
text-decoration:none;
}
</style>
<h1>Django Sample DataBase</h1>
<h2>All_Show</h2>
<br /><br />
<table id="mytable" class="table table-striped table-bordered nowrap" width="100%">
    <thead><tr><th>id</th><th>name</th><th>address</th><th>mail</th><th>age</th><th>create_at</th><th>update_at</th><th></th><th></th><th></th></tr></thead>
	    <tbody>
            {% for data in all_list %}
            <tr>
            <td>{{ data.id }}</td>
            <td>{{ data.name }}</td>
            <td>{{ data.address }}</td>
            <td>{{ data.mail }}</td>
            <td>{{ data.age}}</td>
            <td>{{ data.created_at|date:"Y/n/j H:i:s" }}</td>
            <td>{{ data.updated_at|date:"Y/n/j H:i:s" }}</td>
            <td><a href="show/{{ data.id }}">Show</a></td>
            <td><a href="edit/{{ data.id }}">Edit</a></td>
            <td><a href="deletion/{{ data.id }}" onclick="return recdelChk('{{data.id}}','{{data.name}}')">Deletion</a></td>
            </tr>
            {% endfor %}
        <tbody>
</table>
<br />
<div class="line"></div>
<div><a href="{% url 'myliteapp:create' %}">Create</a></div>
<div><a href="{% url 'myliteapp:index' %}">Index</a></div>
<br />
<script>
// DataTable
$(document).ready( function () {
  var table = $('#mytable').DataTable({
  // メニュー
  "lengthMenu":[[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
  // ページを保存
  "stateSave":true,
  // ページ捲り表示タイプ
  "pagingType": "full_numbers",
  });
  // テーブル背景色
  var mytable = document.getElementById("mytable");
　  mytable.style.backgroundColor = "#fff";
});		

// 削除確認ダイアログ
function recdelChk (id,name) {
  var flag = confirm("削除してもよろしいですか？\n＞id="+id+"\n＞name="+name+"\n\n削除したくない場合は[キャンセル]ボタンを押して下さい。");
  // flagがTRUEなら送信、FALSEなら送信しない。
  return flag;
}
</script>
</body>
</html>

edit.html

• データの編集

編集データは、as_p（=<p>タグ）の中へ表示をするようにしました。

編集後、更新に成功するとメッセージフレームワークを利用して、messageに設定した文言を表示します。

メッセージフレームワーク機能の利用は、「setting.py」にデフォルトで設定されています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Django Sample DataBase</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
<style>
body{
background:#cffcfc;
}
.line{
border-top:1px solid #aaa;
}
a{
text-decoration:none;
}
</style>
<h1>Django Sample DataBase</h1>
<h2>Edit</h2>
<div style="relative:static;font-weight:bold;height:30px;">
    {% if messages %}
        {% for message in messages %}
            <div id="fademsg" style="color:green;">{{ message }}</div>
        {% endfor %}
    {% endif %}
</div>
<br />	
<table border="0">
<tr><td>
<span>id: </span><span style="padding:0 3px 0;border:1px solid #555;">{{idoutmsg}}</span>
</td></tr>
<form action="" method="POST">
    {% csrf_token %}
<tr><td>{{ form.as_p }}</td><tr>
<tr><td><button type="submit">save</button></td></tr>    
</form>
</table>
<br />
<div class="line"></div>
<div><a href="{% url 'myliteapp:create' %}">Create</a></div>
<div><a href="{% url 'myliteapp:allshow' %}">All_Show</a></div>
<div><a href="{% url 'myliteapp:index' %}">Index</a></div>
<script>
$(function(){
  $("#fademsg").fadeIn(function(){$("#fademsg").delay(2000).fadeOut();});
});
</script>
</body>
</html>

show.html

• 任意のデータを表示

"rec_show"変数から、レコードの各データをtableに表示してます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Django Sample DataBase</title>
</head>
<body>
<style>
body{
background:#cffcfc;
}
th{
text-align:right;
padding:5px;
background:#c8ccc9;
}
td{
padding:5px;
background:#eee;
}
.line{
border-top:1px solid #aaa;
}
a{
text-decoration:none;
}
</style>
<h1>Django Sample DataBase</h1>
<h2>Show</h2>
<br /><br />
<table>
<tbody>
<tr><th>id:</th><td>{{rec_show.id}}</td></tr>
<tr><th>name:</th><td>{{rec_show.name}}</td></tr>
<tr><th>address:</th><td>{{rec_show.address}}</td></tr>
<tr><th>mail:</th><td>{{rec_show.mail}}</td></tr>
<tr><th>age:</th><td>{{rec_show.age}}</td></tr>
</tbody>
</table>
<br />
<div class="line"></div>
<div><a href="{% url 'myliteapp:create' %}">Create</a></div>
<div><a href="{% url 'myliteapp:allshow' %}">All_Show</a></div>
<div><a href="{% url 'myliteapp:index' %}">Index</a></div>
</body>
</html>