CHAPTER I

INTRODUCTION

1.1 Web Engineering

The World Wide Web (www) has become a major delivery

platform for a variety of complex and sophisticated

enterprise applications in several domains. In addition

to their inherent multifaceted functionality, these Web

Applications (WebApp) exhibit complex behavior and place

some unique demands on their usability, performance,

security and ability to grow and evolve.

However, a vast majority of these applications

continue to be developed in an ad-hoc way, contributing

to problems of usability, maintainability, quality and

reliability. While Web development can benefit from

established practices from other related disciplines, it

has certain distinguishing characteristics that demand

special considerations.

In the recent years, there have been some

developments towards addressing these problems and

requirements. As an emerging discipline, Web engineering

actively promotes systematic, disciplined and

quantifiable approaches towards successful development of

high-quality, ubiquitously usable Web-based systems and

applications.

In particular, Web engineering focuses on the

methodologies, techniques and tools that are the

1

foundation of WebApp development and which support their

design, development, evolution, and evaluation. WebApp

development has certain characteristics that make it

different from traditional software, information system,

or computer application development.

Web engineering is neither a clone, nor a subset of

software engineering, although both involve programming

and software development. While Web Engineering uses

software engineering principles, it encompasses new

approaches, methodologies, tools, techniques, and

guidelines to meet the unique requirements of Web-based

applications.

1.2 Motivation

Although the development of web application may seem

easy, it is often more complex and challenging than many

of us think. In many ways, it is also different and more

complex than traditional software development [6]. Two

key attributes distinguish Web-based systems development

from traditional software development: rapid growth of

the requirements of Web-based systems needs to be

designed and built for scalability and maintainability;

these features can't be added later. Success in building,

implementing, and maintaining a Web-based system largely

depends on how well we address these issues.

2

In addition, a Web-based system must meet the needs

of its many different stakeholders. The stakeholders are

the diverse range of the system's users, persons who

maintain the system, the organization that needs the

system, and also those who fund the system development.

These needs add to the complexity of Web-based system

design and development. Furthermore, development of Web-

based systems calls for people with knowledge and

expertise in many different areas.

Many organizations and developers have successfully

developed large high-performance Web-sites and

applications, but others have failed or face the

potential for major failures. A recent survey on Web-

based application development by the Cutter Consortium

highlighted the problems plaguing large Web-based

projects. Those problems are:

1. Delivered systems didn't meet business needs 84% of

the time.

2. Delivered systems didn't have the required

functionality 53% of the time.

3. Schedule delays plagued the projects 79% of the

time.

4. Projects exceeded the budget 63% of the time.

The emerging Web engineering discipline deals with

the process of developing Web-based systems and

applications. The essence of Web engineering is to

successfully manage the diversity and complexity of

WebApp development and hence avoid potential failures,

3

which can have serious implications. It is a proactive

approach to building WebApps.

Web application quality, reliability and

functionality are important factors because software

glitches could block entire businesses and determine

strong embarrassments. These factors have increased to

motivate the need for methodologies, tools and models to

improve WebApps [6, 7].

1.3 Objectives of the Thesis

Based on the background theory, the higher quality

the WebApp requires the more attention to the web

engineering process and methodology should be given. So,

it is worthy of research in the sense of how to improve

WebApps by using web engineering techniques to the better

way.

Web applications have become complex and crucial for

many firms. Web engineering is a methodology which can

help companies to create successful web information

systems and actively promotes systematic, disciplined and

quantifiable approaches towards the development of high-

quality, ubiquitously usable web-based systems and

applications.

The purpose of this document is to provide a precise

and clear guide for the methodology and the development

model based on Web engineering concepts and principles.

As a knowledge source this documentation capture and

present the procedure of developing e-business

4

application by using the powerful PHP web scripting

language, the stable Apache web server, and the fast

MySQL database server.

1.4 Contributions of the Thesis

Web engineering is multidisciplinary and encompasses

contributions from diverse areas: systems analysis and

design, software engineering, hypermedia/hypertext

engineering, requirements engineering, human-computer

interaction, user interface, information engineering,

information indexing and retrieval, testing, modeling and

simulation, project management, and graphic design and

presentation.

This thesis intended to contribute a process and a

systematic approach to development of high quality Web-

based systems. It also promotes the establishment and use

of sound scientific, engineering and management

principles, and disciplined and systematic approaches to

development, deployment and maintenance of Web-based

systems.

As web applications became increasingly integrated

in business strategies for small and large companies

(e.g. E-commerce), the need to develop reliable, usable

and adaptable systems grows in importance. So, this

thesis contributes to many business people to build the

e-commerce applications smoothly.

5

1.5 Organization of the Thesis

Organization of the thesis is important. The thesis is

easy to read and understand with the systematical

structure. This thesis tries to give readers an easily-

navigate view. The research about web engineering

techniques through a case study on web applications is

organized as follows:

The chapter 2 reviews the literatures concerning of the

research topic: web engineering process, methods and

development. Through the literature review, the addressed

methodologies are analyzed and applied to WebApps.

The chapter 3 further broadens the web engineering

methodologies and web development process. All the

related contents of the web techniques are explored to

key areas and the activities.

The chapter 4 describes the detailed analysis modeling

and program implementation of e-commerce application.

The chapter 5 discusses the conclusion and results for

this research.

6

CHAPTER II

LITERATURE REVIEW

2.1 Evolutionary Web Application Development

Web Applications are evolutionary. For many WebApps,

it's not possible to specify fully what they should or

will contain at the start of their development, because

their structure and functionality will evolve over time.

Hence, Web-based system development isn't a one-time

event, as currently perceived and practiced by many Web

developers; it is, instead, an interactive process with a

long lifecycle.

As web engineers now place greater emphasis on the

performance, correctness, and availability of Web-based

systems, the development process assumes greater

significance. A sound process is a prerequisite for

success, especially when a distributed team of people

with different types and levels of skills and expertise

work together to develop large WebApps.

Web development, therefore, should be considered as

a process consisting of many phases, steps, and

7

activities. The Web development process breaks the Web

development efforts into manageable chunks and offers

techniques to help developers successfully manage and

complete Web projects. A sound process helps developers

address the complexities of Web-based systems, minimizes

