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 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 TITLE PAGE STUDENT DECLARATION DEDICATION ACKNOWLEDGMENT ABSTRACT ABSTRAK TABLE OF CONTENTS LIST OF TABLES LIST OF FIGURES LIST OF ABBREVIATIONS LIST OF APPENDIXES i ii iii iv v vi vii xiii xiv xvii xix 1 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 18 2.3.1 UML-Based Web Engineering (UWE) Method 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 39 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 2.3.4 Comparison between the methods 49 2.4 Web Engineering Tools 51 2.4.1 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 The Web Ratio Editing Tool 58 2.4.3 Visual Wade Tool 59 2.4.4 Comparison between three tools 61 2.5 Discussion 63 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 75 4 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 Classification of the UTM homepage content 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 4.6.2 Process Design metamodels 98 4.6.2.1 Content Model 98 4.6.2.2 Navigation Model 100 4.6.2.3 Presentation Model 104 4.6.3 Conclusion process design metamodels 106 4.7 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 4.8 Design UTM homepage by OOH 115 4.8.1 Requirements 115 4.8.2 Process Design metamodels 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 4.8.3 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 129 5.3.1.1 Metamodel Layering 131 5.3.2 Extension of the UWE 133 5.3.3 Process Extension of the UWE 134 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 5.3.4 New UWE 142 5.4 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 Summary 150 6 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