Embed Size (px)
Citation preview
非同步互動式網頁程式設計 - 實作練習 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
ViewView ControllerControllerModelModel
1. Request1. Request
4. Response4. Response
2. Control event and change state
3. Response query results or change status
5
Web MVC Architecture
Model 2 MVC Pattern
ClientRequest and response
ModelBusiness logic computing and data access
View Render and present (HTML, JSON, …)
ControllerControl 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 注意特殊字元與編碼
相關參考資料 http://www.w3schools.com/html/default.asp
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: http://json.org/
Reference http://www.w3schools.com/js/default.asp https://developer.mozilla.org/zh-TW/docs/Web/
JavaScript/Obsolete_Pages
11
URL: Absolute Path and Relative Path Example 1: (http://www.abc.com/images/image1.jpg)
Absolute Path URLs <img src="http://www.abc.com/images/image1.jpg"/>
Relative Path URLs <img src="/images/image1.jpg" /> <img src="./images/image1.jpg" />
Example 2: (http://www.abc.com/pages/users/index.htm)
Absolute Path URLs <href src="http://www.abc.com/pages/users/index.htm"/>
Relative Path URLs (If location = "/pages/users") <href src="./index.htm" /> <href src="../users/index.htm" />
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 http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html
14
Single Page Application Design, SPA
http://devmanagement.files.wordpress.com/2012/09/spa.jpg
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
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 1SESSION IDAAAA
User 2SESSION IDBBBB
Server 1
Server 2
一般時期下執行正常
18
Cloud HTTP Sessions Issue (2/3)
Session Data
BBBB
Session Data
AAAA
User 1SESSION IDAAAA
User 2SESSION IDBBBB
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: 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
課程實作作業簡述 後端的 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
課程實作作業簡述 範例程式與簡報檔案下載路徑
http://fs.mis.kuas.edu.tw/~cwlin/async_web/
作業繳交方式 請學生上傳到下列路徑 http://fs.mis.kuas.edu.tw/~s 學號 /2014-11-
10-async_web.zip
27
Q&A