the development risks, deals with the likelihood of

change, delivers the WebApps on time, and provides

feedback for management on project progress.

To be effective, the development process should be

planned well and clearly define a set of steps that

developers can follow. Furthermore, it should be

measurable and trackable. The process should also

facilitate the WebApp's continual refinement and

evolution based on feedback from users and clients. Such

processes and methodologies have been applied in a number

of successful WebApps, including those of the ABC

Internet College, University of Western Sydney, 2000

Sydney Olympics, 1998 Nagano Winter Olympics, and Vienna

International Festival.

2.2 Perspectives for Web Engineering

Web engineering is more complex than traditional

Information System (IS) engineering in that it raises

many new issues such as presentation issues, user

8

profiling, navigation support, etc. Developing e-business

systems is also a complicated task. It involves many

different disciplines and requires knowledge of e-

business technologies as well as business processes.

This section addresses some of the most fundamental

themes of Web Engineering and in the same time it tries

to explain the significance and the usefulness of Web

Engineering from the e-Commerce viewpoint.

In most cases, development of Web-based systems has

been ad hoc, lacking systematic approach, quality control

and assurance procedures. Hence, there is now legitimate

and growing concern about the manner in which Web-based

systems are developed and their quality and integrity.

Web Engineering, an emerging new discipline, advocates a

process and a systematic approach to development of high

quality Web-based systems. It promotes the establishment

and use of sound scientific, engineering and management

principles, and disciplined and systematic approaches to

development, deployment and maintenance of Web-based

systems. An e-Commerce system is a case where we can

apply the Web Engineering discipline. E-Commerce systems

are mainly Web-based systems, thus the processed and the

systematic approaches described within the Web

Engineering framework can be applied in the development

of a Web-based e-Commerce system.

9

CHAPTER III

WEB ENGINEERING METHODOLOGIES AND DEVELOPMENT

3.1 Web Applications and Application Domain

A web application is a software system based on

technologies and standards of the World Wide Web

Consortium (W3C) that provides Web specific resources

such as content and services through a user interface,

the Web browser.

The categorization of the various types of WebApps

assists in estimating their level of complexity and the

development effort required. Dart (1999) provides the

following most common application categories reported in

the Web engineering literature [9]:

1. Informational – Read-only content with navigation

and links.

2. Download – Information available for downloading by

the user.

10

3. Customizable – Content can be customized based on

user needs.

4. Interaction – Communication among users via chat

rooms, bulletin boards, or instant messaging.

5. User input – Communication via online forms.

6. Transaction oriented – Order processing (products

and services).

7. Service oriented – The application provides an

online service (e.g. estimating a mortgage payment).

8. Portal – A starting point that channels the user to

other WebApps outside the domain of the portal

application.

9. Database access – Querying a database and retrieving

information.

3.2 Attributes of Web-Based Systems and Applications

In the early days of the World Wide Web “Websites”

consisted of little more than a set of linked hypertext

files that presented information using text and limited

graphics.

Today, WebApps have evolved into sophisticated

computing tools that not only provide standalone function

to the end-user, but also have been integrated with

corporate databases and business applications.

There is little debate that WebApps are different

than the many other categories of computer software.

Powell summarizes the primary differences when he states

11

that Web-based systems “involve a mixture between print

publishing and software development, between marketing

and computing, between internal communications and

external relations, and between art and technology.”

The following attributes are encountered in the vast

majority of WebApps.

1. Network intensiveness. A WebApp resides on a network and

must serve the needs of a diverse community of

clients. A WebApp may reside on the Internet.

Alternatively, an application may be placed on an

Intranet or an Extranet.

2. Concurrency. A large number of users may access the

WebApp at one time. In many cases, the patterns of

usage among end-users will vary greatly.

3. Unpredictable load. The number of users of the WebApp

may vary by orders of magnitude from day to day. 100

users may show up on Monday; 10,000 may use the

system on Thursday.

4. Performance. If a WebApp user must wait too long (for

access, for server-side processing, for client-side

formatting and display), he or she may decide to go

elsewhere.

5. Availability. Although expectation of 100 percent

availability is unreasonable, users of popular

WebApps often demand access on a “24/7/364” basis.

6. Data driven. The primary function of many WebApps is to

use hypermedia to present text, graphics, audio, and

video content to the end-user. In addition, WebApps

12

are commonly used to access information that exists

on databases that were not originally an integral

part of the Web-based environment (e.g. e-commerce

or financial applications).

7. Content sensitive. The quality and aesthetic nature of

content remains an important determinant of the

quality of a WebApp.

8. Continuous evolution. Unlike conventional application

software that evolves over a series of planned,

chronologically spaced releases, WebApps evolve

continuously. It is not unusual for some WebApps

(specifically, their content) to be updated on a

minute-by-minute schedule or for content to be

independently computed for each request.

9. Immediacy. Although immediacy-the compelling need to

get software to market quickly-is a characteristic

of many application domains, WebApps often exhibit a

time to market that can be a matter of a few days or

weeks. Web engineering must use methods for

planning, analysis, design, implementation, and

testing that have been adapted to the compressed

time schedules required for a WebApp development.

10. Security. Because WebApps are available via

network access, it is difficult, if not impossible,

to limit the population of end-users who may access

the application. In order to protect sensitive-

content and provide secure modes of data

transmission, strong security measures must be

13

implemented throughout the infrastructure that

supports a WebApp and within the application itself.

11. Aesthetics. An undeniable part of the appeal of a

WebApp is its look and feel. When an application has

been designed to market or sell product or ideas,

aesthetics may have as much to do with success as

technical design.

These general attributes apply to all WebApps, but with

different degrees of influence [9].

3.3 Steps to Successful Development

Building and deploying a Web-based system involves

multiple steps. These steps influence one another and are

iterative. We recommend the following 10 key steps for

successful development and deployment of WebApps [7]:

1. Understand the system's overall function and

operational environment, including the business

objectives and requirements.

2. Clearly identify the stakeholder_ that is, the

system's main users, the organization that needs the

system, and who funds the development.

3. Specify the (initial) functional, technical, and

nontechnical requirements of the stakeholders and

the overall system. Furthermore, recognize that they

may not remain the same; rather, they are bound to

change and evolve over time during system

