Download Programming Methodology Lab.

Rapid Development of Modular
Dynamic Web Sites Using UML
Chin-Yi Tsai
Outline
 Introduction
 Related Work
 Design Methodology
 Code Generation From Models
 Conclusion
2
Programming Methodology Lab.
Introduction
 Development of dynamic web sites is often performed by
teams
 Domain expert
 Graphic designer
 Developer
 customer
 Modularization of web application
 Business logic
 Visual design modules
 Reuse of both business logic and visual design modules
3
Programming Methodology Lab.
Introduction
 Automatic code generation (Rapid Development)
 The approach employs specific use case diagrams,
activity diagrams and class diagrams
Fundamental structural and behavioral aspects of a web
application
Different views
Use case diagram
Activity diagram
Conceptual model
Class diagram
Interaction diagram
4
Programming Methodology Lab.
Related Work
 Define a UML profile for web application design
 Describe a hypermedia extension to the UML to
model web application
 The Web Modeling Language (WebML) is a notation
for specifying complex web sites at a conceptual
level
 WSDM (Web Site Design Method) is a user
centered approach
5
Programming Methodology Lab.
Design Methodology
 A Conceptual Model for Web Application
 All interactions in these Web application are based on
Web pages.
 Client page and server page
 Static page an dynamic page
6
Programming Methodology Lab.
Complete Conceptual Model for Web Applications
7
Programming Methodology Lab.
Design Methodology
 Modeling
 In order to support the capturing and presentation of
requirements, UML use case diagrams are employed.
 They describe the fundamental functional aspect of the
system from the perspectives of different users.
8
Programming Methodology Lab.
Activity Diagram
 A use case has to be detailed by an activity diagram
9
Programming Methodology Lab.
Site Structure Diagram
10
Programming Methodology Lab.
Code Generation From Models
 The generation of a running prototype using PHP as
the scripting language.
 Use Case Diagrams
 Activity Diagrams
 Site Structure Diagram
11
Programming Methodology Lab.
Use Case Diagram
 Apply the use case diagrams to generate HTML modules
for the designer of the Web pages.
12
Programming Methodology Lab.
Activity Diagrams
 The separation of logic and presentation in the
activity diagram is achieved by the usage of
renderer and processor logic modules.
Renderer  graphic designer
Processor  developer
 The developer will receive a PHP module containing
the declaration of an empty function
 The designer will receive a sample client page
module in HTML
13
Programming Methodology Lab.
14
Programming Methodology Lab.
15
Programming Methodology Lab.
Site Structure Diagram
 Designer layout a Web site with a site structure diagram.
 This site structure diagram can be used to generate HTML
code for the designer
16
Programming Methodology Lab.
Conclusion
 Rapid development of small and medium size dynamic Web
applications based on reusable logic and design modules.
 Use case-based process whose modeling techniques are
based on UML diagram extended by some stereotypes.
 Logic and design are separated into difference modules
types.
 A strategy to generate script and design templates for Web
pages composed from such modules.
17
Programming Methodology Lab.