Web Framework柯博昌

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

資訊系統發展特點Designing good software is hard and

complicatedExperienced developers use common

patterns to assist themEach 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

Design PatternSingleton

Registry

Design PatternFactory

Observer

Ex: Useful to access DB when considering different database

Ex: Implement event-based (asynchronous) software

選用Web Framework優點

◦節省基本架構建置成本，增加開發效率◦具備共同的開發基礎，節省建置時的溝通成本，也容易取得元件

◦擷取前人的開發經驗，使程式符合標準，如MVC架構

◦發展更合理的開發模式◦提供測試與偵錯功能◦縮短學習曲線

缺點◦執行效能較慢◦被某一架構綁架

常見的 PHP Framework

Frameworks Response time Transaction rate

PHP 0.01 secs 606.77 trans/sec

CakePHP 1.2.0rc2 0.19 secs 25.88 trans/sec

Symfony 1.1 0.05 secs 100.63 trans/sec

Solar 1.0.0alpha1 0.02 secs 271.18 trans/sec

Agavi 1.0-beta1 0.04 secs 126.91 trans/sec

Zend Framework 1.6.0-rc1

0.04 secs 130.08 trans/sec

CodeIgniter 1.6.3 0.03 secs 305.90 trans/sec

Prado 3.1.2 0.06 secs 76.95 trans/sec

Web開發所需的技術HTML, CSS, JavascriptAJAX, JSON, XMLDB, LDAPWeb ServiceOptimizationMVC

MVC (Model-View-Controller)A software design pattern

BrowserControlle

r

Model

View

目錄結構project

application

controllers

models

views

library

public

Bootstrap file

Controller

Bootstrap file

Action Controller

Router

Request Response Browser

Bootstrap初始化並執行管理應用程式執行路徑指派 Router分析網址，轉換成對應的

Controller or Action 分析 Request並分派到對應的 Action

Controller完成最終的 Response，並傳送給

Browser

ModelBusiness logic layer

商業邏輯的相關資料運算，與資料存取無關通常 Framework不會有任何實作

Darta access logic layer

存取資料庫的套件，如 PDO

View

Data (model)

Layout (Template)

TemplateEngine

(HTML, CSS, Javascript)

Output

Example: CakePHP

Example: CodeIgniter

CSSCascading 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.

Web TemplateWhy 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

PDO (PHP Data Object)

操作資料庫的Abstraction LayerMySQLi

◦ $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

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.

Purpose of AJAXPrevents 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

Technologies UsedAJAX uses:

◦Javascript (for altering the page)◦XML (for information exchange)◦ASP, PHP or JSP (server side)

Data Exchange in AJAX

In AJAX:

JSONJavaScript Object Notationa data interchange format Key idea in AJAXJSON is a subset of Java Script.

JSON can be parsed by a Java Script parser.

MinimalTextualSubset of JavaScript

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",

}

<?xml version='1.0‘ encoding='UTF-8'?><element>

<fullname>Swati Kumar</fullname><org>Columbia</org>

</element>

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

RIA

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

HTML5

Continuous integration, CI

CI architecture