網頁程式設計 2021
（Web Programming)

修訂日期：110/05/05
班級：大學部二年級學分：3學分
任課教師：吳智鴻任課科系：數位內容科技學系
TEL：04-22183024
E-mail: chwu@mail.ntcu.edu.tw
Website: chwu.weebly.com

FB社團

| 102 | 105 | 106 | 107 | 108 | 109 |

一、本課程之學習目的與教學目標

本課程主要在介紹如何開發網頁互動資料庫程式設計的環境、開發工具與程式設計語法。將分為三大部分來介紹：1.相關伺服器之架設與管理，2.資料庫結合Photoshop版型規劃與網站規劃與管理。3.Dreamweaver CS環境下開發PHP互動程式設計。

學生修習完本課程之後，具有能夠開發出網頁資料庫程式的能力，且畫面視覺設計與資料庫兩者兼具，及接網頁設計工作的能力。

二、本課程之主要講授重點與範圍：

本課程預計包含以下範圍：
Appache Server + PHP + MySQL環境架設; Web Server、FTP Server、MySQL 管理、Dreamweaver CS + PHP網頁程式開發; Photoshop網頁版型設計

相關伺服器之架設與管理
Photoshop網頁版型設計
資料庫結合Photoshop版型規劃與網站規劃與管理
Dreamweaver CS環境下開發PHP互動程式設計

培養之核心能力

A2 具有系統應用與整合研究能力

三、本課程之教學方法：

每週三小時原理解說，並請同學找相關資料報告。

上課講解
實機操作
期中、期末專題製作
上台報告

四、本課程之評量方式與時間：

平時成績：30% (平時作業、學習單、出席)
期中作品：30%
期末作品：30%
E-portfolio: 10%
在FB社團分享文章＆協助同學解決問題額外加分。

五、使用教材或參考書目：

[A] 松浦健一郎(林蕙如譯), 「PHP 網頁程式設計「超」入門」，旗標。

[B] 陳惠貞，「一步到位！RWD 網頁程式設計：用 HTML5、CSS3、Bootstrap 打造響應式網頁」，旗標。

[C] 施威銘研究室，「正確學會 Dreamweaver CC 的16堂課」，旗標。

[D] 鄧文淵/總監製，文淵閣工作室/編著，「Dreamweaver CS6 X PHP超強互動網站特訓班」，碁峰，2013/03/15出版。

--- 其他教材及參考書籍、資料將由教師於課堂上發放或指定。

六、有關學習建議事項：

學生需在老師指定之主題下，主動尋找相關資料與軟體，與提出可能應用方向，以及改進之方法。
「遵守智慧財產權觀念」及「不得非法影印」。

七、本課程之教學進度：（請詳填於課程進度表）

