Final WE MANUAL to Send

8/8/2019 Final WE MANUAL to Send

1/79

WEB ENGINEERING


2/79

Experiment No : Requirement Specification Document

Aim: To Prepare Requirement Specification Document

Document:

1. Introduction

1.1 Purpose/Problem Definition

1.2 Scope


3/79

1.3 Definition and acronyms

1.4 References

2. Overall Description

2.1 Product Perspective

2.1.1. System Interfaces


4/79

2.1.2. User Interfaces


5/79

2.1.3. Hardware Interfaces (H/W Requirements)

.

2.1.4. Software Interfaces(S/W Requirements)

2.1.5. Communication Interfaces

2.1.6. Memory constraints

2.1.7. Operations


6/79

2.1.8. Site adaptation requirements

2.1.8.1 Website requirement

2.2 Product functions (Functional Requirements)


7/79

2.3 User characteristics


8/79

2.4 Constraints


9/79

2.5 Assumptions and dependencies


10/79

3. Specific Requirement

3.1 External interface requirement

3.1.1 User Interface


11/79

3.2 Software product features


12/79

3.3 Performance requirement(Non functional Requirements)


13/79

3.4 Software system attributes(Quality Requirments)Maintainability:

Portability:

Recoverability:

Security:

Logical database requirements


14/79

3.5 Other requirements


15/79

Experiment No : Requirement Modelling

Aim : To Model the requirements using UWE approach.

Theory:

Requirement Modeling:

It is displayed using USE case diagram and activity Diagram.

Use cases

Name :Primary actor:Goal in context:Preconditions:Scenarios:Post Conditions: Exceptions:

Acivity Diagram

In its basic form, an activity diagram is a simple and intuitive illustration of what happens in a workflow,

what activities can be done in parallel, and whether there are alternative paths through the workflow. Activity

diagrams as defined in the Unified Modeling Language are derived from various techniques to visually illustrate

workflows. Activity diagrams are used to visualize the workflow of a business use case. A complete workflow

description will have a basic flow, and one or several alternative flows. This workflow has a structure that we can

define textually, using informal if, if-then-else, or does-until statements of various kinds. For a simple workflow

with a simple structure such textual definitions may be quite sufficient, but in the case of more complex structures,

activity diagrams help to clarify and make more apparent what the workflow is. Historically, activity diagramming

techniques have mostly been used in the business process modeling domain, but this article will also briefly

discuss how you can use it in the system modeling domain.

Basic Activity Diagram Notation:

As common for most notations, the activity diagram notation has some elements that are necessary for you to

understand if you want to be conversant about activity diagrams. A basic activity diagram can have the following

elements:


16/79

Activity states, which represent the performance of a step within the workflow.

Transitions that show what activity state follows after another. This type of transition is sometimes referred to

as a completion transition, since it differs from a transition in that it does not require an explicit trigger event, it

is triggered by the completion of the activity the activity state represents.

Decisions for which a set of guard conditions are defined. These guard conditions control which transition of

a set of alternative transitions that follows once the activity has been completed. You may also use the

decision icon to show where the threads merge again. Decisions and guard conditions allow you to show

alternative threads in the workflow of a business use case.

Use Case Diagram for Web application :


17/79

Activity Diagram for Web application


18/79

Content Modeling:

Content modeling is done using Class Diagram and state diagram.

Class Diagram:

The basic structure of the class diagram arises from the responsibilities and relationships discovered when doing

the CRC cards and Interaction Diagrams. (If a class uses another class as a collaborator, or sends a message to

an object of that class during an Interaction, then there must either be an association linking objects of those

classes, or linking the "sending" class to an object which provides access to an object of the "receiving" class.)

In the case of the ATM system, one of the responsibilities of the ATM is to provide access to its component parts

for Session and Transaction objects; thus, Session and Transaction have associations to ATM, which in turn has

associations to the classes representing the individual component parts. (Explicit "uses" links between Session

and Transaction, on the one hand, and the component parts of the ATM, on the other hand, have been omitted

from the diagram to avoid making it excessively cluttered.)

The need for the various classes in the diagram was discovered at various points in the design process.

Some classes were discovered when doing analysis

Some classes were discovered when doing CRC cards

Some classes were discovered when doing detailed design or writing code

Money - used to represent money amounts, in numerous places. AccountInformation - contains names

of various types of accounts customer can choose from

That is, OO design is not a "waterfall" process - discoveries made when doing detailed design and coding can

impact overall system design.


19/79

Class Diagram for web application:


20/79

State diagram

Three of the objects we have identified have behavior that is sufficiently complex to warrant developing a State

