網頁程式撰寫

槪述

課程目標

結合網際網路前後端的技術，達成以下目的：

1. 與使用者溝通；
2. 管理資料、運用資料。

對學習者的叮嚀

學到掌握與運用能力，至少要一年。一定要用功，半途而廢，等於沒有學，不如一開始就不要來修課。作業要做，自己也要找書來看，做自己的筆記。

名詞、觀念、邏輯要徹底弄清楚，似懂非懂程式就會錯，只要錯一個標點，程式就不會按預期規畫動作，可能查三天三夜也查不出來。

牽涉的技術

• 前端(clint)：HTML4
  1. DOM
  2. CSS
  3. javascript
     • jQuery
  4. SVG
  5. HTML5
• 後端(SERVER)
  1. PHP
     • 物件使用
  2. MySQL
• 溝通前後端
  1. 叫出新頁
  2. ajax

參考講義

• HTML
  1. 練習
• HTTP
• PHP
• MySQL
• AJAX

前端與後端溝通

• HTML/表單
• php講義
• 伺服器端
  1. form.html
  2. r.php
• 前端與後端溝通有兩個通道
  1. GET:由網址列就可傳送變數到後端
  2. POST:要從表單傳送變數
  3. REQUEST:表單、網址列皆可傳送
• 在表單加入屬性action
  1. <form action='檔案的位置'>
  2. 在上面form.html的範例裡，action='r.php'，r.php就是表單資料送出後會傳到的地方。這就是用php撰寫。
• PHP
  1. 開頭結尾:<?php........?>
  2. echo回應出表單資料，分號;為執行。
  3. echo '1:'.$_REQUEST['name1'].'
     '; 回應出前台表單name1的變數
  4. echo '2:'.$_POST['name1'].'
     '; 由表單傳送變數(POST)，回應出前台表單name1的變數
  5. echo '3:'.$_GET['name1'].'
     '; 由網址列傳送變數(GET)，回應出前台表單name1的變數
• PHP符號
  1. + 值相加
  2. - 值相減
  3. * 值相乘
  4. / 值相除
  5.  % 值相除後的餘數
  6. . 兩串文字結合
• MySQL
  1. MySQL講義
  2. MySQL是一個資料庫系統，裡面包含了數個資料表。
  3. 基本指令:
     •  ; 意為執行
     • ` 是重音符號，Grave accent。若是那個單字在MySQL辨識碼裡面有，就必須要用 ` 括起來以說明此字是我們編輯的內容。
     • insert into 表格名 values ('值1','值2',…); 照著欄序加一筆資料
     • insert into 表格名 values ('值1','值2',…),('值1','值2',…),('值1','值2',…)…; 照著欄序加很多筆的資料
     • insert into 表格名 (欄名1,欄名2,…) values ('值1','值2',…); 只對指定的欄加一筆資料
     • insert into 表格名 set 欄名1='值1',欄名2='值2',…; 只對指定的欄加一筆資料
     • select 欄名1,欄名2,… from 表格名; 找出指定欄位的全部資料
     • select * from 表格名; 找出此表格的全部欄位全部資料
     • select * from 表格名 where 欄位名稱='欄位內容'; 找出某欄位，合條件的筆數。
     • select * from 表格名 where 欄位名稱 like '09%'; 找出某欄位，內容有09的資料。%指09後面任何內容
     • update 表格名 set 欄名=欄值,欄名=欄值… [where 條件][limit 範圍]; 合條件或合範圍的所有筆數，指定欄都換成指定欄值
     • delete from 表格名 where 條件 limit 幾筆; 刪除合條件合範圍的資料

各次上課內容

2016.2.1

• 說明課程內容
• 建立每位同學的修課資料夾：
  1. 後台：個人資料夾/www/php，php資料夾的所有者必須是這位同學，php資料夾中的php程式所有者也必須是這位同學。否則會因缺乏權限而導致伺服器內部錯誤。
  2. 前台：jendo.org/~○○○/php
• 檢查瀏覽器
• 檢查文字編輯器
• 檢查上下傳工具
• 檢查每個人的筆記頁
• 建立應答程式對
  1. form.php：負責以表單跟使用者互動；並設 action 為 r.php。
  2. r.php：負責接收表單的資料，存入資料表。

2016.3.21

