檢視 網頁程式撰寫/2017 的原始碼
←
網頁程式撰寫/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><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></pre> *r.php <pre><?php $connect=mysql_connect('localhost','assistant','××××××××'); mysql_select_db('助理們'); mysql_query("insert into web set 姓名='".$_REQUEST['姓名']."',phone='".$_REQUEST['phone']."'"); mysql_close($connect); ?></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> <?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; } } ?></pre> *工作程式的一般思維流程： *#載入常數、變數、函式、類別(初始示範程式省略) *#前置處理 *#*流程變數的判讀 *#讀取資料 *#*字串好儲存，陣列好處理 *#造共用的 html 碼長字串 *#*其中 javascript 是重點 *#將資料生成為適當的 html 碼 *#送出顯示 *#*有些是與使用者互動的介面 *#*含使用者回應不符期待時的指示 *#歸還資料庫連結的掛號牌 *專案實作： *#需求分析 *#關聯式資料設計 *#*適當欄位預設值的設置，可以替代 php 程式的設計 *#規畫流程變數 *#分鏡：需要哪些工作程式 *#*工作程式是可以適度合併的 *#*工作程式減少，程式結構變大，流程變數的動作變複雜 *#*這一點是導致相同功能程式，其寫法差異極大的主因 *#*使用 framework (框架工具)會使得工作程式的可讀性大增 ===2017.11.2=== *解說類別的設計與物件的使用 *#為什麼類別與物件內的變數與函式要叫做「屬性」和「方法」 *#實體化 *解說用 javascrip 驗證使用者輸入資料 ===2017.11.9=== *nameList1.php *#合併個人諸 mail，使人名跨列 *#加入編mail <pre><?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; } } ?></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.姓名!=''」 *#修改主要顯示函式「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><?php echo "catch:e0=".$_POST['e0']; ?></pre> *nameList2.php *#新增 div(id='show')，供伺服器端回應輸出 *#新增 form(id='ajaxTest')，走 ajax 通道，送資料給 response.php *#javascript 段落中增加： *#*var ahr *#*createXMLHttpRequestObject *#*postData *#*sendFormData *#*encode <pre><?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; } } ?></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><?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; } } ?></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)==== <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/W3C_box_model.svg/320px-W3C_box_model.svg.png' /> *padding(內距)： *#控制區域如 DIV 、 span 、表格的內部距離(例如文字或圖片與邊框的距離) *#不可以設定負值，這點與 margin 不同。 *#基本語法範例：<p><span style='border:dashed 1pt;padding:5pt;'>padding:上 右 下 左;</span> <span style='border:dashed 1pt;padding:5pt;'>padding:上下 左右;</span> <span style='border:dashed 1pt;padding:5pt;'>padding:上 左右 下;</span> <span style='border:dashed 1pt;padding:5pt;'>padding:四個邊同樣値;</span></p> *#padding:auto;：讓瀏覽器自己去設定 *#padding:%;：讓瀏覽器自己去設定，跟邊界元素有關。 *margin(邊沿)： *#控制一個區域(例如 DIV 或 span)的外邊界距離，俗稱外距。 *#可以設定負値，會使得 margin 設定為負值的元素「疊」到另一個元素上(不過還是要視另一個元素所設定的邊界距離而定)。例如，我們將 A 區塊的 margin-bottom 設為 0 ， B 區塊的 margin-top 設為 -10px ，那麼 B 區塊的文字就會疊到 A 區塊的文字上。 *#基本語法範例：<p><span style='border:dashed 1pt;padding:5pt;'>margin:上 右 下 左;</span> <span style='border:dashed 1pt;padding:5pt;'>margin:上下 左右;</span> <span style='border:dashed 1pt;padding:5pt;'>margin:上 左右 下;</span> <span style='border:dashed 1pt;padding:5pt;'>margin:四個邊同樣値;</span></p> *#margin:auto;：讓瀏覽器自己去設定。 *#margin:%;：讓瀏覽器自己去設定，跟邊界元素有關。 *border(邊框)： *#邊框粗細：用長度表達 *#邊框顏色：可以使用色標準色碼或顏色的英文名稱表達 *#邊框樣式：可以設定實線(solid)、虛線(dashed)、雙實線(double)、連續點(dotted)等：<table style='border:none;'><tr><td style='border:none;'><div style='border:1pt #000 solid;padding:10pt;'>border-style:solid;</div></td><td style='border:none;'><div style='border:1pt #000 dotted;padding:10pt;'>border-style:dotted;</div></td><td style='border:none;'><div style='border:1pt #000 dashed;padding:10pt;'>border-style:dashed;</div></td></tr><tr><td style='border:none;'><div style='border:3pt #000 double;padding:10pt;'>border-style:double;</div></td><td style='border:none;'><div style='border:5pt #000 outset;padding:10pt;'>border-style:outset;</div></td><td style='border:none;'><div style='border:5pt #000 groove;padding:10pt;'>border-style:groove;</div></td></tr><tr><td style='border:none;'><div style='border:5pt #000 ridge;padding:10pt;'>border-style:ridge;</div></td><td style='border:none;'><div style='border:5pt #000 inset;padding:10pt;'>border-style:inset;</div></td><td style='border:none;'><div style='border:5pt #000 none;padding:10pt;'>border-style:none;</div></td></tr></table> ====七大類物件搭配的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> <?php ini_set('session.save_path','/volume1/homes/○○○/sessPath'); include_once '/volume1/web/constant.php'; ?></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=類別名，將<p>調整為指定的類別。 #跨 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)."<br/>\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><?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(); ?></pre> <pre> if(!isset($_REQUEST['exec_type'])){echo "<link rel='stylesheet' type='text/css' media='all' href='".CLASS_HTML_PATH."/database/etable.css' />\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><!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></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-：最大
此頁面包含以下模板:
Box Model
（
檢視原始碼
）
返回到
網頁程式撰寫/2017
。
導航
個人工具
登入
名字空間
頁面
討論
變換
檢視
閱讀
檢視原始碼
檢視歷史
動作
搜尋
導覽
首頁
近期變動
隨機頁面
使用說明
工具箱
連入頁面
相關頁面修訂記錄
特殊頁面
頁面資訊
