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

2018年11月26日 (一) 15:55的最新修訂版本

概述

一、課程目標

培養會使用網頁與伺服器做事的人，即結合網際網路前後端的技術，達成以下目的：

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

二、選修說明

修課同學：柯智懷、劉恩佑、盧星瑜、王秋梅、黃柏實(子)、陳洹霈(母請假)、谌卫军(遠距學習)、何蕙如(未到)、陳建宇(未到)、林佳敏(未到)、蘇柳村(未到)、紀詠恩(未到)
地點：新埔國中信義樓 517
時間：週四早上 9:15~12:00
費用：無
選課優先順位：對資訊應用實作有濃厚興趣，願意參與「全民科學平台」營運者優先
教師：丁志仁
助教：游士賢
上課規範：學員須自行攜帶筆電上課，備妥課本。上課注意聽，作業按時交，考試認真準備。
成績兼採筆試及實作評量，通過者得 3 學分

三、課程內容組成

(一)牽涉的技術

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

(二)使用的課本

使用《PHP,MySQL,AJAX,網頁設計範例教本》為參考書，旗標出版，學員請自備，向圖書館借用也行。

(三)參考講義

HTML
1. 練習
2. 講義
HTTP
PHP
MySQL
AJAX

各次上課內容

2017.9.7

處理何蕙如在跨校選修平台上建立兩個帳號的問題
請士賢、智懷儘速為何蕙如、陳建宇、林佳敏、劉恩佑在筆電上建立 filezilla 、 EmEditor 及其關連。
說明課程內容
建立每位同學的修課資料夾：
1. 後台：個人資料夾/www/php，php資料夾的所有者必須是這位同學，php資料夾中的php程式所有者也必須是這位同學。否則會因缺乏權限而導致伺服器內部錯誤。
2. 前台：6years.jendo.org/~○○○/php
檢查瀏覽器
檢查文字編輯器
檢查上下傳工具
檢查每個人的筆記頁
建立應答程式對
1. form.php：負責以表單跟使用者互動；並設 action 為 r.php。
2. r.php：負責接收表單的資料，存入資料表。
form.php的原始碼：

<meta http-equiv='content-type' content='text/html;charset=UTF-8' />
<form action='r.php'>
姓名：<input type='text' name='姓名' value='丁志仁' /><br/>
email：<input type='text' name='email' value='alledu2@gmail.com' /><br/>
電話：<input type='text' name='phone' value='0987466665' /><br/>
<input type='submit' value='送出' />
</form>

r.php

<?php
 $connect=mysql_connect('localhost','assistant','××××××××');
 mysql_select_db('助理們');
 mysql_query("insert into web set 姓名='".$_REQUEST['姓名']."',phone='".$_REQUEST['phone']."'");
 mysql_close($connect);
?>

2017.9.14

第一次到課的同學：
1. 檢查筆記頁有沒有建好？
2. 檢查 filezilla 有沒有連結到文字編輯器？
3. 檢查 filezilla 有沒有這兩個連線：「DS216(共用)」、「DS216(自己)」
4. 檢查有沒有在「home/www」之下建立 php 資料夾，放練習程式。
去共用的 home/www 中，下載回來「網頁程式撰寫」程「HTMLeBook」兩個資料夾，放在自己不會忘掉的地方。
今天的進度是課本第三章HTML概述

宣告HTML版本

HTML5文件類型宣告：
```
<!DOCTYPE html>
```

HTML4文件類型宣告：

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>

直接看第三章評量。
說明範例程式。

2017.9.21

第四章

2017.9.28

第五章
敘述區塊：
1. 在某些條件下才執行的敘述集合，結構為「條件{諸敘述}」
2. 「}」之後不再加「;」
三元算符，可以在同一敘述中完成二選一條件判斷。
1. 將 Ch5_2_5.php(三元運算?:)改成用一行表達。
2. 比較新寫法的優點。
將 Ch5_4.php 九九乘法表改成雙層的 for 迴圈。

2017.10.5

2017.10.12

程式 Ch6_6_4.php(驗證密碼格式)
做第六章作業
第七章

2017.10.19

繼續第七章第四節之後

2017.10.26

使用adminer，請認識其連結。
去了解 r.php ，今天之後就會修改 wiki 頁。
區分資料表與資料庫(放資料表的資料夾)
認識 web 和 webMail 兩資料表。
建立自己的資料表 web_xxx 和 webMail_xxx 。
nameList0.php 最素樸的起點，只有編，沒有增人、增mail
1. javascript驗證
2. 以makeForm類別生成表單

<?php
$connect=mysql_connect('localhost','assistant','××××××××');
mysql_select_db('助理們');
// 前置處理
if($_POST['type']=='確定'){
	mysql_query("update web a,webMail b set a.姓名='".$_POST['姓名']."',a.phone='".$_POST['phone']."',b.email='".$_POST['email']."' where a.wid=".$_POST['wid']." && b.eid=".$_POST['eid']);
}
elseif($_GET['type']=='editForm'){
	echo editForm($_GET['wid'],$_GET['eid']);
}
else{
	#
}

$result=mysql_query("select * from web");	// 取資料
$colName=array('序','','wid','姓名','電話');// 設表格首列名稱
$id='wid';									// 配置識別欄欄名
// 輸入驗證程式
$str="<script language='javascript'>
function chkForm(){
	if(document.表單.姓名.value==''){alert('請填寫姓名！');document.表單.姓名.focus();return false;}
	if(document.表單.email.value != ''){if(!isEmail(document.表單.email.value)){alert('請輸入正確的Email格式！');document.表單.email.focus();return false;}}
	else{alert('請填寫Email！');document.表單.email.focus();return false;}
}
function chkNameForm(){
	if(document.表單.姓名.value==''){alert('請填寫姓名！');document.表單.姓名.focus();return false;}
}
function chkMailForm(){
	if(document.表單.email.value != ''){if(!isEmail(document.表單.email.value)){alert('請輸入正確的Email格式！');document.表單.email.focus();return false;}}
	else{alert('請填寫Email！');document.表單.email.focus();return false;}
}
function isEmail(theStr){
	var atindex=theStr.indexOf('@');
	var dotindex=theStr.indexOf('.',atindex);
	var flag=true;
	thesub=theStr.substring(0,dotindex+1);
	if((atindex<1)||(atindex!=theStr.lastIndexOf('@'))||(dotindex<atindex+2)||(theStr.length<=thesub.length)){flag=false;}
	else{flag=true;}
	return(flag);
}
</script>\n";
echo $str.nicetable($result,$colName,$id);
mysql_close($connect);

function editForm($wid){
	$result=mysql_query("select a.姓名,a.phone,b.email,b.eid from web a,webMail b where a.wid=b.wid && a.wid=".$wid);
	$row=mysql_fetch_array($result,MYSQL_ASSOC);	// 只取第一筆
	$xx=new makeForm;
	$xx->elements[]=array('姓名：','text','姓名',$row['姓名']);
	$xx->elements[]=array('email：','text','email',$row['email']);	// 第一筆 email
	$xx->elements[]=array('電話：','text','phone',$row['phone']);
	$xx->elements[]=array('','hidden','wid',$wid);
	$xx->elements[]=array('','hidden','eid',$row['eid']);
	return $xx->makeFormStr();
}
function nicetable($result,$colName,$id){
	$i=1;	// 筆計數器
	$str="<table style='border:1px solid black;border-collapse:collapse;border-top:none;border-left:none;border-right:none;'>";
	$str.="<tr>";
	foreach($colName as $colValue){
		 $str.="<th style='border:1px solid black;border-collapse:collapse'>".$colValue."</th>";
	}
	$str.="</tr>";
	$temp=array();
	while($row=mysql_fetch_array($result,MYSQL_ASSOC)){
		$temp[$row[$id]]['姓名']=$row['姓名'];
		$temp[$row[$id]]['phone']=$row['phone'];
	}
	foreach($temp as $k=>$v){
		$str.="<tr>";
		$str.="<td style='border:1px solid black;border-collapse:collapse'>".$i."</td>";
		$str.="<th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'><a href=".$_SERVER['PHP_SELF']."?type=editForm&wid=".$k.">編</a></th>";
		$str.="<th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'>".$k."</th>";
		$str.="<th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'>".$temp[$k]['姓名']."</th>";
		$str.="<th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'>".$temp[$k]['phone']."</th>";
		$str.="</tr>";
		$i++;
	}
	$str.="</table>";
	return $str;
}
class makeForm{
	var $elements=array();	// 表單內容初值為空陣列
	var $submitValue='確定';
	var $checkWhich='chkForm()';
	function makeFormStr(){
		$str="\n<form action='".$_SERVER['PHP_SELF']."' method='post' name='表單'>\n";	//	表單字串
		// 加入諸元素
		foreach($this->elements as $輸入框){
			$str.=$輸入框[0]."<input type='".$輸入框[1]."' name='".$輸入框[2]."' value='".$輸入框[3]."' />";
			if($輸入框[1]!='hidden'){$str.="<br/>";}
			$str.="\n";
		}
		$str.="<input type='submit' name='type' value='".$this->submitValue."' onClick=\"return ".$this->checkWhich.";\" />\n";
		$str.="</form>\n";
		return $str;
	}
}
?>

工作程式的一般思維流程：
1. 載入常數、變數、函式、類別(初始示範程式省略)
2. 前置處理
  - 流程變數的判讀
3. 讀取資料
  - 字串好儲存，陣列好處理
4. 造共用的 html 碼長字串
  - 其中 javascript 是重點
5. 將資料生成為適當的 html 碼
6. 送出顯示
  - 有些是與使用者互動的介面
  - 含使用者回應不符期待時的指示
7. 歸還資料庫連結的掛號牌
專案實作：
1. 需求分析
2. 關聯式資料設計
  - 適當欄位預設值的設置，可以替代 php 程式的設計
3. 規畫流程變數
4. 分鏡：需要哪些工作程式
  - 工作程式是可以適度合併的
  - 工作程式減少，程式結構變大，流程變數的動作變複雜
  - 這一點是導致相同功能程式，其寫法差異極大的主因
  - 使用 framework (框架工具)會使得工作程式的可讀性大增

2017.11.2

解說類別的設計與物件的使用
1. 為什麼類別與物件內的變數與函式要叫做「屬性」和「方法」
2. 實體化
解說用 javascrip 驗證使用者輸入資料

2017.11.9

nameList1.php
1. 合併個人諸 mail，使人名跨列
2. 加入編mail

<?php
$connect=mysql_connect('localhost','assistant','××××××××');
mysql_select_db('助理們');
// 前置處理
if($_POST['type']=='編畢'){
	mysql_query("update webMail set email='".$_POST['email']."' where eid=".$_POST['eid']);
}
elseif($_POST['type']=='確定'){
	mysql_query("update web a,webMail b set a.姓名='".$_POST['姓名']."',a.phone='".$_POST['phone']."',b.email='".$_POST['email']."' where a.wid=".$_POST['wid']." && b.eid=".$_POST['eid']);
}
elseif($_POST['type']=='增一人'){
	mysql_query("insert into web set 姓名='".$_POST['姓名']."',phone='".$_POST['phone']."'");
}
elseif($_POST['type']=='加Mail'){
	mysql_query("insert into webMail set email='".$_POST['email']."',wid='".$_POST['wid']."'");
}
elseif($_GET['type']=='delMail'){
	mysql_query("delete from webMail where eid='".$_GET['eid']."'");
}
elseif($_GET['type']=='delPerson'){
	mysql_query("delete from webMail where wid='".$_GET['wid']."'");
	mysql_query("delete from web where wid='".$_GET['wid']."'");
}
elseif($_GET['type']=='editMailForm'){
	echo editMailForm($_GET['eid']);
}
elseif($_GET['type']=='editForm'){
	echo editForm($_GET['wid'],$_GET['eid']);
}
elseif($_GET['type']=='insPersonForm'){
	echo insPersonForm();
}
elseif($_GET['type']=='insMailForm'){
	echo insMailForm($_GET['wid']);
}
else{
	#
}

$result=mysql_query("select a.wid,b.eid,a.姓名,a.phone,b.email from web a left join webMail b on a.wid=b.wid where a.姓名!=''");//百分比代表萬用字元，只要裡面包含@都可以,left join是左側連結，where a.某欄=b.某欄
$colName=array('序','','wid','姓名','手機','±M','eid','Email');
$str="<script language='javascript'>
function chkForm(){
	if(document.表單.姓名.value==''){alert('請填寫姓名！');document.表單.姓名.focus();return false;}
	if(document.表單.email.value != ''){if(!isEmail(document.表單.email.value)){alert('請輸入正確的Email格式！');document.表單.email.focus();return false;}}
	else{alert('請填寫Email！');document.表單.email.focus();return false;}
}
function chkNameForm(){
	if(document.表單.姓名.value==''){alert('請填寫姓名！');document.表單.姓名.focus();return false;}
}
function chkMailForm(){
	if(document.表單.email.value != ''){if(!isEmail(document.表單.email.value)){alert('請輸入正確的Email格式！');document.表單.email.focus();return false;}}
	else{alert('請填寫Email！');document.表單.email.focus();return false;}
}
function isEmail(theStr){
	var atindex=theStr.indexOf('@');
	var dotindex=theStr.indexOf('.',atindex);
	var flag=true;
	thesub=theStr.substring(0,dotindex+1);
	if((atindex<1)||(atindex!=theStr.lastIndexOf('@'))||(dotindex<atindex+2)||(theStr.length<=thesub.length)){flag=false;}
	else{flag=true;}
	return(flag);
}
</script>\n";
echo $str.nicetable($result,$colName);
mysql_close($connect);

