小狐狸事務所

2020年11月7日星期六

jQuery 學習筆記 : 表格控制

我學習 jQuery 的第一本入門書是借自左新分館的 "精通JavaScript+jQuery" (曾順, 松崗, 2009), 雖然這本書已經是十年前的老書了, 但裡面的資料還蠻有參考價值 (例如 Ajax 與表格控制), 我前陣子複習 jQuery 時還是從左新再借回來看 :

最近要清理借書, 所以摘要整理一下重點, 並做些簡單測試後就還回去吧.

首先是表格, 關於 HTML5 表格相關元素參考下面這篇的第 9 節 :

# 網頁技術速學筆記 (一) : HTML 基礎

以下僅測試該篇沒有的功能以及補足 jQuery 對表格的控制部分. 下面範例之數據取自 :

# 0050 會比 0056 好？揭密高股息ETF背後的「內扣費用」和「手續費」

表格元素 table 有一個 border 屬性可以設定整個表格之邊框寬度 (px), 此屬性作用範圍包含內部儲存格都在內, 例如 :

測試 1 : 基本的表格 (jQuery not used) : 使用 border 屬性 [看原始碼]

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<caption>元大 0050 與 0056 報酬率比較</caption>

<thead>

<tr>

<th>年化報酬率</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

</html>

結果如下 :

可見一個 border 屬性就搞定整張表格與內部儲存格的邊框. 如果改用 CSS 來設定, 要注意的是, table 元素本身的 CSS 屬性 border 只作用於表格自己, 也就是只規範外框, 例如 :

測試 2 : 基本的表格 (jQuery not used) : 使用 CSS 的 border 屬性 (1) [看原始碼]

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<thead>

<tr>

<th>年化報酬率</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

</html>

結果如下 :

可見 table 元素上的 border 樣式只能設定表格本身的外框而已, 並不包括內部儲存格. 如果要整個表格都有邊框, 則代表儲存格的 th 與 td 這兩個元素也要設定 border 樣式 :

<style>

table, th, td {border: 1px solid black;}

</style>

例如 :

測試 3 : 基本的表格 (jQuery not used) : 使用 CSS 的 border 屬性 (2) [看原始碼]

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td {border: 1px solid black;}

</style>

</head>

<body>

<table>

<thead>

<tr>

<th>年化報酬率</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

</html>

結果如下 (與上面測試 1 相同) :

如果表格外框需要其他樣式, 則必須與 th/td 分開設定, 例如 :

測試 4 : 基本的表格 (jQuery not used) : 使用 CSS 的 border 屬性 (3) [看原始碼]

<!DOCTYPE html>

<html>

<head>

<style>

