網頁程式撰寫/2017

概述

一、課程目標

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

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

二、選修說明

修課同學：柯智懷、劉恩佑、盧星瑜、王秋梅、黃柏實(子)、陳洹霈(母請假)、谌卫军(遠距學習)、何蕙如(未到)、陳建宇(未到)、林佳敏(未到)、蘇柳村(未到)、紀詠恩(未到)
地點：新埔國中信義樓 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,$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->elements[]=array('姓名：','text','姓名',$row['姓名']);
	$xx->elements[]=array('email：','text','email',$row['email']);
	$xx->elements[]=array('電話：','text','phone',$row['phone']);
	$xx->elements[]=array('','hidden','wid',$wid);
	$xx->elements[]=array('','hidden','eid',$eid);
	return $xx->makeFormStr();
}
function nicetable($result,$colName){
	$i=1;
	$str="<table style='border:1px solid black;border-collapse:collapse;border-top:none;border-left:none;border-right:none;'>";
	$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>";
	$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['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>";
			$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. 完全不用變動：「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,$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->elements[]=array('姓名：','text','姓名',$row['姓名']);
	$xx->elements[]=array('email：','text','email',$row['email']);
	$xx->elements[]=array('電話：','text','phone',$row['phone']);
	$xx->elements[]=array('','hidden','wid',$wid);
	$xx->elements[]=array('','hidden','eid',$eid);
	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;'>";
	$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>";
	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 屬性的指定。
  - 函式 editForm 改成只編人，不編 email 。
7. 新增函式 ajaxLink(參數,按鈕提示) ，處理所有連結。
  - 本函式及接手的 javascript postData 函式中都沒有去處理 urlencode ，但 postData 卻對伺服器宣稱後送資料是 urlencoded 。
  - 後送變數名與變數值不要出現： %、&、+、"、' 等五個字元。
8. 函式 nicetable 修改：增一人，人的編、刪連結，email 的增、編、刪連結，改成 ajaxLink() 。
同學產出：
1. 丁志仁
2. 游士賢
3. 王秋梅
4. 劉恩佑
5. 盧星瑜
6. 柯智懷

網頁程式撰寫/2017

目錄

概述

一、課程目標

二、選修說明

三、課程內容組成

(一)牽涉的技術

(二)使用的課本

(三)參考講義

各次上課內容

2017.9.7

2017.9.14

2017.9.21

2017.9.28

2017.10.5

2017.10.12

2017.10.19

2017.10.26

2017.11.2

2017.11.9

2017.11.16

2017.11.23

導航

個人工具

名字空間

變換

檢視

動作

搜尋

導覽

工具箱