Chart for them. (These are the objects that were identified as the major controller objects.)

For E.g ATM Machine Problem Definition

The object representing the machine itself (responsible for the System Startup and Shutdown use cases)

Objects representing a customer session (one per session) (responsible for the Session use case)

Objects representing an individual transaction (one per transaction) (responsible for the Transaction use

case, use cases for the specific types of transaction, and Invalid PIN extension).

State Diagram for web application
http://courses.knox.edu/cs292/ATMExample/Statecharts.html#ATM%23ATMhttp://courses.knox.edu/cs292/ATMExample/Statecharts.html#ATM%23ATMhttp://courses.knox.edu/cs292/ATMExample/Statecharts.html#Session%23Sessionhttp://courses.knox.edu/cs292/ATMExample/Statecharts.html#Transaction%23Transactionhttp://courses.knox.edu/cs292/ATMExample/Statecharts.html#Session%23Sessionhttp://courses.knox.edu/cs292/ATMExample/Statecharts.html#Transaction%23Transactionhttp://courses.knox.edu/cs292/ATMExample/Statecharts.html#ATM%23ATM


21/79

Hypertext Modeling:

It is done using OOHDM (object Oriented Hypermedia Design Method.)

Diagram of your web application


22/79

Presentation Modeling:

Sequence Diagram

the Sequence Diagram and the Collaboration Diagram. In order to illustrate both types, the major use cases are

documented using Sequence Diagrams, and the specific subcases of transaction (withdrawal, etc.) and the Invalid

PIN Extension are documented using Collaboration Diagrams. (The major reason for using two different types of

diagram is pedagogical - to illustrate each type.)

Sequence diagrams show essentially the same information, but concentrate on the time-ordered

communication between objects, rather than their relationships. An example of a sequence diagram is shown

below. The dashed vertical lines represent the lifeline of the object.

Sequence diagram of your web application:


23/79

Customization Modeling :

It is done using component diagram.

Component diagrams document physical elements. Components are wired together by using an assemblyconnector to connect the required interface of one component with the provided interface of another component.This illustrates the service consumer - service provider relationship between the two components.

An assembly connector is a "connector between two components that defines that one component provides theservices that another component requires. An assembly connector is a connector that is defined from a requiredinterface or port to a provided interface or port."

When using a component diagram to show the internal structure of a component, the provided and requiredinterfaces of the encompassing component can delegate to the corresponding interfaces of the containedcomponents.

A delegation connector is a "connector that links the external contract of a component (as specified by its ports) tothe internal realization of that behavior by the components parts."

Components diagrams can be used to illustrate the structure of arbitrarily complex systems. The followingexample illustrates what a typical Insurance policy administration system might look like:

It is possible to envisage that each of the components depicted in the above diagram will, in turn, have othercomponent diagrams illustrating their internal structure.


24/79

Diagram for your web application:


25/79

Experiment No :

Aim: To Prepare Software Project Management Plan

1. Introduction:

1.1 Project overview:


26/79

1.2 Project deliverables:


27/79

2. Project Organization:

2.1 Software Process Model:


28/79

2.2 Roles and Responsibilities:


29/79

2.3 Tools and Techniques:


30/79

System requirements:


31/79

Project management plan:

3.1 Tasks:

Sr.No.

Task Description DeliverablesandMilestones

ResourcesNeeded

DependenciesandConstraints

Risks andContingencies


32/79

3.2 Assignments:

ROLES NAME RESPONSIBILITIES


33/79

3.3 Timetable:

Tasks Description Days allotted Start date End date


34/79

Experiment No :

Aim : To Prepare Software Design Description Document

1. Introductiona. Purpose


35/79

b. Scope


36/79

c. Definitions and Acronyms


37/79

2. References


38/79

3. Decomposition Description

a. Module Description


39/79

b. Concurrent Process Description


40/79

c. Data Description


41/79

4. Dependency Descriptiona. Inter-Module Dependency


42/79

b. Inter-Process Dependency


43/79

c. Data Dependency


44/79

5. Interface Descriptiona. Module Interface


45/79

b. Process Interface


46/79

6. Detailed Designa. Module Detailed Design


47/79

b. Data Detailed Design


48/79

Experiment No :

Aim : To prepare SYSTEM TEST DOCUMENT

Test Approaches:

White box testingUsing white-box testing methods, the software engineer can derive test cases that do all of thefollowing:

1. Exercise all independent paths within the module at least once.

2. Exercise all logical decisions for both true and false scenarios.

3. Execute all loops at their boundaries and within their operational loops

4. Exercise all internal data structures to ensure their validity.

Black box testing

Black box testing attempts to find errors in the following categories:

1. Incorrect or missing functions

2. Interface errors

3. Errors in data structures or external database access

4. Performance errors

5. Initialization and termination errors

Unit testing

Unit testing focuses verification effort on the smallest unit of software design the software module.

Using the component level design description as a guide, important control paths are tested to

uncover errors within the boundary of the module. The unit test is white box oriented, and the steps

can be conducted in parallel for multiple modules.

Integration testing

Interfacing of various modules can cause problems. Data can be lost across an interface, one

module may affect the other, and individually acceptable imprecision may be magnified when

combined.


49/79

Integration testing is a systematic technique for constructing the program structure while at the same

time conducting tests to uncover errors associated with interfacing. The objective is to take unit tested

components and build a program structure that has been dictated by design.

Stress testing

During earlier testing steps, white box and black box techniques result in a thorough evaluation of

normal program functions and performance. Stress tests are designed to confront programs with

abnormal situations. Stress testing executes a system in a manner that demands resources in

abnormal quantity, frequency or volume. Essentially, the tester attempts to break the program.

Performance testing

Software that performs the required functions but does not conform to performance requirements is

unacceptable. Performance testing is designed to test run-time performance of software within the

context of an integrated system. Performance testing occurs through all the steps in the testing

process. However, it is not until all system elements are fully integrated that the true performance of a

system can be ascertained.

Security testing

Any computer-based system that manages sensitive information or causes actions that can harm

individuals is a target for improper or illegal penetration. Security testing attempts to verify that

protection mechanisms built into a system will, in fact, protect it from improper penetration. Duringsecurity testing, the tester plays the role of the hacker who desires to penetrate the system. Given

enough time and resources, good security testing will ultimately penetrate a system. The role of the

system designer is to make penetration cost more than the value of the information that will be

obtained.

Recovery testing

Many computer-based systems must recover from faults and resume processing within a pre-

specified time. In some cases, a system must be fault-tolerant, i.e. processing faults must not causeoverall system function to cease. In other cases, a system failure must be corrected within a specified

period of time or severe economic damage will occur. Recovery testing is a system test that forces

the software to fail in a variety of ways and verifies that recovery is properly performed. If recovery is

automatic, re-initialization, check-pointing mechanisms, data recovery and restart are evaluated for


50/79

correctness. If recovery requires human intervention, the mean-time-to-repair (MTTR) is evaluated to

determine whether it is within acceptable limits.

Test Plan:

It is a document consisting of different test cases designed for different testing objects and differenttesting attributes. The plan puts the test in sequential order as per the strategies chosen that is, topdown and bottom up. The test plan is matrix of test cases listed in order of its execution.Test Plan is developed to detect and identify potential problems before delivering the Software to itsusers.The scope of test will be limited just to the boundaries as the white box testing cannot be in detail.

Steps in delivering a Test Plan:

1. Prepare a Test Plan:

Identify members from quality assurance department, users and development to cover testing in fullextent.

2. Define Objectives of Testing:

Define objectives of testing and describe how to achieve them. Define which type of testing is to bedone and how will we be doing that. Define some testing milestones. Prepare detailed test planconsidering milestones.

3. Development of a Test Plan:Develop test data, input, event or transaction and expected output for each test under consideration.

4. Perform Test Analysis:After preparing test cases perform testing and examine test output and document the result. The reportwill contain list with class, type and severity of defect.


51/79

Type of testing

Features to betested

ResponsibilityAllocation

Features not tobe tested

Testing tools &environment

Time requir


52/79

Test Cases:

Type of testingItem to betested

Input ExpectedOutput

Actual Output


53/79

Experiment No:

Aim : To design personal web page with your own image and some information about you

using basic HTML tags and DHTML.

Theory: Following are the various text formatting tags.

The , , , , and tags are all font-style tags.

Renders as teletype or mono-spaced text

Renders as italic text

Renders as bold text

Renders as bigger text

Renders as smaller textExample: A text with a deleted part and a new inserted part:

My favorite color is blue red!

SAMPLE CODE:

My favorite color is blue red!

Notice that browsers will strikethrough deleted text and underline inserted

text.

Output:-

My favorite color is red!

Notice that browsers will strikethrough deleted text and underline inserted text.

This sample code is illustrating the use of rowspan & colspan in the table tag.

Cell that spans two columns:


54/79

Name

Telephone

LAST COL

Bill Gates

555 77 854

555 77 855

555 77 855

555 77 855

Cell that spans two rows:

Name:

Bill Gates

Telephone:

555 77 854

555 77 855


55/79

OUTPUT:-

Cell that spans two columns:

Name Telephone LAST COL

