網頁程式撰寫：修訂版本之間的差異

2016年10月28日 (五) 10:08的修訂版本

槪述

課程目標

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

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

對學習者的叮嚀

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

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

牽涉的技術

前端(clint)：HTML4
1. DOM
2. CSS
3. javascript
  - jQuery
4. SVG
5. HTML5
後端(SERVER)
1. PHP
  - 物件使用
2. MySQL
溝通前後端
1. 叫出新頁
2. 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

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

2016.10.21

在 WWEB 中測試：

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

2016.10.28

建立 SID 觀察列
刪除伺服器上所有 sess
打開瀏覽器的 COOKIE 設定
1. firefox 在「選項/個人隱私/瀏覽紀錄/使用自訂的設定/顯示 Cookie」
找到 COOKIE 中變數 PHPSESSID ，刪除它之後，sessionId會變、COOKIE中沒有、SID常數會放「PHPSESSID=新的sessionId xxxx」、SESSION 是會新生一個 sess_xxxx 的變數存放檔。

@@ 第 231 行： / 第 231 行： @@
 #sessLogout2.php：登出後銷毀約定的 session 變數
 ===2016.10.28===
+*建立 SID 觀察列
+*刪除伺服器上所有 sess
+*打開瀏覽器的 COOKIE 設定
+*#firefox 在「選項/個人隱私/瀏覽紀錄/使用自訂的設定/顯示 Cookie」
+*找到 COOKIE 中變數 PHPSESSID ，刪除它之後，sessionId會變、COOKIE中沒有、SID常數會放「PHPSESSID=新的sessionId xxxx」、SESSION 是會新生一個 sess_xxxx 的變數存放檔。

網頁程式撰寫：修訂版本之間的差異

2016年10月28日 (五) 10:08的修訂版本

目錄

槪述

課程目標

對學習者的叮嚀

牽涉的技術

參考講義

前端與後端溝通

各次上課內容

2016.2.1

2016.3.21

2016.4.18

2016.4.25

2016.9.2

2016.9.9

2016.9.23

2016.9.30

2016.10.7

2016.10.14

2016.10.21

2016.10.28

導航

個人工具

名字空間

變換

檢視

動作

搜尋

導覽

工具箱