PHP程式設計

Size: px

Start display at page:

Download "PHP程式設計"

亵储阎
9 years ago
Views:

1 零售業批貨技巧與網拍架站創業訓練班寫個網頁先建國科技大學資訊管理學系饒瑞佶

2 從網頁設計到網頁技術網頁設計的基礎就是在建立 HTML 網頁, 需要從伺服器下載至瀏覽器中顯示

3 客戶端網頁技術客戶端網頁技術 ( 單機 ) 是指程式碼或網頁是在使用者客戶端電腦的瀏覽器執行, 因為瀏覽器本身即支援直譯程式 ( 大部分是 JavaScript), 所以可以執行客戶端網頁技術

4 伺服端網頁技術伺服端網頁技術簡單的說就是在 WWW 伺服器上 ( 這門課用的是 Apache) 執行的應用程式 (ASP.NET PHP 等 ), 而不是在客戶端電腦的瀏覽器執行

5 HTML 介紹

6 HTML 4 HTML 標示語言是一種文件編排語言 ( 主要負責怎麼顯示文件內容 ), 其主要目的是編排顯示 Web 網頁 XHTML 是 HTML 4.01 版的下一個版本, 目前 HTML 的最新版本是 HTML5 HTML (HyperText Markup Language) 的語法是源於 SGML 語言, SGML (Standard Generalized Markup Language), 它是 Tim Berners-Lee 在 1991 年建立,1993 年 HTML 1.0 版由 Berners-Lee 和 Connolly 完成, 經過 3.2 版到 HTML 4.01 版, 它是一種文件內容的格式編排語言

7 HTML 標記語言 HTML 語言是一種文件內容的格式編排語言, 不像 SGML 允許定義如何標示文件的標籤,HTML 只是使用 SGML 慣用語法, 即標籤和屬性, 如下所示 : 標籤 (Tags):HTML 標籤是一個字串符號, 可以用來標示文字內容套用的編排格式, 例如 : 在 <p> 開頭標籤和 </p> 結尾標籤之中的文字內容, 就是使用預設格式編排成段落, 如下所示 : <p> 這是一個測試網頁 </p> 屬性 (Attributes): 每一個標籤可以擁有一些屬性來定義細部編排, 例如 :<img> 標籤的 src width 和 height 屬性, 可以指定顯示的圖形和尺寸的寬和高, 如下所示 : <img src="sample.jpg" width="20" height="30" >

8 HTML Tag( 標記 ) 使用中括號來定義標記應該有頭有尾, 中間夾住所要顯示的文字或圖形 <a href= > 建國科技大學 </a> 每個標記都有已經定義好的意義例如 <a> 定義超連結純文字檔 ( 使用一般的文字編輯器就可以作業 ) 無大小寫之分副檔名需要是.htm 或是.html < 標籤名稱屬性 = 設定值 >.. 要顯示之文件資料.. </ 標籤名稱 > <Tag Attributes ="Value">..Document Of Display.. </Tag> <a href= > 建國科技大學 </a>

9 網頁的結構 HTML 網頁的基本結構分為數個區塊, 分別標示網頁文件的不同用途, 如下所示 : <html> 標示是一份 HTML 網頁 <head> HTML 網頁的標題區塊. </head> <body> HTML 網頁的內容區塊.. </body> </html>

10 傳統網頁 (HTML4) 結構 <html> <head> <title> 網頁標題 </title> </head> <body> </body> </html> 內容主體標籤標頭標籤最外層標籤

11 標記撰寫的注意事項 1 瀏覽器在直譯 HTML 標籤時, 並不會檢查和顯示標籤語法的錯誤, 在撰寫 HTML 網頁時使用者需要自行注意, 因為 HTML 網頁如果出現直譯器看不懂的標籤, 例如 : 拼錯標籤名稱, 瀏覽器將直接跳過而不直譯一些 HTML 撰寫時的注意事項, 如下所示 : HTML 網頁是由標籤組成 :HTML 標籤是使用小於 < 和大於 > 符號夾著關鍵字, 大部分標籤都是成雙成對, 例如 : 段落編排標籤是 <p> 開頭和 </p> 結尾 HTML 標籤支援巢狀標籤 : 在 HTML 標籤中允許擁有其他 HTML 標籤, 例如 : 在 <h2> 標籤中有 <b> 標籤, 如下所示 : <h2><b> 我的個人首頁 </b></h2> HTML 標籤並不區分英文字母的大小寫 :HTML 標籤的 <head> <HEAD> 和 <Head> 都代表相同標籤, 在實務上建議使用小寫

