Modeling web applications

Modeling web applicationsBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.1Summary of the previous lectureIntroduction to RERE basicsRequirements specificationRE processRE specifics in web engineeringBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.2OutlineSystem modelingModeling requirementsBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.31. System modelingProcess of developing abstract models of a systemRepresenting system using graphical notationsUML Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.41. System modelingeach model presents a different view or perspective of the systemExternal perspective: system context and environmentInteraction perspective: how system interact with environmentStructural perspective: how system is organizedBehavioral perspective: dynamic behavior of the system Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.51. System modelingModels are used duringRE phase to derive system requirementsuse-case diagram, activity diagramdesign phase to describe the system to engineersclass diagrams, sequence diagrams etc.after implementationto document system’s structure and operationBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.61. System modelingWhy system modeling?reduce complexitydocument design decisionsfacilitate communication among team membersBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.71. System modelingLevels – the “how” & “what” of an applicationAspects – objects, attributes, and relationships; function & processesPhases – Development cycleUser interfaceApplication LogicAnalysisDesignImplementationStructureBehaviorPhasesLevelsAspectsBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.8Modeling dimensions:1. System modeling“The Unified Modeling Language is a visual language for specifying and documenting the artifacts of systems” Structural – Class diagramsBehavioral – Use Case diagrams, State machine diagramsBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.91. System modelingLevels – Information, node/link structure, UI & page layout separate.Aspects – Same as Software ApplicationsPhases – Approach depends upon type of applicationCustomization – Context information (user’s preferences, bandwidth restriction, device characteristic etc.) and allow to adopt web application accordinglyInfluence other three dimensions ContentPresentationAnalysisDesignImplementationStructureBehaviorPhasesLevelsAspectsHypertextCustomizationBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.101. System modelingRequirement modelinguse-case diagramactivity diagramContent modelingclass diagramNavigational modelingto model nodes and navigational structure among themPresentation modelingmodel user interface, page-layoutBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.111. System modelingFor Web-centric modeling, UML is used with some extensions from UWE (UML-based web engineering) Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.122. Modeling requirementsUse-case Diagram: The goal of the diagram is to provide a high-level explanation of the relationship between the system and the outside world (set goals)Activity diagram: a graphical representation of workflows of stepwise activities and actions with support for choice, iteration and concurrencyBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.132.1 Use-case diagramComponents:The systemThe use case task referred to as the use case that represents a feature needed in a software systemBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.14System NameUse-case title2.1 Use-case diagramComponents:The actor(s) who trigger the use case to activateThe communication line to show how the actors communicate with the use caseBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.15>HR system2.1 Use-case diagramThe include relationship represents the inclusion of the functionality of one use case within another The extend relationship represents the extension of the use case to include optional functionality Basharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.16>include use-casebase use-case>Base use-caseExtension use-case2.1 Use-case diagramA use-case-generalization is a relationship from a child use case to a parent use case, specifying how a child can specialize all behavior and characteristics described for the parentBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.17GeneralizedSpecializeduserRegistered user2.1 Use-case diagramWeb specific requirements:Need to distinguish between functional and navigational use-casesUWE provides > to represent a navigational use-case while > to represent a functional use-caseBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.182.1 Use-case diagramBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.19Consider an online video sharing system:Users can search and view the videosA user must be a register user to share videos2.1 Use-case diagramBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.20Online video sharing systemuserRegistered user>Search a video>Watch a video>register>share a video>login>>2. The activity diagramElements of an activity diagram:An activity is a step in a process where some work is getting doneThe transition takes place because the activity is completedBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.21activityRead a pageTurn the page2. The activity diagramElements of an activity diagram:A guard condition can be assigned to a transition to restrict use of the transitionBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.22Learn drivingDrive the car[get driving license]2. The activity diagramDecisionsMerge pointStart and endBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.232. The activity diagramBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.24User fill in the registration formUser selects submit buttonCorrect ?System shows error messageUser corrects inputNoUser is registered2. The activity diagramUWE activity diagram elements:userAction : user’s action or responsesystemAction : system’s actiondisplayAction : display actionnavigationAction : navigationdisplayPin : outputinteractionPin : inputBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.252. The activity diagramBasharat Mahmood, Department of Computer Science,CIIT,Islamabad, Pakistan.26>registratinForm{type=form}name{type=text}Email{type=email}Password{type=password}>inputData{validated}nameemailpassword>saveDataSummarySystem modelingModeling Requirementuse-case diagramactivity diagramBasharat 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 Basharat Mahmood, COMSATS Institute of Information Technology, Islamabad, Pakistan.28