2021年2月10日 星期三

jQuery Mobile 學習筆記 (十四) : 疫苗登記表專案 (中)

因為篇幅太長, 所以此專案分割為上中下兩篇, 上一篇參考 :


本篇記錄此專案最重要的資料庫後台操作中的 CRUD 部分 (Create 部分見上篇). 

測試網址如下 (用手機掃 QR code) :





4. 顯示資料表紀錄 : 

在後台管理頁面按受試者列表按鈕會跳轉到 vaccine_subject_ist.php, 此網頁會以表格形式顯示 vaccine 資料表內之紀錄, 之前學習 jQuery Mobile 時都沒有用到表格, 顯示列表資料都是使用 listview 元件, 但我覺得用表格較習慣, 所以參考了下面這個網站的做法 :


此網站範例是以 CSS 樣式表來產生具有立體感之表格效果. 不過我在此例的基礎上做了些微的調整, 原表格中沒有 thead 與 tbody 等元素, 而 HTML5 語法建議最好有, 但加上 thead 與 tbody 後卻讓表格標題與第一列之間失去分隔線, 所以我增加了這個樣式補強 :

      table tr:first-child td {
          border-top: 1px solid #b4b4b4;
          }

完整之 vaccine_subject_list.php 程式如下 :

<?php
//啟動 session 功能
session_start();
//設定台北時間
date_default_timezone_set("Asia/Taipei");
if (!isset($_SESSION["vaccine_admin_account"])) { //未登入回首頁
  header("Location: index.htm");
  }