development and also at each iteration/revision.

14

4. Develop an overall architecture of the Web-based

system that meets the technical and nontechnical

requirements.

5. Identify subprojects or sub processes to implement

the architecture. If the subprojects are too complex

to manage, further divide them until they become a

set of manageable tasks.

6. Develop and implement the subprojects.

7. Incorporate effective mechanism to manage the Web

system's evolution, change, and maintenance. As the

system evolves, repeat the overall process, or some

parts of it, as required.

8. Address the nontechnical issues, such as revised

business processes, organizational and management

policies, human resources development, and legal,

cultural, and social aspects.

9. Measure the system's performance.

10. Refine and update the system.

3.4 Web Engineering Methods

The development of Web-based systems and

applications incorporates specialized process models,

software engineering methods adapted to the

characteristics of WebApp development, and a set of

important enabling technologies. Process, methods, and

technologies (tools) provide a layered approach to Web

15

Engineering that is conceptually identical to the

software engineering layers.

A basic demand of any website is that its WebApp

must work in the sense that it must be possible to use

the website for its intended purpose – this is addressed

by research into Web engineering methods, models and

tools.

The Web engineering methods landscape encompasses a

set of technical tasks that enable a Web engineer to

understand, characterize, and then build a high-quality

WebApp. Web engineering methods can be categorized in the

following manner:

1. Communication methods define the approach used to

facilitate communication between Web engineers and

all other WebApp stakeholders (e.g., end-users,

business clients, problem domain experts, content

designers, team leaders, project managers).

Communication techniques are particularly important

during requirements gathering and whenever a WebApp

increment is to be evaluated.

2. Requirements analysis methods provide a basis for

understanding the content to be delivered by a

WebApp, the function to be provided for the end-

user, and the modes of interaction that each class

of user will require as navigation through the

WebApp occurs.

3. Design methods encompass a series of design techniques

that address WebApp content, application and

16

information architecture, interface design, and

navigation structure.

4. Testing methods incorporate formal technical reviews of

both the content and design models and a wide array

of testing techniques that address component level

and architectural issues, navigation testing,

usability testing, security testing, and

configuration testing.

The mechanics of analysis, design, and testing must

be adapted to accommodate the special characteristics of

WebApps.

In addition to the technical methods that have just

been outlined, a series of umbrella activities (with

associated methods) are essential for successful Web

engineering. These include project management techniques

(e.g. estimation scheduling, risk analysis) software

configuration management techniques, and review

techniques [9].

3.5 Web Engineering Process

The web engineering process models embrace the agile

development philosophy. Agile development emphasizes a

lean development approach that incorporates rapid

development cycles.

Even when rapid cycle times dominate development

thinking, it is important to recognize that the problem

must still be analyzed, a design should be developed,

17

implementation should proceed in an incremental fashion,

and an organized testing approach must be initiated.

However, these framework activities must be defined

within a process that (1) embrace change, (2) encourages

the creativity and independence of development staff and

strong interaction with WebApp stakeholders, (3) builds

systems using small development teams, and (4) emphasizes

evolutionary or incremental development using short

development cycles.

The attributes of Web-based systems and applications

have a profound influence on the WebE process that is

chosen. A software engineer chooses a process model based

on the attributes of the software that is to be

developed. The same holds true for a Web engineer.

If immediacy and continuous evolution are primary

attributes of a WebApp, a Web engineering team might

chose an agile process model that produces WebApp

releases in rapid-fire sequence. If WebApp is developed

over a longer time period e.g., a major e-commerce

application, an incremental process model might be

chosen.

The network intensive nature of applications in this

domain suggests a population of users that is diverse

(thereby making special demands on requirements

elicitation and modeling) and an application architecture

that can be highly specialized (thereby making demands on

design). Because WebApps are often content-driven with an

emphasis on aesthetics, it is likely that parallel

18

development activities will be scheduled within the Web

engineering process and involve a team of both technical

and non-technical people (e.g., copywriters, graphic

designers) [9].

3.5.1 Defining the Framework

Any one of the agile process models (e.g., Extreme

Programming, Adaptive Software Development, SCRUM) can be

applied successfully as a Web engineering process.

To be effective, any engineering process must be

adaptable. That is, the organization of the project team,

the modes of communication among team members, the

engineering activities and tasks to be performed, the

information that is collected and created, and the

methods used to produce a high-quality product must all

be adapted to the people doing the work, the project

timeline and constraints, and the problem to be solved.

Before defining a process framework for Web engineering,

the following must be recognized:

1. WebApps are often delivered incrementally. That is, framework

activities will occur repeatedly as each increment

is engineered and delivered.

2. Changes will occur frequently. These changes may occur as a

result of the evaluation of a delivered increment or

as a consequence of changing business conditions.

3. Timelines are short. This mitigates against the creation

and review of voluminous engineering documentation,

19

but it does not preclude the simple reality that

critical analysis, design, and testing must be

recorded in some manner.

The web engineering process within the generic

process framework:

1. Customer communication. Within the WebE process,

customer communication is characterized by two major

tasks: business analysis and formulation. Business

analysis defines the business/organizational context

for the WebApp. In addition, stakeholders are

identified, potential changes in business

environment or requirements are predicted, and

integration between the WebApp and other business

applications, databases, and functions is defined.

Formulation is a requirements gathering activity

involving all stakeholders. The intent is to

describe the problem that the WebApp is to solve

using the best information available. In addition,

an attempt is made to identify areas of uncertainty

and where potential changes will occur.

2. Planning. The project plan for the WebApp increment is

created. The plan consists of a task definition and

a timeline schedule for the time period projected

for the development of the WebApp increment.

3. Modeling. Conventional software engineering analysis

and design tasks are adapted to WebApp development,

merged, and then melded into the WebE modeling

activity. The intent is to develop rapid analysis

20

and design models that define requirements and at

the same time represent a WebApp that will satisfy

them.

4. Construction.WebE tools and technology are applied to

construct the WebApp that has been modeled. Once the

WebApp increment has been constructed, a series of

rapid tests are conducted to ensure that errors in

design (i.e., content architecture, interface,

navigation) are uncovered. Additional testing

addresses other WebApp characteristics.

5. Deployment. The WebApp is configured for its

