網頁程式撰寫

出自六年制學程
跳轉到: 導覽搜尋

槪述

課程目標

結合網際網路前後端的技術,達成以下目的:

  1. 與使用者溝通;
  2. 管理資料、運用資料。

對學習者的叮嚀

學到掌握與運用能力,至少要一年。一定要用功,半途而廢,等於沒有學,不如一開始就不要來修課。作業要做,自己也要找書來看,做自己的筆記。

名詞、觀念、邏輯要徹底弄清楚,似懂非懂程式就會錯,只要錯一個標點,程式就不會按預期規畫動作,可能查三天三夜也查不出來。

牽涉的技術

  • 前端(clint):HTML4
    1. DOM
    2. CSS
    3. javascript
      • jQuery
    4. SVG
    5. HTML5
  • 後端(SERVER)
    1. PHP
      • 物件使用
    2. MySQL
  • 溝通前後端
    1. 叫出新頁
    2. ajax

參考講義

前端與後端溝通

  • HTML/表單
  • php講義
  • 伺服器端
    1. form.html
    2. r.php
  • 前端與後端溝通有兩個通道
    1. GET:由網址列就可傳送變數到後端
    2. POST:要從表單傳送變數
    3. REQUEST:表單、網址列皆可傳送
  • 在表單加入屬性action
    1. <form action='檔案的位置'>
    2. 在上面form.html的範例裡,action='r.php',r.php就是表單資料送出後會傳到的地方。這就是用php撰寫。
  • PHP
    1. 開頭結尾:<?php........?>
    2. echo回應出表單資料,分號;為執行。
    3. echo '1:'.$_REQUEST['name1'].'
      '; 回應出前台表單name1的變數
    4. echo '2:'.$_POST['name1'].'
      '; 由表單傳送變數(POST),回應出前台表單name1的變數
    5. echo '3:'.$_GET['name1'].'
      '; 由網址列傳送變數(GET),回應出前台表單name1的變數
  • PHP符號
    1. + 值相加
    2. - 值相減
    3. * 值相乘
    4. / 值相除
    5.  % 值相除後的餘數
    6. . 兩串文字結合
  • MySQL
    1. MySQL講義
    2. MySQL是一個資料庫系統,裡面包含了數個資料表。
    3. 基本指令:
      •  ; 意為執行
      • ` 是重音符號,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

  • 說明課程內容
  • 建立每位同學的修課資料夾:
    1. 後台:個人資料夾/www/php,php資料夾的所有者必須是這位同學,php資料夾中的php程式所有者也必須是這位同學。否則會因缺乏權限而導致伺服器內部錯誤。
    2. 前台:jendo.org/~○○○/php
  • 檢查瀏覽器
  • 檢查文字編輯器
  • 檢查上下傳工具
  • 檢查每個人的筆記頁
  • 建立應答程式對
    1. form.php:負責以表單跟使用者互動;並設 action 為 r.php。
    2. r.php:負責接收表單的資料,存入資料表。

2016.3.21

  • 綜合演練
    1. 電腦教室四部電腦可用
    2. 去 192.168.3.3
    3. adminer-4.2.2-mysql.php
    4. 帳號密碼問老師
    5. 去同學們資料庫
    6. 建自己的資料表:英文姓名Name和英文姓名Mail,前者要有id欄、姓名欄,後者要有id欄、email欄
    7. 以 filezilla 登入 192.168.3.3 ,用自己的姓名和帳號
    8. 在自己的 www 之下建 php 資料夾
    9. 建立 form.php 輸入資料,要輸入至少三個人的資料
    10. 建立 nameList1.php 和 nameList2.php 將兩個資料表「關連起來」,前者用等連結,後者用左側連結
    11. 問老師回家之後要怎麼用 filezilla 連,無法再用 192.168.3.3
  • 準備考試:
    1. 第二章
    2. 第四章
    3. 第五章
    4. 第七章
    5. 第十章
    6. 第十一章
    7. 第十二章

2016.4.18

  • 在nameList.php 增加編連結

2016.4.25

  • 增加「加一人」連結
  • 在每個 email 之前增加「+」用以對某個人再加一筆 email :
    1. 在 nicetable() 函式增加「+」連結,type變數值設為 insMailForm ,並從 GET 通道再送回來。
    2. 造一個 insMailForm($wid) 的函式,負責傳回插入 mail 的表單
    3. 前置處理再增加一個 elseif ,處理當按「+」連結時,呼叫 insMailForm($wid) 函式,提供使用者插入 mail 之表單
    4. 前置處理再增加一個 elseif ,處理當按「加Mail」按鈕時,將表單後送資料插入 webMail 資料表

2016.9.2

2016.9.9

  • 解釋類別與物件
  • 實作表單生成類別
  • 整理程式

2016.9.23

  • 解釋並實作 ajax 相關函式

2016.9.30

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.');}
}

2016.10.7

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

2016.10.14

MVC

  • Model–view–controller 三者分離
  • 基本觀念:
    1. 一個伺服器上有多個網站(SITE),彼此共用基本「類別」
    2. 每個 SITE 有自己的外觀 Theme
    3. 每個 Theme 簡化為 banner 、 導航列 、 ajax 內容顯示區
  • 實作WWEB:
    1. DB類別,無屬性諸方法
      • connect($dsn):利用DSN連結資料庫
      • queryF($sql,$perpage=0,$start=0):送出查詢,傳回結果
      • numRows($result):傳回查詢結果的筆數
      • getResultValue($result,$recordNo,$col):傳回查詢結果第幾列、第幾欄的值
    2. siteConstant.php
    3. Theme 的模組化
    4. style.css、menu.css
    5. navbar-bg的搭配與使用
    6. banner圖照的去背與嵌入
    7. 畫字
    8. 工作程式
      • Theme的前半
      • Theme的後半

SESSION

  1. @session_start();
  2. $_SESSION 儲值
  3. 在另一個 php 中(翻頁後)檢查 $_SESSION 的值
  4. 一次儲值多次檢查,直到瀏覽器關閉

2016.10.21

在 WWEB 中測試:

  1. sessLogin1.php:認證登入介面
  2. sessLogin2.php:登入正確則啟動 session,並創建約定的 session 變數
  3. sessLogin3.php:其他頁正確登入、登出後,在本頁觀察 session
  4. sessLogout1.php:秀登出按鈕
  5. sessLogout2.php:登出後銷毀約定的 session 變數

2016.10.28

停用COOKIE的網站

  • 建立 SID 觀察列
  • 刪除伺服器上所有 sess
  • 打開瀏覽器的 COOKIE 設定
    1. firefox 在「選項/個人隱私/瀏覽紀錄/使用自訂的設定/顯示 Cookie」
    2. chrome 在「設定/顯示進階設定/隱私權/內容設定/Cookie/所有 Cookie 和網站資料」
  • 先全部移除之前的 Cookie ,再進入 jendo.org/~你自己/WWEB/sessLogin3.php
  • 找到 COOKIE 中變數 PHPSESSID ,刪除它之後,sessionId會變、COOKIE中沒有、SID常數會放「PHPSESSID=新的sessionId xxxx」、SESSION 是會新生一個 sess_xxxx 的變數存放檔。
  • 注意:同一時間,不同的瀏覽器針對相同的網站,會使用不同的 sessionId 和 SESSION 變數存放檔,但相同的瀏覽器、針對相同網站上不同的 php 會使用相同的 sessionId 和 SESSION 變數存放檔。

2016.11.4

  • 完成兩組 session 機制演示
    1. 有開 COOKIE
    2. 沒開 COOKIE
  • 架站測試
    1. 建立並修改 passtest.php
    2. 轉移 nameList.php

參考資料 Mediawiki的session

  • COOKIE設變數
    1. $wgDBname_wiki_session:放 session id
    2. $wgDBname_wiki_UserName:放登入帳號的 url 編碼
    3. $wgDBname_wiki_UserID:放登入帳號的 user_id
    4. $wgDBname_wiki_Token:放登入帳號的 user_token
    5. $wgDBname_wiki_LoggedOut:放登出時時間戳記(秒數)

參考:

  1. 登入
  2. 令牌

adminer的session

  • COOKIE設變數
    1. adminer_permanent:
    2. adminer_version:放 0
    3. adminer_sid:放 session id
    4. adminer_key:放長數字

可用客戶端資訊:

  1. HTTP_HOST:當前請求頭中 Host: 項的內容,如「jendo.org」
  2. HTTP_COOKIE:此 host 上所有有效的COOKIE變數之變數名與變數值,兩組變數間以「;」間開。
  3. HTTP_USER_AGENT:瀏覽器相關資訊,也可用 get_browser() 來取得
  4. REMOTE_ADDR:客戶端的ip
  5. REMOTE_PORT:客戶端的port,會跳來跳去不固定
  6. QUERY_STRING:「?」之後的變數串
  7. REQUEST_URI:請求要訪問的網址,URL編碼,含QUERY_STRING
  8. SCRIPT_NAME:當前腳本檔的網址,URL解碼,不含QUERY_STRING。通常就是REQUEST_URI所指的網址,只是URL解碼。
  9. PHP_SELF:當前腳本的檔名,從文件根目錄算起,通常就是同上的 SCRIPT_NAME 。例如,在網址為 http://example.com/test.php/foo.bar 的腳本中使用 $_SERVER['PHP_SELF'] 將得到 /test.php/foo.bar。
    __FILE__ 常數包含當前腳本檔的完整路徑和檔名。
    從 PHP 4.3.0 版本開始,如果 PHP 以命令行模式運行,這個變數將包含腳本檔名。之前的版本該變數不可用。
  10. SCRIPT_FILENAME:當前執行腳本檔在伺服器檔案系統絕對路徑中的位置、名稱。
    如果在命令行界面(Command Line Interface, CLI)使用相對路徑執行腳本,例如 file.php 或 ../file.php,那麼 $_SERVER['SCRIPT_FILENAME'] 將包含用戶指定的相對路徑。
  11. REQUEST_TIME:請求開始時的時間戳記(秒數)
  12. REQUEST_TIME_FLOAT:請求開始時的時間戳記(秒數,含小數以下4位,到萬分之一秒)

次要資訊:

  1. REQUEST_METHOD:客戶端對伺服器端請求方法;例如,「GET」、「HEAD」、「POST」、「PUT」,請求方法為 HEAD,PHP 腳本將在發送 Header 頭信息之後終止(這意味著在產生任何輸出後,不再有輸出緩衝)。
  2. HTTP_REFERER:該值並不可信。此為引導客戶端到當前頁的前一頁的地址(如果存在),如 http://jendo.org/~%E4%B8%81%E5%BF%97%E4%BB%81/WWEB/sessLogin1.php?xx=yy

2016.11.11

  • www之下增「sessPath」路徑
  • 調 serverConstant.php
<?php
ini_set('session.save_path','/volume1/homes/○○○/www/sessPath');
if(!isset($noSession) || !$noSession){@session_start();}
define('CMS','alone');
define("CLASS_HTML_PATH",'/et/class');
define('CLASS_FILE_PATH','/volume1/web/et/class');
define('DSN',"mysql://assistant:aide@localhost/助理們");
include_once CLASS_FILE_PATH."/wiki/wiki.php";
if(!function_exists('webContent')){include_once $_SERVER['DOCUMENT_ROOT']."/GfWebContent.php";}
?>
  • 調 index.php
<?php
include_once '../serverConstant.php';
include_once "theme.php";
include_once CLASS_FILE_PATH."/database/DB.php";
DB::connect(DSN);
if(!isset($_REQUEST['ajax'])){echo $html1;}
echo webContent(urldecode($_SERVER['REQUEST_URI']));
if(!isset($_REQUEST['ajax'])){echo $html2;}
?>
  • 調 theme.php ,$html1 加
if(isset($moreJavascript) && $moreJavascript){$html1.=$moreJavascript;}
  • nameList.php 更名並下載新的
  • 改 passtest.php 中類別的路徑
  • 加「秦始皇」
  • 調 style.css 加圖照靠右

2016.11.18

  • etable基本說明
  • 練習:
    1. 建 account_xxx資料表
    2. 建 std.php 加基本五行。
    3. 加 css、editable、perpage、colAlias 諸屬性
    4. 加 formType 屬性
    5. 嵌入 WWEB 中。
    6. 加入密碼驗證。

2016.11.25

  • 建立 DVD.php
    1. 加 colAlias、formType 屬性
    2. 加 formType/oneWaySwitch 到 inHome 欄
    3. 加 concat(Name,'-',number) 演算式欄位,並了解演算式欄位無法編輯
    4. 加 演算式欄位的代名
    5. 加 moreCol(額外欄) 屬性,並解釋自訂函式 f1,f2
    6. 加 formValidate 驗證屬性,並解釋正規表示式
  • 回到 std.php
    1. 加 驗證屬性 到 summary、money 兩欄
    2. 同學取回連動兩陣列
    3. 加 formType/select2,select22 到 subaccount,subaccountItem 兩欄

2016.12.2

etable 應介紹內容列表

  • 基本入門應用
    1. 載入常數檔,載入 etable.php 類別定義,new 出新物件,設物件的 sql[0] 屬物,執行物件的 main() 方法。
    2. 加 css、editable、perpage、colAlias 諸屬性
    3. 嵌入 WWEB 中:載入 theme.php ,在未傳入 exec_type 時秀出 $html1 和 $html2
  • formType
    1. (v)select
    2. (v)select2
    3. (v)select22
    4. searchSelect
    5. (v)radio
    6. radioyn
    7. (v)checkbox
    8. (v)date
    9. auto
    10. hidden
    11. (∆)function
    12. password
    13. unix_time
    14. (v)oneWaySwitch
    15. wrap
  • (v)演算式欄與額外欄
  • (v)輸入驗證屬性 formValidate 與正規表示式
  • (v)蒐尋與排序
    1. search:蒐尋
    2. searchId:蒐尋表單中傳入值必須以「=」蒐索的諸欄
    3. order:排序
  • (v)繪圖
  • (v)批次處理
  • (v)顯示型態與頭部控制:
    屬性dispType
    1. disp_table:表格式(預設)
    2. no_thing:只完成物件,不顯示
    3. disp_text:文章式,適合有一或多欄是大量文字時的資料表顯示模式
    4. disp_sentence:文句式,適合如題庫等,可自由設計顯示格式的資料表顯示模式
    5. disp_calendar:月曆式,依年、月顯示該月份星期分布的顯示模式
    屬性dispTypeHead
    1. std_head:標準頭(預設)
    2. no_head:不顯示頭部
    3. calendar_head:提供年、月選單
  • 控制多表的可「插編刪」屬性
  • (∆)檔案上傳與相簿
  • (∆)針對特定登入者,進行看資料、編,刪資料之管控
    1. 看資料用:「$物件->formType=array('長欄名'=>array('function',函式名),…);」管控。
    2. 編,刪資料用:「$物件->banE='函式名';」管控。
  • (∆)是否翻譯
  • 用編碼函式輸入欄值:參考 jj/testBatch.php
  • 一工作程式多物件協作
  • (∆)多國語言

架構改動:

  1. 將 sessPath 移到更深的地方:不在 www 之下而與 www 平行,網際網路無法讀得到
  2. serverConstant.php 的首行改為 「ini_set('session.save_path','/volume1/homes/○○○/sessPath');」

學員操作:

  1. 在 std.php 、 DVD.php 中加入 search 屬性、 searchId 屬性,如:
    • $ET->search=array('Name','En');(在DVD.php中)
    • $ET->search=array('summary','subaccount');(在std.php中)
    • $ET->search=array('money');$ET->searchId=array('money');(在std.php中)
  2. 在 std.php 、 DVD.php 中加入 order 屬性
  3. 到 共用 的 www/示範程式 中下載 etable繪圖.txt ,嵌入 std.php 並抑制原來的 sql[0]。
  4. 練習 std.php 介面中「畫圖」與「關圖」兩按鈕。
  5. 理解$sql陣列中,'stats'(字串索引)元素,為陣列,代表各統計圖形。其各元素含意如下:
    • $sql['stats'][0]['sql'] ,選取兩欄第一欄為值,第二欄為值之註解
    • $sql['stats'][0]['file'] ,drawbar.php畫長條圖,drawpoly.php畫折線圖
    • $sql['stats'][0]['x_word'] ,x軸說明
    • $sql['stats'][0]['y_word'] ,y軸說明
    • $sql['stats'][0]['vu'] ,值之倍率
    • $sql['stats'][0]['x_angle'],值之註解旋轉角度
    • $sql['stats'][0]['xu'] ,x軸每單位幾點
    • $sql['stats'][0]['yu'] ,y軸每單位幾點
  6. 自己設計一個統計圖表
  7. 到 共用 的 www/示範程式 中下載 editCol3.php ,放入自己的 WWEB 中。
  8. 練習兩介面切換。
  9. 了解用POST通道中的 type 變數控制兩介面切換。
  10. 設法將 editCol3.php 嵌入 WWEB 的布景中,想不出來就等老師下週公布答案。

2016.12.9

學員操作:

  • article
    1. 觀察助理們中 article 資料表的結構與內容
    2. 到共用帳號的 www/示範程式 中去下載 article.php 回來
    3. 觀察 article.php 中,dispType='disp_text';,文章式顯示會長什麼樣子。
    4. 觀察 article.php 中 sql[0] 中的 where 條件,當通道中送來 aid 變數時找出資料表中 aid 指定值的那一篇文章,也就是只顯示指定的單篇文章;當通道中沒送來 aid 變數時「where 1」,即所有筆數都要出選出來。
    5. 觀察 article.php 中,如果只顯示單篇文章,沒有「head」、沒有蒐尋功能。
    6. 到共用帳號的 www/示範程式 中去下載 articleList.php 回來
    7. 觀察 articleList.php 中 sql[0] ,運用 concat 去產生「<a href=./article.php?aid=編號 target=_blank >標題</a>」,按下去可以跳出這篇文章,而且有蒐尋功能。
  • test
    1. 觀察助理們中 test_data,test_field,test_p 三張資料表的結構與內容。
    2. 到共用帳號的 www/示範程式 中去下載 bt.php 回來。
    3. 到共用帳號的 www/示範程式 中去下載 p 資料夾回來,並將整個資料夾放到你的 WWEB 之下。
    4. 觀察 article.php 中,dispType='disp_sentence';,文句式顯示會長什麼樣子。
    5. 讓 sql[0]="select * from test_data t,test_p p where t.number=p.number"; ,看會顯示出什麼樣子。
    6. 讓 sql[0]="select concat(t.number,question,' A.',chooseA,' B.',chooseB,' C.',chooseC,' D.',chooseD,' 答案:',answer) from test_data t,test_p p where t.number=p.number"; ,看會顯示出什麼樣子。
    7. 讓 sql[0]="select concat('

      '),concat(t.number,question,' A.',chooseA,' B.',chooseB,' C.',chooseC,' D.',chooseD,' 答案:',answer) from test_data t,test_p p where t.number=p.number"; ,看會顯示出什麼樣子。

    8. 讓 sql[0]="select concat('<p style=\"text-indent:-2.3em;margin-left:2.3em;\">'),concat(t.number,question,' A.',chooseA,' B.',chooseB,' C.',chooseC,' D.',chooseD,' 答案:',answer,'
      \n') from test_data t,test_p p where t.number=p.number"; ,看會顯示出什麼樣子。
  • calendar
    1. 觀察助理們中 calendar 資料表的結構與內容
    2. 到共用帳號的 www/示範程式 中去下載 calendar.php 回來
    3. 觀察 calendar.php 中,月曆式顯示會長什麼樣子。其中:
      dispType='disp_calendar';
      dispTypeHead='calendar_head';
    4. 選用 2010 年 12 月,看表現出什麼樣子。
    5. 觀察 calendar.php 中,sql[0] 選用四欄:行程開始時間、行程結束時間、事由、地點四欄。
    6. 觀察 calendar.php 中, formType 指示兩個時間欄位,本質是距西元1970年的秒數,只摘取小時和分鐘兩欄來顯示(因為年月日已在月曆中表明了)。
  • 批次處理程式嵌入布景並設定密碼
    從 editCol3.php 我們知道這個程式主要分成兩個介面:「指示介面」與「批次處理介面」
    到共用帳號的 www/示範程式 中去下載 editCol4.php 回來
    請參考程式中的註解,了解程式結構,程式共分為4+1+1段,前四段最重要:
    1. 進行 etable,布景,登入認證的基本設定到認證資料表為止,先不要 main()
    2. 判斷是不是要進入「批次處理」,若是就進行批次處理設定,若不是就找一個查詢結果為0的sql[0]、並設定不顯示
    3. 執行 ET 物件的 main() 方法,啟動認證程序。
    4. 如果登入錯誤就顯示設定好的錯誤訊息,登入正確且通道中尚未傳入 type 變數就秀出「指示介面」。
    5. 完成布景的後半段
    6. 放函式

2016.12.16

因馨檸、秋梅請假而停課,讓丁禾、柯智懷準備「物聯網革命」報告。

2016.12.23

加入「上傳檔案與相簿功能」

  1. 在 siteConstant.php 加入:
    $basePath="./images/";
    $subPath=array('1'=>'ROC','2'=>'中國','3'=>'日本','4'=>'東京','5'=>'韓國','6'=>'美國');
    $bodyWidth=900;
    最後的 siteConstant.php 只留五行,分別指示:
    • SITE:個人網站對根目錄的相對位置
    • SLOGAN:個人網站的口號
    • $basePath:相簿資料夾對個人網站的相對位置
    • $subPath:相簿資料夾之下的各子資料夾以及其對應的意義
    • $bodyWidth:相簿的寬度,須與 style.css 一致
  2. 新增資料夾
    1. 在個人網站資料夾中增加 upload 資料夾
    2. 在 upload 資料夾之下新增 images 資料夾,屬性為 755 以上(777也可)
    3. 在 images 資料夾之下新增 1 、 2 、 3 … 資料夾,屬性為 755 以上(777也可)
  3. 將 fileUpload.php 和 showImages.php 放到 upload 資料夾之下
  4. 改 theme.php 在導航列「工具」大項之下加:
    <dd><a href='/".SITE."/upload/fileUpload.php'>上傳檔案</a></dd>
    <dd><a href='/".SITE."/upload/showImages.php'>秀相簿</a></dd>

練習使用相簿

  1. jendo.org/~丁志仁/WWEB/得知各國相簿網址
  2. 下載各國圖照縮檔每個國家至少三張。
  3. 將要上傳的檔案改成適當的名字。
  4. 使用「上傳檔案」在各資料夾至少上傳一個圖照。
  5. 用 filezilla 去觀察已上傳檔案的資料夾,並在各資料夾中再上傳一個圖照。
  6. 用手機下載 DSfile app ,用 DSfile 上傳對管理圖照。
  7. 用手機的瀏覽器介面,練習上傳、刪除圖照。
  8. 使用「秀相簿」功能:
    • 水平欄數:可選 1~7 欄,預設為兩欄。
    • 選取圖照的核取方塊,依 siteConstant.php 中的 $subPath 陣列設定值而定。

多國語系

  1. 製作英文布景 themeEn.php
  2. 將 themeEn.php 再拆成語系檔與程式檔
  3. 將工作程式多國語言化:
    • editWebContent.php
    • passtest.php
    • nameList.php
    • std0En.php
    • std1.php
    • 文件根目錄下的 webContent.php 不用改,因為透過ajax秀內容,本來就「跨 theme」。
  4. 撰寫「std0En.php」
  5. 將工作程式「std1En.php」嵌入英文布景
  6. 切換按鈕

2016.12.30

針對特定登入者,進行看資料、編,刪資料之管控 前提是:

  1. 資料表的欄位中有指示登入者帳號或所隸屬群組之資料
  2. 工作程式須認證登入後才工作

示範資料表:6yearPersonTraining

只有吻合的登入者才可以看某些欄位

  1. $ET->formType=array('psd'=>array('function','seePass'),…);
  2. 定義 seePass 函式為
function seePass($arr){
	if($arr['row'][第幾欄]==$_SESSION['login_user']){return $arr['value'];}
	else{return '無權看';}
}

只有吻合的登入者才可以編、刪資料

  1. $ET->banE='banE';
  2. 定義 banE 函式為
function banE($row){
	if(!in_array($_SESSION['login_user'],explode(';',$row[第幾欄]))){
		$row['banEdit']=1;
		$row['banErase']=1;
	}
	return $row;
}

程式除錯

  1. 開關 PHP 除錯功能:display_errors 設為 on / off
    • DSM 在「控制台/網頁服務/PHP 設定」
    • 戰國策在「網站與域名/PHP 設定」
  2. 範例:banE.php
  3. echo 字串;
    $sqlStr="select `name`,性别,psd,email,phone,grp,lineName from 6yearPersonTraining";
    echo $sqlStr."
    \n";
    去前台抄 SQL 指令,代入 adminer ,找出哪邊有錯
  4. echo "<pre>";print_r(任何資料型別);echo "</pre>";
    echo "<pre>";print_r($_SESSION);echo "</pre>";
    研究通道會送來什麼變數
    將今天的程式改成老師(第三群組者)可以看密碼
    檢查其他的通道變數
  5. 插入變數取物件值再刪掉
    echo "
    ";print_r($ET->fields);echo "
    ";
  6. 檢查:單引號、雙引號、反引號、小,中,大括號 是否對稱
  7. SQL 命令中欄名、表名用到保留字,要用反引號把欄名、表名括起來,而且須對稱
  8. 減掉一部分檔案再慢慢加回去,檢查以下程式段落
    if(in_array('3',$_SESSION['login_user_group'])){
    return $arr['value'];
    }else{
    return '無權看';}
    }
  9. emeditor 的跨檔蒐尋功能「搜尋/在檔案中尋找」
    找 logon()
  10. 檢查大小寫,遵守駝峰式命名法
  11. 確定修改前,見對原有程式的保留:先註解後刪除;開暫存檔搬過去再一步一步加回來。
  12. 耐心多寫註解。

2017.01.13

實作評量