2023年11月6日 星期一

Python 學習筆記 : Django 4 用法整理 (六) CRUD 操作 (2)

在前一篇的資料表 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 :


沒有留言 :