Web Technologies and Programming Lecture 04

Web Technologies and ProgrammingLecture 04 2Modeling web applicationsModeling web applications3Implementing and testing web applicationsSummary of the previous lectureIntroduction to RERE basicsRequirements specificationRE processRE specifics in web engineeringSystem modelingRequirement Modelinguse-case diagramactivity diagram4OutlineRequirement modelinguse-case diagramactivity diagramContent modelingNavigation modelingPresentation modelingTechnologies for web applicationsTesting web applications51. 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 61. Content modelingKey modelsClass diagram: to model the structural aspects of informationState machine diagram: to model behavioral aspects of information71.1 Class diagramClass diagram describes the structure of a system bysystem’s classesclass attributes operations (methods)relationship among objects81.1 Class diagramElements of a class diagram:class:class is represented by a rectangle with three compartmentsnameattributesmethodsClass nameAttributesMethods91.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 : Stringmethods101.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 111.1 Class diagramElements of a class diagram:Association relationship between classesname of relationshipdirection of relationshippersoncarowns121.1 Class diagramElements of a class diagram:Association multiplicity How many objects participating in the relationpersoncarowns1 .. 10..*131.1 Class diagramElements of a class diagram:Aggregation relationclass has features of another class plus some own features141.1 Class diagramElements of a class diagram:Composition relation151.1 Class diagramusers- name : string -email : string-password : string-register-loginvideo-videoID : int+videoTITLE : string+videoDES : string+upload()+search()1..10..*16Register user uploads0..*0..*userVideo Sharing-introduction : string0..*1..11.1 Class diagramUse-case diagram : Conference Paper Submission SystemSource: Web Engineering – Kappel et al.171.1 Class diagramConference Paper Submission SystemSource: Web Engineering – Kappel et al.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 Navigation ModelingUWE navigation modelingnavigationClassmenuIndex queryprocessClassProcesslinkNavigation linkExternal link202. Navigation Modeling21Online video sharing:Home pagevideo listsearch videoupload videoregisterloginupload2. Navigation modeling22>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 page233. Presentation ModelingLevels:Presentation Page page containerPresentation UnitA fragment of the page logically defined by grouping related elements243. Presentation ModelingLevels:Presentation ElementA unit’s informational componentsText, images, buttons, fields253. Presentation Modeling>User registration page>Logo>logo>title>>name>password>email>submit26Implementing and testing web applications271. Technologies for web applications28When we have decided the ‘What’ of the web application i.e.requirements are definedsystem architecture is decidedsystem model and design is readyWe are ready for ‘how’ i.e. to implementation phase1. Technologies for web applications29The implementation phase begins with deciding the technologies for developmentTechnologies for web application development concerns within three ‘views’request (client)response (server)rules for communication between them(protocols)1.1 client/server communication on the web 30Client/server paradigm forms the backbone between the user and the applicationThis communication model is based on two-layer architectureHow ever the web server integrates additional systems i.e. database server, application server etc.Several protocols play an important role to guide this communication 1.1 client/server communication on the web 31SMTP- simple mail transfer protocol:SMTP along with POP3(post office protocol) or IMAP (internet message access protocol) allows us to send emailRTSP- real-time streaming protocol:Designed to facilitate delivery of multimedia data in real timeallows transmission in timely manner instead of whole 1.1 client/server communication on the web 32HTTP- hyper text transfer protocol:Most popular transport protocol for web contentsa text based stateless protocolcontrols how resources are accessedresources are addressed by URLURL is used with domain name system to find the server where the resource is located1.1 client/server communication on the web 33Session tracking:Web applications must be able to distinguish requests by multiple simultaneous usersalso need to identify request from the same userThe term session is used to define a sequence of HTTP requests between a specific user and the serverWhenever a user sends a request to the server, it identify itself with session id1.2 Client-side technologies34Helper program and plug-in:Applications that can add functionality to browsersWhen the browser receives a media type included in the helper program or plugin list, the media file is forwarded to external programInstalled by the user1.2 Client-side technologies35Java applets:Java applets are programs written in Java that are loaded dynamically into the browserhave controlled access to system resources after checking security policiesApplets are loaded by server and executed in browser within JVMCan run on all platforms with a JVM1.2 Client-side technologies36Client side scripting: Refers to the class of computer programs on the web that are executed at client-side, by the user's web browserUsually embedded in HTML codeBrowser interpret several client side scriptingUsed to add dynamic affects in HTML page1.3 Document specific technologies37HTML- hypertext markup languageHTML describes the elementto mark contentsHypertextDefines a large number of tags to denote different semantics1.4 Server side technologies38URL handlers:special applications used to process HTTP requests and to deliver a requested resourceClient request for a resource by URLtakes the request and forwards it for executionresult of this execution is then returned to the web server1.4 Server side technologies39Server side scripting:Are executed by the web server when the user requests a documentUsually embedded in HTML codeServer-side scripts require that their language's interpreter be installed on the server2. Testing web applications40Testing is an activity conducted to evaluate the quality of a product and to improve it by identifying defects and problemsIf we run a program with the intent to find errors, then we talk about testingBy testing we determine the quality state of the systemwhich provides a basis for improvement2. Testing web applications41We say that an error is present if the actual result from a test run does not comply with the expected resulteach deviation from the requirements definition is an error2. Testing web applications42Objectives:Finding error instead of showing their absence (defect testing)if no error is found it does not mean that there is no errora test run is successful if errors are detectedTo demonstrate to the developer and the customer that the software meets its requirements (validation testing)2. Testing web applications43Testing Levels:Unit tests: test the smallest testable units (Web pages, etc.), independently of one anotherUnit testing is done by the developer during implementation2. Testing web applications44Testing Levels:Integration tests: evaluate the interaction between distinct and separately tested units once they have been integrated Integration tests are performed by a tester, a developer, or both jointly2. Testing web applications45Testing Levels:System tests: test the complete, integrated systemSystem tests are typically performed by a specialized test team2. Testing web applications46Testing Levels:Acceptance tests: evaluate the system in cooperation with the clientAcceptance tests use real conditions and real dataThe client will test it, in their place, in a near-real-time or simulated environment. Beta tests: let users work with early versions of a product with the goal to provide early feedback2. Testing web applications47Web application testing:Link testingBrowser testingUsability testingLoad, stress and continuous testingSecurity testingContent testing2. Testing web applications48Link testing:Goals: broken links (linked document does not exist)orphan pages (page does not link any other page)Strategy:All links are systematically visited2. Testing web applications49Browser testing:Goals: Try to find errors in web application due to incompatibilities between different Web browsersStrategy:Test application on all popular combinations (browser, version, operating system)2. Testing web applications50Usability testing:Goals: Evaluate ease-of-use, lay-out and navigation structure Strategy:By a set of representative usersBy one or more HCI specialists2. Testing web applications51Load testing:Goals: system meets response time requirementsStrategy:Identify load profileIdentify response timePerform the test2. Testing web applications52Stress testing:Goals: system reaches the required response times and the required throughput under stress Continuous testing:Goals: Testing system behavior over a period of time2. Testing web applications53Security testing:Goals: Regulate access to information, to verify user identities, and to encrypt confidential informationStrategy:A systematic test scheme2. Testing web applications54Content testing:Goals: Test the quality of contentsStrategy:Proofreading 2. Testing web applications55Challenges in web testing:Content testing requires costly manual measuresUsability is difficult to measureDivers platforms (devices, operating environment)Globality (understanding cultural differences)Dominance of change makes is more challengingSummaryContent modelingclass diagramstate machine diagramNavigation modelingPresentation modeling56SummaryTechnologies for web developmentProtocolclient-side technologiesserver-side technologiesTesting web applicationsObjectivesLevelsWeb application specificschallenges57THANK YOU