1 / 30

動態網頁開發原理與環境

動態網頁開發原理與環境. By Cwlin. Web 技術的沿革. 自網際網路發展以來網頁一直是重要的一環 以往的網頁扮演的角色只是網路上可供多人存取的靜態的文件 2000 年前後動態網頁技術的誕生，使得網頁得以提供一些功能，如：討論區、聊天室 … 等 CGI 、 ASP 、 PHP 、 JSP … 等 2005 年 Google 使用 AJAX 技術製作 Google Map 讓前端的 JavaScript 能與後端的動態網頁技術互動 網頁 技術已逐漸取代應用程式開發

trixie
Download Presentation

動態網頁開發原理與環境

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 動態網頁開發原理與環境 By Cwlin

  2. Web 技術的沿革 • 自網際網路發展以來網頁一直是重要的一環 • 以往的網頁扮演的角色只是網路上可供多人存取的靜態的文件 • 2000年前後動態網頁技術的誕生，使得網頁得以提供一些功能，如：討論區、聊天室…等 • CGI、ASP、PHP、JSP… 等 • 2005年 Google 使用 AJAX 技術製作 Google Map 讓前端的 JavaScript 能與後端的動態網頁技術互動 • 網頁技術已逐漸取代應用程式開發 • 2010年，HTML5 技術逐漸成熟解決以往網頁開發的限制，如: 影像的處理(Canvas), Client-Server 連線(Socket)

  3. Web 技術的區分 • 以從使用者端 (前端) 至伺服器端 (後端) 做區分網頁技術 使用者 瀏覽器 伺服器 HTML/CSS/JavaScript 網際網路 Apache/PHP/MySQL

  4. Web 技術應用範圍 • 使用者端的技術 • 瀏覽器 • 指的是使用者用來觀看網頁所使用的應用程式，如：Microsoft IE/Mozilla Firefox/Google Chrome • HTML • 網頁內容的表達 • CSS • 網頁樣式的表達 • 瀏覽器端的程式語言 • 用來做使用者資料的驗証，視窗效果的處理，如：JavaScript/VBScript • 伺服器端的技術 • 網頁伺服器 • 用來提供網頁供瀏覽器存取，如：Apache/IIS…等 • 伺服器端的程式語言 • 動態網頁程式語言，動態提供網頁的內容，可存取資料庫，如：PHP/ASP/JSP…等 • 資料庫 • 存放動態網頁中需要的資料，如：MySQL/Oracle/MsSQL…等

  5. 以 Web 開發的優點 • 跨平台 • 使用者可以從不同作業系統，不同瀏覽器去觀看同一份網頁 • 集中式管理 • 使用者不論在何台電腦、地點可以看到相同的內容，集中式的資料管理，不需做同步或下載的動作 • 較容易維護 • 比起一般桌面程式、Web 開發的問題幾乎可以直接從伺服器上做處理 • 使用者端的硬體需求較低 • 比起一般桌面應用程式，網頁的呈現使用者端所需要的硬體需求較低

  6. 開發使用的技術 • 開發使用的技術一般以前端/後端做區分 • 前端的技術通常為統一的標準，如: HTML/CSS 由 W3C 所製定，JavaScript 由 ECMA 所製定 • 後端的技術則由不同公司提出不同的解決方案，常見的有 • Microsoft • IIS + ASP + MsSQL • Oracle • Sun Application Server + JSP + Oracle • Open Source • Apache + PHP + MySQL • 其中 Microsoft 及 Oracle 是需要付費的，因此一般若非企業開發通常使用 Open Source 的解決方案 • 而 Apache + PHP + MySQL 也不是 Open Source 唯一的解決方案

  7. 網頁開發技術架構圖 Client Web Server Database Server HTTP Protocol HTML Browser PHP Apache HTTP Server CSS MySQL Database MySQL API (SQL) JavaScript AJAX (JSON) HTMLDOM

  8. HTML 與 CSS • HTML是由 W3C 所製定出用來表達網頁內容的一種標籤語言，能夠以純文字的方式表答網頁中的文字、圖片、連結與編排…等。 • 在 HTML 4.01 以前 HTML可以表達網頁的樣式，但也被詬病無法有結構的表示網頁資料 • 因此在 HTML 4.01 之後 W3C 製定了 CSS，專門用來表達網頁的樣式，也提供了更多可設定的樣式細節 • 在 HTML 4.01 之後雖然可以延用舊的樣式語法，但標準上應該使用 CSS

  9. JavaScript • JavaScript 是目前主流的使用者端程式語言 • 由 ECMA 所製定規格，各家瀏覽器公司實作 • 用來處理 HTML 的內容: 畫面的顯示/表單資料的處理 • 內嵌在 HTML 當中與 HTML 一起撰寫 • 無法直接連線資料庫，需要透過 AJAX 技術 • 語法格式

  10. HTMLDOM • HTMLDOM(Document Object Model) • 一種讓 JavaScript 以物件方式操作 HTML 的方法 • 讓 JavaScript 可以選擇 HTML 中的特定標籤做操作，主要用於 • 更新網頁資訊 • 製作動畫、特效

  11. HTML 與 JavaScript 的瀏覽器相容性問題 • 瀏覽器的開發公司眾多，如: IE/Firefox/Chrome/Opera/Safari…等，所支援的 JavaScript 程度與呈現的效果不一 • 因此在開始 JavaScript 會有所謂相容性的問題，意即同樣的寫法所呈現的效果不同，甚至語法上的差異也有可能影響程式是否可正常運作 • 通常解決瀏覽器相容性問題會使用 JavaScript 的 Framework，如: Dojo, jQuery, YUI, Prototype…等

  12. PHP • PHP 是目前是 Open Source 動態網頁開發中較多人使用的伺服器端程式語言 • http://php.net/ • 用於開發網站的各項功能，可存取資料庫 • 伺服器動態網頁程式語言會在網頁伺服器被執行，因此從瀏覽器是看不到 PHP 程式語言的 • 基本語法格式

  13. MySQL • 目前 Opensource 中最常使用的關聯式資料庫 • 幾乎目前大部份的 Open source 軟體都採用這套資料庫 • 最早之前有 Sun 公司發展，後被 Oracle 所併購 • http://www.mysql.com/

  14. Apache HTTP Server • Open Source 中最常用的網頁伺服器軟體 • http://httpd.apache.org/ • Apache 網頁伺服器有過一半以上的市佔率，是目前最多人使用的網頁伺服器

  15. 何謂 AJAX • AJAX 的全名為 Asynchronous JavaScript and XML • 使用 JavaScript 透過 XML 非同部存取資料的技術 • XML 是一種可通用來表達資料的語言 • 解決 JavaScript 無法存取資料庫的限制 • 以 XML 做為媒介解決了 JavaScript 無法存取資料庫的問題 • 可以透過 JavaScript 更新網頁上的內容 • AJAX 為技術的名詞，資料的傳遞並非一定要持用 XML，目前較通用的格式為 JSON • 主要由於 JSON 的格式較為簡潔，易於程式剖析

  16. 傳統網頁在更新資訊上的限制 • 更新網頁內容時必須更新整個網頁內容 • 不必要的網頁資訊重複傳輸，使用者等待時間長 • JavaScript 無法存取資料庫 • 設計用來處理 Client 端的資料驗證、頁面效果處理 • 用戶端的程式語言直接存取資料庫是不安全的作法，

  17. 資料處理的同步與非同步 參考自 O’Reilly 網站

  18. AJAX 的優點 • 可更新網頁上部份的資料，無須重新整理網頁 • 加速網頁資料呈現速度 • 傳輸資料量小 • 配合 JavaScript 的視覺處理功能及事件，讓網頁程式可以像一般應用程式開發 • 目前多數的主要網站均採用 AJAX 的開發方式 • 如: Google 搜尋

  19. 開發的環境準備 • 正常的伺服器環境會使用 Linux 相關的作業系統，如: Ubuntu • 開發時通常會在自己電腦的 Windows 安裝簡易環境如: Wamp，便於設定與測試 • 一般而言 Apache, PHP, MySQL 是跨平台的不僅限於 Linux 伺服器

  20. Wamp簡介 • WAMP 的全名是 Apache, PHP, MySQL on Windows，意即在 Windows 的 Apache, PHP, MySQL • WAMP 讓使用者在 Windows 上可以一次安裝好開發所需的伺服器相關套件，並提供了簡易的介面操作，省去了以往安裝的複雜性 • http://www.wampserver.com/en/

  21. Wamp的版本選擇 • Wamp在下載時提供了許多的版本組合可供開發者下載 • 目前較穩定的版本為 Apache 2.2 與 PHP 5.3 • 32位元或64位元依安裝的作業系統而定，一般為32位元

  22. Wamp安裝 • 網頁伺服器安裝會使用電腦的 80 Port，務必確認沒有其他程式已經佔用，如: Skype • 若發生佔用的情況請更改其他程式所使用的 Port • 若非使用 80 Port 在進入自己架設的網站時必須額外輸入 Port • 安裝完成執行，會在左下角出現圖示 • 綠色為正常執行

  23. Wamp參數設定 • 在圖示上點選左鍵會出現選單，下圖所示 • 根據使用的程式需求可能會要開啟不同的套入件可透過此介面做設定

  24. 進入網頁首頁 • 打開瀏覽器輸入以下網址 • http://localhost/ • 可以看到目前已開啟的 PHP 套件與目前存在的網站資料 • 未來開發只需在 Wamp的安裝目錄中的 www 中建立資料夾即可在此頁看到 • 如: C:\wamp\www

  25. phpMyAdmin • phpMyAdmin是一套使用 PHP 所撰寫的 MySQL 資料庫管理介面 • 在 Wamp中內含此網頁，可由 Wamp選單中點選 phpMyAdmin或輸入網址 http://localhost/phpmyadmin/進入 • 建立或管理資料庫時會使用

  26. Netbeans簡介 • Netbeans是一套以 Java 為基礎的整合型開發環境，最早主要提供 Java 程式圖型化的開發環境，近年也支援了 C/C++, PHP,HTML,JavaScript 等語言 • 一般開發環境僅支援單一語言如 PHP 或 HTML 或 JavaScript，Netbeans在此部份可同時支援，且提供多項方便的功能，並且跨平台，這是為什麼選擇 Netbeans的原因 • Netbeans唯一的缺點就是由於採用 Java 為基礎因此效率較差 • http://netbeans.org/

  27. Netbeans版本的選擇 • 安裝 Netbeans之前必須先安裝 Java 環境 • 目前 Netbeans的最新版本為 7.1.2 • 它提供了多種套裝的組合可便於下載，如目前只有使用到 PHP 開發，可直接下載 PHP 的版本

  28. Java 開發工具 • Java 開發工具(JDK, Java Development Kit)的下載可至 http://www.oracle.com/technetwork/java/javase/

  29. 實作 • 在 Wamp目錄底下建立一個資料夾 my_first_web 並放入首頁 index.htm • 在 Netbeans 開啟新 PHP 專案,使用已存在的原始碼, 選擇 my_first_web

  30. 問題 • HTML5 有那些新功能? • 何謂 JSON? • 有那些網站使用 AJAX? • HTML 與 CSS 的官方規格書網址為何? 裡面說明了那些內容?

More Related