網頁程式撰寫:修訂版本之間的差異

出自六年制學程
跳轉到: 導覽搜尋
2016.9.9
2016.10.7
第 194 行: 第 194 行:
 
*#nicetable 中加「\n」讓原始碼整齊。
 
*#nicetable 中加「\n」讓原始碼整齊。
 
*#makeForm 中判斷遇到 hidden 輸入框不跳行。
 
*#makeForm 中判斷遇到 hidden 輸入框不跳行。
 +
 +
===2016.10.14===
 +
'''[https://zh.wikipedia.org/wiki/MVC MVC]'''
 +
*Model–view–controller 三者分離
 +
*基本觀念:
 +
*#一個伺服器上有多個網站(SITE),彼此共用基本「類別」
 +
*#每個 SITE 有自己的外觀 Theme
 +
*#每個 Theme 簡化為 banner 、 導航列 、 ajax 內容顯示區
 +
*實作:
 +
*#DB類別
 +
*#siteConstant.php
 +
*#Theme 的模組化
 +
*#style.css、menu.css
 +
*#navbar-bg的搭配與使用
 +
*#banner圖照的去背與嵌入
 +
*#畫字
 +
*#工作程式
 +
*#*Theme的前半
 +
*#*Theme的後半
 +
'''SESSION'''
 +
#@session_start();
 +
#$_SESSION 儲值
 +
#在另一個 php 中(翻頁後)檢查 $_SESSION 的值
 +
#一次儲值多次檢查,直到瀏覽器關閉

2016年10月14日 (五) 09:43的修訂版本

槪述

課程目標

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

  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 內容顯示區
  • 實作:
    1. DB類別
    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. 一次儲值多次檢查,直到瀏覽器關閉