12 標記撰寫的注意事項 2 HTML 的開始標籤可以有屬性值 : 例如 :<img> 標籤的 src 屬性指定顯示圖片的 URL 網址, 其值可以使用 " 或 ' 符號括起或不使用也可以, 建議使用 " 符號, 如下所示 : <img src="sample.jpg"> <img src=sample.jpg> HTML 網頁的換行 :HTML 文件只是標準 ANSI 文字檔,Enter 鍵的換行在瀏覽器並沒有作用, 如果文件內容需要換行, 請使用 <br/> 標籤 HTML 網頁的連續空白 : 連續空白在瀏覽器顯示時會簡化成一個空白字元註解文字 : 註解文字可以幫助我們維護 HTML 網頁,HTML 網頁的註解是使用 <! 字串開始 ; 以 -- 為開端和 --> 結尾, 瀏覽器在直譯和顯示網頁內容時會忽略這些註解行, 如下所示 :

13 HTML 4 範例 01:  02: <html> 03: <head> 04: <title>html 測試網頁 </title> 05: </head> 06: <body> 07: <h3>html 網頁 </h3> 08: <hr> 09: <p> 第一頁 HTML 網頁 </p> 10: </body> 11: </html>

14 HTML5 HTML5 不只是一種編排內容的標記語言, 它更支援語意標籤和最新多媒體技術的語言, 可以讓我們建立更適合人類閱讀和電腦處理的文件 HTML5 仍然遵循 HTML 4.01 標籤的語法, 只是擴充改進 HTML 標籤和 API(Application Programming Interfaces) 來建立複雜的 Web 應用程式, 和處理 DOM(Document Object Model) 不只如此,HTML5 支援手機和平板電腦等低耗電的行動裝置, 可以建立跨平台的 Mobile 應用程式目前 Internet Explorer Firefox Safari Chrome 和 Opera 等瀏覽器都已經支援 HTML5

15 1-2-2 HTML5 HTML5 支援全新 <video> <audio> 和 <canvas> 標籤來建立多媒體網頁, 並且提供特殊規則來插入和格式化文字, 例如 : 使用 <section> <article> 和 <header> 語意標籤讓網頁設計者建立更有結構和人性化的網頁內容在 HTML5 API 部分,Canvas API 可以在網頁 canvas 元素進行 2D 繪圖, 電腦不需要安裝 Flash 外掛程式, 就可以直接使用 Media API 在網頁的 video 和 audio 元素原生播放視訊和音效 HTML5 的 localstorage 和 sessionstorage 可以取代 Cookie 在客戶端儲存使用者的專屬資料等

16 HTML5 網頁架構 <!DOCTYPE HTML> <html> <head> <title> 網頁標題 </title> </head> <body> </body> </html> 一定要有這個宣告單獨只有 HTML 標籤

17 HTML5 與 HTML 4 的差異全新的剖析規則 : 支援更彈性的剖析和相容性, 不只 SGML, 更可以使用 SVG 和 MathML 全新的元素 : 新增全新的語意結構和多媒體等元素, 可以輕鬆建立多煤體和行動裝置的 Web 網頁增強的表單控制 : 支援日期 / 時間電子郵件網址搜尋電話色彩和範圍等資料和基本的表單驗證功能全新的屬性 : 支援 meta 標籤的 charset 屬性和 script 標籤的 async 屬性, 和使用在所有元素的全域屬性 id tabindex hidden 和 data-* 等

18 HTML5 與 HTML 4 的差異繪圖與多媒體的支援 :HTML5 支援向量繪圖視訊與多媒體播放, 我們不再需要在瀏覽器安裝外掛程式, 就可以擁有多媒體的支援, 在網頁播放多媒體檔案更佳的字型使用 :HTML5 網頁可以如同 PDF 一般的內嵌字型, 讓瀏覽器可以使用正確的字型來顯示網頁內容不再支援舊版元素 :HTML5 不再支援舊版的 acronym applet basefont big center dir font frame frameset isindex noframes strike 和 tt 元素