function insMailForm($wid){
	$xx=new makeForm;
	$xx->elements[]=array('email：','text','email','');
	$xx->elements[]=array('','hidden','wid',$wid);
	$xx->submitValue='加Mail';
	$xx->checkWhich='chkMailForm()';
	return $xx->makeFormStr();
}
function editMailForm($eid){
	$result=mysql_query("select email from webMail where eid=".$eid);
	$row=mysql_fetch_array($result,MYSQL_ASSOC);
	$xx=new makeForm;
	$xx->elements[]=array('email：','text','email',$row['email']);
	$xx->elements[]=array('','hidden','eid',$eid);
	$xx->submitValue='編畢';
	$xx->checkWhich='chkMailForm()';
	return $xx->makeFormStr();
}
function insPersonForm(){
	$xx=new makeForm;
	$xx->elements[]=array('姓名：','text','姓名','');
	$xx->elements[]=array('電話：','text','phone','');
	$xx->submitValue='增一人';
	$xx->checkWhich='chkNameForm()';
	return $xx->makeFormStr();
}
function editForm($wid){
	$result=mysql_query("select 姓名,phone from web where wid=".$wid);
	$row=mysql_fetch_array($result,MYSQL_ASSOC);
	$xx=new makeForm;
	$xx->elements[]=array('姓名：','text','姓名',$row['姓名']);
	$xx->elements[]=array('電話：','text','phone',$row['phone']);
	$xx->elements[]=array('','hidden','wid',$wid);
	$xx->submitValue='確定';
	return $xx->makeFormStr();
}
function nicetable($result,$colName){
	$i=1;
	$str="\n<table style='border:1px solid black;border-collapse:collapse;border-top:none;border-left:none;border-right:none;'>\n";
	$str.="<tr><td colspan=8 style='border-top:none;border-left:none;border-right:none;'><p style='text-align:right'>《<a href='".$_SERVER['PHP_SELF']."?type=insPersonForm'>增一人</a>》</p></td></tr>\n";
	$str.="<tr>";
	foreach($colName as $colValue){
		 $str.="<th style='border:1px solid black;border-collapse:collapse'>".$colValue."</th>";
	}
	$str.="</tr>\n";
	$temp=array();
	while($row=mysql_fetch_array($result,MYSQL_ASSOC)){
		$temp[$row['wid']]['姓名']=$row['姓名'];
		$temp[$row['wid']]['phone']=$row['phone'];
		$temp[$row['wid']]['mail'][$row['eid']]=$row['email'];
	}
	foreach($temp as $k=>$v){
		$rs=count($v['mail']);$j=0;
		foreach($v['mail'] as $kk=>$vv){
			$str.="<tr>";
			$str.="<td style='border:1px solid black;border-collapse:collapse'>".$i."</td>";
			if($j==0){
				$str.="<th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'><a href=".$_SERVER['PHP_SELF']."?type=editForm&wid=".$k."&eid=".$kk.">編</a> <a href=".$_SERVER['PHP_SELF']."?type=delPerson&wid=".$k.">刪</a></th>";
				$str.="<th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'>".$k."</th>";
				$str.="<th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'>".$temp[$k]['姓名']."</th>";
				$str.="<th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'>".$temp[$k]['phone']."</th>";
			}
			
			$str.="<th style='border:1px solid black;border-collapse:collapse'><a href='".$_SERVER['PHP_SELF']."?type=insMailForm&wid=".$k."'>＋</a>";
			if($kk){$str.=" <a href='".$_SERVER['PHP_SELF']."?type=editMailForm&eid=".$kk."'>編</a> <a href='".$_SERVER['PHP_SELF']."?type=delMail&eid=".$kk."'>—</a>";}
			$str.="</th>";
			$str.="<th style='border:1px solid black;border-collapse:collapse'>".$kk."</th>";
			$str.="<th style='border:1px solid black;border-collapse:collapse'>".$vv."</th>";
			$j++;
			if($j==$rs){$j=0;}
			$str.="</tr>\n";
			$i++;
		}
	}
	$str.="</table>\n";
	return $str;
}
class makeForm{
	var $elements=array();	// 表單內容初值為空陣列
	var $submitValue='確定';
	var $checkWhich='chkForm()';
	function makeFormStr(){
		$str="\n<form action='".$_SERVER['PHP_SELF']."' method='post' name='表單'>\n";	//	表單字串
		// 加入諸元素
		foreach($this->elements as $輸入框){
			$str.=$輸入框[0]."<input type='".$輸入框[1]."' name='".$輸入框[2]."' value='".$輸入框[3]."' />";
			if($輸入框[1]!='hidden'){$str.="<br/>";}
			$str.="\n";
		}
		$str.="<input type='submit' name='type' value='".$this->submitValue."' onClick=\"return ".$this->checkWhich.";\" />\n";
		$str.="</form>\n";
		return $str;
	}
}
?>

摘要說明：
1. 完全不用變動：「makeForm 類別定義」、「javascript輸入驗證程式」
2. 擴充前置處理程式，由一種表單擴充到四種表單：「增一人」、「編一人」、「增一mail」、「編一mail」四種表單，和「刪一人」、「刪一mail」等兩種連結，以及相應的六種資料表前置處理。
3. 新增「insMailForm($wid)」、「editMailForm($eid)」、「insPersonForm()」三個表單生成函式，並微調「editForm($wid,$eid)」函式。
4. 修改撈資料表的 SQL 指令：由「select * from web」改為
  「select a.wid,b.eid,a.姓名,a.phone,b.email from web a left join webMail b on a.wid=b.wid where a.姓名!=''」
5. 修改主要顯示函式「nicetable」：
  - 把泛用 id 固定成 wid
  - 增加《增一人》連結
  - 在 while 迴圈中將 email 塞入 $temp[wid]['mail'][eid] 中，然後計數 $temp[wid]['mail'] 有幾個元素來決定 rowspan 幾列。
  - 改變表格的 title 列。
  - 逐一秀出連結和通訊資料

2017.11.16

AJAX 即“Asynchronous JavaScript and XML”(非同步的JavaScript與XML技術)，是網頁程式技術發展的理程碑之一

以 JavaScript 驅動的瀏覽器端網頁開發技術。
不需要換頁，即可與伺服端互動，至於和客戶端互動的伺服端語言是什麼，AJAX 網頁不在乎，可以是 PHP 、可以是 JSP 、可以是 ASP ，甚至可以是 note.js 。
後來演變出 note.js 等技術，伺服端語言也使用 JavaScript 語法。

response.php：新增此程式以觀察伺服器要如何回應

<?php
echo "catch:e0=".$_POST['e0'];	
?>

nameList2.php
1. 新增 div(id='show')，供伺服器端回應輸出
2. 新增 form(id='ajaxTest')，走 ajax 通道，送資料給 response.php
3. javascript 段落中增加：
  - var ahr
  - createXMLHttpRequestObject
  - postData
  - sendFormData
  - encode

<?php
$connect=mysql_connect('localhost','assistant','××××××××');
mysql_select_db('助理們');
// 前置處理
if($_POST['type']=='編畢'){
	mysql_query("update webMail set email='".$_POST['email']."' where eid=".$_POST['eid']);
}
elseif($_POST['type']=='確定'){
	mysql_query("update web a,webMail b set a.姓名='".$_POST['姓名']."',a.phone='".$_POST['phone']."',b.email='".$_POST['email']."' where a.wid=".$_POST['wid']." && b.eid=".$_POST['eid']);
}
elseif($_POST['type']=='增一人'){
	mysql_query("insert into web set 姓名='".$_POST['姓名']."',phone='".$_POST['phone']."'");
}
elseif($_POST['type']=='加Mail'){
	mysql_query("insert into webMail set email='".$_POST['email']."',wid='".$_POST['wid']."'");
}
elseif($_GET['type']=='delMail'){
	mysql_query("delete from webMail where eid='".$_GET['eid']."'");
}
elseif($_GET['type']=='delPerson'){
	mysql_query("delete from webMail where wid='".$_GET['wid']."'");
	mysql_query("delete from web where wid='".$_GET['wid']."'");
}
elseif($_GET['type']=='editMailForm'){
	echo editMailForm($_GET['eid']);
}
elseif($_GET['type']=='editForm'){
	echo editForm($_GET['wid'],$_GET['eid']);
}
elseif($_GET['type']=='insPersonForm'){
	echo insPersonForm();
}
elseif($_GET['type']=='insMailForm'){
	echo insMailForm($_GET['wid']);
}
else{
	#
}

$result=mysql_query("select a.wid,b.eid,a.姓名,a.phone,b.email from web a left join webMail b on a.wid=b.wid where a.姓名!=''");//百分比代表萬用字元，只要裡面包含@都可以,left join是左側連結，where a.某欄=b.某欄
$colName=array('序','','wid','姓名','手機','±M','eid','Email');
$str="
<div id='show' style='border:red 2px solid;width:500px;'>
123456
</div>
<br/>
<form id='ajaxTest'>
<input type='text' name='e0' value=''>	
<input type='button' name='button' value='後送' onclick=\"sendFormData('ajaxTest','/~丁志仁/php/response.php','show');\" >
</form>
<script language='javascript'>
function chkForm(){
	if(document.表單.姓名.value==''){alert('請填寫姓名！');document.表單.姓名.focus();return false;}
	if(document.表單.email.value != ''){if(!isEmail(document.表單.email.value)){alert('請輸入正確的Email格式！');document.表單.email.focus();return false;}}
	else{alert('請填寫Email！');document.表單.email.focus();return false;}
}
function chkNameForm(){
	if(document.表單.姓名.value==''){alert('請填寫姓名！');document.表單.姓名.focus();return false;}
}
function chkMailForm(){
	if(document.表單.email.value != ''){if(!isEmail(document.表單.email.value)){alert('請輸入正確的Email格式！');document.表單.email.focus();return false;}}
	else{alert('請填寫Email！');document.表單.email.focus();return false;}
}
function isEmail(theStr){
	var atindex=theStr.indexOf('@');
	var dotindex=theStr.indexOf('.',atindex);
	var flag=true;
	thesub=theStr.substring(0,dotindex+1);
	if((atindex<1)||(atindex!=theStr.lastIndexOf('@'))||(dotindex<atindex+2)||(theStr.length<=thesub.length)){flag=false;}
	else{flag=true;}
	return(flag);
}
var ahr=createXMLHttpRequestObject();					// 先建立物件以俾重覆使用
function createXMLHttpRequestObject(){
	var ahr=false;										// 物件初值設為不存在
	if(window.XMLHttpRequest){ahr=new XMLHttpRequest();}// 產生非同步請求物件，本行給Firefox，下行給IE5,6
	else if(window.ActiveXObject){ahr=new ActiveXObject('Microsoft.XMLHTTP');}
	if(!ahr){alert('Error: failed to create the XMLHttpRequest object.');}
	else{return ahr;}
}
function postData(dataSource,parm,divID){			// 對 dataSource 後送POST請求，帶 parm 參數，回應送divID，回應後執行 onAjax(a)
	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.');}
}
function sendFormData(idForm,dataSource,divID){			// 從指定表單擷取資料並後送
	if(ahr){
		var sendData='';
		for(var i=0;i<document.getElementById(idForm).elements.length;i++){
			if(document.getElementById(idForm).elements[i].type=='checkbox' || document.getElementById(idForm).elements[i].type=='radio'){
				if(document.getElementById(idForm).elements[i].type=='checkbox'){	// 處理核取方塊，checked回傳值，沒checked回傳空無一物
					if(document.getElementById(idForm).elements[i].checked==true){sendData += '&'+document.getElementById(idForm).elements[i].name+'='+encode(document.getElementById(idForm).elements[i].value);}
					else{sendData += '&'+document.getElementById(idForm).elements[i].name+'=';}
				}else{																// 處理按鈕，checked回傳值，否則跳過
					if(document.getElementById(idForm).elements[i].checked==true){sendData += '&'+document.getElementById(idForm).elements[i].name+'='+encode(document.getElementById(idForm).elements[i].value);}
				}
			}																		// 非核取方塊非按鈕，如為隱藏欄不編碼傳回值，不是隱藏欄則編碼傳回值
			else if(document.getElementById(idForm).elements[i].type=='hidden'){sendData += '&'+document.getElementById(idForm).elements[i].name+'='+document.getElementById(idForm).elements[i].value;}
			else{sendData += '&'+document.getElementById(idForm).elements[i].name+'='+encode(document.getElementById(idForm).elements[i].value);}
		}
	}
	postData(dataSource,sendData,divID);
}
function encode(x){
	return x.replace(/%/g,'%25').replace(/&/g,'%26').replace(/\+/g,'%2B').replace(/\"/g,'%22').replace(/\'/g,'%27');
}
</script>\n";
echo $str.nicetable($result,$colName);
mysql_close($connect);

function insMailForm($wid){
	$xx=new makeForm;
	$xx->elements[]=array('email：','text','email','');
	$xx->elements[]=array('','hidden','wid',$wid);
	$xx->submitValue='加Mail';
	$xx->checkWhich='chkMailForm()';
	return $xx->makeFormStr();
}
function editMailForm($eid){
	$result=mysql_query("select email from webMail where eid=".$eid);
	$row=mysql_fetch_array($result,MYSQL_ASSOC);
	$xx=new makeForm;
	$xx->elements[]=array('email：','text','email',$row['email']);
	$xx->elements[]=array('','hidden','eid',$eid);
	$xx->submitValue='編畢';
	$xx->checkWhich='chkMailForm()';
	return $xx->makeFormStr();
}
function insPersonForm(){
	$xx=new makeForm;
	$xx->elements[]=array('姓名：','text','姓名','');
	$xx->elements[]=array('電話：','text','phone','');
	$xx->submitValue='增一人';
	$xx->checkWhich='chkNameForm()';
	return $xx->makeFormStr();
}
function editForm($wid){
	$result=mysql_query("select 姓名,phone from web where wid=".$wid);
	$row=mysql_fetch_array($result,MYSQL_ASSOC);
	$xx=new makeForm;
	$xx->elements[]=array('姓名：','text','姓名',$row['姓名']);
	$xx->elements[]=array('電話：','text','phone',$row['phone']);
	$xx->elements[]=array('','hidden','wid',$wid);
	$xx->submitValue='確定';
	return $xx->makeFormStr();
}
function nicetable($result,$colName){
	$i=1;
	$str="\n<table style='border:1px solid black;border-collapse:collapse;border-top:none;border-left:none;border-right:none;'>\n";
	$str.="<tr><td colspan=8 style='border-top:none;border-left:none;border-right:none;'><p style='text-align:right'>《<a href='".$_SERVER['PHP_SELF']."?type=insPersonForm'>增一人</a>》</p></td></tr>\n";
	$str.="<tr>";
	foreach($colName as $colValue){
		 $str.="<th style='border:1px solid black;border-collapse:collapse'>".$colValue."</th>";
	}
	$str.="</tr>\n";
	$temp=array();
	while($row=mysql_fetch_array($result,MYSQL_ASSOC)){
		$temp[$row['wid']]['姓名']=$row['姓名'];
		$temp[$row['wid']]['phone']=$row['phone'];
		$temp[$row['wid']]['mail'][$row['eid']]=$row['email'];
	}
	foreach($temp as $k=>$v){
		$rs=count($v['mail']);$j=0;
		foreach($v['mail'] as $kk=>$vv){
			$str.="<tr>";
			$str.="<td style='border:1px solid black;border-collapse:collapse'>".$i."</td>";
			if($j==0){
				$str.="<th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'><a href=".$_SERVER['PHP_SELF']."?type=editForm&wid=".$k."&eid=".$kk.">編</a> <a href=".$_SERVER['PHP_SELF']."?type=delPerson&wid=".$k.">刪</a></th>";
				$str.="<th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'>".$k."</th>";
				$str.="<th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'>".$temp[$k]['姓名']."</th>";
				$str.="<th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'>".$temp[$k]['phone']."</th>";
			}
			
			$str.="<th style='border:1px solid black;border-collapse:collapse'><a href='".$_SERVER['PHP_SELF']."?type=insMailForm&wid=".$k."'>＋</a>";
			if($kk){$str.=" <a href='".$_SERVER['PHP_SELF']."?type=editMailForm&eid=".$kk."'>編</a> <a href='".$_SERVER['PHP_SELF']."?type=delMail&eid=".$kk."'>—</a>";}
			$str.="</th>";
			$str.="<th style='border:1px solid black;border-collapse:collapse'>".$kk."</th>";
			$str.="<th style='border:1px solid black;border-collapse:collapse'>".$vv."</th>";
			$j++;
			if($j==$rs){$j=0;}
			$str.="</tr>\n";
			$i++;
		}
	}
	$str.="</table>\n";
	return $str;
}
class makeForm{
	var $elements=array();	// 表單內容初值為空陣列
	var $submitValue='確定';
	var $checkWhich='chkForm()';
	function makeFormStr(){
		$str="\n<form action='".$_SERVER['PHP_SELF']."' method='post' name='表單'>\n";	//	表單字串
		// 加入諸元素
		foreach($this->elements as $輸入框){
			$str.=$輸入框[0]."<input type='".$輸入框[1]."' name='".$輸入框[2]."' value='".$輸入框[3]."' />";
			if($輸入框[1]!='hidden'){$str.="<br/>";}
			$str.="\n";
		}
		$str.="<input type='submit' name='type' value='".$this->submitValue."' onClick=\"return ".$this->checkWhich.";\" />\n";
		$str.="</form>\n";
		return $str;
	}
}
?>

會議資料處理的資料結構示例

會議
1. conf_id / varchar(3) / 會議id
2. date / date / 日期
3. location / varchar(255) / 地點
4. host / varchar(100) / 主持人
5. present / text / 出列席人員
案
1. matter_id / varchar(4) / 事項id
2. conf_id / varchar(3) / 會議id
3. discussion / varchar(255) / 案由
4. statement / text / 說明
5. method / text / 辦法
6. desision / text / 決議
7. proponent / varchar(255) / 報告人或提案人
8. tag / varchar(255) / 事件標籤
附件
1. attn_id / int(4) 自動遞增 / 附件id
2. matter_id / varchar(4) / 事項id
3. conf_id / varchar(3) / 會議id
4. summary / varchar(255) / 名稱
5. link / varchar(255) / 連結
6. provider / varchar(255) / 提供者
7. date / date / 日期

2017.11.23

nameList3.php：ajax 的完整程式，所有連結與表單改成 ajax

<?php
$connect=mysql_connect('localhost','assistant','××××××××');
mysql_select_db('助理們');
$colName=array('序','','wid','姓名','手機','±M','eid','Email');
if(isset($_REQUEST['type'])){	// 前置處理
	if($_POST['type']=='編畢'){
		mysql_query("update webMail set email='".$_POST['email']."' where eid=".$_POST['eid']);
	}
	if($_POST['type']=='確定'){
		mysql_query("update web set 姓名='".$_POST['姓名']."',phone='".$_POST['phone']."' where wid=".$_POST['wid']);
	}
	elseif($_POST['type']=='增一人'){
		mysql_query("insert into web set 姓名='".$_POST['姓名']."',phone='".$_POST['phone']."'");
	}
	elseif($_POST['type']=='加Mail'){
		mysql_query("insert into webMail set email='".$_POST['email']."',wid='".$_POST['wid']."'");
	}
	elseif($_POST['type']=='delMail'){
		mysql_query("delete from webMail where eid='".$_POST['eid']."'");
	}
	elseif($_POST['type']=='delPerson'){
		mysql_query("delete from webMail where wid='".$_POST['wid']."'");
		mysql_query("delete from web where wid='".$_POST['wid']."'");
	}
	elseif($_POST['type']=='editMailForm'){
		echo editMailForm($_POST['eid']);
	}
	elseif($_POST['type']=='editForm'){
		echo editForm($_POST['wid'],$_POST['eid']);
	}
	elseif($_POST['type']=='insPersonForm'){
		echo insPersonForm();
	}
	elseif($_POST['type']=='insMailForm'){
		echo insMailForm($_POST['wid']);
	}
	$result=mysql_query("select a.wid,b.eid,a.姓名,a.phone,b.email from web a left join webMail b on a.wid=b.wid where a.姓名!=''");//百分比代表萬用字元，只要裡面包含@都可以,left join是左側連結，where a.某欄=b.某欄
	echo nicetable($result,$colName);
}
else{	// 第一次載入
	$str="<script language='javascript'>
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);}
}
function isEmail(theStr){
	var atindex=theStr.indexOf('@');
	var dotindex=theStr.indexOf('.',atindex);
	var flag=true;
	thesub=theStr.substring(0,dotindex+1);
	if((atindex<1)||(atindex!=theStr.lastIndexOf('@'))||(dotindex<atindex+2)||(theStr.length<=thesub.length)){flag=false;}
	else{flag=true;}
	return(flag);
}
var ahr=createXMLHttpRequestObject();					// 先建立物件以俾重覆使用
function createXMLHttpRequestObject(){
	var ahr=false;										// 物件初值設為不存在
	if(window.XMLHttpRequest){ahr=new XMLHttpRequest();}// 產生非同步請求物件，本行給Firefox，下行給IE5,6
	else if(window.ActiveXObject){ahr=new ActiveXObject('Microsoft.XMLHTTP');}
	if(!ahr){alert('Error: failed to create the XMLHttpRequest object.');}
	else{return ahr;}
}
function postData(dataSource,parm,divID){			// 對 dataSource 後送POST請求，帶 parm 參數，回應送divID，回應後執行 onAjax(a)
	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.');}
}
function sendFormData(idForm,dataSource,divID){			// 從指定表單擷取資料並後送
	if(ahr){
		var sendData='';
		for(var i=0;i<document.getElementById(idForm).elements.length;i++){
			if(document.getElementById(idForm).elements[i].type=='checkbox' || document.getElementById(idForm).elements[i].type=='radio'){
				if(document.getElementById(idForm).elements[i].type=='checkbox'){	// 處理核取方塊，checked回傳值，沒checked回傳空無一物
					if(document.getElementById(idForm).elements[i].checked==true){sendData += '&'+document.getElementById(idForm).elements[i].name+'='+encode(document.getElementById(idForm).elements[i].value);}
					else{sendData += '&'+document.getElementById(idForm).elements[i].name+'=';}
				}else{																// 處理按鈕，checked回傳值，否則跳過
					if(document.getElementById(idForm).elements[i].checked==true){sendData += '&'+document.getElementById(idForm).elements[i].name+'='+encode(document.getElementById(idForm).elements[i].value);}
				}
			}																		// 非核取方塊非按鈕，如為隱藏欄不編碼傳回值，不是隱藏欄則編碼傳回值
			else if(document.getElementById(idForm).elements[i].type=='hidden'){sendData += '&'+document.getElementById(idForm).elements[i].name+'='+document.getElementById(idForm).elements[i].value;}
			else{sendData += '&'+document.getElementById(idForm).elements[i].name+'='+encode(document.getElementById(idForm).elements[i].value);}
		}
	}
	postData(dataSource,sendData,divID);
}
function encode(x){
	return x.replace(/%/g,'%25').replace(/&/g,'%26').replace(/\+/g,'%2B').replace(/\"/g,'%22').replace(/\'/g,'%27');
}
</script>
<div id='show'>\n";
	$result=mysql_query("select a.wid,b.eid,a.姓名,a.phone,b.email from web a left join webMail b on a.wid=b.wid where a.姓名!=''");//百分比代表萬用字元，只要裡面包含@都可以,left join是左側連結，where a.某欄=b.某欄
	$str.=nicetable($result,$colName);
	$str.="</div>\n";
	echo $str;
}
mysql_close($connect);

