Chapter 1: Introduction. Training Course, CS, NCTU 2 Overview History of Internet World Wide Web History Technology Related Technology Dynamic Web-Page

Chapter 1: IntroductionChapter 1: Introduction

Tra

inin

g C

ou

rse, C

S, N

CTU

2

OverviewOverview

History of Internet World Wide Web

• History• Technology• Related Technology

Dynamic Web-Page Techniques• Client Application

Client Script Language Client Interactive Technology

• Server Application (Web Application) Common Gateway Interface, CGI

Database System• History• Relational Database• Object-Oriented Database• Distributed Database

Tra

inin

g C

ou

rse, C

S, N

CTU

3

History of InternetHistory of Internet

1950 年開始有研究者思考在不同電腦間相互通訊的方法 1960 年美國國防部建立了第一個網路系統－ ARPA Net 1973 年 ARPA Net 擴展成第一代網際網路的雛形，開始有

英國以及挪威的電腦主機加入其中 1974 年提出了 TCP/IP Protocol ，並於 1983 年將 ARPA 核

心運作改以 TCP/IP Protocol 通訊，現行網際網路的基礎 1986 年美國國家科學基金會建立 NSFnet 成為第一個學術

網路系統 1990 年開放網際網路供大眾使用並在隔年發展了 HTML 、

HTTP Protocol ， 1993 年開始宣揚 WWW 的概念

Tra

inin

g C

ou

rse, C

S, N

CTU

4

World Wide Web - History (1)World Wide Web - History (1)

World Wide Web （全球資訊網）亦稱為 WWW, W3 可以看成是一個存放資料的空間

• 將各式各樣資料整合起來• 不侷限於傳統文字或圖片文件• 讓資料的呈現更加活潑生動，結合各種形式的資料（諸如聲音、

影像、多媒體等） 1989 年 3 月，由歐洲高能物理研究群（ CERN ）的 Ti

m Berners-Lee 先提出了 WWW 系統希望藉此方式把散在歐洲各國研究機構的成果整合起來，

達到快速交換心得方式 1990 年完成第一個網路伺服器與瀏覽器實驗平台

Tra

inin

g C

ou

rse, C

S, N

CTU

5


• 網路史上第一台 Web Server

Tra

inin

g C

ou

rse, C

S, N

CTU

6


美國高速計算應用中心（ NCSA ）在 WWW 提出之後不久發展了 Mosaic 的 WWW 人機介面

Mosaic 一直到 1993 年初才正式公開給外界使用公開後短短幾年， WWW 的使用率就以驚人的速度成長

Tra

inin

g C

ou

rse, C

S, N

CTU

7


• 2006 年 11 月統計的網際網路用戶數量

Tra

inin

g C

ou

rse, C

S, N

CTU

8


QMosaic for Windows 3.1

Tra

inin

g C

ou

rse, C

S, N

CTU

9


• NCSA Mosaic 3.0

Tra

inin

g C

ou

rse, C

S, N

CTU

10


• Firefox 2

Tra

inin

g C

ou

rse, C

S, N

CTU

11


• Internet Explorer 6

Tra

inin

g C

ou

rse, C

S, N

CTU

12


• Internet Explorer 7

Tra

inin

g C

ou

rse, C

S, N

CTU

13


• Opera9

Tra

inin

g C

ou

rse, C

S, N

CTU

14


Netscape Communicator 8.0 beta

Tra

inin

g C

ou

rse, C

S, N

CTU

15

World Wide Web - Technology (1)World Wide Web - Technology (1)

在 WWW 系統中主要構成的技術包括了• HTML• HTTP• URL

HTML (1)• HyperText Markup Language （超文件標示語言）• 用來將資料的呈現更具結構化的輸出，本質上仍是文字檔• 最初由 Tim Berners-Lee 先提出原始定義• 爾後基於標準通用標示語言（ SGML ）進一步將語法發展成 H

TML 成為國際標準• 目前由 W3C （全球資訊網聯盟）負責維護

