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

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

3. 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. 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. 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. 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. 7 HTML 重點 HTML frame and iframe 盡可能不要用 Cross domain issue HTML Page Encode and URL Encode 注意特殊字元與編碼 相關參考資料 http://www.w3schools.com/html/default.asp

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

9. 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. 10 JavaScript 重點 JavaScript Objects Object Definitions Object Prototype JSON (JavaScript Object Notation) JSON Key – value mapping JSON Data Type Refer: http://json.org/http://json.org/ Reference http://www.w3schools.com/js/default.asp https://developer.mozilla.org/zh- TW/docs/Web/JavaScript/Obsolete_Pages https://developer.mozilla.org/zh- TW/docs/Web/JavaScript/Obsolete_Pages

11. 11 URL: Absolute Path and Relative Path Example 1: (http://www.abc.com/images/image1.jpg) Absolute Path URLs Relative Path URLs Example 2: (http://www.abc.com/pages/users/index.htm) Absolute Path URLs Relative Path URLs (If location = "/pages/users")

12. 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. 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 http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html

14. 14 Single Page Application Design, SPA http://devmanagement.files.wordpress.com/2012/09/spa.jpg

15. 15 Single Page Application Design, SPA Reference http://ssnenov.wordpress.com/2013/03/24/single- page-up-with-kendo-ui/ http://www.slideshare.net/jollen/singlepage- application-design-principles-101

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

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

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

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

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

24. 24 課程實作作業簡述 後端的 Web Service 課程清單維護 取得課程清單 GET: http://localhost:8080/kuas-html/services/rest/course/lists 取得指定課程資料 GET: http://localhost:8080/kuas-html/services/rest/course/{id} 新增課程資料 POST: http://localhost:8080/kuas-html/services/rest/course/ 修改課程資料 PUT: http://localhost:8080/kuas-html/services/rest/course/{id} 刪除課程資料 PUT: http://localhost:8080/kuas-html/services/rest/course/{id}

25. 25 課程實作作業簡述 後端的 Web Service 課程大綱維護 取得課程大綱 GET: http://localhost:8080/kuas-html/services/rest/course/{id}/sections 取得指定課程大綱 GET: http://localhost:8080/kuas-html/services/rest/section/{id} 新增課程大綱 POST: http://localhost:8080/kuas-html/services/rest/section/ 修改課程大綱 PUT: http://localhost:8080/kuas-html/services/rest/section/{id} 刪除課程大綱 PUT: http://localhost:8080/kuas-html/services/rest/section/{id}

26. 26 課程實作作業簡述 範例程式與簡報檔案下載路徑 http://fs.mis.kuas.edu.tw/~cwlin/async_web/ 作業繳交方式 請學生上傳到下列路徑 http://fs.mis.kuas.edu.tw/~s 學號 /2014-11-10- async_web.zip

27. 27 Q&A