在前一篇的資料表 CRUD 測試中為了聚焦只使用單純的 HTML 模板, 本篇則是要用 Bootstrap 框架來美化版面, 本系列之前的文章參考 :
由於只是改變前端模板網頁, 因此後端的 views.py 與 urls.py 等控制器都不用改. 首先參考 "Python 學習筆記 : Django 4 用法整理 (二) 網頁模板" 這篇建立一個基礎模板 :
<!--base.htm-->
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}{% endblock %}</title>
{% block link %}{% endblock %}
{% block script %}{% endblock %}
<style>
{% block style %}{% endblock %}
</style>
<body>
{% block body %}{% endblock %}
</body>
</html>
然後繼承 base.htm 建立 Bootstrap 框架的模板網頁 bootstrap.htm :
<!--bootstrap.htm-->
{% extends "base.htm" %}
{% block link %}
<link rel="stylesheet" href="https://unpkg.com/bootstrap@4.0.0/dist/css/bootstrap.min.css">
{% endblock %}
{% block script %}
<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap@4.0.0/dist/js/bootstrap.min.js"></script>
{% endblock %}
這樣就可以修改 templates 下前一個 CRUD 測試中的模板, 讓他們都繼承 bootstrap.htm.
首先修改 list_all_records.htm 為繼承 bootstrap.htm, 並於 table, th, td, h3 等標籤上添加 margin (m 開頭) 與 padding (p 開頭) 的樣式類別以調整內外距離 :
<!-- list_all_records.htm -->
{% extends "bootstrap.htm" %}
{% block title %}讀取資料表{% endblock %}
{% block body %}
<h4 class="m-4">顯示 Members 資料表的全部紀錄
<a href="/myapp1/add_record/">+ 新增紀錄</a>
</h4>
<div class="container ml-3">
<table class="table-bordered">
<thead>
<tr>
<th class="p-2">編號</th>
<th class="p-2">姓名</th>
<th class="p-2">性別</th>
<th class="p-2">生日</th>
<th class="p-2">信箱</th>
<th class="p-2">電話</th>
<th class="p-2">地址</th>
<th class="p-2">動作</th>
</tr>
</thead>
<tbody>
{% for record in records %}
<tr>
<td class="p-2">
<a href="/myapp1/get_record_by_id/{{ record.id }}/">
{{ record.id }}
</a>
</td>
<td class="p-2">
<a href="/myapp1/get_record_by_name/{{ record.name }}/">
{{ record.name }}
</a>
</td>
<td class="p-2">{{ record.gender }}</td>
<td class="p-2">{{ record.birthday }}</td>
<td class="p-2">{{ record.email }}</td>
<td class="p-2">{{ record.phone }}</td>
<td class="p-2">{{ record.address }}</td>
<td class="p-2">
<a href="../edit_record/{{ record.id }}">編輯</a>
<a href="/myapp1/delete_record/{{ record.id }}">刪除</a>
</td>
</tr>
{% empty %}
<tr>
<td colspan="8">資料表內無紀錄</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endblock %}
與前次測試不同之處是這裡把 id 與 name 欄位都加上超連結分別瀏覽 /myapp1/list_record_by_id/id 與 /myapp1/list_record_by_name/name, 節果如下 :
接著修改其他模板網頁, 均繼承 bootstrap.htm :
<!-- get_record.htm -->
{% extends "bootstrap.htm" %}
{% block title %}讀取資料表{% endblock %}
{% block body %}
<div class="container ml-3">
<h2>顯示 Members 資料表的一筆紀錄</h2>
<h3>{{type_of_record}}</h3>
編號 : {{record.id}}<br>
姓名 : {{record.name}}<br>
性別 : {{record.gender}}<br>
生日 : {{record.birthday}}<br>
信箱 : {{record.email}}<br>
電話 : {{record.phone}}<br>
地址 : {{record.address}}<br>
<h3 style='color:red;'>{{message}}</h3>
</div>
{% endblock %}
點擊 list_all_records.htm 中的 id 或 name 欄位的超連結就會顯示那筆紀錄 :
下面是新增紀錄網頁 :
<!-- add_record.htm -->
{% extends "bootstrap.htm" %}
{% block title %}新增紀錄{% endblock %}
{% block body %}
<h4 class="m-4">新增會員資料</h4>
<div class="container ml-3">
<form method="post" action="." name="add_record">
{% csrf_token %}
<table class="table-bordered">
<tr>
<th class="p-2">姓名</td>
<td class="p-2"><input type='text' name='name' id='name'></td>
</tr>
<tr>
<th class="p-2">性別</td>
<td class="p-2">
<input type='radio' name='gender' id='male' value='男' checked="checked">男
<input type='radio' name='gender' id='female' value='女'>女
</td>
</tr>
<tr>
<th class="p-2">生日</td>
<td class="p-2"><input type='text' name='birthday' id='birthday' value='2023-01-01'></td>
</tr>
<tr>
<th class="p-2">信箱</td>
<td class="p-2"><input type='text' name='email' id='email'></td>
</tr>
<tr>
<th class="p-2">電話</td>
<td class="p-2"><input type='text' name='phone' id='phone'></td>
</tr>
<tr>
<th class="p-2">地址</td>
<td class="p-2"><input type='text' name='address' id='address'></td>
</tr>
<tr>
<td colspan="2" class="p-2">
<input type="submit" value="送出">
<input type="reset" value="重設">
</td>
</tr>
</table>
<span style='color:red;'>{{ message }}</span>
</form>
</div>
{% endblock %}
點擊 list_all_records.htm 中的 + 新增紀錄顯示如下頁面 :
下面是編輯紀錄網頁 edit_record.htm :
<!-- edit_record.htm -->
{% extends "bootstrap.htm" %}
{% block title %}編輯紀錄{% endblock %}
{% block body %}
<h4 class="m-4">編輯會員資料</h4>
<div class="container ml-3">
<form method="post" action="/myapp1/edit_record/{{ record.id }}/update/" name="add_record">
{% csrf_token %}
<table class="table-bordered">
<tr>
<th class="p-2">姓名</td>
<td class="p-2"><input type='text' name='name' id='name' value={{ record.name }}></td>
</tr>
<tr>
<th class="p-2">性別</td>
<td class="p-2">
{% if record.gender == '男' %}
<input type='radio' name='gender' id='male' value='男' checked="checked">男
<input type='radio' name='gender' id='female' value='女'>女
{% else %}
<input type='radio' name='gender' id='male' value='男'>男
<input type='radio' name='gender' id='female' value='女'checked="checked">女
{% endif %}
</td>
</tr>
<tr>
<th class="p-2">生日</td>
<td class="p-2"><input type='text' name='birthday' id='birthday' value={{ record.birthday }}></td>
</tr>
<tr>
<th class="p-2">信箱</td>
<td class="p-2"><input type='text' name='email' id='email' value={{ record.email }}></td>
</tr>
<tr>
<th class="p-2">電話</td>
<td class="p-2"><input type='text' name='phone' id='phone' value={{ record.phone }}></td>
</tr>
<tr>
<th class="p-2">地址</td>
<td class="p-2"><input type='text' name='address' id='address' value={{ record.address }}></td>
</tr>
<tr>
<td colspan="2" class="p-2">
<input type="submit" value="送出">
<input type="reset" value="重設">
</td>
</tr>
</table>
<span style='color:red;'>{{ message }}</span>
</form>
</div>
{% endblock %}
點擊 list_all_records.htm 中的編輯超連結顯示如下頁面 :
用 Bootstrap 簡簡單單就讓醜醜的原生網頁改頭換面, 有空要好好地來把 Bootstrap 再複習一遍. 以上測試範例壓縮檔放在 GitHub :
# https://github.com/tony1966/tony1966.github.io/blob/master/test/django/django-review-database-5.zip
沒有留言 :
張貼留言