http://www.w3.org/

• WWW 得以多元化呈現資料的主要功臣

Tra

inin

g C

ou

rse, C

S, N

CTU

16


HTML (2)• 使用 TAG 的方式將資料呈現的效果直接加註在文字之中

<html><body>......Normal text <strong>Bold text</strong>.......</body></html>

Tra

inin

g C

ou

rse, C

S, N

CTU

17


HTML (3)• 早期的 HTML 語法被定義成較鬆散的規則• 有助於不熟悉網路出版的人採用• 網頁瀏覽器接受了這個現實，並且可以顯示語法不嚴格的網頁• 最初版的規則尚不支援多媒體、影像以及與網頁運用程式溝通

的標示方法• 於 HTML 2.0 開始才加上了這些需求• 前後歷經多次改版至今 4.01 才趨於完整與嚴謹• 但是瀏覽器繼續顯示一些遠稱不上合乎標注準的 HTML 語法• 因此 W3C 有了以 XHTML 規格來接替 HTML 的計畫

Tra

inin

g C

ou

rse, C

S, N

CTU

18


HTTP• 最初的目的為了提供一種發佈和接收 HTML頁面的方法• 定義了用戶端與主機之間溝通的語言與方式• 用戶端瀏覽器（諸如 IE, Firefox 等）必須遵循 HTTP Protocol

的規定與主機相互交換資料• 支援加密版本 - HTTPS

• 使用 URL 作為檔案資源定位表示方式

Tra

inin

g C

ou

rse, C

S, N

CTU

19


URL• Uniform Resource Locator

• 網際網路中用以定位任何遠端或本地端的可用資源• 通用格式

