檢視網頁程式撰寫/2017 的原始碼

[[分類:網頁程式撰寫]]
==概述==
===一、課程目標===
培養會使用網頁與伺服器做事的人，即結合網際網路前後端的技術，達成以下目的：
#與使用者溝通；
#管理資料、運用資料。
===二、選修說明===
*修課同學：柯智懷、劉恩佑、盧星瑜、王秋梅、黃柏實(子)、陳洹霈(母請假)、谌卫军(遠距學習)、何蕙如(未到)、陳建宇(未到)、林佳敏(未到)、蘇柳村(未到)、紀詠恩(未到)
*地點：新埔國中信義樓 517
*時間：週四早上 9:15~12:00
*費用：無
*選課優先順位：對資訊應用實作有濃厚興趣，願意參與「全民科學平台」營運者優先
*教師：丁志仁
*助教：游士賢
*上課規範：學員須自行攜帶筆電上課，備妥課本。上課注意聽，作業按時交，考試認真準備。
*成績兼採筆試及實作評量，通過者得 3 學分

===三、課程內容組成===
====(一)牽涉的技術====
*前端(clint)：HTML4
*#DOM
*#CSS
*#javascript
*#*jQuery
*#SVG
*#HTML5
*後端(SERVER)
*#PHP
*#*物件使用
*#MySQL
*溝通前後端
*#叫出新頁
*#ajax
====(二)使用的課本====
使用《PHP,MySQL,AJAX,網頁設計範例教本》為參考書，旗標出版，學員請自備，向圖書館借用也行。
====(三)參考講義====
*HTML
*#[http://jendo.org/files/doc/Demo 練習]
*#[[分類:HTML]]講義
*[http://jendo.org/files/doc/http.html HTTP]
*[http://jendo.org/files/doc/php.html PHP]
*[http://jendo.org/files/doc/MySQL.html MySQL]
*[http://jendo.org/files/doc/ajax.html AJAX]

==各次上課內容==
===2017.9.7===
*處理何蕙如在跨校選修平台上建立兩個帳號的問題
*請士賢、智懷儘速為何蕙如、陳建宇、林佳敏、劉恩佑在筆電上建立 filezilla 、 EmEditor 及其關連。 
*說明課程內容
*建立每位同學的修課資料夾：
*#後台：個人資料夾/www/php，php資料夾的所有者必須是這位同學，php資料夾中的php程式所有者也必須是這位同學。否則會因缺乏權限而導致伺服器內部錯誤。
*#前台：6years.jendo.org/~○○○/php
*檢查瀏覽器
*檢查文字編輯器
*檢查上下傳工具
*檢查每個人的筆記頁
*建立應答程式對
*#form.php：負責以表單跟使用者互動；並設 action 為 r.php。
*#r.php：負責接收表單的資料，存入資料表。
*form.php的原始碼：
<pre>&lt;meta http-equiv='content-type' content='text/html;charset=UTF-8' /&gt;
&lt;form action='r.php'&gt;
姓名：&lt;input type='text' name='姓名' value='丁志仁' /&gt;&lt;br/&gt;
email：&lt;input type='text' name='email' value='alledu2@gmail.com' /&gt;&lt;br/&gt;
電話：&lt;input type='text' name='phone' value='0987466665' /&gt;&lt;br/&gt;
&lt;input type='submit' value='送出' /&gt;
&lt;/form&gt;</pre>
*r.php
<pre>&lt;?php
 $connect=mysql_connect('localhost','assistant','××××××××');
 mysql_select_db('助理們');
 mysql_query("insert into web set 姓名='".$_REQUEST['姓名']."',phone='".$_REQUEST['phone']."'");
 mysql_close($connect);
?&gt;</pre>
===2017.9.14===
*第一次到課的同學：
*#檢查筆記頁有沒有建好？
*#檢查 filezilla 有沒有連結到文字編輯器？
*#檢查 filezilla 有沒有這兩個連線：「DS216(共用)」、「DS216(自己)」
*#檢查有沒有在 「home/www」之下建立 php 資料夾，放練習程式。
*去共用的 home/www 中，下載回來「網頁程式撰寫」程「HTMLeBook」兩個資料夾，放在自己不會忘掉的地方。
*今天的進度是課本第三章HTML概述
*[[HTML#文件類型宣告與HTML版本|宣告HTML版本]]
*#HTML5文件類型宣告：<pre><!DOCTYPE html></pre>
*#HTML4文件類型宣告：<pre><!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'></pre>
*直接看第三章評量。
*說明範例程式。
===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,$eid){
	$result=mysql_query("select a.姓名,a.phone,b.email from web a,webMail b where a.wid=b.wid && a.wid=".$wid." && b.eid=".$eid);
	$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']);
	$xx-&gt;elements[]=array('電話：','text','phone',$row['phone']);
	$xx-&gt;elements[]=array('','hidden','wid',$wid);
	$xx-&gt;elements[]=array('','hidden','eid',$eid);
	return $xx-&gt;makeFormStr();
}
function nicetable($result,$colName){
	$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;&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;";
	$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['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;";
			$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>
*摘要說明：
*#完全不用變動：「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;
123456
&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,$eid){
	$result=mysql_query("select a.姓名,a.phone,b.email from web a,webMail b where a.wid=b.wid && a.wid=".$wid." && b.eid=".$eid);
	$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']);
	$xx-&gt;elements[]=array('電話：','text','phone',$row['phone']);
	$xx-&gt;elements[]=array('','hidden','wid',$wid);
	$xx-&gt;elements[]=array('','hidden','eid',$eid);
	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;";
	$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;";
	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