Django -- 從平凡到超凡

第 1 章    簡介

(1) 全球網

∗ 全球網 (World wide web) 發展歷史

▸ 網際網路 (Internet):連結全球網路的網路,全球網是網際網路的一部份

▸ 1960 年 8 月:美國麻省理工學院 (MIT) 教授 J.C.R. Licklider 開始發想 "Galactic Network",為網際網路的前身

▸ 1960 年代:網際網路由美國國防部先進研究計畫局 (Advanced Research Project Agency, ARPA) 開始發展

✶ 將大學及研究機構的電腦以網路連結稱為 ARPANET,僅允許大學、研究機構用

▸ 1980 年代:區域網路 (Local area network, LAN) 及個人電腦大為風行,使美國開放 Internet 的商業應用

▸ 1990 年代:研究學者 Tim Berners-Lee 在歐洲粒子物理實驗室 (European Laboratory for Particle Physics, CERN) 研發全球網 (World wide Web),以便在 CERN 網路中能輕易存取相互參考的文件,透過超文件連結 (Hypertext link, hyperlink) 存取相關的文件

▸ 在全球網上的一份文件稱為網頁 (Web page),可利用統一資源定位 (Uniform resource locator, URL) 的位址找到 (也稱為網址,Web address)

▸ 網站 (Web site):網頁及其相關檔案 (例如圖檔) 在網際網路中所存在的地方,通常屬於一個組織、企業、或個人

▸ 瀏覽器 (Browser):顯示網頁的程式,可透過輸入網頁的 URL 位址或者點選網頁中的連結 (Link) 而開啟其他網頁

✶ 在瀏覽器輸入 URL 或點選連結時,瀏覽器向網站伺服器提出請求 (Request)
✶ 常見的瀏覽器:Firefox, Google Chrome, Opera, Internet Explorer (IE), Safari, ...

▸ Web server (網站伺服器):回應瀏覽器的請求而送出網頁的電腦,所送出的網頁稱為回覆 (Response)

✶ 在電腦上安裝網站伺服器軟體後,電腦就變成網站伺服器
✶ 常見的網站伺服器:Apache, Nginx, Internet Information Server (IIS), Lighttpd, ...

∗ 全球網通訊協定

▸ URL 由 2 個部分組成:協定 (通常是 HTTP) 及網站伺服器域名 (Domain name) 或網際網路協定位址 (Internet Protocol address, IP address),例如:http://www.google.com/http://74.125.203.103/

✶ 超文件傳輸協定 (Hypertext transfer protocol, HTTP):傳輸網頁的通訊協定,格式為 http://
✶ 域名 (Domain name):能識別網路上伺服器的唯一位址,例如:www.google.com

▸ 安全超文件傳輸協定 (Hypertext transfer protocol secure, HTTPS):提供安全性高的網際網路連結,常用於銀行系統, 格式為 https://

∗ 網站發佈 (Publish the web site)

--> 將網頁上傳至網站伺服器,使一般大眾能夠存取,有以下幾種方式:

▸ 自行架設網站伺服器

✶ 將電腦連接網路並安裝網站伺服器軟體,以提供大眾存取網頁及相關資料
✶ 可編輯靜態網頁資料,也可撰寫程式以開發 Web 系統 (Web system),網站開發自由度高
✶ 需自行負責伺服器的安裝、安全、維護、效能等工作

▸ 網站託管 (Web hosting)

✶ 將網頁及相關檔案上載至網際網路服務供應商 (Internet service provider, ISP) 所提供網站伺服器,即可提供大眾存取
✶ 網站功能大多僅包含靜態資料

▸ 雲端平台即服務 (Platform as a service, PaaS)

✶ 可編輯靜態網頁資料,也可撰寫程式以開發 Web 系統,然後部署到供應商所提供的設施
✶ 供應商負責提供伺服器軟硬體基礎設施,包括作業系統、資料庫、網路、儲存空間、安全、維護、效能等, 開發者僅需要維護自己的網頁資料及系統即可

(2) 資訊系統演進與 Web 系統架構