operational environment, delivered to end-users, and

then an evaluation period commence. Evaluation

feedback is presented to the WebE team, and the

increment is modified as required.

Figure: 3.1. Web Engineering Process

3.5.2 Refining the Framework

21

Web engineering process model must be adaptable.

That is, a definition of the engineering tasks required

to refine each framework activity is left to the

discretion of the Web engineering team. In some cases, a

framework activity is conducted informally. In others, a

series of distinct tasks will be defined and conducted by

team-members. In every case, the team has responsibility

for producing a high-quality WebApp increment within the

time period allocated.

It is important to emphasize that tasks associated

with Web engineering framework activities may be

modified, eliminated, or extended based on the

characteristics of the problem, the product, the project,

and the people on the Web engineering team [9].

3.6 Formulating Web-Based Systems

Formulation of Web-based systems and applications

represents a sequence of Web engineering actions that

begins with the identification of business needs, moves

into a description of WebApp objectives, defines major

features and functions, and performs requirements

gathering that leads to the development of an analysis

model. Formulation allows stakeholders and the Web

engineering team to establish a common set of goals and

objectives for the construction of the WebApp. It also

identifies the scope of the development effort and

provides a means for determining a successful outcome.

22

Analysis is a technical activity that is a continuation of

formulation- identifies the data, functional, and

behavioural requirements for the WebApp.

Before considering formulation in more detail, it is

reasonable to ask where formulaion stops and requirements

analysis begins. There is no easy answer to this

question. Formulation focuses on the “big picture”- on

business needs and objectives and related information.

However, it is virtually impossible to maintain this

level of abstraction. Stakeholders and Web engineers want

to define required content, discuss specific

functionality, enumerate specific features, and identify

the manner in which end-users will interact with the

WebApp.

Although the requirements gathering activity for Web

engineering may be abbreviated, the overall requirements

gathering objectives proposed for software engineering

remain unchanged. Adapted for WebApps, these objectives

become:

Identify content requirements.

Identify functional requirements.

Define interaction scenarios for different

classes of users.

The following requirements gathering steps are

conducted to achieve these objectives:

1. Ask stakeholders to define user categories and

develop descriptions for each category.

23

2. Communicate with stakeholders to define basic WebApp

requirements.

3. Analyze information gathered and use information to

follow-up with stakeholders.

4. Define use-cases that describe interaction scenarios

for each user class.

3.7 Web Development Process

Based on the practical experience in building

successful WebApps, the development process are

recommended shown in Figure 3.2. This process assists in

capturing the requirements, enables integration of know-

how from different disciplines, facilitates communication

among various members involved in the development

process, supports continuous evolution and maintenance,

facilitates management of the information content, and

assists in successfully managing the complexity of the

development process.

24

Figure: 3.2. Development Process for Web-based Systems

3.7.1 Context Analysis

The first essential step in developing a Web-based

system is context analysis. In this step, we elicit and

understand the system's major objectives and

requirements, gather information about the operational

and application environment, and identify the system's

primary stakeholders. In addition to the functional

requirements, the system's requirements for scalability,

maintainability, availability, and performance need to be

specifically elicited and understood by the developers at

the beginning of the development process. Based on this

information, the system's technical and nontechnical

25

Qual

ity Co

ntro

l and

Assu

rance

requirements, which, in turn, influence the system

design.

For instance, if the information content and the

system's functions are going to evolve considerably, as

in e-business systems, the system needs to be designed for

scalability. On the other hand, if the information

changes frequently- as in online electronic product

catalogs, product price lists, brochures, and daily news

columns- the system must be designed for easy information

maintainability in order to keep the information current

and consistent. Where an application demands very high

peak or uncertain demands, the system may need to run on

multiple Web servers with load balancing and other

performance enhancement mechanisms [2, 8]. Examples of

this category of application are online stock trading,

online banking, and highly accessed sports and

entertainment Websites, such as those for the Olympics,

Wimbledon, and the Oscars.

Thus, it is very important to recognize that

scalability, maintainability, and/or performance need to

be built into the initial system architecture. It would

be very hard, or even impossible, to add these features

if the initial architecture is not designed to support

them. To illustrate this, consider an e-business Web site that

provides product information, such as color, price, and

availability that appears on many different pages and may

change frequently. If the Web site is designed as static

HTML pages, then every time a product's information

26

changes, someone has to incorporate the change in every

page that contains this information. This is a cumbersome

and laborious task, and often changes may be made only on

a few pages, not on all of them. As a consequence of

this, information appearing on different pages will be

inconsistent.

A better approach to ensure consistency of

information across all Web pages is to automatically

retrieve the information, when and where needed, from a

single information source. If product information is

stored in a single central database, then by extracting

the relevant information from this database, web

engineers can dynamically create various Web pages that

contain this information. In the database-driven

approach, they need to change the information only in one

place- the database. Further, the database-driven Web

sites can have a back-end system that allows an

authorized person, who need not be skilled in Web page

development, to make information changes easily through a

Web interface, from anywhere. Such a Web site requires a

completely different architecture than a Web site that

has only static HTML pages. Hence, an appropriate

architecture needs to be chosen early in system

development.

Thus, the context analysis assists us in capturing

and deriving key information required developing a

WebApp. In addition, it can also identify nontechnical

issues and needs that have to be addressed for successful

27

implementation and application of the system. These may

include reengineering of business processes where

required, organizational and management policies, staff

training, and legal, cultural and social issues.

Context analysis can minimize or even eliminate the

major problems plaguing large Web-based system

development, such as delivered systems that don't meet

business needs and don't have the required functionality.

But many developers and project managers overlook this

essential first step in Web system development and hence

face the problems later, when it is hard to correct them.

3.7.2 Product Model

A product model of the system describes various

components of the system and how they are linked. The

following three types of architectures constitute the

product model:

1. An overall system architecture describing how the network

and the various servers such Web servers,

application servers, and database servers interact

2. An application architecture depicting various information

modules and the functions available

3. A software architecture identifying various software and

database modules required to implement the

application architecture

28

A suitable product model for an application is

developed based on the system's requirements derived from

the context analysis.

3.7.3 System, Application and Software Architecture

Development of appropriate system architecture is

important, especially if high performance and/or high