?>
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="no-cache">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
    <style>
      table {
          color: black;
          background: #fff;
          border: 1px solid #b4b4b4;
          padding: 0;
          margin-top:10px;
          width: 100%;
          -webkit-border-radius: 8px;
          }
      table tr td {
          color: #666;
          border-bottom: 1px solid #b4b4b4;
          border-right: 1px solid #b4b4b4;
          padding: 5px 5px 5px 5px;
          background-image: -webkit-linear-gradient(top, #fdfdfd, #eee);
          }
      table tr:first-child td {
          border-top: 1px solid #b4b4b4;
          }
      table tr td:last-child {
          border-right: none;
          }
      table tr:last-child td {
          border-bottom: none;
          }
    </style>
  </head>
  <body>
    <!-- 第一頁頁面 -->
    <section data-role="page" id="page1">
      <header data-role="header" data-position="fixed">
        <a href="vaccine_admin.php" data-role="button" data-icon="back" data-mini="true"  data-ajax="false">返回</a>
        <h1>受試者列表</h1>
      </header>
      <article data-role="content">
        <table>
          <thead>
            <tr>
              <th>姓名</th>
              <th>電話</th>
              <th>年齡</th>
              <th>性別</th>
              <th>編輯</th>
            </tr>
          </thead>
          <tbody>
<?php
//建立 PDO 連線物件
$dsn="mysql:host=localhost;port=3306;dbname=test"; 
$username="root"; 
$password="mysql";
try {$conn=new PDO($dsn, $username, $password);}
catch (PDOException $e) {
  echo "資料庫連線錯誤!";
  die();
  }
//設定資料編碼
$conn->exec("SET CHARACTER SET utf8"); 
//讀取受試者資料表
$SQL="SELECT * FROM `vaccine` ORDER BY rdate DESC"; 
$RS=$conn->query($SQL);
$row=$RS->fetch(); 
//迭代整個資料集
while(!empty($row)) {
?>
            <tr>
              <td style="word-break: break-all"><? echo $row["name"] ?></td>
              <td><? echo $row["phone"] ?></td>
              <td><? echo $row["age"] ?></td>
              <td style="text-align: center"><? echo $row["gender"] ?></td>
              <td style="text-align: center">
                <a href="vaccine_subject_edit.php?id=<?php echo $row["id"] ?>" data-role="button" data-icon="edit" data-iconpos="notext" data-mini="true"  data-ajax="false">編輯</a>
              </td>
            </tr>
<?php
  $row=$RS->fetch();
  }
$conn=NULL;
?>
          </tbody>
        </table>
      </article>
      <footer data-role="footer" data-position="fixed">
        <h3>小狐狸事務所 07-1234567</h3>
      </footer>
    </section>
  </body>
</html>

此例中藍色的部分就是控制表格外觀的 CSS 樣式. 存取此網頁一開始會檢驗 Session 變數是否存在, 有才能看到網頁內容, 注意 SQL 語句是以 rdate 欄位倒序排序, 因此最近登記者會排在上面. 其次, 受試者姓名欄之 td 特別設定 style="word-break: break-all" 目的是讓字串完全拆開, 當字串太長時會折回顯示, 避免表格被撐開, 參考 : 


另外, 所有的會跳轉的超連結都加上 data-ajax="false" 屬性關閉預設之 Ajax 功能. 表格最右邊的編輯欄使用 data-iconpos="notext" 屬性關閉按鈕中的文字, 只顯示 icon, 而且其超連結後面帶了一個 id 參數. 結果如下 :




5. 編輯紀錄 (更新與刪除) : 

在上面受試者列表中按最右邊的編輯 icon 會跳轉至如下的 vaccine_subject_edit.php 網頁程式 :

<?php
//啟動 session 功能
session_start();
if (!isset($_SESSION["vaccine_admin_account"])) { //未登入回首頁
  header("Location: index.htm");
  }
?>
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="no-cache">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
  </head>
  <body>
    <!-- 第一頁頁面 -->
    <section data-role="page" id="page1">
      <header data-role="header" data-position="fixed">
        <a href="vaccine_subject_list.php" data-role="button" data-icon="back" data-mini="true" data-ajax="false">返回</a>
        <h1 style="white-space: nowrap">編輯受試者資料</h1>
      </header>
      <article data-role="content">
<?php
//建立 PDO 連線物件
$dsn="mysql:host=localhost;port=3306;dbname=test"; 
$username="root"; 
$password="mysql";
try {$conn=new PDO($dsn, $username, $password);}
catch (PDOException $e) {
  echo "資料庫連線錯誤!";
  die();
  }
//設定資料編碼
$conn->exec("SET CHARACTER SET utf8"); 
//讀取受試者資料表
$SQL="SELECT * FROM `vaccine` WHERE id='".$_REQUEST["id"]."'"; 
$RS=$conn->query($SQL);
$row=$RS->fetch(); 
if(!empty($row)) {
?>
        <form id="edit_form" method="post" data-ajax="false">  
          <div data-role="fieldcontain">
            <label for="name">姓名 :</label>
            <input type="text" id="name" name="name" value="<?php echo $row["name"] ?>">
          </div>
          <div data-role="fieldcontain">
            <label for="phone">電話 :</label>
            <input type="tel" id="phone" name="phone" value="<?php echo $row["phone"] ?>">
          </div>
          <div data-role="fieldcontain">
            <label for="age">年齡 :</label>
            <input type="number" id="age" name="age" min="0" max="100" value="<?php echo $row["age"] ?>">
          </div>
          <fieldset data-role="controlgroup" data-type="horizontal">
            <legend>性別 :</legend>
            <div data-role="fieldcontain">
              <label for="gender-1">男</label>
              <input type="radio" name="gender" id="gender-1" value="男"<?php if ($row["gender"]=="男") {echo " checked";} ?>>
              <label for="gender-2">女</label>
              <input type="radio" name="gender" id="gender-2" value="女"<?php if ($row["gender"]=="女") {echo " checked";} ?>>
            </div>
          </fieldset>
          <div data-role="fieldcontain">
            <button id="update_btn" data-icon="edit">更新</button>
            <button id="delete_btn" data-icon="delete">刪除</button>
          </div>
          <input type="hidden" name="id" value="<?php echo $row["id"] ?>">
        </form>
<?php
  }
else { //id 不存在
?>
        <h3>資料不存在</h3>
        <a href="vaccine_subject_list.php" data-role="button" data-icon="back">返回列表</a>
<?php    
  }
$RS=NULL;
$conn=NULL;
?>
      </article>
      <footer data-role="footer" data-position="fixed">
        <h3>小狐狸事務所 07-1234567</h3>
      </footer>
    </section>
    <script>
      function trim(s){ 
        return (s || '').replace(/^\s+|\s+$/g, ''); 
        }
      $(document).ready(function() {
        $("#update_btn").on("click", function(e) { 
          e.preventDefault();
          var name=trim($("#name").val());
          var phone=trim($("#phone").val());
          var age=trim($("#age").val());
          var gender=$("[name=gender]:radio:checked").val();
          if (name=="" ||  phone=="" || age=="" || gender==undefined) {
            alert("每一個欄位都必須填寫");
            return;
            }
          var msg="姓名 : " + name + "\n" + 
                  "電話 : " + phone + "\n" +  
                  "年齡 : " + age + "\n" + 
                  "性別 : " + gender + "\n" +
                  "以上資料正確嗎? ";
          if (!confirm(msg)) {return;}
          else {
            $("#edit_form").attr("action", 'vaccine_subject_update.php');
            this.form.submit();
            }
          });
        $("#delete_btn").on("click", function(e) { 
          e.preventDefault();
          if (!confirm("確定要刪除這筆資料嗎?")) {return;}
          else {
            $("#edit_form").attr("action", 'vaccine_subject_delete.php');
            this.form.submit();
            }
          });
        });
    </script>
  </body>
</html>

此程式依據從 vaccine_subject_list.php 傳遞過來的 id 到資料庫中抓取紀錄後填入表單中, 注意表單裡面用了一個隱藏欄位來存放 id 值, 修改欄位完畢按修改鈕或刪除鈕, 就會將 id 與各欄位之值傳給 vaccine_subject_update.php (按更新鈕) 或 vaccine_subject_delete.php (按刪除鈕) : 




按更新鈕跳轉至 vaccine_subject_update.php 更新該 id 受試者的資料, 再返回受試者列表頁面, 程式內容如下 :

<?php
//啟動 session 功能
session_start();
if (!isset($_SESSION["vaccine_admin_account"])) { //未登入回首頁
  header("Location: index.htm");
  }
//建立 PDO 連線物件
$dsn="mysql:host=localhost;port=3306;dbname=test"; 
$username="root"; 
$password="mysql";
try {$conn=new PDO($dsn, $username, $password);}
catch (PDOException $e) {
  echo "資料庫連線錯誤!";
  die();
  }
//設定資料編碼
$conn->exec("SET CHARACTER SET utf8"); 
//刪除資料
$SQL="UPDATE `vaccine` SET name='".$_REQUEST["name"]."',".
     "phone='".$_REQUEST["phone"]."',".
     "age='".$_REQUEST["age"]."',".
     "gender='".$_REQUEST["gender"]."' ".
     "WHERE id='".$_REQUEST["id"]."'"; 
//echo $SQL;
$RS=$conn->query($SQL);
header("Location: vaccine_subject_list.php");
$RS=NULL;
$conn=NULL;
?>

按刪除鈕跳轉至 vaccine_subject_delete.php 刪除該 id 受試者的資料, 再返回受試者列表頁面, 程式內容如下 :

<?php
//啟動 session 功能
session_start();
if (!isset($_SESSION["vaccine_admin_account"])) { //未登入回首頁
  header("Location: index.htm");
  }
//建立 PDO 連線物件
$dsn="mysql:host=localhost;port=3306;dbname=test"; 
$username="root"; 
$password="mysql"; 
try {$conn=new PDO($dsn, $username, $password);}
catch (PDOException $e) {
  echo "資料庫連線錯誤!";
  die();
  }
//設定資料編碼
$conn->exec("SET CHARACTER SET utf8"); 
//刪除資料
$SQL="DELETE FROM `vaccine` WHERE id='".$_REQUEST["id"]."'"; 
//echo $SQL;
$RS=$conn->query($SQL);
header("Location: vaccine_subject_list.php");
$RS=NULL;
$conn=NULL;
?>

以上就是這個小專案的大部分紀錄, 這 9 個網頁程式的互動流程圖如下 :




管理頁面中的受試者資料表匯出與系統設定等有空再回頭來寫. 

沒有留言 :