function insMailForm($wid){
	$xx=new makeForm;
	$xx->elements[]=array('email：','text','email','');
	$xx->elements[]=array('','hidden','wid',$wid);
	$xx->submitValue='加Mail';
	return $xx->makeFormStr();
}
function editMailForm($eid){
	$result=mysql_query("select email from webMail where eid=".$eid);
	$row=mysql_fetch_array($result,MYSQL_ASSOC);
	$xx=new makeForm;
	$xx->elements[]=array('email：','text','email',$row['email']);
	$xx->elements[]=array('','hidden','eid',$eid);
	$xx->submitValue='編畢';
	return $xx->makeFormStr();
}
function insPersonForm(){
	$xx=new makeForm;
	$xx->elements[]=array('姓名：','text','姓名','');
	$xx->elements[]=array('電話：','text','phone','');
	$xx->submitValue='增一人';
	return $xx->makeFormStr();
}
function editForm($wid){
	$result=mysql_query("select 姓名,phone from web where wid=".$wid);
	$row=mysql_fetch_array($result,MYSQL_ASSOC);
	$xx=new makeForm;
	$xx->elements[]=array('姓名：','text','姓名',$row['姓名']);
	$xx->elements[]=array('電話：','text','phone',$row['phone']);
	$xx->elements[]=array('','hidden','wid',$wid);
	$xx->submitValue='確定';
	return $xx->makeFormStr();
}
function nicetable($result,$colName){
	$i=1;
	$str="\n<table style='border:1px solid black;border-collapse:collapse;border-top:none;border-left:none;border-right:none;'>\n";
	$str.="<tr><td colspan=8 style='border-top:none;border-left:none;border-right:none;'><p style='text-align:right'>《".ajaxLink(array('type'=>'insPersonForm'),'增一人')."》</p></td></tr>\n";
	$str.="<tr>";
	foreach($colName as $colValue){
		 $str.="<th style='border:1px solid black;border-collapse:collapse'>".$colValue."</th>";
	}
	$str.="</tr>\n";
	$temp=array();
	while($row=mysql_fetch_array($result,MYSQL_ASSOC)){
		$temp[$row['wid']]['姓名']=$row['姓名'];
		$temp[$row['wid']]['phone']=$row['phone'];
		$temp[$row['wid']]['mail'][$row['eid']]=$row['email'];
	}
	foreach($temp as $k=>$v){
		$rs=count($v['mail']);$j=0;
		foreach($v['mail'] as $kk=>$vv){
			$str.="<tr>";
			$str.="<td style='border:1px solid black;border-collapse:collapse'>".$i."</td>";
			if($j==0){
				$str.="<th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'>".ajaxLink(array('type'=>'editForm','wid'=>$k),'編')." ".ajaxLink(array('type'=>'delPerson','wid'=>$k),'刪')."</th>";
				$str.="<th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'>".$k."</th>";
				$str.="<th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'>".$temp[$k]['姓名']."</th>";
				$str.="<th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'>".$temp[$k]['phone']."</th>";
			}
			
			$str.="<th style='border:1px solid black;border-collapse:collapse'>".ajaxLink(array('type'=>'insMailForm','wid'=>$k),'＋');
			if($kk){$str.=" ".ajaxLink(array('type'=>'editMailForm','eid'=>$kk),'編')." ".ajaxLink(array('type'=>'delMail','eid'=>$kk),'—');}
			$str.="</th>";
			$str.="<th style='border:1px solid black;border-collapse:collapse'>".$kk."</th>";
			$str.="<th style='border:1px solid black;border-collapse:collapse'>".$vv."</th>";
			$j++;
			if($j==$rs){$j=0;}
			$str.="</tr>\n";
			$i++;
		}
	}
	$str.="</table>\n";
	return $str;
}
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;
}
class makeForm{
	var $elements=array();	// 表單內容初值為空陣列
	var $submitValue='確定';
	var $checkWhich='chkFormList()';
	function makeFormStr(){
		$str="\n<form name='表單' id='表單'>\n";	//	表單字串
		// 加入諸元素
		foreach($this->elements as $輸入框){
			$str.=$輸入框[0]."<input type='".$輸入框[1]."' name='".$輸入框[2]."' value='".$輸入框[3]."' />";
			if($輸入框[1]!='hidden'){$str.="<br/>";}
			$str.="\n";
		}
		$str.="<input type='button' name='type' value='".$this->submitValue."' onclick=\"chkFormList('表單','".$_SERVER['PHP_SELF']."','show')\">\n";
		$str.="</form>\n";
		return $str;
	}
}
?>

摘要說明：
1. 將整個程式分的主流程成「前置處理」與「第一次載入」兩大部分
  - 主流程之前：連結資料庫、設定表格的標題列
  - 主流程之後：繳還資料庫的掛號牌
  - 最後放 php 諸類別及諸函式的定義
2. 第一次載入：
  - 形成 javascript 字串，內含「表單驗證」和「ajax函式群」
  - 形成秀出 ajax 回應區域，預設內裝 nicetable 。
3. 前置處理：
  - 諸「流程變數」條件區塊中，所有回應通道改換成 POST 通道。
  - 所有前置處理的最後均回應 nicetable 。
4. 輸入驗證將 chkForm(),chkNameForm(),chkMailForm() 三者整合成 chkFormList() ，驗證完走 sendFormData 函式。
5. makeForm 類別定義：
  - checkWhich 屬性，預設為 chkFormList() 。
  - form 標籤取消換頁指示，增加 id 。
  - submit 按鈕改 button 按鈕，並送往 chkFormList() 。
6. 四個表單製造函式：取消 checkWhich 屬性的指定。
7. 新增函式 ajaxLink(參數,按鈕提示) ，處理所有連結。
  - 本函式及接手的 javascript postData 函式中都沒有去處理 urlencode ，但 postData 卻對伺服器宣稱後送資料是 urlencoded 。
  - 後送變數名與變數值不要出現： %、&、+、"、' 等五個字元。
8. 函式 nicetable 修改：增一人，人的編、刪連結，email 的增、編、刪連結，改成 ajaxLink() 。
同學產出：
1. 丁志仁
2. 游士賢
3. 王秋梅
4. 劉恩佑
5. 盧星瑜
6. 柯智懷

2017.11.30

網站的最精簡布局
1. 可變化的內容區
2. 不大變化的 banner
3. 導航列
先照抄 6years.jendo.org/~丁志仁/ROC/ 的原始碼，到自己的 www/WWEB 之下的 demoSite.php 。
1. 功能展示。注意第三層以下之導妔。
2. 另參考 6years.jendo.org/~王秀雲/ESA/ ，用「/~王秀雲/ESA/導航列」來生成導航列。
3. 另參考均優學習論壇外觀設計。
4. 觀察 WebContent 資料表，與內部映射過程。
5. 先拆成小部分，分別用 php 來完成
  - 找 link 標籤，將兩個 css 下載回來。
  - 從 css 中找 url 字串，將導航列背景圖下載回來，並用小畫家觀察。
  - 找 src 屬性，將兩個 banner 用圖檔下載回來。
  - 分析 javascript 段落。

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 的值
一次儲值多次檢查，直到瀏覽器關閉

2017.12.7

CSS基本說明

串接樣式表(Cascading Style Sheets)，用來控制網頁外觀表現。

三種使用方式：
1. 行內樣式：標籤的 style 屬性，優先級最高。
2. 內部樣式表：在本頁內 style 標籤段落中，優先級中等。
3. 外部樣式表：載入外部的樣式定義檔，優先級最低。
基本選擇器
1. 標籤(元素)選擇器（h1，p等）
2. 類別選擇器（class）——.類別名
3. ID選擇器（ID）——#某ID
4. 萬用選擇器——*
5. 屬性選擇器——[屬性]
虛擬類別選擇器

虛擬類別選擇器指的是為不同的狀態、性質的元素。

屬性	狀態
`:link`	超連接未被訪問
`:visited`	超連接被訪問過
`:hover`	滑鼠（鼠標）在元素上面
`:active`	滑鼠（鼠標）在元素上按著
`:focus`	焦點在元素上
`:target`	元素被URL標記（CSS 3新增的類別）
`:lang`	向帶有指定lang屬性的元素添加樣式。

兩選擇器之間用 , 與空白相連，意思不同

方盒子模型(Box Model)

padding(內距)：
1. 控制區域如 DIV 、 span 、表格的內部距離(例如文字或圖片與邊框的距離)
2. 不可以設定負值，這點與 margin 不同。
3. 基本語法範例：
  padding:上右下左;　padding:上下左右;　padding:上左右下;　padding:四個邊同樣値;