security of the Web-based system are critical needs. For

applications such as those used for the 1998 Nagano

Winter Olympic Games and the 2000 Sydney Olympic Games,

high performance and high availability were primary

requirements. Hence, design of these system's network and

server architecture incorporated redundant hardware and

advanced features such as load balancing, Web server

acceleration, and efficient management of dynamic data to

boost the performance [8]. Where performance and security

are not critical requirements, a standard Web server is

adequate.

The application architecture shows us a map of various

information and functional modules. An information module

may provide the same information to all the users or

provide customized or personalized information to each

user. Functional modules- such as login pages,

registration pages, Web forms for data collection, and

the shopping carts used in e-commerce systems- collect and

process the user's input.

29

The application architecture is then mapped into a

software architecture, displaying various software and

database modules required to provide the required

functionality, shown in Figure 3.3. Specific requirements

for look and feel, consistency of information,

scalability, maintainability, and quality control

mechanisms determine the software architecture.

3.7.4 Process Model

A process model specifies the activities that need

to be carried out to develop and implement the system.

The activities include detailed analysis of requirements,

design, testing, and deployment. To better manage a large

project, each major activity may, however, be divided

into a set of subprojects. In addition, the process model

should also include activities that address the

nontechnical issues identified in the context analysis.

A Web-based application consists of: (1) information

content, and (2) software required to deliver the

content, to assist in maintenance and quality assurance

of the content, and to provide various interactive

capabilities. Hence, we need a process to develop the

information structure, information content, screen lathe

user, and navigation mechanism. We also require a process

to develop the required software.

In a large WebApp development project, the content

is generally developed by people with journalism, library

30

science, marketing, or public relations backgrounds.

Computer graphic designers and visual art specialists

develop page lathe users, and computing, software, and IT

professionals develop the software, database, and

information systems. It is important to ensure that the

development processes enable these three diverse groups

to work together and communicate effectively.

Many software development process models can be

suitably adapted for Web development. Considering the

strengths and limitations of the various models and the

requirements of the application, we can choose and use an

appropriate process model. For example, for small-scale

trial applications, a model incorporating interactive

refinement of an initial prototype is most suitable.

Figure: 3.3. Software Architecture

3.7.5 Project Plan and Web Site Maintenance

To successfully manage Web development, a sound

project plan and a realistic schedule are necessary.

Progress of development activities must be monitored and

manages. Project planning and scheduling techniques used

in other disciplines can be used for Web development.

After a Web-based system is developed and deployed,

it needs to be continually maintained. Web maintenance can

31

Web pages

be classified into three main categories: content

maintenance, software maintenance, and hardware and

network maintenance.

Content maintenance is a continual process. We need

to formulate content maintenance procedures, based on the

decision taken at the context analysis stage on how the

information content would be maintained, and then we need

to implement them. The hardware and the network also need

to be periodically maintained, and failures need to be

fixed when they surface. It is also important to

periodically review information and Web security risks

and take suitable measures to fix those weaknesses.

3.7.6 Project Management, Documentation, and Quality

Assurance

Poor project management will defeat good

engineering. The purpose of project management is to

ensure that all the key processes and activities work in

harmony. Building successful Web-based applications

requires close coordination among the various efforts

involved in the Web development cycle.

Activities such as project management, quality

assurance, and documentation spread throughout the Web

development lifecycle. Software engineering methodologies

and techniques used for these activities can also be used

with suitable modification for Web development.

32

3.8 Web Site Development

Web site development consists of development of Web

page content and application software to deliver the

content and functionality. In addition, computer hardware

and the network infrastructure also need to be developed

and deployed. The performance, availability (up-time),

and security required for the application govern the

design of the network and computer hardware. Arun

Iyengar, et al. [8] and Valeria Cardellini, et al. [2]

discuss the design of computer hardware and network

infrastructure to support high-performance Web sites.

To better manage Web site development, a two-stage

approach are developed and refined, and have used it

successfully in this projects, shown in Figure 3.4. It

decouples the content development from application

software development, and this decoupling is necessary,

as content developers and software developers come from

different backgrounds and have different skills and

expertise. The outcome of the Web page content

development process, described below, forms the input for

the application software development process.

Figure: 3.4. Two-stage Approach to Web Site

Development

33

ApplicationSoftware Development

3.8.1 Web Page Content Development

Web page content development is an important

activity; it determines what information is presented and

how it is presented to the system's users. Content

development starts with a detailed analysis of the Web-

based system requirements and moves on to development of

appropriate specifications for Web pages. Web pages are

then designed to meet the specifications. The prototype

usually contains a set of sample pages to evaluate the

page lathe user and navigation among different pages.

Based on the feedback from the stakeholders, the page

design and/or the specifications may be suitably

modified. This process may go through a few iterations

until the stakeholders and designers are satisfied with

the screen lathe user and the navigation structure.

Design is the creative part of Web page content

development, and it needs to take into consideration the

stakeholders' requirements, users' cognitive abilities,

technical issues, nontechnical issues, and earlier

experiences, as shown in Figure 3.5.

Knowledge of users' cognitive skills and issues is

useful for arriving at a good design. The designer should

know how the users would perceive and comprehend

information, as well as how the fonts, color, and lathe

user contribute to enhancing the users' comprehension.

This is very important, as the usability of a Web site

34

will determine its success. Furthermore, to meet the

needs of global users, a Website's usability may have to

be examined from a global perspective. Shirley Becker and

Florence Mottay [1] argue that usability requires

cultural sensitivity in language translation along with

appropriate use of color, design, and animation. Jacob

Nielsen discusses how to design usable Web sites, and

Molly Hammar Cloyd describes how to design user-centered

WebApps.

In designing a Web-based system, it is important

that the designers be aware of and take into

consideration the technological constraints and their

impact on the WebApp. For example, it may not be feasible

to use very large graphics or long video clips due to

bandwidth limitations. The designer should also consider

nontechnical aspects such as legal, moral, and social

issues that are relevant to the environment in which the

application will be used.

The outcome of the design process include an

appropriate information structure, information access

methods, look and feel for the Web pages, and guidelines

for content development.

35

Figure: 3.5. Web Page Content Design Process

3.8.2 Information Structure

To better organize, store, and present information

