Modeling web applications (Part 2)

Modeling web applicationsBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.1Summary of the previous lectureSystem modelingRequirement Modelinguse-case diagramactivity diagramBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.2OutlineRequirement modelinguse-case diagramactivity diagramContent modelingNavigation modelingPresentation modelingBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.31. Content modelingThe information provided by a web application is one of the most important factors for the success of that applicationContent modeling aims at modeling the information requirements of a web applicationdiagraming the structural and behavioral aspects of the informationignores the navigational information Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.41. Content modelingKey modelsClass diagram: to model the structural aspects of informationState machine diagram: to model behavioral aspects of informationBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.51.1 Class diagramClass diagram describes the structure of a system bysystem’s classesclass attributes operations (methods)relationship among objectsBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.61.1 Class diagramElements of a class diagram:class:class is represented by a rectangle with three compartmentsnameattributesmethodsClass nameAttributesMethodsBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.71.1 Class diagramElements of a class diagram:Adding attributes:an attribute describes a piece of information that an object ownsspecified by namekind (data type)visibility (+, - , #)default valuevisibility name : type= default value+ name : string = ‘ali’ {maximum 25 characters}users+ name : String+ email : String+ password : StringmethodsBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.81.1 Class diagramElements of a class diagram:Adding methods (functions):behaviors (things objects can do or can be done with them)nameargumentsvisibility (+, - , #)return valuevisibility name (argument_name:type): return_value+ userLogin(email:string, password:string):nullusersattributes- register(name:string, email:string,password:string):bool - login(email:string, password:string):bool Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.91.1 Class diagramElements of a class diagram:Association relationship between classesname of relationshipdirection of relationshippersoncarownsBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.101.1 Class diagramElements of a class diagram:Association multiplicity How many objects participating in the relationpersoncarowns1 .. 10..*Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.111.1 Class diagramElements of a class diagram:Aggregation relationclass has features of another class plus some own featuresBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.121.1 Class diagramElements of a class diagram:Composition relationBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.131.1 Class diagramusers- name : string -email : string-password : string-register-loginvideo-videoID : int+videoTITLE : string+videoDES : string+upload()+search()1..10..*Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.14Register user uploads0..*0..*userVideo Sharing-introduction : string0..*1..11.1 Class diagramUse-case diagram : Conference Paper Submission SystemSource: Web Engineering – Kappel et al.1.1 Class diagramConference Paper Submission SystemSource: Web Engineering – Kappel et al.Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.161.2 State machine diagrams For dynamic Web applications, they depict important states and events of objects, and how objects behave in response to an event (transitions)Show the life-cycle of an objectUsed only for state-dependent objectsBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.171.2 State machine diagram..Source: Web Engineering – Kappel et al.First stateThird stateSecond stateFourth stateFifth stateBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.182. Navigation ModelingModels how web-pages are linked togetherdefines the structure of the hypertextWhich classes of the content model can be visited by navigationContent to navigation Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.192. Navigation ModelingUWE navigation modelingnavigationClassmenuIndex queryprocessClassProcesslinkNavigation linkExternal linkBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.202. Navigation ModelingBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.21Online video sharing:Home pagevideo listsearch videoupload videoregisterloginupload2. Navigation modelingBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.22>Video Sharing>mainMenu>searchVideo>videolist>uploadVideo>>>>>register>login>upload>>>>3. Presentation ModelingPurpose: To model the look & feel of the Web application at the page levelThe design should aim for simplicity and self-explanationDescribes presentation structure:Composition & design of each pageBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.233. Presentation ModelingLevels:Presentation Page page containerPresentation UnitA fragment of the page logically defined by grouping related elementsBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.243. Presentation ModelingLevels:Presentation ElementA unit’s informational componentsText, images, buttons, fieldsBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.253. Presentation Modeling>User registration page>Logo>logo>title>>name>password>email>submitBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.26SummaryContent modelingclass diagramstate machine diagramNavigation modelingPresentation modelingBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.27ReferencesChapter 3, Kappel, G., Proll, B. Reich, S. & Retschitzegger, W. (2006). Web Engineering, Hoboken, NJ: Wiley & SonsChapter 5, Sommerville, Software Engineering, ISBN-10: 0-13-703515-2 , PEARSON Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.28