Bill Gates 555 77 854 555 77 855 555 77 855 555 77 855

Cell that spans two rows:

Name: Bill Gates

Telephone:555 77 854

555 77 855

Example :

The tag is used to group the body content in an HTML table.The tbody element

should be used in conjunction with the theadand tfoot elements.The thead element is used to

group the header content in an HTML table and the tfoot element is used to group the footer

content in an HTML table.

SAMPLE CODE:

tbody {color:blue;height:50px}
http://www.w3schools.com/tags/tag_thead.asphttp://www.w3schools.com/tags/tag_thead.asphttp://www.w3schools.com/tags/tag_tfoot.asphttp://www.w3schools.com/tags/tag_thead.asphttp://www.w3schools.com/tags/tag_tfoot.asp


56/79

Month

Savings

January

$100

February

$80

Sum

$180

OUTPUT:-

Month Savings

January $100

February $80


57/79

Following points are to be covered under this experiment:

About the creation of frames in HTML.

About the attributes

Attribute Value Description

frameborder 0

1

Specifies whether or not to display border around

the frame

longdesc URL A URL to a long description of the frame contents.

Use it for browsers that do not support frames

marginheight pixels Defines the top and bottom margins in the frame

marginwidth pixels Defines the left and right margins in the frame

name frame_name Defines a unique name for the frame (to use in

scripts)

noresize noresize When set to noresize the user cannot resize the

frame

scrolling yes

no

auto

Determines scrollbar action

src URL Defines the URL of the file to show in the frame

Horizontal frameset.

Mixed frameset.

Inline frame.

How to use the tag.

Frameset with noresize="noresize".

Navigation frame. Jump to a specified section within a frame.

Jump to a specified section with frame navigation.

Detail description of the application to be implemented with desired output.
http://www.w3schools.com/tags/att_frame_frameborder.asphttp://www.w3schools.com/tags/att_frame_longdesc.asphttp://www.w3schools.com/tags/att_frame_marginheight.asphttp://www.w3schools.com/tags/att_frame_marginwidth.asphttp://www.w3schools.com/tags/att_frame_name.asphttp://www.w3schools.com/tags/att_frame_noresize.asphttp://www.w3schools.com/tags/att_frame_scrolling.asphttp://www.w3schools.com/tags/att_frame_src.asphttp://www.w3schools.com/tags/tryit.asp?filename=tryhtml_frame_rowshttp://www.w3schools.com/tags/tryit.asp?filename=tryhtml_frame_mixhttp://www.w3schools.com/tags/tryit.asp?filename=tryhtml_noframeshttp://www.w3schools.com/tags/tryit.asp?filename=tryhtml_frame_noresizehttp://www.w3schools.com/tags/tryit.asp?filename=tryhtml_frame_navigationhttp://www.w3schools.com/tags/tryit.asp?filename=tryhtml_frame_jumphttp://www.w3schools.com/tags/tryit.asp?filename=tryhtml_frame_navigation2http://www.w3schools.com/tags/att_frame_frameborder.asphttp://www.w3schools.com/tags/att_frame_longdesc.asphttp://www.w3schools.com/tags/att_frame_marginheight.asphttp://www.w3schools.com/tags/att_frame_marginwidth.asphttp://www.w3schools.com/tags/att_frame_name.asphttp://www.w3schools.com/tags/att_frame_noresize.asphttp://www.w3schools.com/tags/att_frame_scrolling.asphttp://www.w3schools.com/tags/att_frame_src.asphttp://www.w3schools.com/tags/tryit.asp?filename=tryhtml_frame_rowshttp://www.w3schools.com/tags/tryit.asp?filename=tryhtml_frame_mixhttp://www.w3schools.com/tags/tryit.asp?filename=tryhtml_noframeshttp://www.w3schools.com/tags/tryit.asp?filename=tryhtml_frame_noresizehttp://www.w3schools.com/tags/tryit.asp?filename=tryhtml_frame_navigationhttp://www.w3schools.com/tags/tryit.asp?filename=tryhtml_frame_jumphttp://www.w3schools.com/tags/tryit.asp?filename=tryhtml_frame_navigation2


58/79

Implementation details: Example: Sample program to create a frame.

SAMPLE CODE:

Frame.htm

Index.htm

index.htm

Index :

Cover Page

Chapter 1

Chapter 2

Chapter 3

Chapter 4

Chapter 5


59/79

Chapter 6

main.htm

COMPUTER NETWORKS

Author : Tannenbaum

Publisher : Mc Graw Hill

OUTPUT:-


60/79

Program:

This example demonstrates how to use an image map.

SAMPLE CODE:

Click on one of the planets to watch it closer:


61/79

href="sun.htm">

Note: The "usemap" attribute in the img element refers to the "id" or

"name" (browser dependant) attribute in

the map element, therefore we have added both the "id" and "name" attributes to

the map element.

Output:

Click on one of the planets to watch it closer:


62/79

Note: The "usemap" attribute in the img element refers to the "id" or "name" (browser

dependant) attribute in the map element, therefore we have added both the "id" and "name"

attributes to the map element.

(If clicked on the area of sun it will give the next image, simillarly it will give th ebigger imag e

of mercury & venus, as below.)

SAMPLE CODE:

a.one:link{color:black}

a.one:hover{color:pink}

a.one:active{color:blue}

e{font-size:16 pt; font-weight: bold;text-align:center}

.question1{color:cyan; font-style:bold; font-size:15pt}

.answer1{color:pink; font-style:italic; font-size:25 pt}

.big1{color:magenta; font-style:arabic; font-size:14pt}

1.Students

INTERNAL SYTLESHEET

What is CSS?

ANS:-

Cascading Style Sheet.


63/79

EXTERNAL SYTLESHEET

Which is this subject?

ans:-

Internet Theory & Application.

Output:


64/79

Code and Output of your web page :


65/79

Conclusion:

Significance of CSS

Limitations with Frame Tag


66/79

Experiment No:

Aim : To develop transactional Web application for (Online Railway reservation)

Theory :

This development has to be done using various web technologies like

Javascript,HTMl,DHTML,CSS ,ASP/JSP/servlet.

Samples Codes for Javascriot,ASP and Servlet

This program displays the information form of a student, takes the input values, perform

validation & finally displays these values.

SAMPLE CODE:

The following example shows an alert dialog box, welcoming a user. As soon as the OK button

is clicked, an image is displayed in the browser. This illustrates that all background processing

stops until an alert has been responded to.

Students Information

function validate()

{

var err=0;

if(document.form1.rollno.value == "")

err = "\n Enter Roll No.";

if(document.form1.name.value == "")


67/79

err += "\n Enter Name.";

if(document.form1.semester.value == "")

err += "\n Enter Semester.";

if(document.form1.branch.value == "")

err += "\n Enter branch.";

if(document.form1.clas.value == "")

err += "\n Enter Class.";

alert(err);

}

Roll No.

Name

Semester

-------

1

2

3

4

5


68/79

6

7

8

Branch

-------

Computer

Information Technology

Mechanical

Electronics

Electronics and

Telecommunication

Class


69/79


70/79

err += "\n Enter Name.";

if(document.form1.semester.value == "")

err += "\n Enter Semester.";

if(document.form1.branch.value == "")

err += "\n Enter branch.";

if(document.form1.clas.value == "")

err += "\n Enter Class.";

alert(err);

}

Roll No.

Name

Semester

-------

1

2

3

4


71/79

5

6

7

8

Branch

-------

Computer

Information Technology

Mechanical

Electronics

Electronics and

Telecommunication

Class

Stud_Info.asp:


72/79

OUTPUT:


73/79

SAMPLE CODE:

ColourServlet.html

Servlet Example

Please select one of the colours

Red

Green

Blue


74/79

ColourServlet.java

import java.io.*;

import javax.servlet.*;

import javax.servlet.http.*;

public class ColourServlet extends HttpServlet

{

public void doGet (HttpServletRequest request, HttpServletResponse response)throws IOException, ServletException

{

String color = request.getParameter(color);

response.setContentType(text/html)

PrintWriter out = response.getWriter();

out.println( You have selected:;

out.println(color);

out.println();

out.close();

}

}

OUTPUT:


75/79

This application reads data from data.xml and displays it in the form of HTML table.

SAMPLE CODE:

Complete data is stored in xml file.

data.xml

NAME

LAST NAME

PHONE NO

ADDRESS

Priya

Sharma

7678956


76/79

vashi

Priyanka

patil

7645676

ghatkopar

HTML file using which xml data is displayed in tabular format :

OUTPUT:

NAME LAST NAME PHONE NO ADDRESS

Priya Sharma 7678956 vashi

Priyanka patil 7645676 ghatkopar


77/79


78/79

Code and output of your application:


79/79

Conclusion :

Comparison between XML & HTML.

Significance of DTD.

Significance of XSL.

Advantages of Servlet.

Significance of Tomcat Server.

Use of ASP technology in Client Server Communication.

How ASP is used at server side and the working of ASP with its advantages.

How JavaScript is used for validation.

Significance of JavaScript for client side programming.

Documents

Final WE MANUAL to Send