因為篇幅太長, 所以此專案分割為上中下兩篇, 上一篇參考 :
本篇記錄此專案最重要的資料庫後台操作中的 CRUD 部分 (Create 部分見上篇).
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 個網頁程式的互動流程圖如下 :
管理頁面中的受試者資料表匯出與系統設定等有空再回頭來寫.
沒有留言 :
張貼留言