∗ 電腦程式與系統的演進:

▸ 文字介面程式:在 UNIX、DOS、或 Linux 之文字介面環境中執行程式,指令、輸入、及輸出均為文字

▸ 圖形介面程式 (Graphical user interface, GUI):桌上型或筆記電腦程式,在 X Windows、Microsoft Windows、 或 Mac OS X 環境中執行程式,系統的操作大多以圖形元件控制 (例如滑鼠、按鈕、選單等),亦可有圖形化輸出

▸ Web 系統 (Web systems):因應網際網路盛行,企業或個人開始製作網頁,並開發網站或 Web 系統, 達到瀏覽器隨時可連上系統的目標

▸ 行動裝置程式 (App):因應手持裝置盛行,圖形介面程式可安裝在行動裝置上,達到程式隨行的目標

▸ 雲端運算 (Cloud computing):利用各式各樣的雲端服務 (IaaS, PaaS, SaaS, ...),將程式或資料均放在雲端, 且改為「按需付費」的使用方式,大量節省資源

∗ Web 系統的運作模式:主從式架構 (Client/server architecture)

▸ 2 層式 (Two-tier) 系統

二層式架構
✶ 客戶端 (即瀏覽器) 透過 HTTP 協定向伺服器提出請求 (Request),並負責格式化及呈現網頁
✶ 伺服器端 (即網站伺服器) 負責處理及回應 (Response) 客戶端之請求

▸ 3 層式 (Three-tier) 或多層式 (Multi-tier) 系統

三層式架構
✶ 伺服器端再加上資料庫或其他應用系統成為三層:客戶層、處理層、及資料儲存層等
✶ 客戶層:處理使用者介面,將請求傳送至處理層
✶ 處理層:處理瀏覽器客戶層與資料處理層之間的互動
# 客戶層提出資料請求
# 處理層依據客戶層的請求執行相關處理或計算,需要時從資料庫中寫入或讀出資料,然後將結果傳送給客戶層
✶ 資料儲存層:於資料庫中儲存資料,並回覆處理層之要求
# 處理層及資料儲存層可以在同一部電腦
✶ 各層相關技術
# 客戶層:HTML, CSS, JavaScript, jQuery, CSS framework, JavaScript framework
# 處理層:WWW server, Server-side scripting, web framework
# 資料儲存層:Database management systems

(3) Web 系統開發相關技術及趨勢

∗ 前端 (Front-end, client-side):

▸ 瀏覽器:Firefox, Chrome, Opera, Safari, Internet Explorer (IE), Edge, ...

▸ 瀏覽器內容格式顯示語言:HTML, CSS

▸ CSS 預處理器 (Preprocessor):Sass, Less, Stylus, ...

▸ CSS 框架 (Framework):Bootstrap, Foundation, ...

▸ 前端程式語言:JavaScript, Flash, ...

▸ JavaScript 函式庫 (Library):jQuery

▸ JavaScript 框架:Angular, React, Vue, Backbone, Ember, ...

∗ 後端 (Back-end, server-side):

▸ 網站伺服器:Apache, Apache Tomcat, Nginx, Gunicorn, MS IIS, ...

▸ 後端程式語言:PHP, JSP, ASP, Perl, Python, Ruby, Node.js, ...

▸ 資料庫:Postgres, MySQL, MS SQL, Oracle, ...

Web 系統開發框架 (Web frameworks)

✶ PHP:Laravel, CakePHP, CodeIgniter, Prado, Symfony, Yii, Zend, ...
✶ JSP:Struts 2, JSF, Spring MVC, Wicket, ...
✶ Python:Django, Flask, Grok, Pylons, TurboGears, web2py, Zope2, ...
✶ Ruby:Camping, Ruby on Rails, Ramaze, ...
✶ Google App Engine:webapp2
✶ Microsoft:ASP.NET

∗ 工具使用趨勢:開發者必須知道的統計資料

瀏覽器使用率

最常使用的伺服器端語言

重要網站所使用的語言

程式語言排行榜

教材所使用的字體

教材中使用的字體所代表的意義如下:

上一章       下一章