4. padding:auto;：讓瀏覽器自己去設定
5. padding:%;：讓瀏覽器自己去設定，跟邊界元素有關。
margin(邊沿)：
1. 控制一個區域(例如 DIV 或 span)的外邊界距離，俗稱外距。
2. 可以設定負値，會使得 margin 設定為負值的元素「疊」到另一個元素上(不過還是要視另一個元素所設定的邊界距離而定)。例如，我們將 A 區塊的 margin-bottom 設為 0 ， B 區塊的 margin-top 設為 -10px ，那麼 B 區塊的文字就會疊到 A 區塊的文字上。
3. 基本語法範例：
  margin:上右下左;　margin:上下左右;　margin:上左右下;　margin:四個邊同樣値;
4. margin:auto;：讓瀏覽器自己去設定。
5. margin:%;：讓瀏覽器自己去設定，跟邊界元素有關。
border(邊框)：
1. 邊框粗細：用長度表達
2. 邊框顏色：可以使用色標準色碼或顏色的英文名稱表達
3. 邊框樣式：可以設定實線(solid)、虛線(dashed)、雙實線(double)、連續點(dotted)等：
 border-style:solid;
 border-style:dotted;
 border-style:dashed;
 border-style:double;
 border-style:outset;
 border-style:groove;
 border-style:ridge;
 border-style:inset;
 border-style:none;
4. 雙刪除線：雙刪除線
 - 先用 position:relative; 讓元素「可用top」以相對其「原本該出現的所在位置」，調整至新位置。
 - 再用 top:0.7em; 在上方塞約半個字，使上框線下降約半個字
 - 最後增加一個子元素，用 top:-0.7em; 讓字回到「原來該出現的位置」。
 - 須要如此做的原因是因為 text-decoration: 樣式只能畫單刪除線，無法指示畫出雙刪除線。

七大類物件搭配的CSS

字,字串，請用 span 練習
1. font-family:標楷體、新細明體
2. font-size:可用px,pt,cm，也可用%，還可用xx-small,x-small,small,medium,large,x-large,xx-large
3. font-weight:可用100,200,300,400(相當normal)...到900，也可用normal,bold(厚),bolder(更厚)
4. font-style:normal,italic(斜體字),oblique(拉斜)。某些不常用的字體，只做了正常體，如果你用italic就沒有效果，但用oblique可以讓沒有斜體字形的文字傾斜！
5. text-decoration:overline(頂線),line-through(刪除線),underline(底線),none
6. color:色碼或英文字
段，請用 p 練習
1. margin，及其衍生四邊
2. text-indent搭配margin-left
3. line-height
4. letter-spacing
5. vertical-align
6. text-align
頁，請用 div 配合 page 樣式值練習
1. size
2. margin
圖，請用 img 練習(見方盒子模型)
表，請用 table,tr,td,th 練習
1. border-collapse:collapse;
2. height 針對 tr
3. width 針對 td th
區，請用 div 練習
1. float
2. display
列點，請用 ul,ol,li 練習
1. list-style
2. list-style-image
通用
1. background
2. background-color
3. position
4. 樣式值 inherit (繼承)
5. 樣式值 url(路徑)

CSS和SVG對照

	CSS	SVG
線	border	stroke
面	background	fill
字體	中英文	英文

自修與進階

2017.12.14

內容映射

前置工作

了解 php 在伺服器文件根目錄之下與個人網站根目錄之下的差別
建立個人的 sessPath ，並將權限訂為 777 。其位置在 home 之下與 www 平行，而非在 www 之下。
在個人的網站空間 www 之下，建立專屬的常數檔 userConstant.php ，內容為：

<?php
ini_set('session.save_path','/volume1/homes/○○○/sessPath'); 
include_once '/volume1/web/constant.php';
?>

了解伺服器的 constant.php 中的「if(!isset($noSession) || !$noSession){@session_start();}」
了解伺服器的 constant.php 是準備給全伺服器所有site共用，包含在所有個人網站空間之下的site。

四種內容映射的方法

取用 WebContent 資料表：
- URL：伺服器ip/~○○○/siteName/index.php/頁名
- path：/~○○○/siteName/index.php/頁名
- 在 siteConstant.php 中用常數 SITE 來代替「~○○○/siteName」
取用預設 wiki 站台的頁：
- URL：伺服器ip/~○○○/siteName/index.php/wiki站路徑/index.php/頁名?參數串
 或伺服器ip/~○○○/siteName/index.php/wiki站路徑/index.php?title=頁名&參數串
- 參數串：
 1. notitle=1，去標題(頁名)，否則會自動以「頁名去斜線」為調中標題，並以 h1 大小顯示。
 2. cutTag=1，去掉各段的 id 。
 3. gotop=0，去掉 gotop 圖示。
 4. p=類別名，將調整為指定的類別。
跨 site 引用
php

2017.12.21

程式整理
- 外觀相關程式整理
- 基本功能相關程式整理
- 類別定義相關程式整理
- 擴充功能(日後解說)
https wiki 映射與 http wiki 映射
上傳程式配置
類別定義說明

2017.12.28

兩種檔案載入的角度：
1. 伺服端檔案載入。
2. 瀏覽器端檔案載入。
DB.php，可直接使用方法，免實體化。重要方法如下：
1. connect($dsn)
2. queryF($sql,$perpage=0,$start=0)
3. numRows($result)
4. getResultValue($result,$recordNo,$col)

include_once CLASS_FILE_PATH.'/database/DB.php';
DB::connect(DSN);
$result=DB::queryF("select 諸欄 from 某表");
echo DB::numRows($result)."<br/>\n";
echo DB::getResultValue($result,某筆,'欄名');

login.php，必須實體化。

include_once CLASS_FILE_PATH."/database/login.php";
$物件=new login;
$物件->users=array(
	'丁志仁'=>array('psd'=>'xxxxxxxxx','editable'=>7,'grp'=>array('4')),
	'柯智懷'=>array('psd'=>'xxxxxxxxx','editable'=>7,'grp'=>array('4')),
);
$物件->logon();
if(isset($物件->checkin) && $物件->checkin==1){
…
}else{…}

$物件->loginTable=array('tableName'=>'認證資料表','psd'=>'密碼欄','name'=>'帳號欄','grp'=>'群組欄','canWorkGrp'=>'諸群組');
/* 諸群組以「;」相間 */

繪圖：
1. poly[點][0]=值&poly[點][1]=字
2. CLASS/database/drawpie.php：畫派圖。
3. CLASS/database/drawbar.php：畫長條圖。
4. CLASS/database/drawpoly.php：畫折線圖。
隨堂作業：
1. DBdemo.php ：
2. loginDemo1.php ：
3. loginDemo1.php ：
4. 三種繪圖連結

2018.1.4

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

<?php
include_once '../userConstant.php';
include_once CLASS_FILE_PATH."/database/etable.php";
$ET=new etable;
$ET->sql[0]="select * from account_xxx";
$ET->main();
?>

if(!isset($_REQUEST['exec_type'])){echo "<link rel='stylesheet' type='text/css' media='all' href='".CLASS_HTML_PATH."/database/etable.css' />\n";}

$ET->colAlias=array('money'=>'支出','date'=>'日期','summary'=>'摘要','name'=>'支付者');

$ET->formType=array('date'=>array('date'),
					'account_e'=>array('checkbox',array('費用'=>'費用')),
					'account_a'=>array('radio',array('現金'=>'現金','存款'=>'存款')),
					'subaccount'=>array('radio',array('食'=>'食','衣'=>'衣','住'=>'住','行'=>'行','育'=>'育','樂'=>'樂','健'=>'健')),
					'name'=>array('radio',array('丁志仁'=>'丁志仁','李森茂'=>'李森茂'))
);

建立 DVD.php
1. 加 colAlias、formType 屬性
2. 加 formType/oneWaySwitch 到 inHome 欄

$ET->formType=array(
					'EN'=>array('radio',array('中'=>'中文','英'=>'英文','中英'=>'中英','中日'=>'中日')),
					'buyDate'=>array('date'),
					'inHome'=>array('oneWaySwitch',array(0=>'待還',1=>'已還'))
);

2018.1.11

再談 DVD.php ：
1. 加 colAlias、formType 屬性
2. 加 formType/oneWaySwitch 到 inHome 欄
3. 加 concat(Name,'-',number) 演算式欄位，並了解演算式欄位無法編輯
4. 加演算式欄位的代名
5. 加 moreCol(額外欄) 屬性，並解釋自訂函式 f1,f2
6. 加 formValidate 驗證屬性，並解釋正規表示式。須重新載入網址列。
7. 蒐尋與排序
  - search：蒐尋
  - searchId：蒐尋表單中傳入值必須以「=」蒐索的諸欄
  - order：排序

<?php
include_once '../userConstant.php';
include_once "theme.php";
if(!isset($_REQUEST['exec_type'])){echo $html1;}
include_once CLASS_FILE_PATH."/database/etable.php";
$ET = new etable;
$ET->sql[0]="select concat(Name,'-',number) 片名數量,album,EN,buyDate,inHome from DVD";
$ET->editable=7;
$ET->formType=array(
					'EN'=>array('radio',array('中'=>'中文','英'=>'英文','中英'=>'中英','中日'=>'中日')),
					'buyDate'=>array('date'),
					'inHome'=>array('oneWaySwitch',array(0=>'待還',1=>'已還'))
);
$ET->formValidate=array('Name'=>array('.+','請填片名！'));
$ET->perpage=12;
$ET->colAlias=array('uid'=>'擁有者','Name'=>'片名','album'=>'套片','number'=>'數量','EN'=>'字幕','buyDate'=>'購買日期','inHome'=>'是否在家');
$ET->editables=array('ins'=>array('DVD'),'edit'=>array('DVD'),'erase'=>array('DVD'));
$ET->tran=1;
$ET->moreCol=array(array(0,'本頁','f1'),array(1,'序','f2'));
$ET->dispType='disp_table';
$ET->search=array('Name','EN');
$ET->main();
if(!isset($_REQUEST['exec_type'])){echo $html2;}
function f1($i,$j,$k){return $i;}
function f2($i,$j,$k){return $j;}
?>

回到 std.php
1. 加驗證屬性到 summary、money 兩欄
2. 連動選單
  - 同學取回連動兩陣列
  - 加 formType/select2,select22 到 subaccount,subaccountItem 兩欄
    'subaccount'=>array('select2',$category,'subaccountItem',$categoryItem,1),
    'subaccountItem'=>array('select22',array(0=>'===請選擇===')),
3. 繪圖

2018.1.18

響應式網頁設計(Responsive Web Design)簡稱RWD

RWD.html 示範

<!DOCTYPE html>
<html>
<head>
	<link rel='stylesheet' type='text/css' media='all' href='screen.css' />
</head>
<body>
<a href='#' class='CardLink CardLink_H'>Heart</a>
<a href='#' class='CardLink CardLink_C'>Club</a>
<a href='#' class='CardLink CardLink_S'>Shahe</a>
<a href='#' class='CardLink CardLink_D'>Diamon</a>
</body>
</html>

screen.css

.CardLink {
	display:block;
	color:#666;
	text-shadow:0 2px #efefef;
	text-decoration:none;
	height:2.75 rem;
	line-height:2.75 rem;
	border-bottom:1px solid #bbb;
	position:relative;
}
@media (orientation:portrait) {
	.CardLink {
		padding-left:1.8 rem;
		font-size:1.6 rem;
		color:green;
	}
}
.CardLink:before {
	display:none;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	left:0;
}

可以選擇樣式的地方：
1. link 標籤的 media 屬性，可選擇不同的 css 。
2. css 內部
可以選擇的條件：
1. orientation:直向或橫向，如portrait
2. width:視區寬度
3. height:視區高度
4. device-width:螢幕寬度
5. device-height:螢幕高度
6. aspect-ratio:視區寬高比，如16/9
7. device-aspect-ratio:螢幕寬高比
8. color:每個色點的位元數，如 16
9. color-index:色彩查找表條目數
10. monochrom:單色影格緩衝區中每點多少位元，如2
11. resolution:解析度，如 300 dpi
12. scan:漸進式或交錯式
13. grid:網格或點陣裝置
14. min-：最小
15. max-：最大

@@ 第 68 行： / 第 68 行： @@
 *r.php
 <pre>&lt;?php
-  $connect=mysql_connect('localhost','assistant','aide');
+  $connect=mysql_connect('localhost','assistant','××××××××');
   mysql_select_db('助理們');
   mysql_query("insert into web set 姓名='".$_REQUEST['姓名']."',phone='".$_REQUEST['phone']."'");
@@ 第 87 行： / 第 87 行： @@
 *說明範例程式。
 ===2017.9.21===
