網頁程式設計 2024
(Web Programming)

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

FB社團

Google Meet

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

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

本課程主要在介紹如何開發網頁互動資料庫程式設計的環境、開發工具與程式設計語法。將分為三大部分來介紹: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/21

課程介紹

課程規劃

第一階段:SERVER架設

架站基本環境介紹 [CH01]

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

 

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

 

 

期初問卷調查

 

 

2

02/28

放假

打造PHP/MYSQL的運作環境

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

[ Ch1 ] [ Ch2 ]

補充課程

網站提案與製作

線上網站製作工具

十套網頁設計實用工具

 

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

網頁伺服器:

FTP伺服器

SMTP Server:

文字編輯器

程式編輯器

網頁編輯器

遠端桌面軟體

解壓縮軟體: 7z

螢幕錄影&截圖軟體

kmplayer播放器

 

 

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

駭客防範

設定Apache (httpd.conf)

設定PHP.ini

 

3

03/06

第二階段:

DW+PHP開發

1. 網站管理

 

 

2.PHP+HTML+表單輸入

 

[ Ch3 ]

 

 

DW網站管理

 

HTML語法教學

 

PHP + HTML + 表單輸入

課堂範例

 

文字欄位去除HTML控制碼

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

 

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

 

 
4 03/13

第二階段:DW+PHP開發

PHP+HTML+表單輸入


 

BMI 計算

PHP程式碼介紹

BMI計算器畫面 (無bootstrap css)

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

BMI

 
5 03/20

 

PHP語法介紹

(線上上課)

 

PHP程式碼介紹

 

 

線上上課

線上教學影片(吳智鴻)

雲端測驗網址

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

 

 
6

03/27

PHP程式直接控制表單#1

 

 

PHP程式控制表單 (心血管評估)

 

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

 
7 04/03

PHP程式直接控制表單#2

Bootstrap美化網頁

Bootstrap美化

課堂範例

   
8 04/10

 

期中報告#1

 

期中問卷調查

 

期中報告說明

期中雲端空間

Notion網站彙編

 

 

AI

線上製作LOGO網頁

 

 
9 04/17 期中報告#2      
   

 

 

期中考素材檔案下載

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

PHP連資料庫程式(參考)

 

虛擬主機ByetHost

 

虛擬主機Summerhost

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

虛擬主機申請網址

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

網站完成程式壓縮檔

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

 

第三階段:

PHP+資料庫開發

  • 設定權限
  • 登入
  • 資料庫備份

 

MySQL資料庫管理

 

 

 

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

 
11 05/01

 

PHP+資料庫開發

SQL語法介紹

 

MySQL資料庫管理

SQL語法介紹

 

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

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

計算人數加一程式

 

SQL資料庫工具

 

 

學習單 #6 認識SQL指令

 
12 05/08

 

業師演講

 

網頁程式設計實務    
13 05/15

 

第四階段

網站實作

 

 

Heart寫入資料庫

 

 

 

 
14 05/22

 

網站實作

 

免費遠端虛擬主機教學

期末成果範例

 

遠端主機上傳教學

 
15 05/29

 

網站實作

 

Heart寫入資料庫 (全)

DEMO

教學影片

1 虛擬主機原理介紹

2 show資料庫製作

3 show動態連結製作

4 del功能製作

5 遠端虛擬主機上傳與設定

6 Update資料

7. Update UI優化 帶入預設值

 

   
16 06/05 期末成果展示

 

期末專題說明

期末網址Notion

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

| 109 |

完成範例demo

 

103學期期末專題說明

104學期期末專題說明

 
           
17 06/12

自主學習

UNITY連結 資料庫寫

 

UNITY+PHP資料庫寫入教學PPT

程式

壓縮檔

 

進階程式(將使用者點什麼按鈕存入資料庫)

UNITYC#

   
18 06/19

自主學習

檔案上傳系統

 

檔案上傳教學(NEW)

   
           
   

課外補充教材

     
   

 

會員註冊

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

 

教學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 函式與檔案上傳

 
   

會員資料寫入&

建立資料庫

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

教學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虛擬主機教學

 

上傳遠端主機操作步驟

 
   

 

專題:

E-portfolio系統

 

 

數位系E-portfolio系統範例

程式碼:


舊版寫法

數位系E-portfolio系統範例

 

學習單 #6 線上郵寄程式

完成範例程式 (PDF) [.TXT]

 
   

 

專題:

線上郵寄程式

 

 

線上郵寄程式教學

補充資料:

線上郵寄--

Gmail

 

Extension

 

 

 

 

   
   

 

補充課程

埔里美食地圖 [CH11]

  • DW + Google Map 技術

 

 

 

 

 

環景與虛擬導覽

 

教學

JQuery 官方網站 介紹

 

 
   

--期末專題製作

103級

102級

補充教材-行動網頁

模擬環境工具

完成範例

QQ午安枕網站

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

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

 

 

 

切版

會員管理系統

 

 
           
   

補充教材

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

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