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

[[分類:選修與社團]]
==槪述==
===課程目標===
結合網際網路前後端的技術，達成以下目的：
#與使用者溝通；
#管理資料、運用資料。
===對學習者的叮嚀===
學到掌握與運用能力，至少要一年。一定要用功，半途而廢，等於沒有學，不如一開始就不要來修課。作業要做，自己也要找書來看，做自己的筆記。

名詞、觀念、邏輯要徹底弄清楚，似懂非懂程式就會錯，只要錯一個標點，程式就不會按預期規畫動作，可能查三天三夜也查不出來。
===牽涉的技術===
*前端(clint)：HTML4
*#DOM
*#CSS
*#javascript
*#*jQuery
*#SVG
*#HTML5
*後端(SERVER)
*#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]

==前端與後端溝通==
*[[HTML/表單]]
*[http://jendo.org/files/doc/php.html php講義]
*伺服器端
*#form.html
*#r.php
*前端與後端溝通有兩個通道
*#GET:由網址列就可傳送變數到後端
*#POST:要從表單傳送變數
*#REQUEST:表單、網址列皆可傳送
*在表單加入屬性action
*#<form action='檔案的位置'>
*#在上面form.html的範例裡，action='r.php'，r.php就是表單資料送出後會傳到的地方。這就是用php撰寫。
*PHP
*#開頭結尾:<?php........?>
*#echo回應出表單資料，分號;為執行。
*#echo '1:'.$_REQUEST['name1'].'<br/>'; 回應出前台表單name1的變數
*#echo '2:'.$_POST['name1'].'<br/>'; 由表單傳送變數(POST)，回應出前台表單name1的變數
*#echo '3:'.$_GET['name1'].'<br/>'; 由網址列傳送變數(GET)，回應出前台表單name1的變數
*PHP符號
*# + 值相加
*# - 值相減
*# * 值相乘
*# / 值相除
*# % 值相除後的餘數
*# . 兩串文字結合
*MySQL
*#[http://jendo.org/files/doc/MySQL.html MySQL講義]
*#MySQL是一個資料庫系統，裡面包含了數個資料表。
*#基本指令:
*#* ; 意為執行
*#* ` 是重音符號，Grave accent。若是那個單字在MySQL辨識碼裡面有，就必須要用 ` 括起來以說明此字是我們編輯的內容。
*#*insert into 表格名 values ('值1','值2',…);  照著欄序加一筆資料
*#*insert into 表格名 values ('值1','值2',…),('值1','值2',…),('值1','值2',…)…;  照著欄序加很多筆的資料
*#*insert into 表格名 (欄名1,欄名2,…) values ('值1','值2',…);  只對指定的欄加一筆資料
*#*insert into 表格名 set 欄名1='值1',欄名2='值2',…;  只對指定的欄加一筆資料
*#*select 欄名1,欄名2,… from 表格名;  找出指定欄位的全部資料
*#*select * from 表格名;  找出此表格的全部欄位全部資料
*#*select * from 表格名 where 欄位名稱='欄位內容';  找出某欄位，合條件的筆數。
*#*select * from 表格名 where 欄位名稱 like '09%';  找出某欄位，內容有09的資料。''%''指09後面任何內容
*#*update 表格名 set 欄名=欄值,欄名=欄值… [where 條件][limit 範圍];  合條件或合範圍的所有筆數，指定欄都換成指定欄值
*#*delete from 表格名 where 條件 limit 幾筆;  刪除合條件合範圍的資料

==各次上課內容==
===2016.2.1===
*說明課程內容
*建立每位同學的修課資料夾：
*#後台：個人資料夾/www/php，php資料夾的所有者必須是這位同學，php資料夾中的php程式所有者也必須是這位同學。否則會因缺乏權限而導致伺服器內部錯誤。
*#前台：jendo.org/~○○○/php
*檢查瀏覽器
*檢查文字編輯器
*檢查上下傳工具
*檢查每個人的筆記頁
*建立應答程式對
*#form.php：負責以表單跟使用者互動；並設 action 為 r.php。
*#r.php：負責接收表單的資料，存入資料表。
===2016.3.21===
*綜合演練
*#電腦教室四部電腦可用
*#去 192.168.3.3
*#adminer-4.2.2-mysql.php
*#帳號密碼問老師
*#去同學們資料庫
*#建自己的資料表：英文姓名Name和英文姓名Mail，前者要有id欄、姓名欄，後者要有id欄、email欄
*#以 filezilla 登入 192.168.3.3 ，用自己的姓名和帳號
*#在自己的 www 之下建 php 資料夾
*#建立 form.php 輸入資料，要輸入至少三個人的資料
*#建立 nameList1.php 和 nameList2.php 將兩個資料表「關連起來」，前者用等連結，後者用左側連結
*#問老師回家之後要怎麼用 filezilla 連，無法再用 192.168.3.3
*準備考試：
*#第二章
*#第四章
*#第五章
*#第七章
*#第十章
*#第十一章
*#第十二章
===2016.4.18===
*在nameList.php 增加編連結

===2016.4.25===
*增加「加一人」連結
*在每個 email 之前增加「+」用以對某個人再加一筆 email ：
*#在 nicetable() 函式增加「+」連結，type變數值設為 insMailForm ，並從 GET 通道再送回來。
*#造一個 insMailForm($wid) 的函式，負責傳回插入 mail 的表單
*#前置處理再增加一個 elseif ，處理當按「+」連結時，呼叫 insMailForm($wid) 函式，提供使用者插入 mail 之表單
*#前置處理再增加一個 elseif ，處理當按「加Mail」按鈕時，將表單後送資料插入 webMail 資料表
===2016.9.2===
*[http://jendo.org/files/doc/ajax.html 以 PHP 為基礎說明 javascript 基本語法(壹)]
*實作姓名驗證
*實作表單 Email 驗證

===2016.9.9===
*解釋類別與物件
*實作表單生成類別

===2016.9.23===
*解釋並實作 ajax 相關函式
===2016.9.30===
*統一化 ajax 函式
*#[http://jendo.org/~丁志仁/php/table.txt 更改函式 nicetable ，並進行相應的調整]
*#*前置處理增加「編 mail 表單」及編畢。
*#*增加函式 editMailForm
*#*修改撈取資料表的欄位
*#[http://jendo.org/~丁志仁/php/js.txt 增加 javascript 中 ajax 的相關函式]
*#*宣告變數 ahr (Asynchronous Http Request,非同步 HTTP 請求)
*#*函式 createXMLHttpRequestObject 由類別產生新物件
*#*函式 postData 控制後送與回應流程
*#*函式 sendFormData 從指定表單擷取資料並後送，hidden型變數不編碼
*#*函式 encode 進行特字元的 URL 編碼，給 sendFormData 使用
*#[http://jendo.org/~丁志仁/php/showAndForm.txt 增加測試表單與測試div]
*#[http://jendo.org/~丁志仁/php/response.txt 配合測試的伺服器回應程式原始碼]
*再解釋 ajax 相關函式
*#[http://jendo.org/files/doc/ajax.html ajax的方法與屬性(貳)]
*#詳細解說 postData 函式
<pre>function postData(dataSource,parm,divID){		// 對 dataSource 後送POST請求，帶 parm 參數，回應送divID
	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.');}
}</pre>

===2016.10.7===
*先把前置處理分成「有type的」「沒type的」兩大段。後者才載入 javascript 。
*去掉測試的 form。
*綜合 姓名,email 驗證為函式 chkFormList 程式碼如下：
<pre>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);}
}</pre>
*刪掉原來 isEmail 以外的驗證程式。
*保留 javascrip 中的 ajax 段落。
*將撈資料表和定義欄位名稱($colName=…)兩行分開，欄位名稱定義放到前置處理之前。
*在「沒type的」前置處理中， javascript 段落之後接 show div ，div 中撈資料表並丟給 nicetable 生成表格。
*#在「有type的」前置處理，最後也撈資料表並丟給 nicetable 生成表格，且輸出。
*所有表單中的 checkWhich 屬性都刪掉。
*修改 makeForm 類別：
*#屬性 $checkWhich 預設為 chkFormList()
*#改 form 標籤，增加 id='表單'，刪掉 action 屬性和 method 屬性。
*#改 submit 為 button ，onClick 改到 \"chkFormList('表單','".$_SERVER['PHP_SELF']."','show')\"
*editForm 中加「$xx->submitValue='確定';」
*新增 ajax 連結的產生器，程式碼為：
<pre>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;
}</pre>
*改 nicetable ，所有的連結改成 ".ajaxLink(array('type'=>'相應的值'),'提示字')."
*前置處理中 $_GET 和 $_REQUEST 都改成 $_POST
*一些優化的處理：
*#editForm 中撈資料改為「select 姓名,phone from web where wid=".$wid」，不需要管 webMail
*#nicetable 中加「\n」讓原始碼整齊。
*#makeForm 中判斷遇到 hidden 輸入框不跳行。