table {border: 5px solid #232eb6;}

th, td {border: 1px solid black;}

</style>

</head>

<body>

<table>

<thead>

<tr>

<th>年化報酬率</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

$(function(){

});

</script>

</body>

</html>

此例把 table 與 th/td 之樣式設定分離開來, 結果如下 :

不過這表格的儲存格之間預設會有空隙, 視覺觀感不佳, 消除儲存格空隙的方法是給 table 元素添加 border-collapse: collapse 屬性即可, 例如 :

測試 5 : 基本的表格 (jQuery not used) : 使用 CSS 的 border 屬性 (4) [看原始碼]

<!DOCTYPE html>

<html>

<head>

<style>

table {border: 5px solid #232eb6;border-collapse:collapse;}

th, td {border: 1px solid black;}

</style>

</head>

<body>

<table>

<thead>

<tr>

<th>年化報酬率</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

</html>

結果如下 :

雖然儲存格間隙不見了, 但儲存格內容似乎前胸貼後壁黏在一起不好看, 解決方法是給 th/td 元素添加 padding 樣式屬性, 例如 :

測試 6 : 基本的表格 (jQuery not used) : 使用 CSS 的 padding 屬性 [看原始碼]

<!DOCTYPE html>

<html>

<head>

<style>

table {border: 5px solid #232eb6;border-collapse:collapse;}

th, td {border: 1px solid black;padding:6px;}

</style>

</head>

<body>

<table>

<thead>

<tr>

<th>年化報酬率</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

</html>

此例結合 border-collapse 與 padding 樣式設定, 結果如下 :

其實 th 元素並非一定要放在 thead 內, 也可以放在 tboby 中, 例如要突出行與列的標題可以將每一列的第一行從 td 改為 th, 然後將 th 與 td 的樣式設定分離, 給 th 套上不同的 background-color 樣式屬性即可, 例如 :

測試 7 : 基本的表格 (jQuery not used) : 凸顯行與列標題的方法 [看原始碼]

<!DOCTYPE html>

<html>

<head>

<style>

table {border: 5px solid #232eb6;border-collapse:collapse;}

th {border: 1px solid black;padding:6px;background-color:#E6CAFF;}

td {border: 1px solid black;padding:6px;}

</style>

</head>

<body>

<table>

<thead>

<tr>

<th>年化報酬率</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</body>

</html>

此例將 td 與 th 的樣式分開, 並為 th 添加 background-color 樣式屬性, 然後把 tbody 中的第一行 td 元素改為 th, 結果如下 :

另外一個常用的表格 CSS 技巧是隔列變更背景色, 以下測試取材於下面這篇文章的數據 :

# 0056配息縮水！還可以繼續存嗎？投資達人建議先破解兩大迷思

測試 8 : 隔列交互變更背景色的表格 : 手動控制 CSS 樣式類別切換 [看原始碼]

<!DOCTYPE html>

<html>

<head>

<style>

table {border: 1px solid #007108;

border-collapse: collapse;

background-color: #d9ffdc}

th {border: 1px solid #007108;

padding:6px;

background-color: #a16128;

color: white;}

td {border: 1px solid #007108; padding:6px;}

.altrow {background-color: #a5e5aa;}

</style>

</head>

<body>

<table>

<caption>0056 歷年配息與填息天數</caption>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

</tr>

<tr>

</tr>

</tr>

<tr>

</tr>

</tr>

<tr>

</tr>

</tr>

<tr>

</tr>

</tr>

<tr>

</tr>

<tr>

<td colspan="2">平均年度殖利率</td>

<td>平均填息天數</td>

</tr>

</tbody>

</table>

</body>

</html>

此例主要是定義了一個名為 altrow 的樣式類別用來套在特定列的 tr 員數, 功能是改變其背景顏色為 #a5e5aa, 而未套用此類別者就套用 table 元素的背景色 #d9ffdc, 結果如下 :

此方法的明顯缺點是必須在特定列套用特定樣式類別, 若中間插入新的列勢必要重新設定. 解決辦法是使用 jQuery 來控制, 例如 :

測試 9 : 隔列交互變更背景色的表格 : 使用 jQuery 自動控制樣式類別切換 (1) [看原始碼]

<!DOCTYPE html>

<html>

<head>

<style>

table {border: 1px solid #007108;

border-collapse: collapse;

background-color: #d9ffdc}

th {border: 1px solid #007108;

padding:6px;

background-color: #a16128;

color: white;}

td {border: 1px solid #007108; padding:6px;}

.altrow {background-color: #a5e5aa;}

</style>

</head>

<body>

<table>

<caption>0056 歷年配息與填息天數</caption>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td colspan="2">平均年度殖利率</td>

<td>平均填息天數</td>

</tr>

</tbody>

</table>

$(function(){

$("tr:nth-child(even)").addClass("altrow");

});

</script>

</body>

</html>

此例使用 jQuery 選擇器 tr:nth-child(even) 選取偶數列, 然後呼叫 addClass() 方法添加樣式類別 altrow, 不須在特定列 tr 元素上手動添加樣式類別, 結果與上面一樣 :

下面範例則是使用 toggleClass() 方法在滑鼠移入與移出時添加與移除樣式類別 :

測試 10 : 隔列交互變更背景色的表格 : 滑鼠移入移出切換樣式類別 [看原始碼]

<!DOCTYPE html>

<html>

<head>

<style>

table {border: 1px solid #007108;

border-collapse: collapse;

background-color: #d9ffdc}

th {border: 1px solid #007108;

padding:6px;

background-color: #a16128;

color: white;}

td {border: 1px solid #007108; padding:6px;}

.altrow {background-color: #a5e5aa;}

</style>

</head>

<body>

<table>

<caption>0056 歷年配息與填息天數</caption>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td colspan="2">平均年度殖利率</td>

<td>平均填息天數</td>

</tr>

</tbody>

</table>

$(function(){

$("tr:nth-child(even)").addClass("altrow");

$("table").on("mouseover", function(){

$("tr:gt(0)").toggleClass("altrow");

});

$("table").on("mouseout", function(){

$("tr:gt(0)").toggleClass("altrow");

});

</script>

</body>

</html>

此例在 table 元素上綁定 mouseover 與 mouseout 事件, 當滑鼠移入或移出表格時呼叫 toggleClass() 來切換大於 0 的列的樣式類別, 結果如下 :

下面這個範例則是用 hover 事件讓滑鼠移到某列時添加樣式類別使其凸顯 :

測試 11 : 隔列交互變更背景色的表格 : 滑鼠移入移出切換樣式類別 (1) [看原始碼]

<!DOCTYPE html>

<html>

<head>

<style>

table {border: 1px solid #007108;

border-collapse: collapse;

background-color: #d9ffdc}

th {border: 1px solid #007108;

padding:6px;

background-color: #a16128;

color: white;}

td {border: 1px solid #007108; padding:6px;}

.altrow {background-color: #a5e5aa;}

.highlight {background-color: yellow;}

</style>

</head>

<body>

<table>

<caption>0056 歷年配息與填息天數</caption>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td colspan="2">平均年度殖利率</td>

<td>平均填息天數</td>

</tr>

</tbody>

</table>

$(function(){

$("tr:nth-child(even)").addClass("altrow");

$("tr").hover(function(){

$(this).toggleClass("highlight");

});

</script>

</body>

</html>

此列定義了一個 highlight 樣式類別, 當滑鼠移過表格某列時呼叫 toggleClass() 方法切換為 highlight 樣式, 移出後切換回原來樣式, 結果如下 :

這本書的範例中還有一個表格配色我覺得很順眼, 藍色系的感覺很沉穩 :

測試 12 : 隔列交互變更背景色的表格 : 滑鼠移入移出切換樣式類別 (2) [看原始碼]

<!DOCTYPE html>

<html>

<head>

<style>

table {border: 1px solid #0058a3;

border-collapse: collapse;

background-color: #eaf5ff}

th {border: 1px solid #0058a3;

padding:6px;

background-color: #4bacff;

color: #ffffff;}

td {border: 1px solid #0058a3; padding:6px;}

.altrow {background-color: #c4e4ff;}

.highlight {background-color: yellow;}

</style>

</head>

<body>

<table>

<caption>0056 歷年配息與填息天數</caption>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td colspan="2">平均年度殖利率</td>

<td>平均填息天數</td>

</tr>

</tbody>

</table>

$(function(){

$("tr:nth-child(even)").addClass("altrow");

$("tr").hover(function(){

$(this).toggleClass("highlight");

});

</script>

</body>

</html>

與上例主要的差異是 : 表格與儲存格邊框改為 #0058a3; 表格背景色改為 #eaf5ff; 標頭背景色改為 #4bacff; 樣式類別 altrow 背景色改為 #c4e4ff, 結果如下 :

將將, 完成了!

電腦檢測軟體 AIDA64

最近發現我的 Swift 5 (SF515) 筆電在沒跑甚麼大運算時還是聽到風扇持續在轉, 而且鍵盤上方摸起來蠻熱的, 上網查詢找到下面這篇文章, 提到可能是 CPU 上的散熱膏沒作用了, BIOS 偵測到溫度升高就會啟動風扇散熱 :

# 筆電風扇一直轉，溫度沒降下來。

文中提到可用 AIDA64 這軟體去檢測, 我在阿榮福利味下載了免安裝試用版 (AIDA64 Extreme), 經 Virus Total 掃描 OK, 解壓縮後執行 aida64.exe 發現 CPU 溫度居然有 80 度這麼高 :

看來下周得跑一趟宏碁維修中心看看了, 到明年 1/23 才滿兩年, 還在保固內.

下面是電池檢測結果 :

主機板資訊 :

主機板與顯示卡 :

儲存 (SSD 與外接隨身碟) :

2020年11月5日星期四

好站 : 用 Arduino 製作信號產生器

二哥這學期轉到電機系後做電子實習挺認真, 有時先在家連好電路再帶去學校, 這樣比較節省時間, 甚至想說前一晚先測試看看電路是否可動作, 但可惜家裡沒有信號產生器.

我在 Youtube 看到下面這部影片, 介紹如何利用 Arduino 製作正弦波信號產生器 :

# How to Generate Sine Wave using Arduino??

Arduino UNO 有 6 個類比輸出入腳 (A0~A5) 可用來輸出正弦波信號, 加上可變電阻與運算放大器可以將信號放大, 14 個 DIO 數位輸出入腳 (D0~D13) 則可用來輸出方波信號, 有空找好零件來製作一個唄.

參考 :

# Arduino Waveform Generator

2020年11月4日星期三

荷塘月色

今天在 Youtube 找到一首鳳凰傳奇 (曾毅+楊魏玲花) 唱的 "荷塘月色", 原來楊魏玲花的唱腔也有柔婉的一面, 之前的歌路都很豪邁 (例如我從草原來等) :

# 鳳凰傳奇 [荷塘月色] MV

翻唱此歌的人很多, 下面是來自陝西的歌手王奕心 (比較柔) 的版本 :

# 【HD】王奕心-荷塘月色(潮流版)

下面則是鋼琴演奏版 :

# 钢琴曲-荷塘月色

二胡依林的演奏 :

# 荷塘月色《二胡版》Moonlight in the Lotus Pond - Erhu Cover

聽了一段時間中國歌曲後, 我覺得新生代作曲家頗有可觀者焉.

PHP 學習筆記 : 使用 PDO 操作 MySQL 資料庫

最近在測試 Ajax 時需要用到後端 PHP, 因此花了點時間複習之前的筆記, 整理資料庫存取時在下面這本書的第 25 章看到使用 PDO (PHP Data Object) 操作 MySQL 資料庫的介紹, 我覺得比傳統方式簡單好用 :

# 徹底研究 jQuery Mobile + PHP 手機程式及網站開發 (上奇, 張亞飛)

我用 phpinfo() 函數查詢所租的英國 Hostinger 主機發現也有支援 PDO (MySQL 與 SQlite), 所以就順便做一下測試與整理 :

使用 PDO 存取資料庫的程序如下 :

1. 建立資料庫連線 :

使用 new PDO($dsn, $username, $password) 建立一個 PDO 資料庫連線物件, 傳入參數有三 :

$dsn (資料來源字串) :
包含 MySQL 資料庫主機位址 (host), 通訊埠 (port), 以及資料庫名稱 (dbname). 例如 :
$dsn="mysql:host=mysql.hostinger.co.uk;port=3306;dbname=u137801000_test";
$dsn="mysql:host=localhost;port=3306;dbname=test"; (使用本機伺服器)
$username (資料庫使用者名稱) :
即 MySQL 資料庫使用者名稱, 例如 :
$username="u137801000_test";
$username="root"; (使用本機伺服器)
$password (資料庫使用者密碼) :
即 MySQL 資料庫使用者密碼, 例如 :
$password="mysql";

例如我在 Hostinger 的主機用的是 :

//建立 PDO 連線物件

$dsn="mysql:host=mysql.hostinger.co.uk;port=3306;dbname=u137801000_test";

$username="u137801000_test";

$password="a123456";

$conn=new PDO($dsn, $username, $password);

在本機 XAMPP 用的是 :

//建立 PDO 連線物件

$dsn="mysql:host=localhost;port=3306;dbname=test";

$username="root";

$password="mysql";

$conn=new PDO($dsn, $username, $password);

因為呼叫 PDO() 發生錯誤時可能暴露資料庫連線資訊形成資安漏洞, 例如若將上面的資料庫名稱改為不存在的 test1 就會出現如下例外 (exception) :

Fatal error: Uncaught PDOException: SQLSTATE[HY000] [1049] Unknown database 'test1' in D:\xampp\htdocs\php_pdo_test_1.php:7 Stack trace: #0 D:\xampp\htdocs\php_pdo_test_1.php(7): PDO->__construct('mysql:host=loca...', 'root', 'mysql') #1 {main} thrown in D:\xampp\htdocs\php_pdo_test_1.php on line 7

補強辦法是將 PDO() 指令放在 try-catch 中, 當發生連線錯誤捕捉到 PDOException 例外事件時呼叫 die() 函數結束程序, 避免直接暴露資料庫存取資訊 :

try {$conn=new PDO($dsn, $username, $password);}

catch (PDOException $e) {

echo "資料庫連線錯誤!";

die();

}

2. 設定資料庫編碼 :

若資料庫內儲存資料含有中文字元, 則需以下列指令設定資料庫編碼為 utf-8 :

$conn->exec("SET CHARACTER SET utf8");

3. 執行資料庫操作 :

資料庫主要有 CRUD (Create/Read/Update/Delete, 增刪查改) 等操作, 常用的 SQL 指令如下表 :

資料庫操作	SQL 指令範例
建立 (Create)	INSERT INTO users(name,age,gender) VALUES('Tom',25,'M')
讀取 (Read)	SELECT * FROM users WHERE gender='F' AND age < 40 ORDER BY name DESC
更新 (Update)	UPDATE users SET age=23,gender='F' WHERE name='Amy'
刪除 (Delete)	DELETE FROM users WHERE name = "Tom"

另外有時還會用到建立資料表之操作, 指令例如 :

$SQL="CREATE TABLE users(name varchar(50) NOT NULL, age int NOT NULL)"

更多 SQL 指令範例參考 :

# 最常用的 SQL 指令

呼叫 PDO 連線物件的 query() 方法並傳入 SQL 字串即可執行 SQL 指令, 此方法會傳回一個 PDOStatement 物件 (即受影響之資料集) :

$RS=$conn->query($SQL);

此資料集物件常用之方法有兩個 :

rowCount() : 傳回資料集的筆數 (SQL 指令操作影響之列數)
fetch() : 傳回資料集中最上面的一筆資料並將指標往下移

例如 :

$row=$RS->fetch(); //傳回資料集中最上面的一筆資料

if ($RS->rowCount() > 0) {echo "更新完成";}

fetch() 方法傳回值為一個關聯式陣列, 可用陣列之鍵 (即資料表之欄位名稱) 來存取, 例如 :

echo $row["name"];

4. 關閉資料庫連線 :

因連線物件會占用記憶體, 故執行完只要將 PDO 連線物件指定 NULL 值即可關閉連線.

$conn=NULL;

以下測試使用最近為網友解題於 Hostinger 上所建的一個測試資料表為例, 其 SQL 指令為 :

-- 資料表結構 `pid_valid_date`

CREATE TABLE `pid_valid_date` (

`pid` varchar(10) COLLATE utf8mb4_unicode_ci NOT NULL,

`valid_date` varchar(10) COLLATE utf8mb4_unicode_ci NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

建好後輸入如下測試資料, SQL 指令為 :

-- 傾印資料表的資料 `pid_valid_date`

INSERT INTO `pid_valid_date` (`pid`, `valid_date`) VALUES

('A123456789', '2021-02-13'),

('Q123456789', '2025-11-21'),

('S123456789', '2023-05-29'),

('T123456789', '2020-12-31');

參考 :

# 用 PHP 與 jQuery Ajax 存取資料庫 (習題)

測試 1 : 讀取資料庫中的資料表 (讀取第一筆資料) [看原始碼]

<?php

header('Content-Type: text/html;charset=UTF-8');

//建立 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 `pid_valid_date`";

$RS=$conn->query($SQL);

//讀取第一列資料

$row=$RS->fetch();

//傾印陣列內容

var_dump($row);

if(!empty($row)) {

$msg="pid=".$row["pid"]." valid_date=".$row["valid_date"]."<br>";

}

echo $msg;

//關閉資料庫連線

$conn=NULL;

此例用 DPO 連線物件的 query() 方法從資料表 pid_valid_date 中擷取所有欄位資料後傳回資料集 (PDOStatement 物件), 呼叫其 fetch() 方法傳回資料集中的第一列資料 (關聯式陣列), 以欄位名稱即可取得每一欄之值, 原始的資料表傳回結果如下 :

array(4) { ["pid"]=> string(10) "A123456789" [0]=> string(10) "A123456789" ["valid_date"]=> string(10) "2021-02-13" [1]=> string(10) "2021-02-13" } pid=A123456789 valid_date=2021-02-13

資料集 PDOStatement 物件的 fetch() 方法只傳回資料集中的第一筆資料, 若要列出全部資料集需使用迴圈進行迭代, 例如 :

測試 2 : 讀取資料庫中的資料表 (列出全部資料) [看原始碼]

<?php

header('Content-Type: text/html;charset=UTF-8');

//建立 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 `pid_valid_date`";

$RS=$conn->query($SQL);

//讀取第一列資料

$row=$RS->fetch();

//迭代整個資料集

while(!empty($row)) {

echo "pid=".$row["pid"]." valid_date=".$row["valid_date"]."<br>";

$row=$RS->fetch();

}

//關閉資料庫連線

$conn=NULL;

此例呼叫 fetch() 取得第一筆資料後用 while 迴圈檢查資料是否為空, 否則就印出該筆資料並取出下一筆資料直到資料集結束, 結果如下 :

pid=A123456789 valid_date=2021-02-14
pid=Q123456789 valid_date=2025-11-21
pid=S123456789 valid_date=2023-05-29
pid=T123456789 valid_date=2020-12-31

下面是其它資料表操作例如新增, 更新, 刪除等全部整合在一起的範例 :

測試 3 : 在資料表中新增一筆資料 [看原始碼]

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<label for="pid">身分證字號(10個字元)<label>

$(document).ready(function(){

$('#create').on('click', function() {

var pid=$("#pid").val();

var valid_date=$("#valid_date").val();

if(pid.length!=10){alert("身分證字號為10個字元");return;}

if(valid_date.length==0){alert("請選擇日期");return;}

$.post({

url: "http://tony1966.xyz/test/phptest/php_pdo_test_3_create.php",

dataType: "html",

data: {pid: pid, valid_date: valid_date},

success: function(res) {

alert(res);

}

});

$('#read').on('click', function() {

var pid=$("#pid").val();

if(pid.length!=10){alert("身分證字號為10個字元");return;}

$.post({

url: "http://tony1966.xyz/test/phptest/php_pdo_test_3_read.php",

dataType: "html",

data: {pid: pid},

success: function(res) {

$("#valid_date").val(res);

$("#display").html(res);

}

});

$("#update").on("click", function(e){

var pid=$("#pid").val();

var valid_date=$("#valid_date").val();

if(pid.length!=10){alert("身分證字號為10個字元");return;}

if(valid_date.length==0){alert("請選擇日期");return;}

$.post({

url: "http://tony1966.xyz/test/phptest/php_pdo_test_3_update.php",

dataType: "html",

data: {pid: pid, valid_date: valid_date},

success: function(res) {

alert(res);

}

});

$("#delete").on("click", function(e){

var pid=$("#pid").val();

if(pid.length!=10){alert("身分證字號為10個字元");return;}

$.post({

url: "http://tony1966.xyz/test/phptest/php_pdo_test_3_delete.php",

dataType: "html",

data: {pid: pid},

success: function(res) {

alert(res);

}

});

$("#read_all").on("click", function(e){

$.get({

url: "http://tony1966.xyz/test/phptest/php_pdo_test_2.php",

dataType: "html",

success: function(res) {

$("#display").html(res);

}

});

</script>

</body>

</html>

此例使用了 HTML5 的 input[type=date] 元件來輸入與顯示日期, 透過五個按鈕來進行 CRUD 操作, 關於 date 元件參考 :

# HTML5 的日期輸入功能教學

按 "讀取全部" 鈕會透過 Ajax 向上面範例的 php_pdo_test_2.php 提出請求, 傳回資料表 pid_valid_date 中的所有資料, 顯示於 id=display 的 div 元件中, 結果如下 :

按 "讀取" 會先檢查有無輸入長度為 10 個字元的身分證字號, 通過後會透過 Ajax 向後端程式 php_pdo_test_3_read.php 提交參數 pid, 查詢結果為有效日期欄位 valid_date, 除了設定輸入欄位外也會顯示在 id=display 的 div 元素中.

#php_pdo_test_3_read.php

<?php

header('Content-Type: text/html;charset=UTF-8');

//建立 PDO 連線物件

$dsn="mysql:host=mysql.hostinger.co.uk;port=3306;dbname=u137801000_test";

$username="u137801000_test";

$password="a123456";

try {$conn=new PDO($dsn, $username, $password);}

catch (PDOException $e) {

echo "資料庫連線錯誤!";

die();

}

//設定資料編碼

$conn->exec("SET CHARACTER SET utf8");

$pid=$_REQUEST["pid"];

//讀取資料表

$SQL="SELECT * FROM `pid_valid_date` WHERE pid='".$pid."'";

$RS=$conn->query($SQL);

//讀取第一列資料 (傳回關聯式陣列)

$row=$RS->fetch();

echo $row["valid_date"];

//關閉資料庫連線

$conn=NULL;

按 "更新" 按鈕會檢查輸入身分證字號與有效日期這兩個欄位是否有輸入合規之字串, 然後向後端程式 php_pdo_test_3_update.php 提交參數 pid 與 valid_date, 傳回的結果字串會用 alert() 顯示 :

#php_pdo_test_3_update.php

<?php

header('Content-Type: text/html;charset=UTF-8');

//建立 PDO 連線物件

$dsn="mysql:host=mysql.hostinger.co.uk;port=3306;dbname=u137801000_test";

$username="u137801000_test";

$password="a123456";

try {$conn=new PDO($dsn, $username, $password);}

catch (PDOException $e) {

echo "資料庫連線錯誤!";

die();

}

//設定資料編碼

$conn->exec("SET CHARACTER SET utf8");

$pid=$_REQUEST["pid"];

$valid_date=$_REQUEST["valid_date"];

//讀取資料表

$SQL="UPDATE `pid_valid_date` SET valid_date='".$valid_date."' ".

"WHERE pid='".$pid."'";

$RS=$conn->query($SQL);

if($RS->rowCount() > 0) {echo "更新紀錄成功";}

else {echo "更新紀錄失敗";}

//關閉資料庫連線

$conn=NULL;

按 "刪除" 按鈕會檢查輸入身分證字號欄位是否有輸入合規之字串, 然後向後端程式 php_pdo_test_3_delete.php 提交參數 pid, 傳回的結果字串會用 alert() 顯示 :

#php_pdo_test_3_delete.php

<?php

header('Content-Type: text/html;charset=UTF-8');

//建立 PDO 連線物件

$dsn="mysql:host=mysql.hostinger.co.uk;port=3306;dbname=u137801000_test";

$username="u137801000_test";

$password="a123456";

try {$conn=new PDO($dsn, $username, $password);}

catch (PDOException $e) {

echo "資料庫連線錯誤!";

die();

}

//設定資料編碼

$conn->exec("SET CHARACTER SET utf8");

$pid=$_REQUEST["pid"];

$valid_date=$_REQUEST["valid_date"];

//讀取資料表

$SQL="DELETE FROM `pid_valid_date` WHERE pid='".$pid."'";

$RS=$conn->query($SQL);

if($RS->rowCount() > 0) {echo "刪除紀錄成功";}

else {echo "刪除紀錄失敗";}

//關閉資料庫連線

$conn=NULL;

按 "新增" 按鈕會檢查輸入身分證字號與有效日期這兩個欄位是否有輸入合規之字串, 然後向後端程式 php_pdo_test_3_create.php 提交參數 pid 與 valid_date, 傳回的結果字串會用 alert() 顯示 :

#php_pdo_test_3_create.php

<?php

header('Content-Type: text/html;charset=UTF-8');

//建立 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");

$pid=$_REQUEST["pid"];

$valid_date=$_REQUEST["valid_date"];

//讀取資料表

$SQL="INSERT INTO `pid_valid_date`(pid, valid_date) VALUES('".

$pid."','".$valid_date."')";

$RS=$conn->query($SQL);

if($RS->rowCount() > 0) {echo "新增紀錄成功";}

else {echo "新增紀錄失敗";}

//關閉資料庫連線

$conn=NULL;

使用 PDO 物件存取 MySQL 資料庫感覺比傳統的函數式操作要簡單.

2020年11月3日星期二

momo 買書四本

還沒到雙十一購物節, momo 購物優惠已開跑且今日截止, 上網買了四本書 :

原價 1990, 折扣後 1377, 扣掉 momo 幣 76 元, 只要支付 1301 元, 相當於 66 折.

2020 年第 44 周記事

霜降後感覺早晚天氣涼了些, 終於揮別悶熱的夏季, 來到舒爽的秋冬, 好處是早上起來不用再沖澡 (不吹冷氣雖然照樣酣睡, 但起來全身汗油很難受). 今年夏天都沒有颱風, 梅雨也很短, 水庫能否熬過兩季枯水期啊?

秋冬週日又去種子行買了 40 株大陸妹, 20 株捲心白菜, 以及 20 株波菜來種, 應該要三周後才能開始採收. 爸又再整理出兩畦菜圃, 所以下周還要繼續種, 間隔一周應該都可以接得上.

上周末聽說岳母正在看瑯琊榜覺得很好看, 這部前年播映時造成轟動, 但我當時很不喜歡完全虛構的古裝 "偽歷史劇", 所以那時沒興趣看. 但在愛奇藝看了第一集卻被劇情吸引, 從晚飯看到就寢, 終於在周末看完全部 54 集 :

# 琅琊榜 LiTV 線上看 (54 集)

這幾天則由韓劇 "非武裝救援" 接棒, 目前看到第六集.

週日下午去家族墓園巡視, 從清明掃墓至今已逾半年未前去, 從土地公廟到我家墓園的小路已長滿雜草, 花了五分鐘用柴刀劈出路來, 到了墓園一看發現藤蔓不僅遍佈明堂與供桌, 甚至沿著鐵門柵欄爬上屋頂, 費了好大功夫才將其一一剪除. 我以為整個公墓應該會有施工的工人, 但一整個下午都沒半個人影, 感覺有點 ... 我計畫中的巡視墓園無人機何時才能實現啊!

2020年11月2日星期一

關於二胡初級班

最近在開車時常練唱費玉清的經典名曲 "一剪梅", 這首歌真是非常耐聽啊 !

# 一剪梅－費玉清1982

哈! 民國 71 年真是非常久遠的年代了, 那時我剛從鄉下來到城市讀書哩!

一剪梅除了歌好聽之外, 伴奏的二胡也是非常優美, 勾起我以前在學時的回憶, 專三時曾參加學校國樂社學習二胡, 可惜功課繁忙只學了一個學期而已沒學成, 殘念 ~~~.

我在 Youtube 找到這位二胡依林的演奏, 絕美!

# 費玉清《一剪梅》二胡版

上台北工作後有一次收到郵寄 DM 在賣二胡教學 VCD 附書與樂器, 大約是 6~7 千元, 但買來後發現光看影片與書學習是不行的, 還是要老師指教, 囿於時間最後當然是束之高閣矣.

上週在鄉下家樓上書房找到這把塵封已久的二胡, 想要來重新學習二胡, 查詢網路發現最近的是救國團的裕誠教室, 上課時間 11/11~12/30 (一) 20:10~21:40 也很理想 :

# 【救國團新進教師介紹】鳳山分班優質老師【二胡】趙韋群老師

最近抽空來去問問唄.

2020-11-04 補充 :

今天下班後繞到裕誠路富國路口的救國團, 簡章已經沒有了, 問櫃台確定本周有兩班即將開班, 師資為高蕙心老師 (南胡) 與林芳如老師 (二胡初階) :

似乎週六早上高蕙心老師的時間較方便, 但本周就要上課似乎有點倉卒, 考慮是否下期再上.

市圖還書 4 本

本周還書四本 :

神乎其技這本值得回借再讀.

訂閱：文章 ( Atom )

小狐狸事務所

2020年11月7日星期六

jQuery 學習筆記 : 表格控制

電腦檢測軟體 AIDA64

2020年11月5日星期四

好站 : 用 Arduino 製作信號產生器

2020年11月4日星期三

荷塘月色

PHP 學習筆記 : 使用 PDO 操作 MySQL 資料庫

2020年11月3日星期二

momo 買書四本

2020 年第 44 周記事

2020年11月2日星期一

關於二胡初級班

市圖還書 4 本

文章標籤

常用連結

2020年11月7日 星期六

2020年11月5日 星期四

2020年11月4日 星期三

2020年11月3日 星期二

2020年11月2日 星期一

2020年11月7日星期六

2020年11月5日星期四

2020年11月4日星期三

2020年11月3日星期二

2020年11月2日星期一