+*[http://6years.jendo.org/~共用/網頁程式撰寫/Ch04/ 第四章]
+===2017.9.28===
+*[http://6years.jendo.org/~共用/網頁程式撰寫/Ch05/ 第五章]
+*敘述區塊：
+*#在某些條件下才執行的敘述集合，結構為「條件{諸敘述}」
+*#「}」之後不再加「;」
+*三元算符，可以在同一敘述中完成二選一條件判斷。
+*#將 Ch5_2_5.php(三元運算?:)改成用一行表達。
+*#比較新寫法的優點。
+*將 Ch5_4.php 九九乘法表改成雙層的 for 迴圈。
+===2017.10.5===
+*做第五章作業
+*[http://6years.jendo.org/~共用/網頁程式撰寫/Ch06/ 第六章]
+*[http://jendo.org/files/doc/php.html 參考講義 PHP]
+*[https://sites.google.com/site/phplearnmark/ PHP學習誌]
+===2017.10.12===
+*程式 Ch6_6_4.php(驗證密碼格式)
+*做第六章作業
+*[http://6years.jendo.org/~共用/網頁程式撰寫/Ch07/ 第七章]
+===2017.10.19===
+*[http://6years.jendo.org/~共用/網頁程式撰寫/Ch07/ 繼續第七章第四節之後]
+===2017.10.26===
+*使用[http://6years.jendo.org/adminer-4.3.1-mysql.php adminer]，請認識其連結。
+*去了解 r.php ，今天之後就會修改 wiki 頁。
+*區分資料表與資料庫(放資料表的資料夾)
+*認識 web 和 webMail 兩資料表。
+*建立自己的資料表 web_xxx 和 webMail_xxx 。
+*nameList0.php	最素樸的起點，只有編，沒有增人、增mail
+*#javascript驗證
+*#以makeForm類別生成表單
+<pre>
+&lt;?php
+$connect=mysql_connect('localhost','assistant','××××××××');
+mysql_select_db('助理們');
+// 前置處理
+if($_POST['type']=='確定'){
+	mysql_query("update web a,webMail b set a.姓名='".$_POST['姓名']."',a.phone='".$_POST['phone']."',b.email='".$_POST['email']."' where a.wid=".$_POST['wid']." && b.eid=".$_POST['eid']);
+}
+elseif($_GET['type']=='editForm'){
+	echo editForm($_GET['wid'],$_GET['eid']);
+}
+else{
+	#
+}
+$result=mysql_query("select * from web");	// 取資料
+$colName=array('序','','wid','姓名','電話');// 設表格首列名稱
+$id='wid';									// 配置識別欄欄名
+// 輸入驗證程式
+$str="&lt;script language='javascript'&gt;
+function chkForm(){
+	if(document.表單.姓名.value==''){alert('請填寫姓名！');document.表單.姓名.focus();return false;}
+	if(document.表單.email.value != ''){if(!isEmail(document.表單.email.value)){alert('請輸入正確的Email格式！');document.表單.email.focus();return false;}}
+	else{alert('請填寫Email！');document.表單.email.focus();return false;}
+}
+function chkNameForm(){
+	if(document.表單.姓名.value==''){alert('請填寫姓名！');document.表單.姓名.focus();return false;}
+}
+function chkMailForm(){
+	if(document.表單.email.value != ''){if(!isEmail(document.表單.email.value)){alert('請輸入正確的Email格式！');document.表單.email.focus();return false;}}
+	else{alert('請填寫Email！');document.表單.email.focus();return false;}
+}
+function isEmail(theStr){
+	var atindex=theStr.indexOf('@');
+	var dotindex=theStr.indexOf('.',atindex);
+	var flag=true;
+	thesub=theStr.substring(0,dotindex+1);
+	if((atindex&lt;1)||(atindex!=theStr.lastIndexOf('@'))||(dotindex&lt;atindex+2)||(theStr.length&lt;=thesub.length)){flag=false;}
+	else{flag=true;}
+	return(flag);
+}
+&lt;/script&gt;\n";
+echo $str.nicetable($result,$colName,$id);
+mysql_close($connect);
+function editForm($wid){
+	$result=mysql_query("select a.姓名,a.phone,b.email,b.eid from web a,webMail b where a.wid=b.wid && a.wid=".$wid);
+	$row=mysql_fetch_array($result,MYSQL_ASSOC);	// 只取第一筆
+	$xx=new makeForm;
+	$xx-&gt;elements[]=array('姓名：','text','姓名',$row['姓名']);
+	$xx-&gt;elements[]=array('email：','text','email',$row['email']);	// 第一筆 email
+	$xx-&gt;elements[]=array('電話：','text','phone',$row['phone']);
+	$xx-&gt;elements[]=array('','hidden','wid',$wid);
+	$xx-&gt;elements[]=array('','hidden','eid',$row['eid']);
+	return $xx-&gt;makeFormStr();
+}
+function nicetable($result,$colName,$id){
+	$i=1;	// 筆計數器
+	$str="&lt;table style='border:1px solid black;border-collapse:collapse;border-top:none;border-left:none;border-right:none;'&gt;";
+	$str.="&lt;tr&gt;";
+	foreach($colName as $colValue){
+		 $str.="&lt;th style='border:1px solid black;border-collapse:collapse'&gt;".$colValue."&lt;/th&gt;";
+	}
+	$str.="&lt;/tr&gt;";
+	$temp=array();
+	while($row=mysql_fetch_array($result,MYSQL_ASSOC)){
+		$temp[$row[$id]]['姓名']=$row['姓名'];
+		$temp[$row[$id]]['phone']=$row['phone'];
+	}
+	foreach($temp as $k=&gt;$v){
+		$str.="&lt;tr&gt;";
+		$str.="&lt;td style='border:1px solid black;border-collapse:collapse'&gt;".$i."&lt;/td&gt;";
+		$str.="&lt;th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'&gt;&lt;a href=".$_SERVER['PHP_SELF']."?type=editForm&wid=".$k."&gt;編&lt;/a&gt;&lt;/th&gt;";
+		$str.="&lt;th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'&gt;".$k."&lt;/th&gt;";
+		$str.="&lt;th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'&gt;".$temp[$k]['姓名']."&lt;/th&gt;";
+		$str.="&lt;th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'&gt;".$temp[$k]['phone']."&lt;/th&gt;";
+		$str.="&lt;/tr&gt;";
+		$i++;
+	}
+	$str.="&lt;/table&gt;";
+	return $str;
+}
+class makeForm{
+	var $elements=array();	// 表單內容初值為空陣列
+	var $submitValue='確定';
+	var $checkWhich='chkForm()';
+	function makeFormStr(){
+		$str="\n&lt;form action='".$_SERVER['PHP_SELF']."' method='post' name='表單'&gt;\n";	//	表單字串
+		// 加入諸元素
+		foreach($this-&gt;elements as $輸入框){
+			$str.=$輸入框[0]."&lt;input type='".$輸入框[1]."' name='".$輸入框[2]."' value='".$輸入框[3]."' /&gt;";
+			if($輸入框[1]!='hidden'){$str.="&lt;br/&gt;";}
+			$str.="\n";
+		}
+		$str.="&lt;input type='submit' name='type' value='".$this-&gt;submitValue."' onClick=\"return ".$this-&gt;checkWhich.";\" /&gt;\n";
+		$str.="&lt;/form&gt;\n";
+		return $str;
+	}
+}
+?&gt;</pre>
+*工作程式的一般思維流程：
+*#載入常數、變數、函式、類別(初始示範程式省略)
+*#前置處理
+*#*流程變數的判讀
+*#讀取資料
+*#*字串好儲存，陣列好處理
+*#造共用的 html 碼長字串
+*#*其中 javascript 是重點
+*#將資料生成為適當的 html 碼
+*#送出顯示
+*#*有些是與使用者互動的介面
+*#*含使用者回應不符期待時的指示
+*#歸還資料庫連結的掛號牌
+*專案實作：
+*#需求分析
+*#關聯式資料設計
+*#*適當欄位預設值的設置，可以替代 php 程式的設計
+*#規畫流程變數
+*#分鏡：需要哪些工作程式
+*#*工作程式是可以適度合併的
+*#*工作程式減少，程式結構變大，流程變數的動作變複雜
+*#*這一點是導致相同功能程式，其寫法差異極大的主因
+*#*使用 framework (框架工具)會使得工作程式的可讀性大增
+===2017.11.2===
+*解說類別的設計與物件的使用
+*#為什麼類別與物件內的變數與函式要叫做「屬性」和「方法」
+*#實體化
+*解說用 javascrip 驗證使用者輸入資料
+===2017.11.9===
+*nameList1.php
+*#合併個人諸 mail，使人名跨列
+*#加入編mail
+<pre>&lt;?php
+$connect=mysql_connect('localhost','assistant','××××××××');
+mysql_select_db('助理們');
+// 前置處理
+if($_POST['type']=='編畢'){
+	mysql_query("update webMail set email='".$_POST['email']."' where eid=".$_POST['eid']);
+}
+elseif($_POST['type']=='確定'){
+	mysql_query("update web a,webMail b set a.姓名='".$_POST['姓名']."',a.phone='".$_POST['phone']."',b.email='".$_POST['email']."' where a.wid=".$_POST['wid']." && b.eid=".$_POST['eid']);
+}
+elseif($_POST['type']=='增一人'){
+	mysql_query("insert into web set 姓名='".$_POST['姓名']."',phone='".$_POST['phone']."'");
+}
+elseif($_POST['type']=='加Mail'){
+	mysql_query("insert into webMail set email='".$_POST['email']."',wid='".$_POST['wid']."'");
+}
+elseif($_GET['type']=='delMail'){
+	mysql_query("delete from webMail where eid='".$_GET['eid']."'");
+}
+elseif($_GET['type']=='delPerson'){
+	mysql_query("delete from webMail where wid='".$_GET['wid']."'");
+	mysql_query("delete from web where wid='".$_GET['wid']."'");
+}
+elseif($_GET['type']=='editMailForm'){
+	echo editMailForm($_GET['eid']);
+}
+elseif($_GET['type']=='editForm'){
+	echo editForm($_GET['wid'],$_GET['eid']);
+}
+elseif($_GET['type']=='insPersonForm'){
+	echo insPersonForm();
+}
+elseif($_GET['type']=='insMailForm'){
+	echo insMailForm($_GET['wid']);
+}
+else{
+	#
+}
+$result=mysql_query("select a.wid,b.eid,a.姓名,a.phone,b.email from web a left join webMail b on a.wid=b.wid where a.姓名!=''");//百分比代表萬用字元，只要裡面包含@都可以,left join是左側連結，where a.某欄=b.某欄
+$colName=array('序','','wid','姓名','手機','±M','eid','Email');
+$str="&lt;script language='javascript'&gt;
+function chkForm(){
+	if(document.表單.姓名.value==''){alert('請填寫姓名！');document.表單.姓名.focus();return false;}
+	if(document.表單.email.value != ''){if(!isEmail(document.表單.email.value)){alert('請輸入正確的Email格式！');document.表單.email.focus();return false;}}
+	else{alert('請填寫Email！');document.表單.email.focus();return false;}
+}
+function chkNameForm(){
+	if(document.表單.姓名.value==''){alert('請填寫姓名！');document.表單.姓名.focus();return false;}
+}
+function chkMailForm(){
+	if(document.表單.email.value != ''){if(!isEmail(document.表單.email.value)){alert('請輸入正確的Email格式！');document.表單.email.focus();return false;}}
+	else{alert('請填寫Email！');document.表單.email.focus();return false;}
+}
+function isEmail(theStr){
+	var atindex=theStr.indexOf('@');
+	var dotindex=theStr.indexOf('.',atindex);
+	var flag=true;
+	thesub=theStr.substring(0,dotindex+1);
+	if((atindex&lt;1)||(atindex!=theStr.lastIndexOf('@'))||(dotindex&lt;atindex+2)||(theStr.length&lt;=thesub.length)){flag=false;}
+	else{flag=true;}
+	return(flag);
+}
+&lt;/script&gt;\n";
+echo $str.nicetable($result,$colName);
+mysql_close($connect);
+function insMailForm($wid){
+	$xx=new makeForm;
+	$xx-&gt;elements[]=array('email：','text','email','');
+	$xx-&gt;elements[]=array('','hidden','wid',$wid);
+	$xx-&gt;submitValue='加Mail';
+	$xx-&gt;checkWhich='chkMailForm()';
+	return $xx-&gt;makeFormStr();
+}
+function editMailForm($eid){
+	$result=mysql_query("select email from webMail where eid=".$eid);
+	$row=mysql_fetch_array($result,MYSQL_ASSOC);
+	$xx=new makeForm;
+	$xx-&gt;elements[]=array('email：','text','email',$row['email']);
+	$xx-&gt;elements[]=array('','hidden','eid',$eid);
+	$xx-&gt;submitValue='編畢';
+	$xx-&gt;checkWhich='chkMailForm()';
+	return $xx-&gt;makeFormStr();
+}
+function insPersonForm(){
+	$xx=new makeForm;
+	$xx-&gt;elements[]=array('姓名：','text','姓名','');
+	$xx-&gt;elements[]=array('電話：','text','phone','');
+	$xx-&gt;submitValue='增一人';
+	$xx-&gt;checkWhich='chkNameForm()';
+	return $xx-&gt;makeFormStr();
+}
+function editForm($wid){
+	$result=mysql_query("select 姓名,phone from web where wid=".$wid);
+	$row=mysql_fetch_array($result,MYSQL_ASSOC);
+	$xx=new makeForm;
+	$xx-&gt;elements[]=array('姓名：','text','姓名',$row['姓名']);
+	$xx-&gt;elements[]=array('電話：','text','phone',$row['phone']);
+	$xx-&gt;elements[]=array('','hidden','wid',$wid);
+	$xx-&gt;submitValue='確定';
+	return $xx-&gt;makeFormStr();
+}
+function nicetable($result,$colName){
+	$i=1;
+	$str="\n&lt;table style='border:1px solid black;border-collapse:collapse;border-top:none;border-left:none;border-right:none;'&gt;\n";
+	$str.="&lt;tr&gt;&lt;td colspan=8 style='border-top:none;border-left:none;border-right:none;'&gt;&lt;p style='text-align:right'&gt;《&lt;a href='".$_SERVER['PHP_SELF']."?type=insPersonForm'&gt;增一人&lt;/a&gt;》&lt;/p&gt;&lt;/td&gt;&lt;/tr&gt;\n";
+	$str.="&lt;tr&gt;";
+	foreach($colName as $colValue){
+		 $str.="&lt;th style='border:1px solid black;border-collapse:collapse'&gt;".$colValue."&lt;/th&gt;";
+	}
+	$str.="&lt;/tr&gt;\n";
+	$temp=array();
+	while($row=mysql_fetch_array($result,MYSQL_ASSOC)){
+		$temp[$row['wid']]['姓名']=$row['姓名'];
+		$temp[$row['wid']]['phone']=$row['phone'];
+		$temp[$row['wid']]['mail'][$row['eid']]=$row['email'];
+	}
+	foreach($temp as $k=&gt;$v){
+		$rs=count($v['mail']);$j=0;
+		foreach($v['mail'] as $kk=&gt;$vv){
+			$str.="&lt;tr&gt;";
+			$str.="&lt;td style='border:1px solid black;border-collapse:collapse'&gt;".$i."&lt;/td&gt;";
+			if($j==0){
+				$str.="&lt;th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'&gt;&lt;a href=".$_SERVER['PHP_SELF']."?type=editForm&wid=".$k."&eid=".$kk."&gt;編&lt;/a&gt;&nbsp;&lt;a href=".$_SERVER['PHP_SELF']."?type=delPerson&wid=".$k."&gt;刪&lt;/a&gt;&lt;/th&gt;";
+				$str.="&lt;th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'&gt;".$k."&lt;/th&gt;";
+				$str.="&lt;th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'&gt;".$temp[$k]['姓名']."&lt;/th&gt;";
+				$str.="&lt;th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'&gt;".$temp[$k]['phone']."&lt;/th&gt;";
+			}
+			$str.="&lt;th style='border:1px solid black;border-collapse:collapse'&gt;&lt;a href='".$_SERVER['PHP_SELF']."?type=insMailForm&wid=".$k."'&gt;＋&lt;/a&gt;";
+			if($kk){$str.="&nbsp;&lt;a href='".$_SERVER['PHP_SELF']."?type=editMailForm&eid=".$kk."'&gt;編&lt;/a&gt;&nbsp;&lt;a href='".$_SERVER['PHP_SELF']."?type=delMail&eid=".$kk."'&gt;—&lt;/a&gt;";}
+			$str.="&lt;/th&gt;";
+			$str.="&lt;th style='border:1px solid black;border-collapse:collapse'&gt;".$kk."&lt;/th&gt;";
+			$str.="&lt;th style='border:1px solid black;border-collapse:collapse'&gt;".$vv."&lt;/th&gt;";
+			$j++;
+			if($j==$rs){$j=0;}
+			$str.="&lt;/tr&gt;\n";
+			$i++;
+		}
+	}
+	$str.="&lt;/table&gt;\n";
+	return $str;
+}
+class makeForm{
+	var $elements=array();	// 表單內容初值為空陣列
+	var $submitValue='確定';
+	var $checkWhich='chkForm()';
+	function makeFormStr(){
+		$str="\n&lt;form action='".$_SERVER['PHP_SELF']."' method='post' name='表單'&gt;\n";	//	表單字串
+		// 加入諸元素
+		foreach($this-&gt;elements as $輸入框){
+			$str.=$輸入框[0]."&lt;input type='".$輸入框[1]."' name='".$輸入框[2]."' value='".$輸入框[3]."' /&gt;";
+			if($輸入框[1]!='hidden'){$str.="&lt;br/&gt;";}
+			$str.="\n";
+		}
+		$str.="&lt;input type='submit' name='type' value='".$this-&gt;submitValue."' onClick=\"return ".$this-&gt;checkWhich.";\" /&gt;\n";
+		$str.="&lt;/form&gt;\n";
+		return $str;
+	}
+}
+?&gt;</pre>
+*摘要說明：
+*#完全不用變動：「makeForm 類別定義」、「javascript輸入驗證程式」
+*#擴充前置處理程式，由一種表單擴充到四種表單：「增一人」、「編一人」、「增一mail」、「編一mail」四種表單，和「刪一人」、「刪一mail」等兩種連結，以及相應的六種資料表前置處理。
+*#新增「insMailForm($wid)」、「editMailForm($eid)」、「insPersonForm()」三個表單生成函式，並微調「editForm($wid,$eid)」函式。
+*#修改撈資料表的 SQL 指令：由「select * from web」改為<br/>「select a.wid,b.eid,a.姓名,a.phone,b.email from web a left join webMail b on a.wid=b.wid where a.姓名!=&apos;&apos;」
+*#修改主要顯示函式「nicetable」：
+*#*把泛用 id 固定成 wid
+*#*增加《增一人》連結
+*#*在 while 迴圈中將 email 塞入 $temp[wid]['mail'][eid] 中，然後計數 $temp[wid]['mail'] 有幾個元素來決定 rowspan 幾列。
+*#*改變表格的 title 列。
+*#*逐一秀出連結和通訊資料
+===2017.11.16===
+AJAX 即“Asynchronous JavaScript and XML”(非同步的JavaScript與XML技術)，是網頁程式技術發展的理程碑之一
+#以 JavaScript 驅動的瀏覽器端網頁開發技術。
+#不需要換頁，即可與伺服端互動，至於和客戶端互動的伺服端語言是什麼，AJAX 網頁不在乎，可以是 PHP 、可以是 JSP 、可以是 ASP ，甚至可以是 note.js 。
+#後來演變出 note.js 等技術，伺服端語言也使用 JavaScript 語法。
+*response.php：新增此程式以觀察伺服器要如何回應
+<pre>&lt;?php
+echo "catch:e0=".$_POST['e0'];
+?&gt;</pre>
+*nameList2.php
+*#新增 div(id='show')，供伺服器端回應輸出
+*#新增 form(id='ajaxTest')，走 ajax 通道，送資料給 response.php
+*#javascript 段落中增加：
+*#*var ahr
+*#*createXMLHttpRequestObject
+*#*postData
+*#*sendFormData
+*#*encode
+<pre>&lt;?php
+$connect=mysql_connect('localhost','assistant','××××××××');
+mysql_select_db('助理們');
+// 前置處理
+if($_POST['type']=='編畢'){
+	mysql_query("update webMail set email='".$_POST['email']."' where eid=".$_POST['eid']);
+}
+elseif($_POST['type']=='確定'){
+	mysql_query("update web a,webMail b set a.姓名='".$_POST['姓名']."',a.phone='".$_POST['phone']."',b.email='".$_POST['email']."' where a.wid=".$_POST['wid']." && b.eid=".$_POST['eid']);
+}
+elseif($_POST['type']=='增一人'){
+	mysql_query("insert into web set 姓名='".$_POST['姓名']."',phone='".$_POST['phone']."'");
+}
+elseif($_POST['type']=='加Mail'){
+	mysql_query("insert into webMail set email='".$_POST['email']."',wid='".$_POST['wid']."'");
+}
+elseif($_GET['type']=='delMail'){
+	mysql_query("delete from webMail where eid='".$_GET['eid']."'");
+}
+elseif($_GET['type']=='delPerson'){
+	mysql_query("delete from webMail where wid='".$_GET['wid']."'");
+	mysql_query("delete from web where wid='".$_GET['wid']."'");
+}
+elseif($_GET['type']=='editMailForm'){
+	echo editMailForm($_GET['eid']);
+}
+elseif($_GET['type']=='editForm'){
+	echo editForm($_GET['wid'],$_GET['eid']);
+}
+elseif($_GET['type']=='insPersonForm'){
+	echo insPersonForm();
+}
+elseif($_GET['type']=='insMailForm'){
+	echo insMailForm($_GET['wid']);
+}
+else{
+	#
+}
+$result=mysql_query("select a.wid,b.eid,a.姓名,a.phone,b.email from web a left join webMail b on a.wid=b.wid where a.姓名!=''");//百分比代表萬用字元，只要裡面包含@都可以,left join是左側連結，where a.某欄=b.某欄
+$colName=array('序','','wid','姓名','手機','±M','eid','Email');
+$str="
+&lt;div id='show' style='border:red 2px solid;width:500px;'&gt;
+&lt;/div&gt;
+&lt;br/&gt;
+&lt;form id='ajaxTest'&gt;
+&lt;input type='text' name='e0' value=''&gt;
+&lt;input type='button' name='button' value='後送' onclick=\"sendFormData('ajaxTest','/~丁志仁/php/response.php','show');\" &gt;
+&lt;/form&gt;
+&lt;script language='javascript'&gt;
+function chkForm(){
+	if(document.表單.姓名.value==''){alert('請填寫姓名！');document.表單.姓名.focus();return false;}
+	if(document.表單.email.value != ''){if(!isEmail(document.表單.email.value)){alert('請輸入正確的Email格式！');document.表單.email.focus();return false;}}
+	else{alert('請填寫Email！');document.表單.email.focus();return false;}
+}
+function chkNameForm(){
+	if(document.表單.姓名.value==''){alert('請填寫姓名！');document.表單.姓名.focus();return false;}
+}
+function chkMailForm(){
+	if(document.表單.email.value != ''){if(!isEmail(document.表單.email.value)){alert('請輸入正確的Email格式！');document.表單.email.focus();return false;}}
+	else{alert('請填寫Email！');document.表單.email.focus();return false;}
+}
+function isEmail(theStr){
+	var atindex=theStr.indexOf('@');
+	var dotindex=theStr.indexOf('.',atindex);
+	var flag=true;
+	thesub=theStr.substring(0,dotindex+1);
+	if((atindex&lt;1)||(atindex!=theStr.lastIndexOf('@'))||(dotindex&lt;atindex+2)||(theStr.length&lt;=thesub.length)){flag=false;}
+	else{flag=true;}
+	return(flag);
+}
+var ahr=createXMLHttpRequestObject();					// 先建立物件以俾重覆使用
+function createXMLHttpRequestObject(){
+	var ahr=false;										// 物件初值設為不存在
+	if(window.XMLHttpRequest){ahr=new XMLHttpRequest();}// 產生非同步請求物件，本行給Firefox，下行給IE5,6
+	else if(window.ActiveXObject){ahr=new ActiveXObject('Microsoft.XMLHTTP');}
+	if(!ahr){alert('Error: failed to create the XMLHttpRequest object.');}
+	else{return ahr;}
+}
+function postData(dataSource,parm,divID){			// 對 dataSource 後送POST請求，帶 parm 參數，回應送divID，回應後執行 onAjax(a)
+	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.');}
+}
+function sendFormData(idForm,dataSource,divID){			// 從指定表單擷取資料並後送
+	if(ahr){
+		var sendData='';
+		for(var i=0;i&lt;document.getElementById(idForm).elements.length;i++){
+			if(document.getElementById(idForm).elements[i].type=='checkbox' || document.getElementById(idForm).elements[i].type=='radio'){
+				if(document.getElementById(idForm).elements[i].type=='checkbox'){	// 處理核取方塊，checked回傳值，沒checked回傳空無一物
+					if(document.getElementById(idForm).elements[i].checked==true){sendData += '&'+document.getElementById(idForm).elements[i].name+'='+encode(document.getElementById(idForm).elements[i].value);}
+					else{sendData += '&'+document.getElementById(idForm).elements[i].name+'=';}
+				}else{																// 處理按鈕，checked回傳值，否則跳過
+					if(document.getElementById(idForm).elements[i].checked==true){sendData += '&'+document.getElementById(idForm).elements[i].name+'='+encode(document.getElementById(idForm).elements[i].value);}
+				}
+			}																		// 非核取方塊非按鈕，如為隱藏欄不編碼傳回值，不是隱藏欄則編碼傳回值
+			else if(document.getElementById(idForm).elements[i].type=='hidden'){sendData += '&'+document.getElementById(idForm).elements[i].name+'='+document.getElementById(idForm).elements[i].value;}
+			else{sendData += '&'+document.getElementById(idForm).elements[i].name+'='+encode(document.getElementById(idForm).elements[i].value);}
+		}
+	}
+	postData(dataSource,sendData,divID);
+}
+function encode(x){
+	return x.replace(/%/g,'%25').replace(/&/g,'%26').replace(/\+/g,'%2B').replace(/\"/g,'%22').replace(/\'/g,'%27');
+}
+&lt;/script&gt;\n";
+echo $str.nicetable($result,$colName);
+mysql_close($connect);
+function insMailForm($wid){
+	$xx=new makeForm;
+	$xx-&gt;elements[]=array('email：','text','email','');
+	$xx-&gt;elements[]=array('','hidden','wid',$wid);
+	$xx-&gt;submitValue='加Mail';
+	$xx-&gt;checkWhich='chkMailForm()';
+	return $xx-&gt;makeFormStr();
+}
+function editMailForm($eid){
+	$result=mysql_query("select email from webMail where eid=".$eid);
+	$row=mysql_fetch_array($result,MYSQL_ASSOC);
+	$xx=new makeForm;
+	$xx-&gt;elements[]=array('email：','text','email',$row['email']);
+	$xx-&gt;elements[]=array('','hidden','eid',$eid);
+	$xx-&gt;submitValue='編畢';
+	$xx-&gt;checkWhich='chkMailForm()';
+	return $xx-&gt;makeFormStr();
+}
+function insPersonForm(){
+	$xx=new makeForm;
+	$xx-&gt;elements[]=array('姓名：','text','姓名','');
+	$xx-&gt;elements[]=array('電話：','text','phone','');
+	$xx-&gt;submitValue='增一人';
+	$xx-&gt;checkWhich='chkNameForm()';
+	return $xx-&gt;makeFormStr();
+}
+function editForm($wid){
+	$result=mysql_query("select 姓名,phone from web where wid=".$wid);
+	$row=mysql_fetch_array($result,MYSQL_ASSOC);
+	$xx=new makeForm;
+	$xx-&gt;elements[]=array('姓名：','text','姓名',$row['姓名']);
+	$xx-&gt;elements[]=array('電話：','text','phone',$row['phone']);
+	$xx-&gt;elements[]=array('','hidden','wid',$wid);
+	$xx-&gt;submitValue='確定';
+	return $xx-&gt;makeFormStr();
+}
+function nicetable($result,$colName){
+	$i=1;
+	$str="\n&lt;table style='border:1px solid black;border-collapse:collapse;border-top:none;border-left:none;border-right:none;'&gt;\n";
+	$str.="&lt;tr&gt;&lt;td colspan=8 style='border-top:none;border-left:none;border-right:none;'&gt;&lt;p style='text-align:right'&gt;《&lt;a href='".$_SERVER['PHP_SELF']."?type=insPersonForm'&gt;增一人&lt;/a&gt;》&lt;/p&gt;&lt;/td&gt;&lt;/tr&gt;\n";
+	$str.="&lt;tr&gt;";
+	foreach($colName as $colValue){
+		 $str.="&lt;th style='border:1px solid black;border-collapse:collapse'&gt;".$colValue."&lt;/th&gt;";
+	}
+	$str.="&lt;/tr&gt;\n";
+	$temp=array();
+	while($row=mysql_fetch_array($result,MYSQL_ASSOC)){
+		$temp[$row['wid']]['姓名']=$row['姓名'];
+		$temp[$row['wid']]['phone']=$row['phone'];
+		$temp[$row['wid']]['mail'][$row['eid']]=$row['email'];
+	}
+	foreach($temp as $k=&gt;$v){
+		$rs=count($v['mail']);$j=0;
+		foreach($v['mail'] as $kk=&gt;$vv){
+			$str.="&lt;tr&gt;";
+			$str.="&lt;td style='border:1px solid black;border-collapse:collapse'&gt;".$i."&lt;/td&gt;";
+			if($j==0){
+				$str.="&lt;th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'&gt;&lt;a href=".$_SERVER['PHP_SELF']."?type=editForm&wid=".$k."&eid=".$kk."&gt;編&lt;/a&gt;&nbsp;&lt;a href=".$_SERVER['PHP_SELF']."?type=delPerson&wid=".$k."&gt;刪&lt;/a&gt;&lt;/th&gt;";
+				$str.="&lt;th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'&gt;".$k."&lt;/th&gt;";
+				$str.="&lt;th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'&gt;".$temp[$k]['姓名']."&lt;/th&gt;";
+				$str.="&lt;th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'&gt;".$temp[$k]['phone']."&lt;/th&gt;";
+			}
+			$str.="&lt;th style='border:1px solid black;border-collapse:collapse'&gt;&lt;a href='".$_SERVER['PHP_SELF']."?type=insMailForm&wid=".$k."'&gt;＋&lt;/a&gt;";
+			if($kk){$str.="&nbsp;&lt;a href='".$_SERVER['PHP_SELF']."?type=editMailForm&eid=".$kk."'&gt;編&lt;/a&gt;&nbsp;&lt;a href='".$_SERVER['PHP_SELF']."?type=delMail&eid=".$kk."'&gt;—&lt;/a&gt;";}
+			$str.="&lt;/th&gt;";
+			$str.="&lt;th style='border:1px solid black;border-collapse:collapse'&gt;".$kk."&lt;/th&gt;";
+			$str.="&lt;th style='border:1px solid black;border-collapse:collapse'&gt;".$vv."&lt;/th&gt;";
+			$j++;
+			if($j==$rs){$j=0;}
+			$str.="&lt;/tr&gt;\n";
+			$i++;
+		}
+	}
+	$str.="&lt;/table&gt;\n";
+	return $str;
+}
+class makeForm{
+	var $elements=array();	// 表單內容初值為空陣列
+	var $submitValue='確定';
+	var $checkWhich='chkForm()';
+	function makeFormStr(){
+		$str="\n&lt;form action='".$_SERVER['PHP_SELF']."' method='post' name='表單'&gt;\n";	//	表單字串
+		// 加入諸元素
+		foreach($this-&gt;elements as $輸入框){
+			$str.=$輸入框[0]."&lt;input type='".$輸入框[1]."' name='".$輸入框[2]."' value='".$輸入框[3]."' /&gt;";
+			if($輸入框[1]!='hidden'){$str.="&lt;br/&gt;";}
+			$str.="\n";
+		}
+		$str.="&lt;input type='submit' name='type' value='".$this-&gt;submitValue."' onClick=\"return ".$this-&gt;checkWhich.";\" /&gt;\n";
+		$str.="&lt;/form&gt;\n";
+		return $str;
+	}
+}
+?&gt;</pre>
+會議資料處理的資料結構示例
+*會議
+*#conf_id / varchar(3) / 會議id
+*#date / date / 日期
+*#location / varchar(255) / 地點
+*#host / varchar(100) / 主持人
+*#present / text / 出列席人員
+*案
+*#matter_id / varchar(4) / 事項id
+*#conf_id / varchar(3) / 會議id
+*#discussion / varchar(255) / 案由
+*#statement / text / 說明
+*#method / text / 辦法
+*#desision / text / 決議
+*#proponent / varchar(255) / 報告人或提案人
+*#tag / varchar(255) / 事件標籤
+*附件
+*#attn_id / int(4) 自動遞增 / 附件id
+*#matter_id / varchar(4) / 事項id
+*#conf_id / varchar(3) / 會議id
+*#summary / varchar(255) / 名稱
+*#link / varchar(255) / 連結
+*#provider / varchar(255) / 提供者
+*#date / date / 日期
+===2017.11.23===
+*nameList3.php：ajax 的完整程式，所有連結與表單改成 ajax
+<pre>&lt;?php
+$connect=mysql_connect('localhost','assistant','××××××××');
+mysql_select_db('助理們');
+$colName=array('序','','wid','姓名','手機','±M','eid','Email');
+if(isset($_REQUEST['type'])){	// 前置處理
+	if($_POST['type']=='編畢'){
+		mysql_query("update webMail set email='".$_POST['email']."' where eid=".$_POST['eid']);
+	}
+	if($_POST['type']=='確定'){
+		mysql_query("update web set 姓名='".$_POST['姓名']."',phone='".$_POST['phone']."' where wid=".$_POST['wid']);
+	}
+	elseif($_POST['type']=='增一人'){
+		mysql_query("insert into web set 姓名='".$_POST['姓名']."',phone='".$_POST['phone']."'");
+	}
+	elseif($_POST['type']=='加Mail'){
+		mysql_query("insert into webMail set email='".$_POST['email']."',wid='".$_POST['wid']."'");
+	}
+	elseif($_POST['type']=='delMail'){
+		mysql_query("delete from webMail where eid='".$_POST['eid']."'");
+	}
+	elseif($_POST['type']=='delPerson'){
+		mysql_query("delete from webMail where wid='".$_POST['wid']."'");
+		mysql_query("delete from web where wid='".$_POST['wid']."'");
+	}
+	elseif($_POST['type']=='editMailForm'){
+		echo editMailForm($_POST['eid']);
+	}
+	elseif($_POST['type']=='editForm'){
+		echo editForm($_POST['wid'],$_POST['eid']);
+	}
+	elseif($_POST['type']=='insPersonForm'){
+		echo insPersonForm();
+	}
+	elseif($_POST['type']=='insMailForm'){
+		echo insMailForm($_POST['wid']);
+	}
+	$result=mysql_query("select a.wid,b.eid,a.姓名,a.phone,b.email from web a left join webMail b on a.wid=b.wid where a.姓名!=''");//百分比代表萬用字元，只要裡面包含@都可以,left join是左側連結，where a.某欄=b.某欄
+	echo nicetable($result,$colName);
+}
+else{	// 第一次載入
+	$str="&lt;script language='javascript'&gt;
+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);}
+}
+function isEmail(theStr){
+	var atindex=theStr.indexOf('@');
+	var dotindex=theStr.indexOf('.',atindex);
+	var flag=true;
+	thesub=theStr.substring(0,dotindex+1);
+	if((atindex&lt;1)||(atindex!=theStr.lastIndexOf('@'))||(dotindex&lt;atindex+2)||(theStr.length&lt;=thesub.length)){flag=false;}
+	else{flag=true;}
+	return(flag);
+}
+var ahr=createXMLHttpRequestObject();					// 先建立物件以俾重覆使用
+function createXMLHttpRequestObject(){
+	var ahr=false;										// 物件初值設為不存在
+	if(window.XMLHttpRequest){ahr=new XMLHttpRequest();}// 產生非同步請求物件，本行給Firefox，下行給IE5,6
+	else if(window.ActiveXObject){ahr=new ActiveXObject('Microsoft.XMLHTTP');}
+	if(!ahr){alert('Error: failed to create the XMLHttpRequest object.');}
+	else{return ahr;}
+}
+function postData(dataSource,parm,divID){			// 對 dataSource 後送POST請求，帶 parm 參數，回應送divID，回應後執行 onAjax(a)
+	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.');}
+}
+function sendFormData(idForm,dataSource,divID){			// 從指定表單擷取資料並後送
+	if(ahr){
+		var sendData='';
+		for(var i=0;i&lt;document.getElementById(idForm).elements.length;i++){
+			if(document.getElementById(idForm).elements[i].type=='checkbox' || document.getElementById(idForm).elements[i].type=='radio'){
+				if(document.getElementById(idForm).elements[i].type=='checkbox'){	// 處理核取方塊，checked回傳值，沒checked回傳空無一物
+					if(document.getElementById(idForm).elements[i].checked==true){sendData += '&'+document.getElementById(idForm).elements[i].name+'='+encode(document.getElementById(idForm).elements[i].value);}
+					else{sendData += '&'+document.getElementById(idForm).elements[i].name+'=';}
+				}else{																// 處理按鈕，checked回傳值，否則跳過
+					if(document.getElementById(idForm).elements[i].checked==true){sendData += '&'+document.getElementById(idForm).elements[i].name+'='+encode(document.getElementById(idForm).elements[i].value);}
+				}
+			}																		// 非核取方塊非按鈕，如為隱藏欄不編碼傳回值，不是隱藏欄則編碼傳回值
+			else if(document.getElementById(idForm).elements[i].type=='hidden'){sendData += '&'+document.getElementById(idForm).elements[i].name+'='+document.getElementById(idForm).elements[i].value;}
+			else{sendData += '&'+document.getElementById(idForm).elements[i].name+'='+encode(document.getElementById(idForm).elements[i].value);}
+		}
+	}
+	postData(dataSource,sendData,divID);
+}
+function encode(x){
+	return x.replace(/%/g,'%25').replace(/&/g,'%26').replace(/\+/g,'%2B').replace(/\"/g,'%22').replace(/\'/g,'%27');
+}
+&lt;/script&gt;
+&lt;div id='show'&gt;\n";
+	$result=mysql_query("select a.wid,b.eid,a.姓名,a.phone,b.email from web a left join webMail b on a.wid=b.wid where a.姓名!=''");//百分比代表萬用字元，只要裡面包含@都可以,left join是左側連結，where a.某欄=b.某欄
+	$str.=nicetable($result,$colName);
+	$str.="&lt;/div&gt;\n";
+	echo $str;
+}
+mysql_close($connect);
+function insMailForm($wid){
+	$xx=new makeForm;
+	$xx-&gt;elements[]=array('email：','text','email','');
+	$xx-&gt;elements[]=array('','hidden','wid',$wid);
+	$xx-&gt;submitValue='加Mail';
+	return $xx-&gt;makeFormStr();
+}
+function editMailForm($eid){
+	$result=mysql_query("select email from webMail where eid=".$eid);
+	$row=mysql_fetch_array($result,MYSQL_ASSOC);
+	$xx=new makeForm;
+	$xx-&gt;elements[]=array('email：','text','email',$row['email']);
+	$xx-&gt;elements[]=array('','hidden','eid',$eid);
+	$xx-&gt;submitValue='編畢';
+	return $xx-&gt;makeFormStr();
+}
+function insPersonForm(){
+	$xx=new makeForm;
+	$xx-&gt;elements[]=array('姓名：','text','姓名','');
+	$xx-&gt;elements[]=array('電話：','text','phone','');
+	$xx-&gt;submitValue='增一人';
+	return $xx-&gt;makeFormStr();
+}
+function editForm($wid){
+	$result=mysql_query("select 姓名,phone from web where wid=".$wid);
+	$row=mysql_fetch_array($result,MYSQL_ASSOC);
+	$xx=new makeForm;
+	$xx-&gt;elements[]=array('姓名：','text','姓名',$row['姓名']);
+	$xx-&gt;elements[]=array('電話：','text','phone',$row['phone']);
+	$xx-&gt;elements[]=array('','hidden','wid',$wid);
+	$xx-&gt;submitValue='確定';
+	return $xx-&gt;makeFormStr();
+}
+function nicetable($result,$colName){
+	$i=1;
+	$str="\n&lt;table style='border:1px solid black;border-collapse:collapse;border-top:none;border-left:none;border-right:none;'&gt;\n";
+	$str.="&lt;tr&gt;&lt;td colspan=8 style='border-top:none;border-left:none;border-right:none;'&gt;&lt;p style='text-align:right'&gt;《".ajaxLink(array('type'=&gt;'insPersonForm'),'增一人')."》&lt;/p&gt;&lt;/td&gt;&lt;/tr&gt;\n";
+	$str.="&lt;tr&gt;";
+	foreach($colName as $colValue){
+		 $str.="&lt;th style='border:1px solid black;border-collapse:collapse'&gt;".$colValue."&lt;/th&gt;";
+	}
+	$str.="&lt;/tr&gt;\n";
+	$temp=array();
+	while($row=mysql_fetch_array($result,MYSQL_ASSOC)){
+		$temp[$row['wid']]['姓名']=$row['姓名'];
+		$temp[$row['wid']]['phone']=$row['phone'];
+		$temp[$row['wid']]['mail'][$row['eid']]=$row['email'];
+	}
+	foreach($temp as $k=&gt;$v){
+		$rs=count($v['mail']);$j=0;
+		foreach($v['mail'] as $kk=&gt;$vv){
+			$str.="&lt;tr&gt;";
+			$str.="&lt;td style='border:1px solid black;border-collapse:collapse'&gt;".$i."&lt;/td&gt;";
+			if($j==0){
+				$str.="&lt;th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'&gt;".ajaxLink(array('type'=&gt;'editForm','wid'=&gt;$k),'編')."&nbsp;".ajaxLink(array('type'=&gt;'delPerson','wid'=&gt;$k),'刪')."&lt;/th&gt;";
+				$str.="&lt;th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'&gt;".$k."&lt;/th&gt;";
+				$str.="&lt;th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'&gt;".$temp[$k]['姓名']."&lt;/th&gt;";
+				$str.="&lt;th rowspan='".$rs."' style='border:1px solid black;border-collapse:collapse'&gt;".$temp[$k]['phone']."&lt;/th&gt;";
+			}
+			$str.="&lt;th style='border:1px solid black;border-collapse:collapse'&gt;".ajaxLink(array('type'=&gt;'insMailForm','wid'=&gt;$k),'＋');
+			if($kk){$str.="&nbsp;".ajaxLink(array('type'=&gt;'editMailForm','eid'=&gt;$kk),'編')."&nbsp;".ajaxLink(array('type'=&gt;'delMail','eid'=&gt;$kk),'—');}
+			$str.="&lt;/th&gt;";
+			$str.="&lt;th style='border:1px solid black;border-collapse:collapse'&gt;".$kk."&lt;/th&gt;";
+			$str.="&lt;th style='border:1px solid black;border-collapse:collapse'&gt;".$vv."&lt;/th&gt;";
+			$j++;
+			if($j==$rs){$j=0;}
+			$str.="&lt;/tr&gt;\n";
+			$i++;
+		}
+	}
+	$str.="&lt;/table&gt;\n";
+	return $str;
+}
+function ajaxLink($paras,$prompt){
+	$str="&lt;a href='' onclick=\"postData('".$_SERVER['PHP_SELF']."','";
+	foreach($paras as $k=&gt;$v){$str.="&".$k."=".$v;}
+	$str.="','show');return false;\"&gt;".$prompt."&lt;/a&gt;";
+	return $str;
+}
+class makeForm{
+	var $elements=array();	// 表單內容初值為空陣列
+	var $submitValue='確定';
+	var $checkWhich='chkFormList()';
+	function makeFormStr(){
+		$str="\n&lt;form name='表單' id='表單'&gt;\n";	//	表單字串
+		// 加入諸元素
+		foreach($this-&gt;elements as $輸入框){
+			$str.=$輸入框[0]."&lt;input type='".$輸入框[1]."' name='".$輸入框[2]."' value='".$輸入框[3]."' /&gt;";
+			if($輸入框[1]!='hidden'){$str.="&lt;br/&gt;";}
+			$str.="\n";
+		}
+		$str.="&lt;input type='button' name='type' value='".$this-&gt;submitValue."' onclick=\"chkFormList('表單','".$_SERVER['PHP_SELF']."','show')\"&gt;\n";
+		$str.="&lt;/form&gt;\n";
+		return $str;
+	}
+}
+?&gt;</pre>
+*摘要說明：
+*#將整個程式分的主流程成「前置處理」與「第一次載入」兩大部分
+*#*主流程之前：連結資料庫、設定表格的標題列
+*#*主流程之後：繳還資料庫的掛號牌
+*#*最後放 php 諸類別及諸函式的定義
+*#第一次載入：
+*#*形成 javascript 字串，內含「表單驗證」和「ajax函式群」
+*#*形成秀出 ajax 回應區域，預設內裝 nicetable 。
+*#前置處理：
+*#*諸「流程變數」條件區塊中，所有回應通道改換成 POST 通道。
+*#*所有前置處理的最後均回應 nicetable 。
+*#輸入驗證將 chkForm(),chkNameForm(),chkMailForm() 三者整合成 chkFormList() ，驗證完走 sendFormData 函式。
+*#makeForm 類別定義：
+*#*checkWhich 屬性，預設為 chkFormList() 。
+*#* form 標籤取消換頁指示，增加 id 。
+*#* submit 按鈕改 button 按鈕，並送往 chkFormList() 。
+*#四個表單製造函式：取消 checkWhich 屬性的指定。
+*#新增函式 ajaxLink(參數,按鈕提示) ，處理所有連結。
+*#*本函式及接手的 javascript postData 函式中都沒有去處理 urlencode ，但 postData 卻對伺服器宣稱後送資料是 urlencoded  。
+*#*後送變數名與變數值不要出現： %、&、+、"、' 等五個字元。
+*#函式 nicetable 修改：增一人，人的編、刪連結，email 的增、編、刪連結，改成 ajaxLink() 。
+*同學產出：
+*#[http://6years.jendo.org/~丁志仁/php/nameList3.php 丁志仁]
+*#[http://6years.jendo.org/~游士賢/php/nameList3.php 游士賢]
+*#[http://6years.jendo.org/~王秋梅/php/nameList3.php 王秋梅]
+*#[http://6years.jendo.org/~劉恩佑/php/nameList/nameList3q.php 劉恩佑]
+*#[http://6years.jendo.org/~盧星瑜/php/nameList3.php 盧星瑜]
+*#[http://6years.jendo.org/~柯智懷/php/nameList3.php 柯智懷]
+===2017.11.30===
+*網站的最精簡布局
+*#可變化的內容區
+*#不大變化的 banner
+*#導航列
+*先照抄 [http://6years.jendo.org/~丁志仁/ROC/ 6years.jendo.org/~丁志仁/ROC/] 的原始碼，到自己的 www/WWEB 之下的 demoSite.php 。
+*#功能展示。注意第三層以下之導妔。
+*#另參考 [http://6years.jendo.org/~王秀雲/ESA/ 6years.jendo.org/~王秀雲/ESA/] ，用「/~王秀雲/ESA/導航列」來生成導航列。
+*#另參考 [http://quality-learning.net/ 均優學習論壇] 外觀設計。
+*#觀察 WebContent 資料表，與內部映射過程。
+*#先拆成小部分，分別用 php 來完成
+*#*找 link 標籤，將兩個 css 下載回來。
+*#*從 css 中找 url 字串，將導航列背景圖下載回來，並用小畫家觀察。
+*#*找 src 屬性，將兩個 banner 用圖檔下載回來。
+*#*分析 javascript 段落。
+'''[https://zh.wikipedia.org/wiki/MVC MVC]'''
+*Model–view–controller 三者分離
+*基本觀念：
+*#一個伺服器上有多個網站(SITE)，彼此共用基本「類別」
+*#每個 SITE 有自己的外觀 Theme
+*#每個 Theme 簡化為 banner 、 導航列 、 ajax 內容顯示區
+*實作WWEB：
+*#DB類別，無屬性諸方法
+*#*connect($dsn)：利用DSN連結資料庫
+*#*queryF($sql,$perpage=0,$start=0)：送出查詢，傳回結果
+*#*numRows($result)：傳回查詢結果的筆數
+*#*getResultValue($result,$recordNo,$col)：傳回查詢結果第幾列、第幾欄的值
+*#siteConstant.php
+*#Theme 的模組化
+*#style.css、menu.css
+*#navbar-bg的搭配與使用
+*#banner圖照的去背與嵌入
+*#畫字
+*#工作程式
+*#*Theme的前半
+*#*Theme的後半
+'''SESSION'''
+#@session_start();
+#$_SESSION 儲值
+#在另一個 php 中(翻頁後)檢查 $_SESSION 的值
+#一次儲值多次檢查，直到瀏覽器關閉
+===2017.12.7===
+====CSS基本說明====
+串接樣式表(Cascading Style Sheets)，用來控制網頁外觀表現。
+*三種使用方式：
+*#行內樣式：標籤的 style 屬性，優先級最高。
+*#內部樣式表：在本頁內 style 標籤段落中，優先級中等。
+*#外部樣式表：載入外部的樣式定義檔，優先級最低。
+*基本選擇器
+*#標籤(元素)選擇器（h1，p等）
+*#類別選擇器（class）——.類別名
+*#ID選擇器（ID）——#某ID
+*#萬用選擇器——*
+*#屬性選擇器——[屬性]
+*虛擬類別選擇器
+:虛擬類別選擇器指的是為不同的狀態、性質的元素。
+{| class="wikitable"
+|-
+! 屬性 !! 狀態
+|-
+| <code>:link </code> || [[超連接]]未被訪問
+|-
+| <code>:visited</code>  || [[超連接]]被訪問過
+|-
+| <code>:hover </code>||  [[滑鼠]]（鼠標）在元素上面
+|-
+| <code>:active </code>|| [[滑鼠]]（鼠標）在元素上按著
+|-
+|  <code>:focus </code> || 焦點在元素上
+|-
+| <code>:target </code> || 元素被URL標記（CSS 3新增的類別）
+|-
+| <code>:lang </code>	||向帶有指定lang屬性的元素添加樣式。
+|}
+*兩選擇器之間用 , 與 空白 相連，意思不同
+====方盒子模型(Box Model)====
+{{:Box Model}}
+====七大類物件搭配的CSS====
+*字,字串，請用 span 練習
+*#font-family:標楷體、新細明體
+*#font-size:可用px,pt,cm，也可用%，還可用xx-small,x-small,small,medium,large,x-large,xx-large
+*#font-weight:可用100,200,300,400(相當normal)...到900，也可用normal,bold(厚),bolder(更厚)
+*#font-style:normal,italic(斜體字),oblique(拉斜)。某些不常用的字體，只做了正常體，如果你用italic就沒有效果，但用oblique可以讓沒有斜體字形的文字傾斜！
+*#text-decoration:overline(頂線),line-through(刪除線),underline(底線),none
+*#color:色碼或英文字
+*段，請用 p 練習
+*#margin，及其衍生四邊
+*#text-indent搭配margin-left
+*#line-height
+*#letter-spacing
+*#vertical-align
+*#text-align
+*頁，請用 div 配合 page 樣式值練習
+*#size
+*#margin
+*圖，請用 img 練習(見方盒子模型)
+*表，請用 table,tr,td,th 練習
+*#border-collapse:collapse;
+*#height 針對 tr
+*#width 針對 td th
+*區，請用 div 練習
+*#float
+*#display
+*列點，請用 ul,ol,li 練習
+*#list-style
+*#list-style-image
+*通用
+*#background
+*#background-color
+*#position
+*#樣式值 inherit (繼承)
+*#樣式值 url(路徑)
+====CSS和SVG對照====
+<table class=nicetable>
+<tr><th></th><th>CSS</th><th>SVG</th></tr>
+<tr><th>線</th><th>border</th><th>stroke</th></tr>
+<tr><th>面</th><th>background</th><th>fill</th></tr>
+<tr><th>字體</th><th>中英文</th><th>英文</th></tr>
+</table>
+====自修與進階====
+*[http://css-teach.7happy.com.tw/index.php 簡易教學網站]
+*[http://jendo.org/paragrap_u8.css 示範的CSS]
+*[[HTML/適應word|word適應]]
+<!--
+*etable
+*#[http://jendo.org/files/doc/etable.htm etable屬性與方法摘要]
+*
+-->
+===2017.12.14===
+內容映射
+====前置工作====
+*了解 php 在伺服器文件根目錄之下與個人網站根目錄之下的差別
+*建立個人的 sessPath ，並將權限訂為 777 。其位置在 home 之下與 www 平行，而非在 www 之下。
+*在個人的網站空間 www 之下，建立專屬的常數檔 userConstant.php ，內容為：
+<pre>
+&lt;?php
+ini_set('session.save_path','/volume1/homes/○○○/sessPath');
+include_once '/volume1/web/constant.php';
+?&gt;</pre>
+*了解伺服器的 constant.php 中的「if(!isset($noSession) || !$noSession){@session_start();}」
+*了解伺服器的 constant.php 是準備給全伺服器所有site共用，包含在所有個人網站空間之下的site。
+====四種內容映射的方法====
+#取用 WebContent 資料表：
+#*URL：伺服器ip/~○○○/siteName/index.php/頁名
+#*path：/~○○○/siteName/index.php/頁名
+#*在 siteConstant.php 中用常數 SITE 來代替「~○○○/siteName」
+#取用預設 wiki 站台的頁：
+#*URL：伺服器ip/~○○○/siteName/index.php/wiki站路徑/index.php/頁名?參數串<br/>或 伺服器ip/~○○○/siteName/index.php/wiki站路徑/index.php?title=頁名&參數串
+#*參數串：
+#*#notitle=1，去標題(頁名)，否則會自動以「頁名去斜線」為調中標題，並以 h1 大小顯示。
+#*#cutTag=1，去掉各段的 id 。
+#*#gotop=0，去掉 gotop 圖示。
+#*#p=類別名，將&lt;p&gt;調整為指定的類別。
+#跨 site 引用
+#php
+===2017.12.21===
+#[[網站架設/檔案列表|程式整理]]
+#*外觀相關程式整理
+#*基本功能相關程式整理
+#*類別定義相關程式整理
+#*擴充功能(日後解說)
+#https wiki 映射與 http wiki 映射
+#上傳程式配置
+#類別定義說明
+===2017.12.28===
+*兩種檔案載入的角度：
+*#伺服端檔案載入。
+*#瀏覽器端檔案載入。
+*DB.php，可直接使用方法，免實體化。重要方法如下：
+*#connect($dsn)
+*#queryF($sql,$perpage=0,$start=0)
+*#numRows($result)
+*#getResultValue($result,$recordNo,$col)
+<pre>include_once CLASS_FILE_PATH.'/database/DB.php';
+DB::connect(DSN);
+$result=DB::queryF("select 諸欄 from 某表");
+echo DB::numRows($result)."&lt;br/&gt;\n";
+echo DB::getResultValue($result,某筆,'欄名');</pre>
+*login.php，必須實體化。
+<pre>include_once CLASS_FILE_PATH."/database/login.php";
+$物件=new login;
+$物件->users=array(
+	'丁志仁'=>array('psd'=>'xxxxxxxxx','editable'=>7,'grp'=>array('4')),
+	'柯智懷'=>array('psd'=>'xxxxxxxxx','editable'=>7,'grp'=>array('4')),
+);
+$物件->logon();
+if(isset($物件->checkin) && $物件->checkin==1){
+…
+}else{…}</pre>
+<pre>$物件->loginTable=array('tableName'=>'認證資料表','psd'=>'密碼欄','name'=>'帳號欄','grp'=>'群組欄','canWorkGrp'=>'諸群組');
+/* 諸群組以「;」相間 */</pre>
+*繪圖：
+*#poly[點][0]=值&poly[點][1]=字
+*#CLASS/database/drawpie.php：畫派圖。
+*#CLASS/database/drawbar.php：畫長條圖。
+*#CLASS/database/drawpoly.php：畫折線圖。
+*隨堂作業：
+*#DBdemo.php ：
+*#loginDemo1.php ：
+*#loginDemo1.php ：
+*#三種繪圖連結
+<!--CLASS/database/drawmultipoly.php：畫多重折線圖。-->
+===2018.1.4===
+*[http://jendo.org/files/doc/etable.htm etable基本說明]
+*練習：
+*#分配 account_xxx資料表
+*#建 std.php 加基本五行。
+*#加 css、editable、perpage、colAlias 諸屬性
+*#加 formType 屬性
+*#嵌入自己的 SITE 中。
+*#加入密碼驗證。
+<pre>&lt;?php
+include_once '../userConstant.php';
+include_once CLASS_FILE_PATH."/database/etable.php";
+$ET=new etable;
+$ET->sql[0]="select * from account_xxx";
+$ET->main();
+?&gt;</pre>
+<pre>
+if(!isset($_REQUEST['exec_type'])){echo "&lt;link rel='stylesheet' type='text/css' media='all' href='".CLASS_HTML_PATH."/database/etable.css' /&gt;\n";}</pre>
+<pre>
+$ET->colAlias=array('money'=>'支出','date'=>'日期','summary'=>'摘要','name'=>'支付者');</pre>
+<pre>$ET->formType=array('date'=>array('date'),
+					'account_e'=>array('checkbox',array('費用'=>'費用')),
+					'account_a'=>array('radio',array('現金'=>'現金','存款'=>'存款')),
+					'subaccount'=>array('radio',array('食'=>'食','衣'=>'衣','住'=>'住','行'=>'行','育'=>'育','樂'=>'樂','健'=>'健')),
+					'name'=>array('radio',array('丁志仁'=>'丁志仁','李森茂'=>'李森茂'))
+);</pre>
+*建立 DVD.php
+*#加 colAlias、formType 屬性
+*#加 formType/oneWaySwitch 到 inHome 欄
+<pre>$ET->formType=array(
+					'EN'=>array('radio',array('中'=>'中文','英'=>'英文','中英'=>'中英','中日'=>'中日')),
+					'buyDate'=>array('date'),
+					'inHome'=>array('oneWaySwitch',array(0=>'待還',1=>'已還'))
+);</pre>
+===2018.1.11===
+*再談 DVD.php ：
+*#加 colAlias、formType 屬性
+*#加 formType/oneWaySwitch 到 inHome 欄
+*#加 concat(Name,'-',number) 演算式欄位，並了解演算式欄位無法編輯
+*#加 演算式欄位的代名
+*#加 moreCol(額外欄) 屬性，並解釋自訂函式 f1,f2
+*#加 formValidate 驗證屬性，並解釋正規表示式。須重新載入網址列。
+*#蒐尋與排序
+*#*search：蒐尋
+*#*searchId：蒐尋表單中傳入值必須以「=」蒐索的諸欄
+*#*order：排序
+<pre><?php
+include_once '../userConstant.php';
+include_once "theme.php";
+if(!isset($_REQUEST['exec_type'])){echo $html1;}
+include_once CLASS_FILE_PATH."/database/etable.php";
+$ET = new etable;
+$ET->sql[0]="select concat(Name,'-',number) 片名數量,album,EN,buyDate,inHome from DVD";
+$ET->editable=7;
+$ET->formType=array(
+					'EN'=>array('radio',array('中'=>'中文','英'=>'英文','中英'=>'中英','中日'=>'中日')),
+					'buyDate'=>array('date'),
+					'inHome'=>array('oneWaySwitch',array(0=>'待還',1=>'已還'))
+);
+$ET->formValidate=array('Name'=>array('.+','請填片名！'));
+$ET->perpage=12;
+$ET->colAlias=array('uid'=>'擁有者','Name'=>'片名','album'=>'套片','number'=>'數量','EN'=>'字幕','buyDate'=>'購買日期','inHome'=>'是否在家');
+$ET->editables=array('ins'=>array('DVD'),'edit'=>array('DVD'),'erase'=>array('DVD'));
+$ET->tran=1;
+$ET->moreCol=array(array(0,'本頁','f1'),array(1,'序','f2'));
+$ET->dispType='disp_table';
+$ET->search=array('Name','EN');
+$ET->main();
+if(!isset($_REQUEST['exec_type'])){echo $html2;}
+function f1($i,$j,$k){return $i;}
+function f2($i,$j,$k){return $j;}
+?></pre>
+*回到 std.php
+*#加 驗證屬性 到 summary、money 兩欄
+*#[http://6years.jendo.org/~丁志仁/ROC/記帳選單.txt 連動選單]
+*#*同學取回連動兩陣列
+*#*加 formType/select2,select22 到 subaccount,subaccountItem 兩欄<br/><div style='background-color:#f9f9f9;border:1px solid #ddd;'>'subaccount'=>array('select2',$category,'subaccountItem',$categoryItem,1),<br/>'subaccountItem'=>array('select22',array(0=>'===請選擇===')),</div>
+*#[http://6years.jendo.org/~丁志仁/ROC/etable繪圖.txt 繪圖]
+===2018.1.18===
+響應式網頁設計(Responsive Web Design)簡稱RWD
+*RWD.html 示範
+<pre>&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+	&lt;link rel='stylesheet' type='text/css' media='all' href='screen.css' /&gt;
+&lt;/head&gt;
+&lt;body&gt;
+&lt;a href='#' class='CardLink CardLink_H'&gt;Heart&lt;/a&gt;
+&lt;a href='#' class='CardLink CardLink_C'&gt;Club&lt;/a&gt;
+&lt;a href='#' class='CardLink CardLink_S'&gt;Shahe&lt;/a&gt;
+&lt;a href='#' class='CardLink CardLink_D'&gt;Diamon&lt;/a&gt;
+&lt;/body&gt;
+&lt;/html&gt;</pre>
+*screen.css
+<pre>.CardLink {
+	display:block;
+	color:#666;
+	text-shadow:0 2px #efefef;
+	text-decoration:none;
+	height:2.75 rem;
+	line-height:2.75 rem;
+	border-bottom:1px solid #bbb;
+	position:relative;
+}
+@media (orientation:portrait) {
+	.CardLink {
+		padding-left:1.8 rem;
+		font-size:1.6 rem;
+		color:green;
+	}
+}
+.CardLink:before {
+	display:none;
+	position:absolute;
+	top:50%;
+	transform:translateY(-50%);
+	left:0;
+}</pre>
+*可以選擇樣式的地方：
+*#link 標籤的 media 屬性，可選擇不同的 css 。
+*#css 內部
+*可以選擇的條件：
+*#orientation:直向或橫向，如portrait
+*#width:視區寬度
+*#height:視區高度
+*#device-width:螢幕寬度
+*#device-height:螢幕高度
+*#aspect-ratio:視區寬高比，如16/9
+*#device-aspect-ratio:螢幕寬高比
+*#color:每個色點的位元數，如 16
+*#color-index:色彩查找表條目數
+*#monochrom:單色影格緩衝區中每點多少位元，如2
+*#resolution:解析度，如 300 dpi
+*#scan:漸進式或交錯式
+*#grid:網格或點陣裝置
+*#min-：最小
+*#max-：最大

border-style:solid;	border-style:dotted;	border-style:dashed;
border-style:double;	border-style:outset;	border-style:groove;
border-style:ridge;	border-style:inset;	border-style:none;