Transcript 0716
動態網頁開發原理與環境 By Cwlin Web 技術的沿革 自網際網路發展以來網頁一直是重要的一環 以往的網頁扮演的角色只是網路上可供多人存取的靜態 的文件 2000年前後動態網頁技術的誕生，使得網頁得以提供 一些功能，如：討論區、聊天室…等 2005年 Google 使用 AJAX 技術製作 Google Map 讓前 端的 JavaScript 能與後端的動態網頁技術互動 CGI、ASP、PHP、JSP … 等 網頁技術已逐漸取代應用程式開發 2010年，HTML5 技術逐漸成熟解決以往網頁開發的 限制，如: 影像的處理(Canvas), Client-Server 連線 (Socket) Web 技術的區分 以從使用者端 (前端) 至伺服器端 (後端) 做區分 網頁技術 使用者 瀏覽器 HTML/CSS/JavaScript 伺服器 網際網路 Apache/PHP/MySQL Web 技術應用範圍 使用者端的技術 瀏覽器 HTML 網頁樣式的表達 瀏覽器端的程式語言 網頁內容的表達 CSS 指的是使用者用來觀看網頁所使用的應用程式，如：Microsoft IE/Mozilla Firefox/Google Chrome 用來做使用者資料的驗証，視窗效果的處理，如：JavaScript/VBScript 伺服器端的技術 網頁伺服器 伺服器端的程式語言 用來提供網頁供瀏覽器存取，如：Apache/IIS…等 動態網頁程式語言，動態提供網頁的內容，可存取資料庫，如：PHP/ASP/JSP…等 資料庫 存放動態網頁中需要的資料，如：MySQL/Oracle/MsSQL…等 以 Web 開發的優點 跨平台 集中式管理 使用者不論在何台電腦、地點可以看到相同的內容，集 中式的資料管理，不需做同步或下載的動作 較容易維護 使用者可以從不同作業系統，不同瀏覽器去觀看同一份 網頁 比起一般桌面程式、Web 開發的問題幾乎可以直接從 伺服器上做處理 使用者端的硬體需求較低 比起一般桌面應用程式，網頁的呈現使用者端所需要的 硬體需求較低 開發使用的技術 開發使用的技術一般以前端/後端做區分 前端的技術通常為統一的標準，如: HTML/CSS 由 W3C 所製定， JavaScript 由 ECMA 所製定 後端的技術則由不同公司提出不同的解決方案，常見的有 Microsoft Oracle Sun Application Server + JSP + Oracle Open Source IIS + ASP + MsSQL Apache + PHP + MySQL 其中 Microsoft 及 Oracle 是需要付費的，因此一般若非企業開 發通常使用 Open Source 的解決方案 而 Apache + PHP + MySQL 也不是 Open Source 唯一的解決方案 網頁開發技術架構圖 Client CSS JavaScript HTML DOM Database Server HTTP Protocol AJAX (JSON) Apache HTTP Server Browser HTML Web Server PHP MySQL API (SQL) MySQL Database HTML 與 CSS HTML 是由 W3C 所製定出用來表達網頁內容的 一種標籤語言，能夠以純文字的方式表答網頁 中的文字、圖片、連結與編排…等。 在 HTML 4.01 以前 HTML 可以表達網頁的樣式， 但也被詬病無法有結構的表示網頁資料 因此在 HTML 4.01 之後 W3C 製定了 CSS，專門 用來表達網頁的樣式，也提供了更多可設定的 樣式細節 在 HTML 4.01 之後雖然可以延用舊的樣式語法， 但標準上應該使用 CSS JavaScript JavaScript 是目前主流的使用者端程式語言 由 ECMA 所製定規格，各家瀏覽器公司實作 用來處理 HTML 的內容: 畫面的顯示/表單資料的處理 內嵌在 HTML 當中與 HTML 一起撰寫 無法直接連線資料庫，需要透過 AJAX 技術 語法格式 HTML DOM HTML DOM (Document Object Model) 一種讓 JavaScript 以物件方式操作 HTML 的方法 讓 JavaScript 可以選擇 HTML 中的特定標籤做操作， 主要用於 更新網頁資訊 製作動畫、特效 HTML 與 JavaScript 的瀏覽器相容性問題 瀏覽器的開發公司眾多，如: IE/Firefox/Chrome/Opera/Safari…等，所支援的 JavaScript 程度與呈現的效果不一 因此在開始 JavaScript 會有所謂相容性的問題， 意即同樣的寫法所呈現的效果不同，甚至語法 上的差異也有可能影響程式是否可正常運作 通常解決瀏覽器相容性問題會使用 JavaScript 的 Framework，如: Dojo, jQuery, YUI, Prototype…等 PHP PHP 是目前是 Open Source 動態網頁開發中較多人使用的伺服器端程 式語言 http://php.net/ 用於開發網站的各項功能，可存取資料庫 伺服器動態網頁程式語言會在網頁伺服器被執行，因此從瀏覽器是看 不到 PHP 程式語言的 基本語法格式 MySQL 目前 Open source 中最常使用的關聯式資料庫 幾乎目前大部份的 Open source 軟體都採用這套 資料庫 最早之前有 Sun 公司發展，後被 Oracle 所併購 http://www.mysql.com/ Apache HTTP Server Open Source 中最常用的網頁伺服器軟體 http://httpd.apache.org/ Apache 網頁伺服器有過一半以上的市佔率，是 目前最多人使用的網頁伺服器 何謂 AJAX AJAX 的全名為 Asynchronous JavaScript and XML 使用 JavaScript 透過 XML 非同部存取資料的技術 XML 是一種可通用來表達資料的語言 解決 JavaScript 無法存取資料庫的限制 以 XML 做為媒介解決了 JavaScript 無法存取資料庫 的問題 可以透過 JavaScript 更新網頁上的內容 AJAX 為技術的名詞，資料的傳遞並非一定要持 用 XML，目前較通用的格式為 JSON 主要由於 JSON 的格式較為簡潔，易於程式剖析 傳統網頁在更新資訊上的限制 更新網頁內容時必須更新整個網頁內容 不必要的網頁資訊重複傳輸，使用者等待時間長 JavaScript 無法存取資料庫 設計用來處理 Client 端的資料驗證、頁面效果處理 用戶端的程式語言直接存取資料庫是不安全的作法， 資料處理的同步與非同步 參考自 O’Reilly 網站 AJAX 的優點 可更新網頁上部份的資料，無須重新整理網頁 加速網頁資料呈現速度 傳輸資料量小 配合 JavaScript 的視覺處理功能及事件，讓網頁 程式可以像一般應用程式開發 目前多數的主要網站均採用 AJAX 的開發方式 如: Google 搜尋 開發的環境準備 正常的伺服器環境會使用 Linux 相關的作業系統， 如: Ubuntu 開發時通常會在自己電腦的 Windows 安裝簡易 環境如: Wamp，便於設定與測試 一般而言 Apache, PHP, MySQL 是跨平台的不僅 限於 Linux 伺服器 Wamp 簡介 WAMP 的全名是 Apache, PHP, MySQL on Windows，意即在 Windows 的 Apache, PHP, MySQL WAMP 讓使用者在 Windows 上可以一次安裝好 開發所需的伺服器相關套件，並提供了簡易的 介面操作，省去了以往安裝的複雜性 http://www.wampserver.com/en/ Wamp 的版本選擇 Wamp 在下載時提供了許多的版本組合可供開發者下載 目前較穩定的版本為 Apache 2.2 與 PHP 5.3 32位元或64位元依安裝的作業系統而定，一般為32位元 Wamp 安裝 網頁伺服器安裝會使用電腦的 80 Port，務必確 認沒有其他程式已經佔用，如: Skype 若發生佔用的情況請更改其他程式所使用的 Port 若非使用 80 Port 在進入自己架設的網站時必須額 外輸入 Port 安裝完成執行，會在左下角出現圖示 綠色為正常執行 Wamp 參數設定 在圖示上點選左鍵會出現選單，下圖所示 根據使用的程式需求可能會要開啟不同的套入 件可透過此介面做設定 進入網頁首頁 打開瀏覽器輸入以下網址 http://localhost/ 可以看到目前已開啟的 PHP 套件與目前存在的網站資料 未來開發只需在 Wamp 的安裝目錄中的 www 中建立資料夾即可在此 頁看到 如: C:\wamp\www phpMyAdmin phpMyAdmin 是一套使用 PHP 所撰寫的 MySQL 資料庫管理介面 在 Wamp 中內含此網頁，可由 Wamp 選單中點 選 phpMyAdmin 或輸入網址 http://localhost/phpmyadmin/ 進入 建立或管理資料庫時會使用 Netbeans 簡介 Netbeans 是一套以 Java 為基礎的整合型開發環境， 最早主要提供 Java 程式圖型化的開發環境，近年 也支援了 C/C++, PHP, HTML, JavaScript 等語言 一般開發環境僅支援單一語言如 PHP 或 HTML 或 JavaScript，Netbeans 在此部份可同時支援，且提供 多項方便的功能，並且跨平台，這是為什麼選擇 Netbeans 的原因 Netbeans 唯一的缺點就是由於採用 Java 為基礎因 此效率較差 http://netbeans.org/ Netbeans 版本的選擇 安裝 Netbeans 之前必須先安裝 Java 環境 目前 Netbeans 的最新版本為 7.1.2 它提供了多種套裝的組合可便於下載，如目前 只有使用到 PHP 開發，可直接下載 PHP 的版本 Java 開發工具 Java 開發工具(JDK, Java Development Kit)的下載 可至 http://www.oracle.com/technetwork/java/javase/ 實作 在 Wamp 目錄底下建立一個資料夾 my_first_web 並放入首頁 index.htm 在 Netbeans 開啟新 PHP 專案,使用已存在的原始 碼, 選擇 my_first_web 問題 HTML5 有那些新功能? 何謂 JSON? 有那些網站使用 AJAX? HTML 與 CSS 的官方規格書網址為何? 裡面說明 了那些內容?