in a given application, we need to create an appropriate

information structure. The choice of information

structure depends on the type of application, the nature

of the information, and the technology used to store and

retrieve the information. The information structure also

determines the granularity of information (i.e., the

level of detail) that can be directly accessed.

For instance, information can be stored as a

document using HTML or XML, or it can be stored in a

database. If we store the information in a database or as

an XML document, we can further subdivide the information

content into smaller subsections (such as title,

headings, subheadings, author, and keywords) and provide

direct access to the content of those subsections. If, on

36

Guidelines for Content Development

the other hand, the information is stored as a HTML

document, we cannot get this fine granularity in

information access, as HTML is not a content markup

language but a presentation markup language.

After determining the information structure, we then

need to design appropriate navigation mechanisms to

access the information content. Hyperlinks and search

facilitates are the commonly used access methods.

If the application is an online product catalog, the

home page and a sample Web page for each product type is

necessary. These sample pages will serve as templates for

the creation of other product Web pages automatically by

the application software. The product Web pages will be

created in response to a user's request (when the Web

site is operational). Development tools such as Frontpage

and Dreamweaver can be used to develop the sample pages

and to prototype the Web site. The prototype Web site is

used to test the proposed navigation mechanisms for their

ease of use and other usability features.

Furthermore, as part of the design process,

guidelines for content creation also need to be

formulated if the information content is to be newly

created or to be changes. If information is drawn from

legacy or ERP systems, a mechanism to convert the

information into a suitable structure and format for the

Web-based system must be developed.

3.8.3 Application Software Development

37

To provide interactivity and present customized

information, most WebApps use external software modules,

known as application software. A simple example of this

is the software for processing the information a user

submits via a Web form.

Application software also enables us to develop

maintainable and scalable Web sites. As the mention

earlier, one basic principle of building a maintainable

Web site is to store the data that changes over time in a

single location. This way, even if data appears on

different pages on a site (e.g., a salesperson's contact

information might appear on every page that describes a

product he or she deals with), all the changes can be

made in just one place.

Web engineers can further enhance the

maintainability by developing a back-end Web site that

will enable authorized persons to make the changes

through an online form. This approach enables them to

implement a decentralized maintenance mechanism in which

different people can be assigned responsibility for

maintaining specific sections of the information.

To facilitate scalability, a Web-based system needs

to be built on a component-based architecture, and the

navigational links and buttons need to be dynamically

created. A component-based architecture allows us to

easily add new functions or information modules simply by

adding the required functions as new components. As

38

navigational links and buttons are dynamically created,

user-requested Web pages will contain links to these new

components as well.

As the system needs to be designed for scalability

and maintainability, an emphasized in the methodology is

needed to decide on the application software architecture

as part of the product model. The application software

architecture impacts the processes to be used for

developing the system, and this will in turn determine

the development time and cost. The application software

architecture is suitable for a scalable and maintainable

Web site, shown in Figure 3.5. It can also support Web-

enabled back-end systems to facilitate decentralized

maintenance.

CHAPTER IV

IMPLEMENTATION

4.1 Analysis Modeling for E-Commerce Application

39

Web sites are typically complex and highly dynamic.

They require short development phases in order to get the

product up and running quickly. Frequently, developers go

straight to the coding phase without really understanding

what they are trying to build or how they want to build

it. Server-side coding is often done adhoc, database

tables are added as needed, and the architecture evolves

in a sometimes unintentional manner. But some modeling

and disciplined software engineering can make the

software development process much smoother and ensure

that the Web system is more maintainable in the future

[9].

4.1.1 Developing Use-cases

Use cases are the dominant element of the

interaction model for WebApps. It is not uncommon to

describe 100 or more use-cases when large, complex

WebApps are analyzed, designed, and constructed. However,

a relatively small percentage of these use-cases describe

the major interactions between end-user categories

(actors) and the system. Other use-cases refine the

interactions, providing the analysis detail necessary to

guide design and construction [9].

40

Figure: 4.1. Use-case Diagram for Product Catalog

41

Figure: 4. 2. Use-case Diagram for Shopping Cart

4.1.2 Sequence Diagram

UML sequence diagrams provide a shorthand

representation of the manner in which user actions (the

dynamic elements of a system defined by use-cases)

collaborate with analysis classes (the structural

elements of a system defined by class diagrams). Since

analysis classes are extracted from use-case

42

descriptions, there is a need to ensure that traceability

exists between the classes that have been defined and the

use-cases that describe system interaction.

Figure: 4. 3. Edit Shopping Cart Sequence Diagram

4.2 Program Implementation

4.2.1 User Guide

If the users enter into the e-commerce site, they

can see catalog, categories and each item with its

price as an e-commerce homepage.

Figure: 4.4. E-commerce Homepage

43

11 :destroy()

On the left content, the users can see the product

“Categories”, “Manufactures” name and “What’s New?”

product with its prices.

Figure: 4.5. E-commerce Page for Product Categories

The users can see manufacturers by clicking drop-

down list, and whenever they select the manufacturer

name, respective product is shown on the catalog with its

prices.

44

Figure: 4.6. E-commerce Page for Product Manufacturers

The users can click the arrow beside “What’s New?”

and see new products with their prices and product list

details.

Figure: 4.7. E-commerce Page for New Products

45

On the right, the users can see “Shopping Cart” in

order to know the product quantity they buy in their

carts. They can see “Bestsellers” items in our shop and

“Specials” items with amazing prices to “Get Them While

They’re Hot!”.

Figure: 4.8. E-commerce Page for Special Items

They can see “Reviews” in details which are remarked

by the existing customers.

46

Figure: 4.9. E-commerce Page for Reviews from Users

The “MHW” e-commerce site assigns each role to each

user.

For a new customer, he or she can click “Create an

Account” to link account information page. He or she must

fill the required information in each field to create an

account. The user’s email address and password must be

confirmed to login next time. All of the information the

user filled is validated and continued, user account is

created successfully.

47

Figure: 4.10. E-commerce Page for User Account Creation

The user must use her email address and password

correctly to log-in with authorized access.

48

Figure: 4.11. E-commerce Page for User Log-in

The authorized user is welcomed as a new customer to

shop in the site. The customer can see new products and

purchase the product as she likes. If she wants to buy an