• 綜合演練
  1. 電腦教室四部電腦可用
  2. 去 192.168.3.3
  3. adminer-4.2.2-mysql.php
  4. 帳號密碼問老師
  5. 去同學們資料庫
  6. 建自己的資料表：英文姓名Name和英文姓名Mail，前者要有id欄、姓名欄，後者要有id欄、email欄
  7. 以 filezilla 登入 192.168.3.3 ，用自己的姓名和帳號
  8. 在自己的 www 之下建 php 資料夾
  9. 建立 form.php 輸入資料，要輸入至少三個人的資料
  10. 建立 nameList1.php 和 nameList2.php 將兩個資料表「關連起來」，前者用等連結，後者用左側連結
  11. 問老師回家之後要怎麼用 filezilla 連，無法再用 192.168.3.3
• 準備考試：
  1. 第二章
  2. 第四章
  3. 第五章
  4. 第七章
  5. 第十章
  6. 第十一章
  7. 第十二章

2016.4.18

• 在nameList.php 增加編連結

2016.4.25

• 增加「加一人」連結
• 在每個 email 之前增加「+」用以對某個人再加一筆 email ：
  1. 在 nicetable() 函式增加「+」連結，type變數值設為 insMailForm ，並從 GET 通道再送回來。
  2. 造一個 insMailForm($wid) 的函式，負責傳回插入 mail 的表單
  3. 前置處理再增加一個 elseif ，處理當按「+」連結時，呼叫 insMailForm($wid) 函式，提供使用者插入 mail 之表單
  4. 前置處理再增加一個 elseif ，處理當按「加Mail」按鈕時，將表單後送資料插入 webMail 資料表

2016.9.2

• 以 PHP 為基礎說明 javascript 基本語法(壹)
• 實作姓名驗證
• 實作表單 Email 驗證

2016.9.9

• 解釋類別與物件
• 實作表單生成類別
• 整理程式

2016.9.23

• 解釋並實作 ajax 相關函式

2016.9.30

• 統一化 ajax 函式
  1. 更改函式 nicetable ，並進行相應的調整
     • 前置處理增加「編 mail 表單」及編畢。
     • 增加函式 editMailForm
     • 修改撈取資料表的欄位
  2. 增加 javascript 中 ajax 的相關函式
     • 宣告變數 ahr (Asynchronous Http Request,非同步 HTTP 請求)
     • 函式 createXMLHttpRequestObject 由類別產生新物件
     • 函式 postData 控制後送與回應流程
     • 函式 sendFormData 從指定表單擷取資料並後送，hidden型變數不編碼
     • 函式 encode 進行特字元的 URL 編碼，給 sendFormData 使用
  3. 增加測試表單與測試div
  4. 配合測試的伺服器回應程式原始碼
• 再解釋 ajax 相關函式
  1. ajax的方法與屬性(貳)
  2. 詳細解說 postData 函式

function postData(dataSource,parm,divID){		// 對 dataSource 後送POST請求，帶 parm 參數，回應送divID
	if(ahr){
		ahr.open('POST',dataSource);		// 初始化請求
		ahr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');	// 通知伺服器後送資料是url編碼
		ahr.onreadystatechange=function(){if(ahr.readyState==4 && ahr.status==200){document.getElementById(divID).innerHTML=ahr.responseText;}};
		parm+='&nowtime='+new Date().getTime();	// 使後送資料不同
		ahr.send(parm);				// 執行請求並後送資料
	}
	else{alert('Error: XMLHttpRequest object do not exist.');}
}

2016.10.7

• 先把前置處理分成「有type的」「沒type的」兩大段。後者才載入 javascript 。
• 去掉測試的 form。
• 綜合 姓名,email 驗證為函式 chkFormList 程式碼如下：

function chkFormList(idForm,dataSource,divID){
	if(('姓名' in document.表單) && document.表單.姓名.value==''){alert('請填寫姓名！');document.表單.姓名.focus();}
	else if(('email' in document.表單) && document.表單.email.value == ''){alert('請填寫Email！');document.表單.email.focus();}
	else if(('email' in document.表單) && document.表單.email.value != '' && !isEmail(document.表單.email.value)){alert('請輸入正確的Email格式！');document.表單.email.focus();}
	else{sendFormData(idForm,dataSource,divID);}
}