19 CSS 介紹

20 CSS CSS (Cascading Style Sheets) 層級式樣式表是一種樣式表達語言, 可以用來描述標記語言 (HTML 標籤 ) 的顯示外觀和格式, 能夠重新定義 HTML 標籤的顯示效果, 例如 : <p> 標籤是段落 ;<ul> 為清單,CSS 能夠重新定義標籤的顯示樣式, 以便符合網頁設計者的需求在 1996 年 12 月公佈 CSS Level 1 規格,Internet Explorer 3.0 或以上的版本都支援此規格, 接著 1998 年 5 月推出 Level 2 規格,Level 3 早在 1999 年就已經開始制訂, 直到 2011 年 6 月 7 日才成為 W3C 的建議規格, 在 CSS3 增加不少新的選擇器多欄和特效功能

21 在 HTML 網頁使用 CSS CSS 的目的是重新定義 HTML 標籤的顯示樣式, 例如 :HTML 標籤 <p> 是文字段落, 預設使用瀏覽器的字體與字型大小, 如果使用 CSS, 我們可以重新定義標籤 <p> 的顯示樣式, 如下所示 : <style type="text/css"> p { font-size: 10pt; color: red; } </style> 程式碼定義 <p> 標籤使用尺寸 10pt 的文字, 色彩為紅色, 只要網頁使用 <p> 標籤的段落, 都是套用此字型尺寸和色彩來顯示

22 CSS 的範例 01:  02: <html> 03: <head> 04: <title>html 測試網頁 +CSS</title> 05: <style type="text/css"> 06: p { font-size: 10pt; CSS 07: color: red; } 08: </style> 09: </head> 10: <body> 11: <h3>html 網頁 +CSS</h3> 12: <hr> 13: <p> 第一頁 HTML+CSS 網頁 </p> 14: </body> 15: </html>

23 JavaScript (JS)

24 JavaScript 基本上, 程式語言可以分成好幾個世代, 其中高階語言, 例如 :C 和 C++ 語言等都需要進行編譯, 將程式碼轉譯成機器語言的執行檔案後才能在電腦上執行腳本 (Script) 語言沒有如此複雜, 它是一種直譯語言, 直譯程式是一個指令一個動作, 一列一列的執行腳本程式碼, 例如 :JavaScript 和 VBScript 都屬於直譯語言因為 JavaScript 這類腳本語言不需要編譯, 所以撰寫和除錯十分容易, 而且一經修改馬上就可以執行, 看到修改後的執行結果

25 JavaScript 跟 JAVA 無關 JavaScript 原為 Netscape Communication Corporation( 網景公司 ) 開發的腳本語言, 提供該公司瀏覽器產品 Netscape Navigator 開發互動網頁的功能 JavaScript 原名 LiveScript, 於 1995 年在 Netscape 2.0 版正式發表, 目前是巿面上各大瀏覽器最普遍支援的腳本語言微軟在 Internet Explorer 3.0 版時支援 JavaScript 1.0 版, 稱為 Jscript, 這是一種與 JavaScript 相容的腳本語言, 初期並不穩定, 而且問題相當多, 微軟在 Internet Explorer 4.0 版時支援官方版本 ECMA 標準的 JavaScript 規格, 稱為 ECMAScript, 雖然 Netscape 的 JavaScript 和 Microsoft 的 Jscript 都支援 ECMA 規格, 但屬於兩種不同的腳本語言

26 HTML CSS 與 JavaScript 在說明 HTML CSS 和 JavaScript 之後, 現在, 我們就可以來看一看三者之間的關係

27 JavaScript 動態網頁 JavaScript 是 HTML 網頁設計者的程式工具, 因為大部分網頁設計者都不是專業的程式設計師, 所以,JavaScript 簡單易學的語法, 就算不懂程式設計, 也一樣可以輕鬆在 HTML 網頁內嵌一些 JavaScript 程式碼,JavaScript 對於 HTML 網頁提供的基本功能動態的文件內容更改 HTML 標籤的樣式和屬性表單驗證和送出處理網頁或 HTML 標籤的事件建立 Web 應用程式