週次	日期	課程內容	補充說明	論文
1	02/23	課程介紹第一階段：SERVER架設架站基本環境介紹 [CH01] http server ftp server smtp server Apache Server + PHP + MySQL環境架設		期初問卷調查
2	03/02	打造PHP/MYSQL的運作環境安裝XAMPP 設定Apache、MySQL、PHP 補充課程網站提案與製作 oCAM介紹 oCAM下載能影響客戶的網站設計線上網站製作工具十套網頁設計實用工具	[ 課程所需軟體雲端空間 ] 網頁伺服器: XAMPP [官方網站] 7.3.27 Win10 安裝Xampp的解決法 FTP伺服器 FileZilla Server FTP Client 軟體: FileZilla SMTP Server: Free SMTP Server 文字編輯器 NotePad++ 程式編輯器 Sublime 遠端桌面軟體 Win10遠端桌面設定方法 AnyDesk TeamViewer 解壓縮軟體: 7z 螢幕錄影&截圖軟體 IceCream Screen Recorder kmplayer播放器	學習單 #1_認識PHP與MYSQL環境駭客防範管理者不可不知的AppServ駭客入侵如何預防AppServ遭入侵修改Apperv禁止目錄瀏覽 Appserv安裝與防護介紹設定Apache (httpd.conf) 更改Apache port DocumentRoot "C:\appserv\www" <Directory "C:/appserv/www"> ★★★其他相關設定的說明設定PHP.ini 設定short_open_tag = ON (設定可用<? or <?php) register_globals = Off display_errors = On error_reporting = E_ALL & ~E_NOTICE date.timezone = Asia/Taipei ★★★ 記得要開啟，否則DW無法連線資料庫 extension=php_mysql.dll
3	03/09	第二階段： DW+PHP開發 1. 網站管理 2.PHP+HTML+表單輸入	DW網站管理教學PPT HTML語法教學 HTML語法 PHP + HTML + 表單輸入課堂範例文字欄位去除HTML控制碼 ex. <?php echo htmlspecialchars($_REQUEST['user']); ?>	學習單#2 PHP與HTML基礎與表單
4	03/16	第二階段：DW+PHP開發 PHP+HTML+表單輸入	BMI 計算 PHP程式碼介紹 PHP程式txt PHP表單取得值程式 PHP線上表單程式講義線上BMI程式完成壓縮檔 BMI計算器畫面 (無bootstrap css) BMI計算器畫面 (加入bootstrap css)
5	03/23	PHP語法介紹 PHP語法範例壓縮檔	PHP程式碼介紹 PHP程式txt PHP程式網頁壓縮檔 PHP程式基礎概念txt (網頁版) PHP程式基本概念教學PPT	學習單 #3 PHP程式設計基本概念
6	03/30	PHP程式直接控制表單#1 Bootstrap美化網頁	PHP程式控制表單（心血管評估） PHP程式控制表單教學PPT 老師作的範例網站程式 prg1 空白表單 prg2_輸入表單php程式完成 prg3_Result用php程式顯示表單資料完成 prg4_Result用php程式判斷年齡性別分數 php陣列的使用 Bootstrap美化 Bootstrap美化網頁教學ppt 教學操作影片（youtube) Bootstrap美化後的網站六角學院課堂範例心血管疾病評估網站 (台大) 心血管疾病分險評估公式介紹國健署「慢性病風險評估」平台	學習單#4 PHP程式控制表單
7	04/06	PHP程式直接控制表單#2
8	04/13	第三階段： PHP＋資料庫開發設定權限登入資料庫備份 SQL語法介紹	MySQL資料庫管理設定權限、登入、資料庫備份教學PPT （修改config.inc.php) $cfg['Servers'][$i]['auth_type'] = 'http'; $cfg['Servers'][$i]['user'] = 'root'; $cfg['Servers'][$i]['password'] = '密碼'; 設定phpmyadmin root登入 (網路文章) 解決MySQL中文亂碼的問題 mysql_query("SET NAMES utf8"); 解決PHP時間不對的問題 date_default_timezone_set('Asia/Taipei'); 計算人數加一程式 SQL資料庫工具 IECookiesView SQLyog SQLyog 64bitl (new) SQLyog 32bit (new) mysql-connector-odbc	學習單 #5 資料庫管理與備份
9	04/20	期中考期中問卷調查期中考素材檔案下載	PHP 線上資料庫製作：報名系統教學PPT SQL conn_basic.php index.php add.php 新增資料介面 doadd.php 新增資料 show.php 空白 show.php ＃1 show.php 完成 admin.php edit.php doedit.php del.php PHP連資料庫程式（參考）虛擬主機ByetHost 教學PPT 虛擬主機Summerhost 教學PPT上傳遠端虛擬與日期選取器虛擬主機申請網址成功移植至虛擬主機上的網站網站完成程式壓縮檔	學習單 #6 遠端主機與日期選取器線上製作LOGO網頁 square_space Marker Marker 6各免費製作的平台
10	04/27	MySQL資料庫管理專題： SQL語言	MySQL資料庫管理 SQL指令教學PPT SQL網路教學網站資料集 member_sql news_sql	學習單 #6 認識SQL指令
11	05/04	會員註冊取得現在日期正規表示式檔案寫入與讀取檔案上傳	教學PPT 程式碼 addmember.php (空白表單) ------------------------------------- addmember.php checkmember.php (正規表示式功能) ------------------------------------- checkmember_file.php (寫入檔案功能) ------------------------------------- addmember_photo.php (檔案上傳) checkmember_file_photo.php (寫入檔案與上傳檔案功能) 寫入資料庫 addmember_photo.php (修改時區、上傳照片) checkmember_file_photo_db.php (寫入檔案、上傳檔案、寫入資料庫)	學習單#7 函式與檔案上傳
12	05/11	會員資料寫入＆建立資料庫	會員資料寫入與建立資料庫教學PPT health.sql addmember_photo_default.php (修改時區、上傳照片、有預設值) checkmember_file_photo_db.php (寫入檔案、上傳檔案、寫入資料庫) showmember_blank.php (顯示會員資料空白表格） showmember_ok.php showmember_del_edit（加入edit, del超連結）刪除會員資料 delmember.php (刪除會員資料）修改會員資料 editmbmer_value.php(修改會員資料填入預設值） checkmember_update_db_ok (檢查並更新會員資料庫）日期選取器 DateTime Picker bootstrap4 網站LOGO設計 squarespace網站遠端主機 FreeHostingnoad虛擬主機教學舊 ByetHost虛擬主機教學	上傳遠端主機操作步驟
13	05/18	檔案上傳系統	檔案上傳教學（NEW）教學PPT 檔案上傳版面（eadd.php) 顯示上傳資訊顯示上傳資訊與搬移檔案自建檔名與中文檔名處理刪除伺服器上的檔案讓使用者下載檔案並轉碼寫入資料庫 (upload_db.php) member.sql data.sql	學習單7_資料庫與SQL指令
14	05/25	專題： E-portfolio系統	數位系E-portfolio系統範例教學PPTV2 程式碼: --------------------------------------------------------- 檢視資料空白表單 (eshow.php) 檢視資料重複區域與筆數(eshow.php) --------------------------------------------------------- 管理介面_連結至上傳檔案(eadmin.php) 管理介面_編輯與刪除連結eadmin.php) ----------------------------------------------------------- 編輯功能 (eedit.php) 更新資料庫 (eeditsave.php) 編輯功能_下拉選單自動選取 (eedit.php) 更新資料庫_有檔案上傳處理(eeditsave.php ) ------------------------------------------------------------ 刪除資料(edel.php) 刪除資料加上刪除檔案(edel.php) --------------------------------------------------------- 舊版寫法數位系E-portfolio系統範例教學PPT 檔案上傳版面（日期、NicEdit) Upload可以寫入資料庫版本 eadmin程式碼（全） eedit 程式碼（全） doedit 程式碼（全） basic.sql 資料庫 Upload可以寫入資料庫最終版 E-portfolio 網站壓縮檔（未完成	學習單 #6 線上郵寄程式完成範例程式（PDF） [.TXT]
15	06/01	專題：線上郵寄程式	線上郵寄程式教學補充資料：線上郵寄-- Gmail PHP讓Gmail寄信教學PPT PHPMAILER程式下載程式＃1 （sendmail_1.php）程式#2 (sendmail_form.php)抓完整表單資料範例程式＃1 範例程式 # 2 （可抓取表單資料） Gmail安全性設定利用Gmail smtp送信利用Gmail smtp送信說明錄影檔OpenSSL PHPMailer 會員寄信程式 TXT Extension Submit Form
16	06/08	補充課程埔里美食地圖 [CH11] DW + Google Map 技術環景與虛擬導覽	教學教學PPT 程式1 加上重複區域 (index.php) 程式2 程式修改全 (index.php) 程式3 程式修改全 (edit.php) Google Map API程式碼修改素材原始檔 sql 成功移植到遠端主機網址 JQuery 官方網站介紹 Walkinto HoloBuilder
17	06/15	--期末專題製作 103級 103期末專題說明 102級行動網頁期末專題說明	補充教材-行動網頁行動網頁製作教材(一) [範例檔] 行動網頁製作教材(二) [範例檔] 模擬環境工具 Java se 8 (Java SDK) ADT bundle PhoneGap Build說明完成範例 QQ午安枕網站 QQ午安枕行動APP完成壓縮檔 QQ午安枕行動APP網址 (完成)	切版 01 介紹 02 weebly介紹 03 畫面擷取 04 切版與PS編輯 05 切版存檔與檔案解壓縮規劃 06 網站管理 07 DW版面規劃與資料庫匯入會員管理系統 11 1 註冊畫面製作 11-2 登入畫面製作與密碼加密 11-3 GMAIL寄信準備（PHPMAILER） 11-4 認證信件製作 11-5 認證信件測試 11-6 Auth認證網頁的處理 11-7 登出使用者與更新資訊 11-8 簡單搜尋 11-9 進階搜尋 11-10 限制存取
18	06/22	期末成果展示	109學期期末專題說明完成範例demo	舊 103學期期末專題說明 104學期期末專題說明
		補充教材 Laravel框架安裝說明

		補充教材製作個人網站技術 (按此申請weebly)	Weebly介紹 Weebly五分鐘打造個人網站阿正老師教學（上）阿正老師教學（下） Weebly課程 Weebly製作EDM 用Weebly製作教學網站 Weebly網站建置與SEO輸入實務網頁製作研討 Weebly模板切割與結合php	學習單 #2 網頁設計提案與線上網頁製作工具網站製作提案PPT範例範例網站吳老師的個人網站鄭老師個人履歷範例劉長儒個人履歷範例歐陽個人履歷範例素人履歷範例教學網站紅豆的Weebly網站教學教學PPT 個人履歷素材(照片&經歷文字) 學習單 #2 製作Weebly網站
		補充教材網站與範本與切版	--定義網站與範本 --資料庫網站規劃、 -- Photoshop版面規劃與圖形切割	學習單 #2 網站範本與虛擬主機
		補充教材申請免費PHP&MySQL空間	申請免費PHP&MySQL空間申請免費PHP&MYSQL空間(說明) ByeHost.com 中控台進入網址虛擬伺服器上傳教學吳智鴻(PPT) --------------------------------------------- 動態網域名稱免費PHP＆MySQL空間申請與管理動態網域DynDNS DynDNS Updater 自動更新網域IP 架設HTTPS主機~ SSL憑證申請 SSL憑證申請教學_吳智鴻(PPT)
		CSS	CSS教學學習CSS版面配置
		補充教材 HTML5 Webcam	Example #1 Example #2 Example #3 + database PHP+webcam Example Github 程式壓縮檔