• 刪掉原來 isEmail 以外的驗證程式。
• 保留 javascrip 中的 ajax 段落。
• 將撈資料表和定義欄位名稱($colName=…)兩行分開，欄位名稱定義放到前置處理之前。
• 在「沒type的」前置處理中， javascript 段落之後接 show div ，div 中撈資料表並丟給 nicetable 生成表格。
• 在「有type的」前置處理，最後也撈資料表並丟給 nicetable 生成表格，且輸出。
• 所有表單中的 checkWhich 屬性都刪掉。
• 修改 makeForm 類別：
  1. 屬性 $checkWhich 預設為 chkFormList()
  2. 改 form 標籤，增加 id='表單'，刪掉 action 屬性和 method 屬性。
  3. 改 submit 為 button ，onClick 改到 \"chkFormList('表單','".$_SERVER['PHP_SELF']."','show')\"
• editForm 中加「$xx->submitValue='確定';」
• 新增 ajax 連結的產生器，程式碼為：

function ajaxLink($paras,$prompt){
	$str="<a href='' onclick=\"postData('".$_SERVER['PHP_SELF']."','";
	foreach($paras as $k=>$v){$str.="&".$k."=".$v;}
	$str.="','show');return false;\">".$prompt."</a>";
	return $str;
}

• 改 nicetable ，所有的連結改成 ".ajaxLink(array('type'=>'相應的值'),'提示字')."
• 前置處理中 $_GET 和 $_REQUEST 都改成 $_POST
• 一些優化的處理：
  1. editForm 中撈資料改為「select 姓名,phone from web where wid=".$wid」，不需要管 webMail
  2. nicetable 中加「\n」讓原始碼整齊。
  3. makeForm 中判斷遇到 hidden 輸入框不跳行。

2016.10.14

MVC

• Model–view–controller 三者分離
• 基本觀念：
  1. 一個伺服器上有多個網站(SITE)，彼此共用基本「類別」
  2. 每個 SITE 有自己的外觀 Theme
  3. 每個 Theme 簡化為 banner 、 導航列 、 ajax 內容顯示區
• 實作WWEB：
  1. DB類別，無屬性諸方法
     • connect($dsn)：利用DSN連結資料庫
     • queryF($sql,$perpage=0,$start=0)：送出查詢，傳回結果
     • numRows($result)：傳回查詢結果的筆數
     • getResultValue($result,$recordNo,$col)：傳回查詢結果第幾列、第幾欄的值
  2. siteConstant.php
  3. Theme 的模組化
  4. style.css、menu.css
  5. navbar-bg的搭配與使用
  6. banner圖照的去背與嵌入
  7. 畫字
  8. 工作程式
     • Theme的前半
     • Theme的後半

SESSION

1. @session_start();
2. $_SESSION 儲值
3. 在另一個 php 中(翻頁後)檢查 $_SESSION 的值
4. 一次儲值多次檢查，直到瀏覽器關閉

2016.10.21

在 WWEB 中測試：

1. sessLogin1.php：認證登入介面
2. sessLogin2.php：登入正確則啟動 session，並創建約定的 session 變數
3. sessLogin3.php：其他頁正確登入、登出後，在本頁觀察 session
4. sessLogout1.php：秀登出按鈕
5. sessLogout2.php：登出後銷毀約定的 session 變數

2016.10.28

停用COOKIE的網站

• 建立 SID 觀察列
• 刪除伺服器上所有 sess
• 打開瀏覽器的 COOKIE 設定
  1. firefox 在「選項/個人隱私/瀏覽紀錄/使用自訂的設定/顯示 Cookie」
  2. chrome 在「設定/顯示進階設定/隱私權/內容設定/Cookie/所有 Cookie 和網站資料」
• 先全部移除之前的 Cookie ，再進入 jendo.org/~你自己/WWEB/sessLogin3.php
• 找到 COOKIE 中變數 PHPSESSID ，刪除它之後，sessionId會變、COOKIE中沒有、SID常數會放「PHPSESSID=新的sessionId xxxx」、SESSION 是會新生一個 sess_xxxx 的變數存放檔。
• 注意：同一時間，不同的瀏覽器針對相同的網站，會使用不同的 sessionId 和 SESSION 變數存放檔，但相同的瀏覽器、針對相同網站上不同的 php 會使用相同的 sessionId 和 SESSION 變數存放檔。

2016.11.4

