網頁程式設計 2023
（Web Programming)

修訂日期：112/02/20
班級：大學部二年級 學分：3學分
任課教師：吳智鴻 任課科系：數位內容科技學系
TEL：04-22183024
E-mail: [email protected]
Website: chwu.weebly.com

FB社團

Google Meet

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

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

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

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

 

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

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

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

培養之核心能力

三、本課程之教學方法：

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

  1. 上課講解
  2. 實機操作
  3. 期中、期末專題製作
  4. 上台報告

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

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

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

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

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

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

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

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

 

六、有關學習建議事項：

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

 

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

週次
  日期 課程內容  補充說明 論文

1

02/15

課程介紹

課程規劃

第一階段：SERVER架設

架站基本環境介紹 [CH01]

  • http server
  • ftp server
  • smtp server
  • Apache Server + PHP + MySQL環境架設

 

フラットデザインのアイコン WEBページのブラウザ分析画面アイコン

 

 

期初問卷調查

 

  

2

 02/22

打造PHP/MYSQL的運作環境

  • 安裝XAMPP
  • 設定Apache、MySQL、PHP

[ Ch2 ]

補充課程

網站提案與製作

線上網站製作工具

十套網頁設計實用工具

 

[ 課程所需軟體雲端空間 ]

網頁伺服器:

FTP伺服器

SMTP Server:

文字編輯器

程式編輯器

遠端桌面軟體

解壓縮軟體: 7z

螢幕錄影&截圖軟體

kmplayer播放器

 

 

學習單 #1_認識PHP與MYSQL環境

駭客防範

設定Apache (httpd.conf)

設定PHP.ini

  

3

 03/01

第二階段：

DW+PHP開發

1. 網站管理

 

 

2.PHP+HTML+表單輸入

 

[ Ch3 ]

 

 

DW網站管理

 

HTML語法教學

 

PHP + HTML + 表單輸入

課堂範例

 

文字欄位去除HTML控制碼

ex. <?php echo htmlspecialchars($_REQUEST['user']); ?>

 

學習單#2 PHP與HTML基礎與表單

 

  
4 03/08

第二階段：DW+PHP開發

PHP+HTML+表單輸入

 

BMI 計算

PHP程式碼介紹

BMI計算器畫面 (無bootstrap css)

BMI計算器畫面 (加入bootstrap css)

BMI

 
5 03/15

 

PHP語法介紹

 

PHP程式碼介紹

 

學習單 #3 PHP程式設計基本概念

  
6

03/22

PHP程式直接控制表單#1

Bootstrap美化網頁

PHP程式控制表單 （心血管評估）

Bootstrap美化

課堂範例

學習單#4 PHP程式控制表單

  
7 03/29 PHP程式直接控制表單#2      
8 04/05

第三階段：

PHP＋資料庫開發

 

 

 

MySQL資料庫管理

 

解決MySQL中文亂碼的問題
mysql_query("SET NAMES utf8");

解決PHP時間不對的問題
date_default_timezone_set('Asia/Taipei');

計算人數加一程式

 

SQL資料庫工具

 

 

 

 

 

學習單 #5 資料庫管理與備份

 

 

 

 

 

 

 

 

 

 

  
9 04/12

 

期中考

 

期中報告說明

期中雲端空間

 

線上製作LOGO網頁

 

  
   

期中問卷調查

 

期中考素材檔案下載

PHP 線上資料庫製作：報名系統

PHP連資料庫程式（參考）

 

虛擬主機ByetHost

 

虛擬主機Summerhost

教學PPT上傳遠端虛擬與日期選取器

虛擬主機申請網址

成功移植至虛擬主機上的網站

網站完成程式壓縮檔

 學習單 #6 遠端主機與日期選取器  
10 04/19

 

MySQL資料庫管理

專題：

SQL語言

 

 

MySQL資料庫管理

 

Heart寫入資料庫

Heart寫入資料庫 (全)

遠端主機上傳教學

 

期末成果範例

 

學習單 #6 認識SQL指令

 

 

 

  
11 04/26

 

會員註冊

  • 取得現在日期
  • 正規表示式
  • 檔案寫入與讀取
  • 檔案上傳

 

教學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/03

會員資料寫入＆

建立資料庫

會員資料寫入與建立資料庫

教學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設計

 

遠端主機

FreeHostingnoad虛擬主機教學

 

舊

ByetHost虛擬主機教學

 

上傳遠端主機操作步驟

  
13 05/10

檔案上傳系統

 

 

檔案上傳教學（NEW）

學習單7_資料庫與SQL指令

  
14 05/17

專題：

E-portfolio系統

 

 

數位系E-portfolio系統範例

程式碼:

 

舊版寫法

數位系E-portfolio系統範例

 

學習單 #6 線上郵寄程式

完成範例程式 （PDF） [.TXT]

  
15 05/24

 

專題：

線上郵寄程式

 

 

線上郵寄程式教學

補充資料：

線上郵寄--

Gmail

 

Extension

 

 

 

 

    
16 05/31

 

補充課程

埔里美食地圖 [CH11]

  • DW + Google Map 技術

 

 

 

 

 

環景與虛擬導覽

 

教學

JQuery 官方網站 介紹

 

  
17 06/07

--期末專題製作

103級

102級

補充教材-行動網頁

模擬環境工具

完成範例

QQ午安枕網站

QQ午安枕行動APP完成壓縮檔

QQ午安枕行動APP網址 (完成)

 

 

 

切版

會員管理系統

 

  
18 06/14 期末成果展示

 

期末專題說明

期末網址Notion

-----------------------------

| 109 |

完成範例demo

 

舊

103學期期末專題說明

104學期期末專題說明

  
   

補充教材

Laravel框架安裝說明

      
     

 

    
   

補充教材

製作個人網站技術

(按此申請weebly)

Weebly介紹

Weebly五分鐘打造個人網站

實務網頁製作研討

Weebly模板切割與結合php

學習單 #2 網頁設計提案與線上網頁製作工具

網站製作提案PPT範例

範例網站

教學網站

個人履歷素材(照片&經歷文字)

學習單 #2 製作Weebly網站

  
   

補充教材

網站與範本與切版

 

--定義網站與範本
--資料庫網站規劃、
-- Photoshop版面規劃與圖形切割

 

 學習單 #2 網站範本與虛擬主機  
   

補充教材

申請免費PHP&MySQL空間

 

申請免費PHP&MySQL空間

虛擬伺服器上傳教學 吳智鴻(PPT)

---------------------------------------------

動態網域名稱
免費PHP＆MySQL空間申請與管理

 

架設HTTPS主機~ SSL憑證申請

    
    CSS

CSS教學

 

    
   

補充教材

HTML5 Webcam

 

Example #1

Example #2

Example #3 + database

PHP+webcam

Example

 

 

  

 

 

教科書籍

1. 教科書

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

2. 參考教材

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

 

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

 

鄧文淵/總監製，文淵閣工作室/編著，「Dreamweaver CS6 X PHP超強互動網站特訓班(附影音教學、獨家擴充程式、範例、試用版)」，碁峰，2013/03/15出版。

相關軟體

工具軟體

[ Software雲端空間 ]

 

課外參考書籍

2.參考書
李志文，「精通Dreamweaver CS5 與PHP MySQL實例整合應用經典」，松崗，2011/02/08出版。

網站: http://cttlee.cc/

範例素材網站： dmxzone 　dreamweaver-extensions　　flevooware 　　felixone 　　kaosweaver　　Tom Muck 　　　Weindel

本網頁僅用於教學用途,若有問題請來信告知,即刻刪之。