協議 : [ // ] [ [ 用戶名 [ :密碼 ] @ ] 主機名 [ :埠號 ] ] [ / 資源路徑 ]

協議：意指使用何種通訊協定，諸如 http, ftp, telnet, file 等• ex:

http://www.cs.nctu.edu.tw/ ftp://ftp.isu.edu.tw/ telnet://ptt.cc/

Tra

inin

g C

ou

rse, C

S, N

CTU

20


從使用者透過瀏覽器向伺服器索取網頁直到顯示網頁於畫面上的流程如下圖所示：

ClientBrowser

Web Server2. 以 HTTP 協定送出 Reque

st

4. 以 HTTP 協定回覆 Response

1. 以 URL 描述索取的資源位置向 Server 發送要

求

3. 從 URL 描述的位置將 HTML 文件取出並回覆給 Client

5. 接收到 HTML 後由 Browser 解析後根據 HTML 描述定義

將資料呈現出來

Tra

inin

g C

ou

rse, C

S, N

CTU

21

World Wide Web - Related Technology (1)World Wide Web - Related Technology (1)

其他衍生相關的 WWW 技術應用• XML

• XHTML

• CSS

• XSL

XML• Extensible Markup Language （可延伸表示語言）• 前身為 SGML 標示語言• 可自己定義文件中各種資料的意義• 藉由不同的意義，可以達到不同系統間資料相互交流的共通格

式之一• 同樣為 W3C 所制訂與維護的標準之一

Tra

inin

g C

ou

rse, C

S, N

CTU

22


XHTML • 可延伸超文件標示語言（ eXtensible HyperText Markup Languag

e ）• 原屬意為取代 HTML 的新規則• 語法上比 HTML 更加嚴謹• 不同於 HTML 基於 SGML 發展而成， XHTML 則是基於 X

ML 發展而成• XML 可以算是 SGML 的一個子集• 語法越寬鬆（如 HTML ）對編寫者越輕鬆，但對電腦程式處理越困難

• 幾乎所有瀏覽器正確解析 HTML 同時，都相容 XHTML 語法• 較有利於推廣應用到其他平台與不同瀏覽器上

Tra

inin

g C

ou

rse, C

S, N

CTU

23


CSS• Cascading Style Sheets （串接樣式表）• 用來輔助加強結構化文字檔（如 HTML, XHTML, … 等）的網頁呈現效果

• 同樣為 W3C 所制訂與維護的標準之一• 善用 CSS 串接樣式表可以有效將網頁呈現效果的設定與網頁

的內容結構分開，多了許多好處加強文件的可讀性文件的結構更加靈活簡化文件的結構可以做到依個人習慣選擇顯示樣式

Tra

inin

g C

ou

rse, C

S, N

CTU

24


XSL• eXtensible Stylesheet Language

• 與 CSS 具有類似的功能• 因為 XML 僅是描述各項資料的意義，並沒有描述資料顯示的

能力• 必須借重 XSL 或 CSS 來定義 XML 資料的呈現方式• XSL 可以選擇和過濾 XML 中的資料，並將其轉換成 HTML

或其他文件格式• 對於 XML 資料， XSL 仍是首選的樣式描述語言

Tra

inin

g C

ou

rse, C

S, N

CTU

25

Dynamic Web-Page TechniquesDynamic Web-Page Techniques

單純由 HTML 所建構的網頁皆統稱為靜態網頁靜態網頁已經無法滿足設計者追求多元化網頁的需求

相關技術主要分成兩類• Client Application

由用戶端處理• Server Application

由伺服器端處理

Tra

inin

g C

ou

rse, C

S, N

CTU

26

Dynamic Web-Page TechniquesDynamic Web-Page Techniques－－ Client Application (1)Client Application (1)

在用戶端透過 Application 加強瀏覽效果的各種方式• Ex:透過 Script 控制選單的改變

http://www.cs.nctu.edu.tw/chinese/doc/announcements/index.php

• Ex: 藉由 Flash 呈現互動式網頁http://www.7-11.com.tw/

程式由主機取回到用戶端，由瀏覽器執行該程式

執行過程皆在用戶端上面處理

Tra

inin

g C

ou

rse, C

S, N

CTU

27


Client Application 可分為兩種類型• Client Script Language

JavaScript JScript VBScript

• Client Interactive Technology Java Applet Flash XMLHTTP AJAX

Tra

inin

g C

ou

rse, C

S, N

CTU

28


Client Script Language• 這類 Script 有賴於瀏覽器解析編譯，因此主機將程

式碼傳回給用戶端再執行，安全性較差，且展現結果可能依瀏覽器而異。

• 皆屬於直譯式（ interpreter ）的語言，程式中只要有一行錯誤，之後的程式就不會被執行

• 不僅可以作些計算，還可以處理 HTML 資料或是 CSS 串接樣式表，動態改變畫面呈現效果

• Script Language, CSS, HTML 的技術合起來又稱為 DHTML

Tra

inin

g C

ou

rse, C

S, N

CTU

29


• JavaScriptJavaScript 並非 JavaJava 是由 Sun 昇陽電腦所提出來的物件導向語言， JavaSc

ript 是由網景通訊公司（ Netscape ）所提出來的 Script Language

JavaScript 原名為 LiveScript ，最初 interpreter 內建在 Navigator 2.0 瀏覽器中

JavaScript 也已經正式由 ECMA 制訂為標準稱為 ECMAScript

有著跨平台跨瀏覽器的優勢，較多設計師採用

Tra

inin

g C

ou

rse, C

S, N

CTU

30


• JScript微軟對 ECMAScript 規範的實現版本與 JavaScript 有極高相似度第一個版本隨著 IE 3.0 的時候一起發佈也被 Windows Script Host 與 ASP 所使用JScript 最新版採用尚在草案階段的 ECMAScript4.0 規範，

定名為 JScript .NETJScript .NET 顧名思義，可以在 .Net 環境下編譯使用

Tra

inin

g C

ou

rse, C

S, N

CTU

31


• VBScriptVisual Basic Script 的簡稱，或稱 VBS微軟自行開發的 Script Language 僅能使用在 IE 瀏覽器上跨平台能力差，僅部分外掛可讓 Mozilla Suite 瀏覽器解析可視為 VB Language 的簡化版有著 Basic 容易學習的特性廣泛用於 ASP 程式著撰寫上VBScript 可以透過 Windows 使用部分 Com 物件

Tra

inin

g C

ou

rse, C

S, N

CTU

32


Client Interactive Technology• Java Applet

Java Applet 又簡稱為 Applet1990 年代中期誕生，同樣是昇陽公司的產物，也是使 Java 走紅的功臣

可視為 Web 環境下的 Java 小應用程式使用用戶端的 Java 環境來執行解析 Applet 的 Bytecode 內容

用戶端沒有 Java 環境就無法使用Applet 容易潛藏安全性問題推廣網頁 http://java.sun.com/applets/Ex:

– http://java.sun.com/applets/jdk/1.4/demo/applets/Clock/example1.html

Tra

inin

g C

ou

rse, C

S, N

CTU

33


• Flash原名為 Macromedia Flash ，簡稱 Flash （前身為 FutureSpla

sh ）現稱為 Adobe Flash （因 Macromedia 於 2005 年被 Adobe 併購）

Macromedia 公司所設計的二維動畫軟體藉由 Flash Player 播放，瀏覽器需安裝 Player 外掛才可使

用第一個版本在 1996 年提出，到 2000 年開始被普遍運用在

網頁或多媒體上公司網頁 http://www.adobe.com/products/flash/flashpro/Ex:

– http://video.google.com/

Tra

inin

g C

ou

rse, C

S, N

CTU

34


• XMLHTTP最初由微軟所提出，於 IE5 中使用，爾後被其他瀏覽器所支援

可視為一組 API 的函數集可以被 JavaScript, JScript, VBScript 等 Client Script Languag

e 所使用透過 HTTP 在瀏覽器與伺服器之間收發 XML 或是其他數據

最大的特色就是就可動態更新網頁內容不需要重新讀取整個網頁或安裝額外外掛XMLHTTP 也是 AJAX 技術應用的重要一環

Tra

inin

g C

ou

rse, C

S, N

CTU

35


• AJAXAsynchronous JavaScript and XML

http://blog.patterns.cn/articles/ajax.html由 Jesse James Garrett 所提出的概念建立互動式網頁應用的開發技術透過 JavaScript 操作 DOM 動態操作網頁資料的呈現並使用 XML 配合 XMLHTTP 與伺服器進行非同步資料交

換方式來取得更新資訊有效加速網頁更新速度Ex:

– http://maps.google.com/

Tra

inin

g C

ou

rse, C

S, N

CTU

36

Dynamic Web-Page TechniquesDynamic Web-Page Techniques－－ Server Application (1)Server Application (1)

Client Application 雖然可以在用戶端瀏覽器上達到更多樣化的呈現效果

對於使用者與伺服器的互動仍是有限， Client Application 仍無法做到

Server Application (Web Application ）的概念被提出來藉由伺服器來處理使用者所提供的資訊（或要求），進

行運算處理後再將適當的資料回傳給使用者設計師開始藉由 Common Gateway Interface (CG) 技術

來達到使用者與伺服器互動的需求與目標

Tra

inin

g C

ou

rse, C

S, N

CTU

37


CGI: Common Gateway Interface• 單純的 HTML 僅能呈現靜態網頁效果

網路越趨發達，網站單純扮演資料提供者的角色已經不敷使用

越來越需要與使用者互動，瞭解使用者需要什麼根據使用者需求給予適當的資料

• CGI （通用閘道介面）成了滿足這些需求的重要技術• CGI 描述了用戶端與伺服器傳輸數據的一種標準• 1993 年由 NCSA 開發了具 CGI 能力雛形的 Web Se

rver

• 透過 CGI 介面與用戶端瀏覽器溝通的程式統稱為 CGI 程式（即 Web Application ）

Tra

inin

g C

ou

rse, C

S, N

CTU

38


• 當 URL 所指定的是一支 CGI 程式的位置，網頁伺服器就會產生一支 Process 去執行 CGI 程式

• 程式結束後關閉這 Process

• 資料的讀取相較於單純靜態網頁要來的慢

Client Server

CGI process

HTTP Request

HTTP Response

Tra

inin

g C

ou

rse, C

S, N

CTU

39


• CGI 程式可以用大多數的程式語言來撰寫Web Server 並不需要知道 CGI 程式使用何種語言完成部分語言是專為 CGI 程式所設計，因此使用這類語言撰寫

CGI 程式可以享受到語言特性所帶來的便利性• 大多數常用的程式語言皆以 interpreter （直譯器）

方式在執行，不需要特別編譯（ C/C++除外）• 採用直譯器方式，修改程式相當方便• 直譯式的語言共通的缺點 - 執行速度較編譯式語言慢

Tra

inin

g C

ou

rse, C

S, N

CTU

40


最常用來撰寫 CGI Language 如下• Perl

• ASP, ASP.NET

• JSP

• PHP （後續課程我們將以 PHP 為主要介紹的語言） Perl

• Practical Extraction and Report Language ，由 Larry Wall 所設計

• 1987 年發表，集合了 C, sed, awk, shell script 等語言特性• 早期最廣泛使用的 CGI 語言之一• 不僅在 CGI 用途廣泛，多數 Shell Script 也採用 Perl 來完成• 推廣網頁 http://www.perl.org/

Tra

inin

g C

ou

rse, C

S, N

CTU

41


ASP, ASP.NET• ASP 全名為 Active Server Page

• 由微軟開發的 Server Application 開發的 Script Language

• ASP.Net 為下一代 Server Application 其架構不同於 ASP 設計• 官網 http://www.microsoft.com/taiwan/msdn/asp.net/

Ex: http://msdn.microsoft.com/library/default.asp

• ASP.NET 採用 Cache 架構，增加執行讀取時的速度與效能第一次讀取檔案時會先進行編譯爾後讀取同樣檔案，就會將之前編譯過的 Cache 直接輸出

Tra

inin

g C

ou

rse, C

S, N

CTU

42


JSP• Java Server Page ，由 Sun 倡導的技術標準• 仍以 Java 語言作為主要的 Script Language

• JSP 程式會被編譯器編譯成 Java Servlets 的 Bytecode 再交由 Java 環境轉譯成機器碼執行

• 同樣也是專為 Web Server 所設計的 Server Application 平台• 推廣網頁 http://java.sun.com/products/jsp/

• Ex: http://java.sun.com/webservices/jwsdp/index.jsp

Tra

inin

g C

ou

rse, C

S, N

CTU

43


PHP• 早期的全名為 Personal HomePage

• 官方正式名稱為 Hypertext Preprocessor 的遞迴縮寫• 仍舊為了 CGI 所設計的 Script Language

• 經過幾經改版後，與 Perl 同樣可作為 Shell Script Language 甚至開發 GUI 視窗介面

• PHP 運用於 CGI 的撰寫不僅方便，更有強大與方便的函數庫可以使用

• 後面章節將會以此語言為主• 推廣網頁 http://www.php.net/

• Ex: http://bugs.php.net/report.php

Tra

inin

g C

ou

rse, C

S, N

CTU

44


為了解決執行速度效能問題，而有 FastCGI 的觀念提出• FastCGI 只能用於修改頻率不高的 CGI 程式• 需要網頁伺服器支援

CGI 的執行時間主要花在兩個部分• 由伺服器產生 Process 的時間• 直譯式語言編譯的時間

FastCGI• 概念上以產生持續性 CGI Process 的設計方式• 每種網頁伺服器的實作方式可能不太一樣• CGI 程式會被設計成重複做同樣事情的迴圈• 每次迴圈結束， CGI 程式得通知網頁伺服器結束這次的連線，但並不會將 CGI Process 關閉，等待下次連線進來繼續使用

Tra

inin

g C

ou

rse, C

S, N

CTU

45

Database SystemDatabase System

隨著網路的發達，資料量日益龐大• 傳統直接將原始資料存放在磁碟中的方式漸漸不符合需求

傳統儲存資料方式的問題• 礙於檔案系統限制，效能難以提昇• 資料量過於龐大，難以迅速搜尋• 資料間的關係混雜不明• 資料重複的問題

Tra

inin

g C

ou

rse, C

S, N

CTU

46

Database System Database System －－ HistoryHistory

Database ( 資料庫，簡稱 DB)• 最早是在 1964 年左右由從事軍事資訊系統的工作者提出，當時是使用 “ Data Base” 這個詞

• 代表“在 Time-Sharing System 中讓 End-User ( 包含 Application) 可以互相存取共享的資料群集”

• 世界第一台 DB

Tra

inin

g C

ou

rse, C

S, N

CTU

47

Database System Database System －－ History (2)History (2)

1969 年， IBM 開發出 Hierarchical DB: IMS• 能支援 one-to-many mapping

• 但是難以做到 many-to-many mapping

70 年代， CODASYL 組織提出 Network DB• 使用網狀架構，有效解決 many-to-many mapping

• 複雜度提升關聯式資料庫的崛起

※ Data Mapping• one-to-one, many-to-one, one-to-many, many-to-many

Tra

inin

g C

ou

rse, C

S, N

CTU

48

Database System Database System －－ Relational DBRelational DB

關聯式資料庫 (Relational Database)• 研究學者們開始對於 Hierarchical & Network DB 這類硬體導向的設計產生質疑，他們開始思考能在單一硬體中放入抽象的 Entity ，並且讓這些 Entity Set 之間建立類似 link 的關係，這樣的思維使 Relational DB 誕生

• 其最大的概念是認為真實世界中的所有事物彼此皆包含有某種程度的關係，因此可以將這些事物表示成一個 Entity or Entity Set ，再將它們的關係記錄下來，所以簡單來說便是真實世界的縮小版。

• 導入的重要觀念：關聯模型、正規化世界主流的關聯式資料庫

• Oracle• IBM DB2• Microsoft SQL Server • Sun MySQL• PostgreSQL• Sybase SQL Sever

Tra

inin

g C

ou

rse, C

S, N

CTU

49

Database System Database System －－ OODBOODB

物件導向式資料庫 (Object-Oriented DataBase)• 關聯式資料庫的做法因為將資料做了一定程度的正規化 (精簡

化 ) ，其效能相當好，但另一方面卻造成資料呈現出來的語意 (semantic) 讓人難以理解

• 物件導向式資料庫主張儲存的資料結構應該具有語意性• 與關聯式資料庫相比，可以處理更複雜的資料，但也損失了效

能目前兩種 DB (Relational DB & OODB) 在不同領域各擅勝場，有部分關聯式資料庫也導入了物件導向的觀念，形成了所謂物件關聯式資料庫

常見的物件式導向資料庫• O2, Versant, Ontos, Objectstore, Itasca, Objectivity, Gemstone,

Tra

inin

g C

ou

rse, C

S, N

CTU

50

Database System Database System －－ Distributed DBDistributed DB

隨著 Internet 興起，網路上的資料大幅度地增加• 原本單一硬體的垂直升級已經漸漸無法負荷如此龐大的資料運

算• 因此開始思考是否能用水平式的提升方法，將眾多的硬體串連

起來，並將資料分散在這些機器當中，各自負擔部份的資料運算及儲存，同時達到冗餘性 (Redundancy) 的需求。

• 因而有了 Distributed DB 的出現，這漸漸地成為了趨勢。(ex. Google Cloud Computing)

Tra

inin

g C

ou

rse, C

S, N

CTU

51

Q&AQ&A

Documents

Chapter 1: Introduction. Training Course, CS, NCTU 2 Overview History of Internet World Wide Web History Technology Related Technology Dynamic Web-Page