28 建立 JavaScript 程式 JavaScript 程式檔案本身是一份 HTML 網頁, 擁有 HTML 標籤 <script> 插入的腳本程式碼, 當瀏覽器讀到 <script> 標籤時, 就知道內含 JavaScript 程式碼, 需要直譯和執行內含的 JavaScript 程式碼雖可以混合寫, 但還是可以有結構性

29 建立 JavaScript 程式 JavaScript 程式碼是使用 <script> 標籤插入 HTML 網頁, 在 <script> </script> 標籤內的程式碼需要指定 language 屬性值 JavaScript, 如下所示 : <script language="javascript"> </script> <script> 標籤的 language 屬性指定使用的腳本語言,JavaScript 為 JavaScript;VBScript 為 VBScript

30 建立 JavaScript 程式在 HTML5 版不需要使用 language 屬性也可以, 如下所示 : <script> </script>

31 JavaScript 範例 01: <!DOCTYPE html> 02: <html> 03: <head> 04: <meta charset="utf-8"/> 05: <title>ch1_6.htm</title> 06: </head> 07: <body> 08: <script> 09: document.write(" 第一份 JavaScript 程式 <br/>"); 10: </script> 11: </body> 12: </html> JS

32 OpenCart 核心程式 PHP

33 PHP 的由來 1994 年, 有個叫 Rasmus Lerdorf 的人, 他用 Perl 寫了一些後端的程式, 記錄有哪些人看過他的線上履歷表慢慢地, 一些網友對他所寫的程式碼產生興趣於是,Rasmus Lerdorf 就整理這些程式碼, 包裝成一個叫作 Personal Home Page 的工具

34 PHP 的由來之後,Rasmus Lerdorf 又寫了一個腳本語言的核心引擎, 加上能處理 HTML 表單輸入的工具, 稱作 Form Interpreter 簡稱 FI 在 1995 年完成的這個版本, 當時稱作 PHP FI, 也有人稱之為 PHP 年中的時候,PHP 從 Rasmus Lerdorf 個人維護的開發專案, 轉變成一個重要的網站開發技術目前 PHP 版本為 5.x

35 PHP 簡介 PHP 是開放源碼的腳本語言 (script), 特別適合用來開發網路 ( 站 ) 程式, 可以內嵌在 HTML 碼 PHP 程式的原始碼是純文字, 所以可以用任何可處理純文字檔的文字編輯器, 如 : 記事本 vi emac 等, 來撰寫 PHP 程式本課程使用 Notepad++ 進行編輯 ( 免安裝, 直接解壓縮就可以使用 )

36 Why PHP: 讓網頁動起來傳統網頁 ( 純 HTML 碼的網頁 ) 靜態的 (Static), 內容固定不變不容易更新與維護動態網頁透過程式 (ASP.NET PHP JavaScript 等 ) 做到內容是動態的內容可以自動更新互動性高

37 PHP 如何運作? 步驟 1: 要求瀏覽網頁 A.php 伺服端 Apache 網頁伺服器步驟 3: 下載 A.htm 用戶端瀏覽器步驟 2: 伺服器執行 PHP 程式並轉換成純 HTML 碼步驟 4: 瀏覽器翻譯後顯示

38 PHP 與 HTML 執行的不同 PHP 程式會被 Apache 轉換成純 HTML 碼, 所以 PHP 程式受到保護網頁可以用瀏覽器開啟但 PHP 網頁要透過伺服器執行, 而不是開啟執行 : 開啟 :file://test.htm

39 可能是 : 一支 PHP 程式 ( 網頁 ) HTML 標籤 + PHP 程式 + JavaScript 或 HTML 標籤 + PHP 程式或 PHP 程式 + JavaScript 或只有 PHP 程式三個腳色, 各自功能不同, 表現方式也不同, 要學的就是怎麼整合!

互動網頁技術系列課程 HTML與CSS網站基礎設計 [12pt]

互動網頁技術系列課程 HTML與CSS網站基礎設計 [12pt] HTML CSS / 2011 HTML CSS 1/ 47 1 2 HTML 3 4 HTML 5 5 : CSS 6 CSS 7 HTML CSS 2/ 47 HTML CSS 3/ 47 ( BOM) UTF-8 Notepad++ (Winodws), Fraise/Smultron (Mac), VIM ( ) HTML CSS 4/ 47 UTF-8? UTF-8 (unicode),