網頁程式撰寫/2017

概述

一、課程目標

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

與使用者溝通；
管理資料、運用資料。

二、選修說明

修課同學：柯智懷、劉恩佑、盧星瑜、王秋梅、黃柏實(子)、陳洹霈(母請假)、谌卫军(遠距學習)、何蕙如(未到)、陳建宇(未到)、林佳敏(未到)、蘇柳村(未到)、紀詠恩(未到)
地點：新埔國中信義樓 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,網頁設計範例教本》為參考書，旗標出版，學員請自備，向圖書館借用也行。

(三)參考講義

HTML
1. 練習
2. 講義
HTTP
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','aide');
 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版本

HTML5文件類型宣告：
```
<!DOCTYPE html>
```

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

繼續第七章第四節之後
使用adminer，請認識其連結。
去了解 r.php ，今天之後就會修改 wiki 頁。
區分資料表與資料庫(放資料表的資料夾)
認識 web 和 webMail 兩資料表。
建立自己的資料表 web_xxx 和 webMail_xxx 。
nameList0.php 最素樸的起點，只有編，沒有增人、增mail
1. javascript驗證
2. 以makeForm類別生成表單

<?php $connect=mysql_connect('localhost','assistant','aide'); 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);

?>