Jun 16, 2013 - evolusi berkualiti tinggi dalam aplikasi berasaskan web. UML-Based Web. Engineering (UWE) adalah salah satu pendekatan dalam ...
ENHANCEMENT OF UML-BASED WEB ENGINEERING FOR METAMODELS: HOMEPAGE DEVELOPMENT CASESTUDY
KARZAN WAKIL SAID
A dissertation submitted in partial fulfillment of the requirements for the award of the degree of Master of Science (Computer Science)
Faculty of Computing University Technology Malaysia
JUNE 2013
ii
I declare that this dissertation entitled ““Enhancement of UML-Based Web Engineering for metamodels: Homepage Development Case Study” is the result of my own research rch except as cited in the references. The dissertation has not been accepted for any degree and is not concurrently submitted in candidature of any other degree.
Signature : ……………………… Name
: Karzan Wakil Said
Date
: June 16, 2013
iii
Dedicated to my beloved family and best friend who has always believed in me.
iv
ACKNOWLEDGEMENT
First of all, I would like to warmly express my utmost gratitude to Allah S.W.T for His blessing and given strength during the completion of this research.
I would also like to sincerely thank my supervisor Assoc. Prof. Dr. Dayang Norhayati Binti Abang Jawawi, for her continuous motivation, advices, encouragement and support from the beginning to the end of my studies, till I was able to develop a deep understanding of the research topic.
Finally my special thanks to my parent for their love and care especially my beloved wife Hwda and my Son Nima, for their support and cheering me up at those difficult time.
v 1
2
ABSTRACT
Web Engineering is the application of systematic, disciplined and quantifiable approaches to the cost-effective development and evolution of highquality solutions in the web-based applications. UML-Based Web Engineering (UWE) is one of the approaches of web engineering, which provides a standard and systematic approach for the development of Web applications. UWE metamodel is a design considered as the conservative extension of the UML metamodel. In this thesis we used UWE metamodels to develop web homepages, the problem is current UWE cannot support homepage contents directly because UWE metamodels are not enough elements for supporting homepages. The goal of this research is enhancement UWE metamodels to high usability UWE in homepage development. There are two steps in this development process. In the first step, we compared UWE with Object Oriented Hyperlink (OOH) and Web Modeling Language (WebML) to show the strengths and weaknesses of UWE in the development of homepages. In the second step, extended UWE metamodel was proposed eleven elements (six elements for navigation model and five elements for presentation model) to solve these weaknesses to fully support the homepage development process. For the enhanced UWE metamodel, we defined the eleven elements to support the design of homepages, it is fully integrates the UWE metamodel and provides an XML Metadata Interchange (XMI) extension. The construction process of Web applications is supported by incorporating the semi-automatic UWE development steps and the Object Constraint Language (OCL) of the UWE. Finally we compared the enhanced UWE metamodel with the original UWE metamodel by using a case study, and then the result showed capabilities of the eleven elements in UWE metamodel for development website homepages, and become to increase usability UWE metamodels.
vi
ABSTRAK
Kejuruteraan Web menggunakan pendekatan yang sistematik, berdisiplin dan boleh diukur yang dapat menyumbang kepada penjimatan kos yang efektif dan evolusi
berkualiti tinggi dalam aplikasi berasaskan web. UML-Based Web
Engineering (UWE) adalah salah satu pendekatan dalam kejuruteraan web yang menyediakan piawaian dan pendekaatan sistematik dalam pembangunan aplikasi web. UWE meta-model adalah rekaan yang dianggap sebagai lanjutan konservatif UML meta-model. Dalam tesis ini, pendekatan UWE meta-model digunakan untuk membangunkan laman web.Namum begitu, terdapat masalah berkaitan UWE sedia ada tidak mempunyai elemen yang mencukupi untuk menyokong kandungan laman web secara terus. Kajian ini bermatlamat untuk menambahbaik UWE meta model seterusnya menyelesaikan isu berkaitan pembangunan laman web. Terdapat dua langkah dalam proses pembangunan ini. Dalam langkah pertama, perbandingan UWE dengan Object Oriented Hyperlink (OOH) dan Web Modelling Languange (WebML) dibuat untuk menunjukkan kekuatan dan kelemahan UWE dalam pembangunan laman web.
Manakala dalam langkah kedua,
lanjutan UWE
Metamodel telah dicadangkan dengan sebelas elemen (enam elemen untuk model navigasi dan lima elemen bagi model persembahan) bagi menyelesaikan kelemahan ini seterusnya menyokong sepenuhnya proses pembangunan laman Web. Untuk menambahbaik UWE Metamodel ini, sebelas elemen dikenalpasti untuk menyokong rekabentuk laman web. Ia adalah integrasikan sepenuhnya UWE Metamodel dan menyediakan lanjutan Metadata Interchange XML (XMI). Proses pembangunan Aplikasi Web ini menyokong dengan menggabungkan langkah-langkah semioutomatik UWE dan Object Constraint Language (OCL) daripada UWE tersebut. Akhir sekali, UWE metamodel yang telah ditambabaik dibandingkan dengan UWE metamodel asal dengan menggunakan kajian kes, maka hasil menunjukkan sebelas elemen dalam UWE metamodel berkeupayaan dalam pembangunan Laman Utama bagi Laman Web dan manjadi untuk meningkatkan kebolehgunaan UWE metamodel.
vii
TABLE OF CONTENTS
CHAPTER
TITLE
PAGE
DECLARATION OF THESIS STATUS SUPERVISOR DECLARATION
1
TITLE PAGE
i
STUDENT DECLARATION
ii
DEDICATION
iii
ACKNOWLEDGMENT
iv
ABSTRACT
v
ABSTRAK
vi
TABLE OF CONTENTS
vii
LIST OF TABLES
xiii
LIST OF FIGURES
xiv
LIST OF ABBREVIATIONS
xvii
LIST OF APPENDIXES
xix
INTRODUCTION 1.1 Introduction
1
1.2 Problem Background
3
1.3 Problem Statement
6
1.4 Aim of Study
7
1.5 Objectives
7
1.6 Scopes
7
1.7 Significance of Study
8
1.8 Dissertation Organization
8
viii 2
LITERATURE REVIEW 2.1 Introduction
10
2.2 Homepage
11
2.2.1 The homepages is different from all other web pages
12
2.2.2 Major Options on the Homepage
14
2.2.3 Characteristic of Homepage
15
2.2.4 Challenge to develop Homepage
16
2.2.5 Web Usability Design
17
2.3
Web Engineering Methods 2.3.1 UML-Based Web Engineering (UWE) Method
18 20
2.3.1.1
Method Description
21
2.3.1.2
Adaptation to integrate processdriven Web applications
22
2.3.1.3
Development Process
23
2.3.1.4
UWE Metamodel
24
2.3.2 Web Modelling Language (WebML) Method
32
2.3.2.1 Method Description
32
2.3.2.2 Adaptation to integrate processdriven Web applications
33
2.3.2.3 Development Process
35
2.3.2.4 WebML Metamodel
36
2.3.3 Object Oriented Hypermedia (OOH) Method
2.3.4
2.3.3.1 Method Description
39
2.3.3.2 Adaptation to integrate processdriven Web applications
40
2.3.3.3 Development Process
41
2.3.3.4 OOH Metamodel
42
2.3.3.5 Navigation Access Diagram (NAD)
44
2.3.3.6 Abstract Presentation Diagram (APD)
48
Comparison between the methods
49
2.4 Web Engineering Tools 2.4.1
39
51
ArgoUWE Tool
51
2.4.1.1
Modelling with ArgoUWE
52
2.4.1.2
Starting with the Conceptual Model
53
ix 2.4.1.3 Completing with the Presentation Model
54
2.4.1.4
Consistency Checking
55
2.4.1.5
Architecture of ArgoUWE
56
2.4.1.6
ArgoUWE Metamodel
56
2.4.2 WebRatio Tool
56
2.4.2.1
58
The Web Ratio Editing Tool
2.4.3
Visual Wade Tool
59
2.4.4
Comparison between three tools
61
2.5 Discussion
3
RESEARCH METHEDOLOGY 3.1 Introduction
64
3.2 The web Engineering Research
64
3.3
Research Framework and process
65
3.3.1
Framework for Web applications
65
3.3.2
Process for Web Application
67
3.3.3
Research Process
68
3.3.3.1 Problem Formulation
70
3.3.3.2 Literature review
70
3.3.3.3 Case Study (UTM homepage)
71
3.3.3.4 Design UTM homepage by three Methods
72
3.3.3.5 UWE Metamodel
73
3.3.3.6 Enhance UWE, Redesign and Comparison
75
3.3.3.7 Usability Design metamodels
75
3.4 Summary
4
63
75
USABILITY DESIGN CASE STUDY AND COMPARISON METAMODELS 4.1 Introduction
76
4.2 Requirement Web Engineering
76
4.2.1
Functional Requirements
77
4.2.2
Non Functional Requirements
78
x 4.3 Web engineering process design framework
78
4.4 Web Modeling
80
4.5
Case study/Scenario
82
4.5.1 UTM homepage Content
85
4.5.2
92
4.6
Design UTM homepage by UWE
94
4.6.1
Requirements
95
4.6.1.1 Use case diagram for case study
96
Process Design metamodels
98
4.6.2.1 Content Model
98
4.6.2
4.6.3 4.7
4.8
Classification of the UTM homepage content
4.6.2.2 Navigation Model
100
4.6.2.3 Presentation Model
104
Conclusion process design metamodels
106
Design UTM homepage by WebML
107
4.7.1
Requirements
108
4.7.2
Process Design metamodels
108
4.7.2.1 Data Modeling
109
4.7.2.2 Hypertext Modeling
111
4.7.2.3 Presentation Modeling
113
4.7.3 Conclusion process design metamodels
114
Design UTM homepage by OOH
115
4.8.1
115
Requirements
4.8.2 Process Design metamodels
4.8.3
115
4.8.2.1
Class diagram
116
4.8.2.2
Navigation Access Diagram (NAD)
118
4.8.2.3
Abstract Presentation Diagram (APD)
119
Conclusion process design metamodels
122
4.9. Comparison metamodels
122
4.9.1
Comparison metamodels to design
122
4.9.2
Comparison elements to design Homepages
123
4.10 Summary
125
xi
5
ENHANCEMENT UWE METAMODELS, REDESGIN AND COMPARISON 5.1 Introduction
126
5.2 Define Preparation Elements
127
5.3 Enhance UWE metamodel
129
5.3.1 Old UWE in process extension metamodels 5.3.1.1
6
131
5.3.2 Extension of the UWE
133
5.3.3 Process Extension of the UWE
134
5.3.4 5.4
Metamodel Layering
129
5.3.3.1 Structuring the extensions (Profile = Packages)
134
5.3.3.2 Defining new meta-classes (Stereotypes)
136
5.3.3.3 Defining new metaattributes (tagged values)
137
5.3.3.4 Defining new meta- associations (tagged values , to other model elements)
138
5.3.3.5 Defining new constraints
138
5.3.3.6 Modeling graphically Profiles
139
5.3.3.7 Tabular form for defining all elements
140
New UWE
142
Redesign UTM homepage after enhance UWE metamodel
143
5.5 Comparison between the old and new UWE navigation model
148
5.6 Usability Design for UWE metamodels
149
5.7
150
Summary
CONCLUSION AND FUTURE WORK 6.1
Introduction
151
6.2
Summary
151
6.3
Conclusion
152
6.4
Recommendation and future work
153
xii
REFERENCES
155
Appendixes A
163-167
Appendixes B
168-171
Appendixes C
172-178
