網頁程式撰寫/2017
出自六年制學程
目錄
概述
一、課程目標
培養會使用網頁與伺服器做事的人,即結合網際網路前後端的技術,達成以下目的:
- 與使用者溝通;
- 管理資料、運用資料。
二、選修說明
- 修課同學:柯智懷、劉恩佑、盧星瑜、王秋梅、黃柏實(子)、陳洹霈(母請假)、谌卫军(遠距學習)、何蕙如(未到)、陳建宇(未到)、林佳敏(未到)、蘇柳村(未到)、紀詠恩(未到)
- 地點:新埔國中信義樓 517
- 時間:週四早上 9:15~12:00
- 費用:無
- 選課優先順位:對資訊應用實作有濃厚興趣,願意參與「全民科學平台」營運者優先
- 教師:丁志仁
- 助教:游士賢
- 上課規範:學員須自行攜帶筆電上課,備妥課本。上課注意聽,作業按時交,考試認真準備。
- 成績兼採筆試及實作評量,通過者得 3 學分
三、課程內容組成
(一)牽涉的技術
- 前端(clint):HTML4
- DOM
- CSS
- javascript
- jQuery
- SVG
- HTML5
- 後端(SERVER)
- PHP
- 物件使用
- MySQL
- PHP
- 溝通前後端
- 叫出新頁
- ajax
(二)使用的課本
使用《PHP,MySQL,AJAX,網頁設計範例教本》為參考書,旗標出版,學員請自備,向圖書館借用也行。
(三)參考講義
各次上課內容
2017.9.7
- 處理何蕙如在跨校選修平台上建立兩個帳號的問題
- 請士賢、智懷儘速為何蕙如、陳建宇、林佳敏、劉恩佑在筆電上建立 filezilla 、 EmEditor 及其關連。
- 說明課程內容
- 建立每位同學的修課資料夾:
- 後台:個人資料夾/www/php,php資料夾的所有者必須是這位同學,php資料夾中的php程式所有者也必須是這位同學。否則會因缺乏權限而導致伺服器內部錯誤。
- 前台:6years.jendo.org/~○○○/php
- 檢查瀏覽器
- 檢查文字編輯器
- 檢查上下傳工具
- 檢查每個人的筆記頁
- 建立應答程式對
- form.php:負責以表單跟使用者互動;並設 action 為 r.php。
- 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
- 第一次到課的同學:
- 檢查筆記頁有沒有建好?
- 檢查 filezilla 有沒有連結到文字編輯器?
- 檢查 filezilla 有沒有這兩個連線:「DS216(共用)」、「DS216(自己)」
- 檢查有沒有在 「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'>
- HTML5文件類型宣告:
- 直接看第三章評量。
- 說明範例程式。
2017.9.21
2017.9.28
- 第五章
- 敘述區塊:
- 在某些條件下才執行的敘述集合,結構為「條件{諸敘述}」
- 「}」之後不再加「;」
- 三元算符,可以在同一敘述中完成二選一條件判斷。
- 將 Ch5_2_5.php(三元運算?:)改成用一行表達。
- 比較新寫法的優點。
- 將 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
- javascript驗證
- 以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; } } ?>
- 工作程式的一般思維流程:
- 載入常數、變數、函式、類別(初始示範程式省略)
- 前置處理
- 流程變數的判讀
- 讀取資料
- 字串好儲存,陣列好處理
- 造共用的 html 碼長字串
- 其中 javascript 是重點
- 將資料生成為適當的 html 碼
- 送出顯示
- 有些是與使用者互動的介面
- 含使用者回應不符期待時的指示
- 歸還資料庫連結的掛號牌
- 專案實作:
- 需求分析
- 關聯式資料設計
- 適當欄位預設值的設置,可以替代 php 程式的設計
- 規畫流程變數
- 分鏡:需要哪些工作程式
- 工作程式是可以適度合併的
- 工作程式減少,程式結構變大,流程變數的動作變複雜
- 這一點是導致相同功能程式,其寫法差異極大的主因
- 使用 framework (框架工具)會使得工作程式的可讀性大增
2017.11.2
- 解說類別的設計與物件的使用
- 為什麼類別與物件內的變數與函式要叫做「屬性」和「方法」
- 實體化
- 解說用 javascrip 驗證使用者輸入資料
2017.11.9
- nameList1.php
- 合併個人諸 mail,使人名跨列
- 加入編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; } } ?>
- 摘要說明:
- 完全不用變動:「makeForm 類別定義」、「javascript輸入驗證程式」
- 擴充前置處理程式,由一種表單擴充到四種表單:「增一人」、「編一人」、「增一mail」、「編一mail」四種表單,和「刪一人」、「刪一mail」等兩種連結,以及相應的六種資料表前置處理。
- 新增「insMailForm($wid)」、「editMailForm($eid)」、「insPersonForm()」三個表單生成函式,並微調「editForm($wid,$eid)」函式。
- 修改撈資料表的 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.姓名!=''」 - 修改主要顯示函式「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
- 新增 div(id='show'),供伺服器端回應輸出
- 新增 form(id='ajaxTest'),走 ajax 通道,送資料給 response.php
- 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; } } ?>
會議資料處理的資料結構示例
- 會議
- 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
- 摘要說明:
- 將整個程式分的主流程成「前置處理」與「第一次載入」兩大部分
- 主流程之前:連結資料庫、設定表格的標題列
- 主流程之後:繳還資料庫的掛號牌
- 最後放 php 諸類別及諸函式的定義
- 第一次載入:
- 形成 javascript 字串,內含「表單驗證」和「ajax函式群」
- 形成秀出 ajax 回應區域,預設內裝 nicetable 。
- 前置處理:
- 諸「流程變數」條件區塊中,所有回應通道改換成 POST 通道。
- 所有前置處理的最後均回應 nicetable 。
- 輸入驗證將 chkForm(),chkNameForm(),chkMailForm() 三者整合成 chkFormList() ,驗證完走 sendFormData 函式。
- makeForm 類別定義:
- checkWhich 屬性,預設為 chkFormList() 。
- form 標籤取消換頁指示,增加 id 。
- submit 按鈕改 button 按鈕,並送往 chkFormList() 。
- 四個表單製造函式:
- 取消 checkWhich 屬性的指定。
- 函式 editForm 改成只編人,不編 email 。
- 新增函式 ajaxLink(參數,按鈕提示) ,處理所有連結。
- 函式 nicetable 修改:增一人,人的編、刪連結,email 的增、編、刪連結,改成 ajaxLink() 。
- 將整個程式分的主流程成「前置處理」與「第一次載入」兩大部分