item (e.g."Frantic" movie), she can click on that item

link and "Add to Cart".

49

Figure: 4.12. E-commerce Page for User Shopping View

The customer can enter the quantity she buy in “Qty

text box” and then click “Update” button. If our site

doesn’t has the product quantity she wants, “Products

marked with *** don’t exist in desired quantity in our

stock” message is shown in red.

The customer chooses the items she wants, but if she

changes her mind not to buy the undesired item, she can

remove it by making a check in check-box under “Remove”

and then click "Update" button. Then, she can continue

shopping for other items or check-out the items which she

buys.

50

Figure: 4.13. E-commerce Page for User Shopping-Cart

If the customer wants to pay by credit card, she

must select "Credit Card" radio option and must fill her

"Credit Card Number” correctly and select "Credit Card

Expiry Date".

If the customer wants to deliver by cash, she must

select "Cash on Delivery" radio option and click

“Continue” to “Confirm Order” for next level.

51

Figure: 4.14. E-commerce Page for Payment Information

If the customer’s shopping step has reached

"Finished" level, then “Order Has Been Processed!”

Successfully. Then, the user can link “Log Off” menu to

out.

52

Figure: 4.15. E-commerce Page for Successful Order

Processing

4.2.2 Admin Guide

For the admin role, the existing user name is “admin”

and the password is “dircd1” or the user can create the

desire user name and password anymore.

i. Configuration

The Configuration section will setup all the basic

store configuration.

Click on "Configuration" and a drop down of text links

will appear.

Click on one of the drop downs and to the right the

user will see the listings.

53

To edit any of these listings click in the space of

each listing and when that listing is highlighted,

click on the "edit" button on the right.

Figure: 4.16. E-commerce Page for Admin: Configuration

i. Catalog

The Catalog section will input all the user products

and category folders including setting up the user

products as an expected date, setup product

attributes, manufacturers, check the user reviews, &

put products on special.

ii. Modules

The modules section is where the user will setup the

user payment, shipping, and order total ordering.

54

iii. Customers

a. Customers

This is a list of all the user customers that the

user can edit all but the password field and/or

delete customers. The password field does not show

up.

Each individual customer can be emailed from this

section.

b. Orders

These are the user "pending" orders. Click the

"edit" button to see the order and the user can

change the status of the order, put comments in the

comments box, and notify the customer of the

progress of their order. The user also have an

invoice and packing slip capability.

iv. Taxes

This section sets up the user taxes and zone for the

user store.

v. Localization

This sets up the user default currency, language,

and order status to notify the user customers.

55

The Orders Status can added to or the name changed

by clicking the "edit" button after that line has

been clicked and is highlighted.

vi. Reports

This section shows how many products have been

viewed, purchased, and the total of customer orders.

vii. Tools

The Tools section is used to backup the user

database, manage a banner, file manager, send the

user customers an email, send the user customers a

newsletter, give the user server information, and

see who's online.

CHAPTER V

RESULTS AND DISCUSSION

5.1 Conclusion

In this deliverable, the research presents a

methodology which can assist companies in becoming e-

business enabled. Specifically it adopts web engineering

principles and develops tools and guidelines.

As web engineers begin to place greater emphasis on

the performance, correctness, and availability of Web-

based systems, sound development processes and

methodologies assume greater significance. And as systems

become larger, large teams of people with different types

56

and levels of skills will be required to work together,

necessitating distributed collaborative development. A

well-defined process and good project management are the

keys to success in Web development.

A Web development process and methodology that have

been successfully applied in the development of many

WebApps and the key recommendations for successfully

developing and implementing large maintainable and

scalable WebApps are to:

Adopt a sound strategy and follow a suitable

methodology to successfully manage the development

and maintenance of Web sites.

Recognize that, in many cases, development of a

WebApp is not an event, but a process, since the

application's requirements evolve. It will have a

start, but it will not have a predictable end as in

most traditional software development.

Within the continuous process, identify, plan, and

schedule various development activities such that

they have a defined start and finish.

Remember that the planning and scheduling of the

activities is very important to successfully manage

the overall development, allocate resources, and

monitor progress.

Repeat these activities, as required, to meet the

changing needs and requirements of the WebApp.

Consider the big picture during planning and

designing WebApps. If the user do not, the user may

57

end up redesigning the entire system and repeating

the process all over again. If the user’s address

the changing nature of requirements and information,

appropriate look and feel, and all other related

aspects early on, the user can build into the design

efficient and cost-effective ways of managing change

and new requirements.

Recognize that development of a large WebApp calls

for team-work and shared responsibility among the

team members, and motivate a team culture.

Most web engineers stress that without a well-

defined, systematic approach, it is impossible for a

group of people to effectively work together on a large

Web development project. Moreover, Web developers and

their project managers move away from an ad hoc

approach to a well-planned, systematic approach for the

development of large, high-performance, evolutionary,

and/or mission-critical Web sites and applications.

5.2 Future Work

Web engineering is raised not only to allow the

creation of functional websites, but also the creation of

easy-to-use ones. We show that information in the process

and models which will lead to better usability in the

development of websites future. For the web engineers,

Web engineering techniques are the most important aspects

in their work: On one hand, the more systematic the

58

process and methodologies for web pages, the more

powerful the websites can be.

To be a perfect e-commerce site, this system should

give the information for each stakeholder who surfing

this website. This way, we hope that this research will

assist web engineers in deciding how to use web

engineering process, models and techniques to their web

applications make sense.

In our current and future work, we concentrate on

process, tools and methodologies which support for

improving usability in the context of Web Engineering.

REFERENCES

[1] Becker, S.A., and Florence E. Mottay. A Global

Perspective on Web Site Usability, IEEE Software, Vol.

18, No. 1, Page 54-61, 2001.

[2] Cardellini, Valeria, Michele Colajanni, and Philip

S. Yu. Dynamic Balancing on Web Server Systems, IEEE

Internet Computing, Vol.3, No.3, Page 28-39, 1999.

[3] Cloyd, Hammer, M., Designing User-Centered WebApps

in Web Time, IEEE Software, Page 62-69, 2001.

59

[4] Ginige, Athula, and San Murugesan, Web Engineering:

An Introduction, IEEE Multimedia, Vol. 8, No.1, Page

14-18, 2001.

[5] Ginige, Athula, and San Murugesan, The Essence of

Web Engineering, IEEE Multimedia,Vol. 8, No. 2, Page

22-25, 2001.

[6] Iyengar, Arun, Jim Challenger, Daniel Dias, and Paul

Dantzig, High Performance Web Site Design

Techniques, IEEE Internet Computing, Vol. 4, No. 2, Page

17-26, 2000.

[7] Shneiderman, Ben, Universal Usability, Communications

of the ACM, Vol. 43, No. 5, Page 85-91, 2000.

[8] Nielsen, Jacob., Designing Web Usability: The Practice of

Simplicity., New Riders Publishing, 1999.

[9] Pressman, R.S., Software Engineering: A

Practitioner’s Approach, Sixth Edition, Singpore,

ISBN: 007-123840-9, 2005.

60

1

ACKNOWLEDGEMENT

I would like to express my sincere thanks to Daw

Soe Mya Mya Aye, Lecturer, Head of Department of

Computer Studies, University of Yangon, for her kind

permission to carry out this research.

Next, I am grateful to Daw Khin Maw Thet,

Principal, Co-operative Training School, Pathein who

grants me to do this work.

I am also thankful to all the teachers of

Department of Computer Studies for their comments and

suggestions. I would like to express my deep gratitude

to Daw Myat Su Hlaing, Demonstrator, Department of

Computer Studies, University of Yangon, who was the

head of my thesis. She gave me proactive supervision

of my research work, decisive guidance and great

attention.

I would like to deeply thank my parents who not

only encouraged but also challenged me throughout my

life.

Finally, my special thanks go to U Zaw Latt,

Assistance Lecturer, University of Pathein and U Phyo

Wai Lin who help me to smooth my thesis.

i

ABSTRACT

The Internet and World Wide Web (www) has

revolutionized the whole world. In recent years, there

has been rapid growth, in Web Application (Web Apps)

development process and their management. The

technologies have drawn us all (with billions more who

will eventually follow) into the information age. They

have become integral to daily life in every way. Internet

together with web application tools have given solution

to many problems and have made the processing and

dissemination of information fast and timely. Web

applications have become complex and crucial for many

firms. Web engineering is a methodology which can help

companies to create successful web information systems

and actively promotes systematic, disciplined and

quantifiable approaches towards the development of high-ii

quality, ubiquitously usable web-based systems and

applications. In this research, the paper intended to

provide an e-commerce web application for computer

accessories by the methodology and the development model

based on web engineering concepts and principles. The

program in this research is developed by using the

powerful PHP web scripting language, the stable Apache

web server, and the fast MySQL database server. This

system can give the benefit of getting more customers,

making customers spend more in our e-commerce site,

reducing the costs of fulfilling orders. The idea of

having an e-commerce web site was enough to get many

business people salivating with anticipation in the

future.

TABLE OF CONTENTS

iii

ACKNOWLEDGEMENTS i

ABSTRACT ii

TABLE OF CONTENTS

iii

LIST OF FIGURES v

Page

CHAPTER I INTRODUCTION1.1 Web Engineering

1

1.2 Motivation

2

1.3 Objectives of the Thesis

3

1.4 Contributions of the Thesis

3

1.5 Organization of the Thesis

4

CHAPTER II LITERATURE REVIEW2.1 Evolutionary Web Application Development

5

2.2 Perspectives for Web Engineering

6

CHAPTER III WEB ENGINEERING METHODOLOGIES

iv

AND DEVELOPMENT3.1 Web Applications and Application Domain

7

3.2 Attributes of Web-Based Systems andApplications 7

3.3 Steps to Successful Development

9

3.4 Web Engineering Methods

10

3.5 Web Engineering Process

11

3.5.1 Defining the Framework

12

3.5.2 Refining the Framework

14

3.6 Formulating Web-based Systems

14

3.7 Web Development Process

15

3.7.1 Context Analysis

16

3.7.2 Product Model

18

3.7.3 System, Application and Software

Architecture 18

3.7.4 Process Model

19

v

3.7.5 Project Plan and Web Site

Maintenance 20

3.7.6 Project Management,

Documentation, and 21

Quality Assurance

3.8 Web Site Development

21

3.8.1 Web Page Content Development

22

3.8.2 Information Structure

23

3.8.3 Application Software Development

24

CHAPTER IV IMPLEMENTATION4.1 Analysis Modeling for E-Commerce

Application 26

4.1.1 Developing Use-cases

26

4.1.2 Sequence Diagram

27

4.2 Program Implementation

28

4.2.1 User Guide

28

4.2.2 Admin Guide

36

vi

CHAPTER V RESULTS AND DISCUSSION5.1 Conclusion

38

5.2 Future Work

39

REFERENCES

LIST OF FIGURES

Figure

Page

3.1 Web Engineering Process 14

3.2 Development Process for Web-based Systems

16

3.3 Software Architecture

20

vii

3.4 Two-stage Approach to Web Site Development

22

3.5 Web Page Content Design Process

23

4.1 Use-case Diagram for Product Catalog

26

4.2 Use-case Diagram for Shopping Cart

27

4.3 Edit Shopping Cart Sequence Diagram

27

4.4 E-commerce Homepage 28

4.5 E-commerce Page for Product Categories

29

4.6 E-commerce Page for Product Manufacturers

29

4.7 E-commerce Page for New Products

30

4.8 E-commerce Page for Special Items

30

4.9 E-commerce Page for Reviews from Users

31

4.10 E-commerce Page for User Account Creation

32

4.11 E-commerce Page for User Log-in

33

4.12 E-commerce Page for User Shopping View

33

viii

4.13 E-commerce Page for User Shopping-Cart

34

4.14 E-commerce Page for Payment Information

35

4.15 E-commerce Page for Successful Order Processing

35

4.16 E-commerce Page for Admin: Configuration

36

WEB ENGINEERING TECHNIQUES THROUGH A

CASE STUDY ON WEB APPLICATIONS

MRes (THESIS)

ix

TIN NILAR WIN

DEPARTMENT OF COMPUTER STUDIES

UNIVERSITY OF YANGON

MYANMAR

APRIL, 2012

x