• 完成兩組 session 機制演示
  1. 有開 COOKIE
  2. 沒開 COOKIE
• 架站測試
  1. 建立並修改 passtest.php
  2. 轉移 nameList.php

參考資料 Mediawiki的session

• COOKIE設變數
  1. $wgDBname_wiki_session：放 session id
  2. $wgDBname_wiki_UserName：放登入帳號的 url 編碼
  3. $wgDBname_wiki_UserID：放登入帳號的 user_id
  4. $wgDBname_wiki_Token：放登入帳號的 user_token
  5. $wgDBname_wiki_LoggedOut：放登出時時間戳記(秒數)

參考：

1. 登入
2. 令牌

adminer的session

• COOKIE設變數
  1. adminer_permanent：
  2. adminer_version：放 0
  3. adminer_sid：放 session id
  4. adminer_key：放長數字

可用客戶端資訊：

1. HTTP_HOST：當前請求頭中 Host: 項的內容，如「jendo.org」
2. HTTP_COOKIE：此 host 上所有有效的COOKIE變數之變數名與變數值，兩組變數間以「;」間開。
3. HTTP_USER_AGENT：瀏覽器相關資訊，也可用 get_browser() 來取得
4. REMOTE_ADDR：客戶端的ip
5. REMOTE_PORT：客戶端的port，會跳來跳去不固定
6. QUERY_STRING：「?」之後的變數串
7. REQUEST_URI：請求要訪問的網址，URL編碼，含QUERY_STRING
8. SCRIPT_NAME：當前腳本檔的網址，URL解碼，不含QUERY_STRING。通常就是REQUEST_URI所指的網址，只是URL解碼。
9. PHP_SELF：當前腳本的檔名，從文件根目錄算起，通常就是同上的 SCRIPT_NAME 。例如，在網址為 http://example.com/test.php/foo.bar 的腳本中使用 $_SERVER['PHP_SELF'] 將得到 /test.php/foo.bar。
   __FILE__ 常數包含當前腳本檔的完整路徑和檔名。
   從 PHP 4.3.0 版本開始，如果 PHP 以命令行模式運行，這個變數將包含腳本檔名。之前的版本該變數不可用。
10. SCRIPT_FILENAME：當前執行腳本檔在伺服器檔案系統絕對路徑中的位置、名稱。
    如果在命令行界面(Command Line Interface, CLI)使用相對路徑執行腳本，例如 file.php 或 ../file.php，那麼 $_SERVER['SCRIPT_FILENAME'] 將包含用戶指定的相對路徑。
11. REQUEST_TIME：請求開始時的時間戳記(秒數)
12. REQUEST_TIME_FLOAT：請求開始時的時間戳記(秒數，含小數以下4位，到萬分之一秒)

次要資訊：

1. REQUEST_METHOD：客戶端對伺服器端請求方法；例如，「GET」、「HEAD」、「POST」、「PUT」，請求方法為 HEAD，PHP 腳本將在發送 Header 頭信息之後終止(這意味著在產生任何輸出後，不再有輸出緩衝)。
2. HTTP_REFERER：該值並不可信。此為引導客戶端到當前頁的前一頁的地址(如果存在)，如 http://jendo.org/~%E4%B8%81%E5%BF%97%E4%BB%81/WWEB/sessLogin1.php?xx=yy 。

2016.11.11

• www之下增「sessPath」路徑
• 調 serverConstant.php

<?php
ini_set('session.save_path','/volume1/homes/○○○/www/sessPath');
if(!isset($noSession) || !$noSession){@session_start();}
define('CMS','alone');
define("CLASS_HTML_PATH",'/et/class');
define('CLASS_FILE_PATH','/volume1/web/et/class');
define('DSN',"mysql://assistant:aide@localhost/助理們");
include_once CLASS_FILE_PATH."/wiki/wiki.php";
if(!function_exists('webContent')){include_once $_SERVER['DOCUMENT_ROOT']."/GfWebContent.php";}
?>

• 調 index.php

<?php
include_once '../serverConstant.php';
include_once "theme.php";
include_once CLASS_FILE_PATH."/database/DB.php";
DB::connect(DSN);
if(!isset($_REQUEST['ajax'])){echo $html1;}
echo webContent(urldecode($_SERVER['REQUEST_URI']));
if(!isset($_REQUEST['ajax'])){echo $html2;}
?>

