1. Web Framework 柯博昌

2. 資訊系統發展演進 Mainframe- 終端機系統 PC 的單機系統 Client-Server 系統 Web-based 系統 Web framework

3. 資訊系統發展特點 Designing good software is hard and complicated Experienced developers use common patterns to assist them Each pattern describes a problem which occurs over and over again and describes the core of the solution to that problem Goal: How to build a solid, secure, and reusable framework for web applications

4. Design Pattern Singleton Registry

5. Design Pattern Factory Observer Ex:Useful to access DB when considering different database Ex: Implement event- based (asynchronous) software

6. 選用 Web Framework 優點 ◦ 節省基本架構建置成本，增加開發效率 ◦ 具備共同的開發基礎，節省建置時的溝通成本， 也容易取得元件 ◦ 擷取前人的開發經驗，使程式符合標準，如 MVC 架構 ◦ 發展更合理的開發模式 ◦ 提供測試與偵錯功能 ◦ 縮短學習曲線 缺點 ◦ 執行效能較慢 ◦ 被某一架構綁架

7. 常見的 PHP Framework FrameworksResponse timeTransaction rate PHP0.01 secs606.77 trans/sec CakePHP 1.2.0rc20.19 secs25.88 trans/sec Symfony 1.10.05 secs100.63 trans/sec Solar 1.0.0alpha10.02 secs271.18 trans/sec Agavi 1.0-beta10.04 secs126.91 trans/sec Zend Framework 1.6.0-rc10.04 secs130.08 trans/sec CodeIgniter 1.6.30.03 secs305.90 trans/sec Prado 3.1.20.06 secs76.95 trans/sec

8. Web 開發所需的技術 HTML, CSS, Javascript AJAX, JSON, XML DB, LDAP Web Service Optimization MVC

9. MVC (Model-View-Controller) A software design pattern Browser Controller Model View

10. 目錄結構 project application controllers models views library public Bootstrap file

11. Controller Action Controller Router Request Response Browser

12. Bootstrap 初始化並執行 管理應用程式執行路徑 指派 Router 分析網址，轉換成對應的 Controller or Action 分析 Request 並分派到對應的 Action Controller 完成最終的 Response ，並傳送給 Browser

13. Model Business logic layer 商業邏輯的相關資料運算，與資 料存取無關 通常 Framework 不會有任何實作 Darta access logic layer 存取資料庫的套件，如 PDO

14. View Data (model) Layout (Template) Template Engine (HTML, CSS, Javascript) Output

15. Example: CakePHP

16. Example: Example: CodeIgniter

17. CSS Cascading Style Sheets (CSS): style sheet language used to describe the presentation of a html document. Define colors, fonts, layout, and other aspects of document Why CSS? ◦ more flexibility ◦ control the specification of presentational characteristics ◦ reduce complexity and repetition in the structural content.

18. Web Template Why templates ? ◦ Ease of design change ◦ Ease of interface localization ◦ Possibility to work separately on design and code by different people at one and the same time Typical features ◦ variables and functions ◦ text replacement ◦ file inclusion ◦ conditional evaluation and loops

19. PDO (PHP Data Object) 操作資料庫的 Abstraction Layer MySQLi ◦ $mysqli = new mysqli($db_host, $db_user, $db_password, $db_name); PDO ◦ $dsn = "mysql:host=$db_host;dbname=$db_name"; ◦ $dbh = new PDO($dsn, $db_user, $db_password); MSSQL MySQL Oracle DB Abstraction Layer (PDO) PHP

20. What is AJAX ? Asynchronous Javascript and XML. Not a stand-alone language or technology. It is a technique that combines a set of known technologies in order to create faster and more user friendly web pages. It is a client side technology.

21. Purpose of AJAX Prevents unnecessary reloading of a page. AJAX loads only the necessary innformation, and making only the necessary changes on the current page without reloading the whole page. Goal: ◦ More interactive ◦ Faster ◦ More user friendly

22. Technologies Used AJAX uses: ◦ Javascript (for altering the page) ◦ XML (for information exchange) ◦ ASP, PHP or JSP (server side)

23. Data Exchange in AJAX In AJAX:

24. JSON JavaScript Object Notation a data interchange format Key idea in AJAX JSON is a subset of Java Script. JSON can be parsed by a Java Script parser. Minimal Textual Subset of JavaScript

25. Why is JSON better suited for AJAX? JSON is widely used in AJAX. The X in AJAX stands for XML. E.g. { "fullname": "Swati Kumar", "org": "Columbia", } Swati Kumar Columbia

26. 分組報告 CakePHP 2.4.6 Symfony 2.4.2 Zend Framework 2 CodeIgniter 2.1.4

27. RIA

28. Javascript framework Why use ◦ Don’t reinvent the wheel ◦ Do more with less code - Save time ◦ Cross browser compatibility ◦ Avoid Cryptic JavaScript Base Code ◦ Stability Examples ◦ jQuery ◦ Dojo ◦ Prototype ◦ YUI ◦ MooTools ◦ ExtJS ◦ SmartClient ◦ Zepto

29. HTML5

30. Continuous integration, CI

31. CI architecture