網頁程式撰寫/2017

出自六年制學程
在2017年11月9日 (四) 09:25由丁志仁對話 | 貢獻所做的修訂版本

跳轉到: 導覽搜尋

概述

一、課程目標

培養會使用網頁與伺服器做事的人,即結合網際網路前後端的技術,達成以下目的:

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

二、選修說明

  • 修課同學:柯智懷、劉恩佑、盧星瑜、王秋梅、黃柏實(子)、陳洹霈(母請假)、谌卫军(遠距學習)、何蕙如(未到)、陳建宇(未到)、林佳敏(未到)、蘇柳村(未到)、紀詠恩(未到)
  • 地點:新埔國中信義樓 517
  • 時間:週四早上 9:15~12:00
  • 費用:無
  • 選課優先順位:對資訊應用實作有濃厚興趣,願意參與「全民科學平台」營運者優先
  • 教師:丁志仁
  • 助教:游士賢
  • 上課規範:學員須自行攜帶筆電上課,備妥課本。上課注意聽,作業按時交,考試認真準備。
  • 成績兼採筆試及實作評量,通過者得 3 學分

三、課程內容組成

(一)牽涉的技術

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

(二)使用的課本

使用《PHP,MySQL,AJAX,網頁設計範例教本》為參考書,旗標出版,學員請自備,向圖書館借用也行。

(三)參考講義

各次上課內容

2017.9.7

  • 處理何蕙如在跨校選修平台上建立兩個帳號的問題
  • 請士賢、智懷儘速為何蕙如、陳建宇、林佳敏、劉恩佑在筆電上建立 filezilla 、 EmEditor 及其關連。
  • 說明課程內容
  • 建立每位同學的修課資料夾:
    1. 後台:個人資料夾/www/php,php資料夾的所有者必須是這位同學,php資料夾中的php程式所有者也必須是這位同學。否則會因缺乏權限而導致伺服器內部錯誤。
    2. 前台:6years.jendo.org/~○○○/php
  • 檢查瀏覽器
  • 檢查文字編輯器
  • 檢查上下傳工具
  • 檢查每個人的筆記頁
  • 建立應答程式對
    1. form.php:負責以表單跟使用者互動;並設 action 為 r.php。
    2. 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

  • 第一次到課的同學:
    1. 檢查筆記頁有沒有建好?
    2. 檢查 filezilla 有沒有連結到文字編輯器?
    3. 檢查 filezilla 有沒有這兩個連線:「DS216(共用)」、「DS216(自己)」
    4. 檢查有沒有在 「home/www」之下建立 php 資料夾,放練習程式。
  • 去共用的 home/www 中,下載回來「網頁程式撰寫」程「HTMLeBook」兩個資料夾,放在自己不會忘掉的地方。
  • 今天的進度是課本第三章HTML概述
  • 宣告HTML版本
    1. HTML5文件類型宣告:
      <!DOCTYPE html>
    2. HTML4文件類型宣告:
      <!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'>
  • 直接看第三章評量。
  • 說明範例程式。

2017.9.21

2017.9.28

  • 第五章
  • 敘述區塊:
    1. 在某些條件下才執行的敘述集合,結構為「條件{諸敘述}」
    2. 「}」之後不再加「;」
  • 三元算符,可以在同一敘述中完成二選一條件判斷。
    1. 將 Ch5_2_5.php(三元運算?:)改成用一行表達。
    2. 比較新寫法的優點。
  • 將 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
    1. javascript驗證
    2. 以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;
	}
}
?>
  • 工作程式的一般思維流程:
    1. 載入常數、變數、函式、類別(初始示範程式省略)
    2. 前置處理
      • 流程變數的判讀
    3. 讀取資料
      • 字串好儲存,陣列好處理
    4. 造共用的 html 碼長字串
      • 其中 javascript 是重點
    5. 將資料生成為適當的 html 碼
    6. 送出顯示
      • 有些是與使用者互動的介面
      • 含使用者回應不符期待時的指示
    7. 歸還資料庫連結的掛號牌
  • 專案實作:
    1. 需求分析
    2. 關聯式資料設計
      • 適當欄位預設值的設置,可以替代 php 程式的設計
    3. 規畫流程變數
    4. 分鏡:需要哪些工作程式
      • 工作程式是可以適度合併的
      • 工作程式減少,程式結構變大,流程變數的動作變複雜
      • 這一點是導致相同功能程式,其寫法差異極大的主因
      • 使用 framework (框架工具)會使得工作程式的可讀性大增

2017.11.2

  • 解說類別的設計與物件的使用
    1. 為什麼類別與物件內的變數與函式要叫做「屬性」和「方法」
    2. 實體化
  • 解說用 javascrip 驗證使用者輸入資料

2017.11.9

  • nameList1.php
    1. 合併個人諸 mail,使人名跨列
    2. 加入編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;
	}
}
?>
  • 摘要說明:
    1. 完全不用變動:「makeForm 類別定義」、「javascript輸入驗證程式」
    2. 擴充前置處理程式,由一種表單擴充到四種表單:「增一人」、「編一人」、「增一mail」、「編一mail」四種表單,和「刪一人」、「刪一mail」等兩種連結,以及相應的六種資料表前置處理。
    3. 新增「insMailForm($wid)」、「editMailForm($eid)」、「insPersonForm()」三個表單生成函式,並微調「editForm($wid,$eid)」函式。
    4. 修改撈資料表的 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.姓名!=''」
    5. 修改主要顯示函式「nicetable」:
      • 把泛用 id 固定成 wid
      • 增加《增一人》連結
      • 在 while 迴圈中將 email 塞入 $temp[wid]['mail'][eid] 中,然後計數 $temp[wid]['mail'] 有幾個元素來決定 rowspan 幾列。
      • 改變表格的 title 列。
      • 逐一秀出連結和通訊資料