• 調 theme.php ，$html1 加

if(isset($moreJavascript) && $moreJavascript){$html1.=$moreJavascript;}

• nameList.php 更名並下載新的
• 改 passtest.php 中類別的路徑
• 加「秦始皇」
• 調 style.css 加圖照靠右

2016.11.18

• etable基本說明
• 練習：
  1. 建 account_xxx資料表
  2. 建 std.php 加基本五行。
  3. 加 css、editable、perpage、colAlias 諸屬性
  4. 加 formType 屬性
  5. 嵌入 WWEB 中。
  6. 加入密碼驗證。

2016.11.25

• 建立 DVD.php
  1. 加 colAlias、formType 屬性
  2. 加 formType/oneWaySwitch 到 inHome 欄
  3. 加 concat(Name,'-',number) 演算式欄位，並了解演算式欄位無法編輯
  4. 加 演算式欄位的代名
  5. 加 moreCol(額外欄) 屬性，並解釋自訂函式 f1,f2
  6. 加 formValidate 驗證屬性，並解釋正規表示式
• 回到 std.php
  1. 加 驗證屬性 到 summary、money 兩欄
  2. 同學取回連動兩陣列
  3. 加 formType/select2,select22 到 subaccount,subaccountItem 兩欄

2016.12.2

架構改動：

1. 將 sessPath 移到更深的地方：不在 www 之下而與 www 平行，網際網路無法讀得到
2. serverConstant.php 的首行改為 「ini_set('session.save_path','/volume1/homes/○○○/sessPath');」

etable 應介紹內容列表

• 基本入門應用
  1. 載入常數檔，載入 etable.php 類別定義，new 出新物件，設物件的 sql[0] 屬物，執行物件的 main() 方法。
  2. 加 css、editable、perpage、colAlias 諸屬性
  3. 嵌入 WWEB 中：載入 theme.php ，在未傳入 exec_type 時秀出 $html1 和 $html2
• formType
  1. (v)select
  2. (v)select2
  3. (v)select22
  4. searchSelect
  5. (v)radio
  6. radioyn
  7. (v)checkbox
  8. (v)date
  9. auto
  10. hidden
  11. password
  12. unix_time
  13. (v)oneWaySwitch
  14. wrap
• (v)演算式欄與額外欄
• (v)輸入驗證屬性 formValidate 與正規表示式
• (∆)蒐尋與排序
  1. search：蒐尋
  2. searchId：蒐尋表單中傳入值必須以「=」蒐索的諸欄
  3. order：排序
• (∆)繪圖
• (∆)批次處理
• 顯示型態與頭部控制
• 控制多表的可「插編刪」屬性
• 檔案上傳與管理
• 是否翻譯
• 用編碼函式輸入欄值：參考 jj/testBatch.php
• 一工作程式多物件協作
• 多國語言

學員操作

1. 在 std.php 、 DVD.php 中加入 search 屬性、 searchId 屬性
2. 在 std.php 、 DVD.php 中加入 order 屬性
3. 到 共用 的 www/示範程式 中下載 etable繪圖.txt ，嵌入 std.php 並抑制原來的 sql[0]。
4. 練習 std.php 介面中「畫圖」與「關圖」兩按鈕。
5. 理解$sql陣列中，'stats'(字串索引)元素，為陣列，代表各統計圖形。其各元素含意如下：
   • $sql['stats'][0]['sql'] ，選取兩欄第一欄為值，第二欄為值之註解
   • $sql['stats'][0]['file'] ，drawbar.php畫長條圖，drawpoly.php畫折線圖
   • $sql['stats'][0]['x_word'] ，x軸說明
   • $sql['stats'][0]['y_word'] ，y軸說明
   • $sql['stats'][0]['vu'] ，值之倍率
   • $sql['stats'][0]['x_angle']，值之註解旋轉角度
   • $sql['stats'][0]['xu'] ，x軸每單位幾點
   • $sql['stats'][0]['yu'] ，y軸每單位幾點
6. 自己設計一個統計圖表
7. 到 共用 的 www/示範程式 中下載 editCol3.php ，放入自己的 WWEB 中。
8. 練習兩介面切換。
9. 了解用POST通道中的 type 變數控制兩介面切換。
10. 設法將 editCol3.php 嵌入 WWEB 的布景中，想不出來就等老師下週公布答案。