非同步互動式網頁程式設計 - 實作練習 I 資料表的 CRUD - 使用 HTML/CSS & JavaScript 報告人： Dennis ( 嚴志和 ) 日期： 2014/11/10

2 網頁設計課程補充 課程實作作業簡述 課程實作練習時間 Q & A 課程大綱

3 網頁設計課程補充 Web MVC Architecture HTML 重點 JavaScript 重點 URL: Absolute Path and Relative Path REST Web Services Introduction Single Page Application Design (SPA) Cloud Web Application Issue

4 Web MVC Architecture Model 1 MVC Pattern View Controller Model 1. Request 4.Response 2. Control event and change state 3. Response query results or change status

5 Web MVC Architecture Model 2 MVC Pattern Client Request and response Model Business logic computing and data access View Render and present (HTML, JSON, …) Controller Control event and change state

6 HTML 重點 Form Tags form action, method input text, password, radio buttons, checkboxes general button, submit button, reset button select / option (drop-down list) button label, fieldset, legend, optgroup datalist, keygen, output (HTML 5 Feature) 6

7 HTML 重點 HTML frame and iframe 盡可能不要用 Cross domain issue HTML Page Encode and URL Encode 注意特殊字元與編碼 相關參考資料

8 JavaScript 重點 Base on ECMAScript Different Browsers & Cross Browser Issue

9 JavaScript 重點 JavaScript Data Type String, Number, Boolean Array, Object, Null, Undefined. JavaScript Expressions and operators Basic Expressions and operators "==" and "===" JavaScript "this" key word

10 JavaScript 重點 JavaScript Objects Object Definitions Object Prototype JSON (JavaScript Object Notation) JSON Key – value mapping JSON Data Type Refer: Reference TW/docs/Web/JavaScript/Obsolete_Pages TW/docs/Web/JavaScript/Obsolete_Pages

11 URL: Absolute Path and Relative Path Example 1: ( Absolute Path URLs Relative Path URLs Example 2: ( Absolute Path URLs Relative Path URLs (If location = "/pages/users")

12 REST Web Services Introduction REpresentational State Transfer (REST) is an architectural style, proposed by Roy Fielding, for distributed hypermedia systems In the web services terms, REST is a stateless client-server architecture in which the web services are viewed as resources and can be identified by their URIs.

13 REST Web Services Introduction Common Methods Design Retrieve: GET Create: POST Update: PUT Delete: DELETE Obtain meta information: HEAD Obtain available methods: OPTIONS Reference

14 Single Page Application Design, SPA

15 Single Page Application Design, SPA Reference page-up-with-kendo-ui/ application-design-principles-101

16 Cloud Web Application Issue HTTP Session Stateless File System block User Data Storage File Cache

17 Cloud HTTP Sessions Issue (1/3) Session Data BBBB Session Data AAAA User 1 SESSION ID AAAA User 2 SESSION ID BBBB Server 1 Server 2 一般時期下執行正常

18 Cloud HTTP Sessions Issue (2/3) Session Data BBBB Session Data AAAA User 1 SESSION ID AAAA User 2 SESSION ID BBBB Server 1 Server 2 當系統擴充或異常時即會出錯 Server 1 會抓不到 User 2 的 Session ID

19 Cloud HTTP Sessions Issue (3/3) 解決方案 A. 不要用 Session (Keep Stateless) B. 改用前端 HTML 5 Local Storage C. 調整後端 Session Manager 實作 Session Persistence 將 Session 存進 DB.

20 Cloud File System Issue File System block ( 問題跟 Session 差不多 ) User Data Storage File Cache 解決方法 A. 雲端硬碟 Cloud File System B. File Persistence C. File Cache 改用 Cache Server

21 課程實作作業簡述 題目 課程資料維護作業 作業內容 第一周 使用 HTML + JavaScript 實作課程大綱資料維護 程式範例說明與功能講解 實作課程大綱查詢功能 實作課程大綱新增功能 實作課程大綱修改功能 實作課程大綱刪除功能

22 課程實作作業簡述 第一周 使用 HTML + JavaScript 實作課程大綱資料維護

23 課程實作作業簡述 第一周 使用 HTML + JavaScript 實作課程大綱資料維護

24 課程實作作業簡述 後端的 Web Service 課程清單維護 取得課程清單 GET: 取得指定課程資料 GET: 新增課程資料 POST: 修改課程資料 PUT: 刪除課程資料 PUT:

25 課程實作作業簡述 後端的 Web Service 課程大綱維護 取得課程大綱 GET: 取得指定課程大綱 GET: 新增課程大綱 POST: 修改課程大綱 PUT: 刪除課程大綱 PUT:

26 課程實作作業簡述 範例程式與簡報檔案下載路徑 作業繳交方式 請學生上傳到下列路徑 學號 / async_web.zip

27 Q&A